Skip to content

Commit fb06ef9

Browse files
authored
fix(list-item): hide nested list items by default (#9474)
**Related Issue:** #9400 ## Summary - Hides nested/indented list items by default - Removes unnecessary div
1 parent f71e508 commit fb06ef9

File tree

3 files changed

+11
-17
lines changed

3 files changed

+11
-17
lines changed

packages/calcite-components/src/components/list-item/list-item.scss

+8-13
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,6 @@
1414

1515
@include disabled();
1616

17-
.indent {
18-
@apply flex
19-
flex-col
20-
border-solid
21-
border-0
22-
border-color-3;
23-
24-
margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6"));
25-
}
26-
2717
.container {
2818
@apply bg-foreground-1
2919
box-border
@@ -62,11 +52,16 @@
6252
}
6353

6454
.nested-container {
65-
@apply flex flex-col;
55+
@apply hidden flex-col
56+
border-solid
57+
border-0
58+
border-color-3;
59+
60+
margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6"));
6661
}
6762

68-
.nested-container--hidden {
69-
@apply hidden;
63+
.nested-container--open {
64+
@apply flex;
7065
}
7166

7267
.content-container {

packages/calcite-components/src/components/list-item/list-item.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -585,7 +585,7 @@ export class ListItem
585585
<div
586586
class={{
587587
[CSS.nestedContainer]: true,
588-
[CSS.nestedContainerHidden]: this.openable && !this.open,
588+
[CSS.nestedContainerOpen]: this.openable && this.open,
589589
}}
590590
>
591591
<slot
@@ -701,7 +701,7 @@ export class ListItem
701701
</tr>
702702
{this.renderContentBottom()}
703703
</div>
704-
<div class={CSS.indent}>{this.renderDefaultContainer()}</div>
704+
{this.renderDefaultContainer()}
705705
</InteractiveContainer>
706706
</Host>
707707
);

packages/calcite-components/src/components/list-item/resources.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ export const CSS = {
22
wrapper: "wrapper",
33
wrapperBordered: "wrapper--bordered",
44
container: "container",
5-
indent: "indent",
65
containerHover: "container--hover",
76
containerBorder: "container--border",
87
containerBorderSelected: "container--border-selected",
@@ -11,7 +10,7 @@ export const CSS = {
1110
contentContainerSelectable: "content-container--selectable",
1211
contentContainerHasCenterContent: "content-container--has-center-content",
1312
nestedContainer: "nested-container",
14-
nestedContainerHidden: "nested-container--hidden",
13+
nestedContainerOpen: "nested-container--open",
1514
content: "content",
1615
customContent: "custom-content",
1716
actionsStart: "actions-start",

0 commit comments

Comments
 (0)