Ensure list is properly rendering empty message

NeurodataWithoutBorders · Nov 6, 2023 · bad6201 · bad6201
1 parent fe67bf8
commit bad6201
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/src/renderer/src/stories/List.stories.js b/src/renderer/src/stories/List.stories.js
@@ -17,3 +17,16 @@ export const WithKeys = Template.bind({});
 WithKeys.args = {
     items: [{ key: "TestKey", value: "test" }],
 };
+
+export const Empty = Template.bind({});
+Empty.args = {
+    emptyMessage: 'This is empty',
+    unordered: true,
+    items: [],
+};
+
+export const EmptyKeys = Template.bind({});
+EmptyKeys.args = {
+    emptyMessage: 'This is empty',
+    items: [],
+};
diff --git a/src/renderer/src/stories/List.ts b/src/renderer/src/stories/List.ts
@@ -32,6 +32,10 @@ export class List extends LitElement {
         color: gray;
       }
 
+      :host([unordered]) #empty {
+        margin: 0;
+      }
+
       li {
         padding-bottom: 10px;
       }
@@ -55,6 +59,8 @@ export class List extends LitElement {
         cursor: move;
       }
 
+
+
       :host([unordered]) ol {
         list-style-type: none;
         display: flex;