Skip to content

Commit fd165d8

Browse files
KristinLBradleyKristinLBradley
authoredAug 23, 2024
Enterprise Nav: SideNav & AppHeader—Improve scoping for dark theme styling (#2359)
1 parent 53f5741 commit fd165d8

File tree

5 files changed

+106
-30
lines changed

5 files changed

+106
-30
lines changed
 

‎.changeset/eight-houses-remain.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hashicorp/design-system-components": patch
3+
---
4+
5+
`SideNav` & `AppHeader` - Fixed styling issue to prevent `Button` and `Dropdown` nested within another `Dropdown` from inheriting dark theme.

‎packages/components/src/styles/components/app-header.scss

+17-14
Original file line numberDiff line numberDiff line change
@@ -107,23 +107,26 @@
107107
gap: inherit;
108108
}
109109

110-
// Apply dark theme to child interactive components
110+
// Dropdown & Button color theming overrides
111111
.hds-button,
112112
.hds-dropdown-toggle-button,
113113
.hds-dropdown-toggle-icon {
114-
@include hds-interactive-dark-theme();
115-
116-
// disabled state:
117-
&:disabled,
118-
&[disabled],
119-
&.mock-disabled,
120-
&:disabled:focus,
121-
&[disabled]:focus,
122-
&.mock-disabled:focus,
123-
&:disabled:hover,
124-
&[disabled]:hover,
125-
&.mock-disabled:hover {
126-
@include hds-interactive-dark-theme-state-disabled();
114+
// Apply dark theme to child interactive components not within a nested dropdown
115+
&:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
116+
@include hds-interactive-dark-theme();
117+
118+
// disabled state:
119+
&:disabled,
120+
&[disabled],
121+
&.mock-disabled,
122+
&:disabled:focus,
123+
&[disabled]:focus,
124+
&.mock-disabled:focus,
125+
&:disabled:hover,
126+
&[disabled]:hover,
127+
&.mock-disabled:hover {
128+
@include hds-interactive-dark-theme-state-disabled();
129+
}
127130
}
128131
}
129132
}

‎packages/components/src/styles/components/side-nav/header.scss

+17-16
Original file line numberDiff line numberDiff line change
@@ -71,27 +71,28 @@
7171
}
7272

7373
// Dropdown & Button color theming overrides
74-
75-
// Apply dark theme to child interactive components
7674
.hds-side-nav__dropdown, // deprecated classname
7775
.hds-side-nav,
7876
.hds-side-nav-header {
7977
.hds-button,
80-
.hds-dropdown-toggle-button,
78+
.hds-dropdown-toggle-button,
8179
.hds-dropdown-toggle-icon {
82-
@include hds-interactive-dark-theme();
83-
84-
// disabled state:
85-
&:disabled,
86-
&[disabled],
87-
&.mock-disabled,
88-
&:disabled:focus,
89-
&[disabled]:focus,
90-
&.mock-disabled:focus,
91-
&:disabled:hover,
92-
&[disabled]:hover,
93-
&.mock-disabled:hover {
94-
@include hds-interactive-dark-theme-state-disabled();
80+
// Apply dark theme to child interactive components not within a nested dropdown
81+
&:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
82+
@include hds-interactive-dark-theme();
83+
84+
// disabled state:
85+
&:disabled,
86+
&[disabled],
87+
&.mock-disabled,
88+
&:disabled:focus,
89+
&[disabled]:focus,
90+
&.mock-disabled:focus,
91+
&:disabled:hover,
92+
&[disabled]:hover,
93+
&.mock-disabled:hover {
94+
@include hds-interactive-dark-theme-state-disabled();
95+
}
9596
}
9697
}
9798
}

‎showcase/app/templates/components/app-header.hbs

+30
Original file line numberDiff line numberDiff line change
@@ -556,5 +556,35 @@
556556
<Hds::Dropdown::Toggle::Icon @text="open" @isOpen={{true}} @imageSrc="/assets/images/avatar.png" />
557557
</div>
558558
</SG.Item>
559+
560+
<SG.Item @label="With nested content" {{style padding-bottom="11em"}}>
561+
<div class="hds-app-header">
562+
<Hds::Dropdown @height="284px" @listPosition="bottom-left" @isOpen={{true}} as |D|>
563+
<D.ToggleIcon @icon="help" @text="help menu" />
564+
<D.Generic>
565+
<Hds::Dropdown as |D|>
566+
<D.ToggleButton @text="Menu" />
567+
<D.Interactive @href="#" @text="Add" />
568+
<D.Interactive @href="#" @text="Add More" />
569+
<D.Interactive @href="#" @text="Add Another Thing Too" />
570+
</Hds::Dropdown>
571+
</D.Generic>
572+
<D.Checkbox>access</D.Checkbox>
573+
<D.Checkbox>homework</D.Checkbox>
574+
<D.Footer @hasDivider={{true}}>
575+
<Hds::ButtonSet>
576+
<Hds::Button @text="Apply filters" @isFullWidth={{true}} @size="small" />
577+
<Hds::Button @text="Cancel" @color="secondary" @size="small" />
578+
<Hds::Dropdown as |D|>
579+
<D.ToggleButton @text="Menu" />
580+
<D.Interactive @href="#" @text="Add" />
581+
<D.Interactive @href="#" @text="Add More" />
582+
<D.Interactive @href="#" @text="Add Another Thing Too" />
583+
</Hds::Dropdown>
584+
</Hds::ButtonSet>
585+
</D.Footer>
586+
</Hds::Dropdown>
587+
</div>
588+
</SG.Item>
559589
</Shw::Grid>
560590
</section>

‎showcase/app/templates/components/side-nav.hbs

+37
Original file line numberDiff line numberDiff line change
@@ -835,6 +835,43 @@
835835
{{/each}}
836836
{{/let}}
837837
</Shw::Flex>
838+
839+
<Shw::Divider />
840+
841+
{{! TODO: Reorganize after other SideNav Showcase updates including nested interactive content examples are ready}}
842+
<Shw::Text::H2>Nested Dropdown</Shw::Text::H2>
843+
844+
<Shw::Grid @columns={{4}} as |SG|>
845+
<SG.Item @label="With nested content" {{style padding-bottom="11em"}}>
846+
<div class="hds-side-nav">
847+
<Hds::Dropdown @height="284px" @listPosition="bottom-left" @isOpen={{true}} as |D|>
848+
<D.ToggleIcon @icon="help" @text="help menu" />
849+
<D.Generic>
850+
<Hds::Dropdown as |D|>
851+
<D.ToggleButton @text="Menu" />
852+
<D.Interactive @href="#" @text="Add" />
853+
<D.Interactive @href="#" @text="Add More" />
854+
<D.Interactive @href="#" @text="Add Another Thing Too" />
855+
</Hds::Dropdown>
856+
</D.Generic>
857+
<D.Checkbox>access</D.Checkbox>
858+
<D.Checkbox>homework</D.Checkbox>
859+
<D.Footer @hasDivider={{true}}>
860+
<Hds::ButtonSet>
861+
<Hds::Button @text="Apply filters" @isFullWidth={{true}} @size="small" />
862+
<Hds::Button @text="Cancel" @color="secondary" @size="small" />
863+
<Hds::Dropdown as |D|>
864+
<D.ToggleButton @text="Menu" />
865+
<D.Interactive @href="#" @text="Add" />
866+
<D.Interactive @href="#" @text="Add More" />
867+
<D.Interactive @href="#" @text="Add Another Thing Too" />
868+
</Hds::Dropdown>
869+
</Hds::ButtonSet>
870+
</D.Footer>
871+
</Hds::Dropdown>
872+
</div>
873+
</SG.Item>
874+
</Shw::Grid>
838875
</section>
839876

840877
<Shw::Divider />

0 commit comments

Comments
 (0)
Failed to load comments.