fix(list-item): hide nested list items by default (#9474)

**Related Issue:** #9400 ## Summary - Hides nested/indented list items by default - Removes unnecessary div
Esri · Jun 6, 2024 · fb06ef9 · fb06ef9
1 parent f71e508
commit fb06ef9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 17 deletions.
diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -14,16 +14,6 @@
 
 @include disabled();
 
-.indent {
-  @apply flex
-    flex-col
-    border-solid
-    border-0
-    border-color-3;
-
-  margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6"));
-}
-
 .container {
   @apply bg-foreground-1
   box-border
@@ -62,11 +52,16 @@
 }
 
 .nested-container {
-  @apply flex flex-col;
+  @apply hidden flex-col
+    border-solid
+    border-0
+    border-color-3;
+
+  margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6"));
 }
 
-.nested-container--hidden {
-  @apply hidden;
+.nested-container--open {
+  @apply flex;
 }
 
 .content-container {

diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -585,7 +585,7 @@ export class ListItem
       <div
         class={{
           [CSS.nestedContainer]: true,
-          [CSS.nestedContainerHidden]: this.openable && !this.open,
+          [CSS.nestedContainerOpen]: this.openable && this.open,
         }}
       >
         <slot
@@ -701,7 +701,7 @@ export class ListItem
             </tr>
             {this.renderContentBottom()}
           </div>
-          <div class={CSS.indent}>{this.renderDefaultContainer()}</div>
+          {this.renderDefaultContainer()}
         </InteractiveContainer>
       </Host>
     );

diff --git a/packages/calcite-components/src/components/list-item/resources.ts b/packages/calcite-components/src/components/list-item/resources.ts
@@ -2,7 +2,6 @@ export const CSS = {
   wrapper: "wrapper",
   wrapperBordered: "wrapper--bordered",
   container: "container",
-  indent: "indent",
   containerHover: "container--hover",
   containerBorder: "container--border",
   containerBorderSelected: "container--border-selected",
@@ -11,7 +10,7 @@ export const CSS = {
   contentContainerSelectable: "content-container--selectable",
   contentContainerHasCenterContent: "content-container--has-center-content",
   nestedContainer: "nested-container",
-  nestedContainerHidden: "nested-container--hidden",
+  nestedContainerOpen: "nested-container--open",
   content: "content",
   customContent: "custom-content",
   actionsStart: "actions-start",