Skip to content

Commit 4713882

Browse files
KristinLBradleyshleewhite
KristinLBradley
and
shleewhite
authored
Button - Fix color of Buttons within Modal triggered from SideNav or AppHeader (HDS-5572) (#3335)
Co-authored-by: Lee White <[email protected]>
1 parent 18f6704 commit 4713882

File tree

9 files changed

+285
-7
lines changed

9 files changed

+285
-7
lines changed

‎.changeset/fine-rocks-trade.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
"@hashicorp/design-system-components": patch
3+
---
4+
5+
<!-- START components/button -->
6+
`Button` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `SideNav` or `AppHeader`
7+
<!-- END -->
8+
9+
<!-- START components/side-nav -->
10+
`SideNav` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `SideNav`
11+
<!-- END -->
12+
13+
<!-- START components/app-header -->
14+
`AppHeader` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `AppHeader`
15+
<!-- END -->

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,12 @@
110110
.hds-dropdown-toggle-button,
111111
.hds-dropdown-toggle-icon {
112112
// Apply dark theme to child interactive components not within a nested dropdown
113-
&:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
113+
&:not(
114+
.hds-dropdown * *,
115+
.ember-basic-dropdown-trigger * *,
116+
.ember-basic-dropdown-content * *,
117+
.hds-dialog-primitive__wrapper *
118+
) {
114119
@include hds-interactive-dark-theme();
115120

116121
// disabled state:

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,12 @@
7676
.hds-dropdown-toggle-button,
7777
.hds-dropdown-toggle-icon {
7878
// Apply dark theme to child interactive components not within a nested dropdown
79-
&:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
79+
&:not(
80+
.hds-dropdown * *,
81+
.ember-basic-dropdown-trigger * *,
82+
.ember-basic-dropdown-content * *,
83+
.hds-dialog-primitive__wrapper *
84+
) {
8085
@include hds-interactive-dark-theme();
8186

8287
// disabled state:

‎showcase/app/components/page-components/advanced-table/sub-sections/basic.gts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const BASIC_MUSIC_COLUMNS = [
4747
const SubSectionBasic: TemplateOnlyComponent = <template>
4848
<ShwTextBody>
4949
<a
50-
class="shw-frame__open-link"
50+
class="shw-component-advanced-table__open-link"
5151
href="/layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table"
5252
target="_blank"
5353
rel="noopener noreferrer"

‎showcase/app/components/page-components/app-header/sub-sections/content.gts‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,20 @@ import ShwFlex from 'showcase/components/shw/flex';
1111
import ShwPlaceholder from 'showcase/components/shw/placeholder';
1212
import ShwDivider from 'showcase/components/shw/divider';
1313

14+
import ModalWithTrigger from 'showcase/components/page-components/modal/code-fragments/with-trigger';
15+
import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons';
16+
import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
1417
import CodeFragmentWithGenericContent from 'showcase/components/page-components/app-header/code-fragments/with-generic-content';
1518

19+
import { on } from '@ember/modifier';
20+
1621
import {
1722
HdsAppHeader,
1823
HdsAppHeaderHomeLink,
1924
HdsBadge,
25+
HdsButton,
26+
HdsButtonSet,
27+
HdsDropdown,
2028
} from '@hashicorp/design-system-components/components';
2129

2230
const SubSectionContent: TemplateOnlyComponent = <template>
@@ -156,9 +164,84 @@ const SubSectionContent: TemplateOnlyComponent = <template>
156164
</:globalActions>
157165
</HdsAppHeader>
158166
</SF.Item>
159-
160167
</ShwFlex>
161168

169+
<ShwDivider @level={{2}} />
170+
171+
<ShwTextH3>With nested button content</ShwTextH3>
172+
173+
<HdsAppHeader @hasA11yRefocus={{false}}>
174+
<:logo>
175+
{{! empty span for layout purposes}}
176+
<span />
177+
</:logo>
178+
<:globalActions>
179+
<SuperSelectWithButtons @placeholder="SuperSelect" />
180+
181+
<HdsDropdown as |D|>
182+
<D.ToggleButton @text="Dropdown" />
183+
<D.Footer>
184+
<HdsButtonSet>
185+
<HdsButton @text="Primary" @isFullWidth={{true}} @size="small" />
186+
<HdsButton @text="Secondary" @color="secondary" @size="small" />
187+
</HdsButtonSet>
188+
</D.Footer>
189+
</HdsDropdown>
190+
191+
<ModalWithTrigger @triggerText="Open modal" id="nested-modal">
192+
<:modal as |M|>
193+
<M.Header>
194+
Modal title
195+
</M.Header>
196+
<M.Body>
197+
<p class="hds-typography-body-300 hds-foreground-primary">
198+
Modal content
199+
</p>
200+
</M.Body>
201+
<M.Footer as |F|>
202+
<HdsButtonSet>
203+
<HdsButton type="submit" @text="Primary" {{on "click" F.close}} />
204+
<HdsButton
205+
type="button"
206+
@text="Secondary"
207+
@color="secondary"
208+
{{on "click" F.close}}
209+
/>
210+
</HdsButtonSet>
211+
</M.Footer>
212+
</:modal>
213+
</ModalWithTrigger>
214+
215+
<FlyoutWithTrigger @triggerText="Open flyout" id="nested-flyout">
216+
<:flyout as |F|>
217+
<F.Header>
218+
Flyout title
219+
</F.Header>
220+
<F.Body>
221+
<p class="hds-typography-body-300 hds-foreground-primary">
222+
Flyout body
223+
</p>
224+
</F.Body>
225+
<F.Footer as |FF|>
226+
<HdsButtonSet>
227+
<HdsButton
228+
type="submit"
229+
@text="Primary"
230+
{{on "click" FF.close}}
231+
/>
232+
<HdsButton
233+
type="button"
234+
@text="Secondary"
235+
@color="secondary"
236+
{{on "click" FF.close}}
237+
/>
238+
</HdsButtonSet>
239+
</F.Footer>
240+
</:flyout>
241+
</FlyoutWithTrigger>
242+
</:globalActions>
243+
</HdsAppHeader>
244+
162245
<ShwDivider />
163246
</template>;
164247

‎showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { fn } from '@ember/helper';
7+
import { tracked } from '@glimmer/tracking';
8+
9+
import { HdsFormSuperSelectMultipleBase } from '@hashicorp/design-system-components/components';
10+
11+
import type { HdsFormSuperSelectMultipleBaseSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/base';
12+
13+
const OPTIONS = ['Option 1'];
14+
15+
export interface CodeFragmentWithMultipleBaseElementSignature {
16+
Args: {
17+
placeholder?: HdsFormSuperSelectMultipleBaseSignature['Args']['placeholder'];
18+
isSelected?: boolean;
19+
options?: string;
20+
};
21+
Element: HdsFormSuperSelectMultipleBaseSignature['Element'];
22+
}
23+
24+
export default class CodeFragmentWithMultipleBaseElement extends Component<CodeFragmentWithMultipleBaseElementSignature> {
25+
@tracked selectedOptions: string[] = [];
26+
27+
options = OPTIONS;
28+
29+
<template>
30+
<HdsFormSuperSelectMultipleBase
31+
@onChange={{fn (mut this.selectedOptions)}}
32+
@options={{this.options}}
33+
@selected={{this.selectedOptions}}
34+
@placeholder={{@placeholder}}
35+
@showAfterOptions={{true}}
36+
@ariaLabel="Label"
37+
...attributes
38+
as |option|
39+
>
40+
{{option}}
41+
</HdsFormSuperSelectMultipleBase>
42+
</template>
43+
}

‎showcase/app/components/page-components/side-nav/sub-sections/content.gts‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,18 @@ import {
1414
HdsSideNav,
1515
HdsSideNavPortal,
1616
HdsSideNavPortalTarget,
17+
HdsSideNavList,
18+
HdsButton,
19+
HdsButtonSet,
20+
HdsDropdown,
1721
} from '@hashicorp/design-system-components/components';
1822

23+
import ModalWithTrigger from 'showcase/components/page-components/modal/code-fragments/with-trigger';
24+
import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons';
25+
import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
26+
27+
import { on } from '@ember/modifier';
28+
1929
const SubSectionContent: TemplateOnlyComponent = <template>
2030
<ShwTextH2>Content</ShwTextH2>
2131

@@ -141,6 +151,101 @@ const SubSectionContent: TemplateOnlyComponent = <template>
141151
<ShwPlaceholder @height="72px" @text="extraAfter" @background="#f3d9c5" />
142152
</Nav.ExtraAfter>
143153
</HdsSideNavPortal>
154+
155+
<ShwDivider @level={{2}} />
156+
157+
<ShwTextH3>With nested button content</ShwTextH3>
158+
159+
<ShwFlex as |SF|>
160+
<SF.Item @label="">
161+
<HdsSideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
162+
<:body>
163+
<HdsSideNavList as |SNL|>
164+
<SNL.Item>
165+
<SuperSelectWithButtons @placeholder="SuperSelect" />
166+
</SNL.Item>
167+
<SNL.Item>
168+
<HdsDropdown as |D|>
169+
<D.ToggleButton @text="Dropdown" />
170+
<D.Footer>
171+
<HdsButtonSet>
172+
<HdsButton
173+
@text="Primary"
174+
@isFullWidth={{true}}
175+
@size="small"
176+
/>
177+
<HdsButton
178+
@text="Secondary"
179+
@color="secondary"
180+
@size="small"
181+
/>
182+
</HdsButtonSet>
183+
</D.Footer>
184+
</HdsDropdown>
185+
</SNL.Item>
186+
<SNL.Item>
187+
<ModalWithTrigger @triggerText="Open modal" id="nested-modal">
188+
<:modal as |M|>
189+
<M.Header>
190+
Modal title
191+
</M.Header>
192+
<M.Body>
193+
<p class="hds-typography-body-300 hds-foreground-primary">
194+
Modal content
195+
</p>
196+
</M.Body>
197+
<M.Footer as |F|>
198+
<HdsButtonSet>
199+
<HdsButton
200+
type="submit"
201+
@text="Primary"
202+
{{on "click" F.close}}
203+
/>
204+
<HdsButton
205+
type="button"
206+
@text="Secondary"
207+
@color="secondary"
208+
{{on "click" F.close}}
209+
/>
210+
</HdsButtonSet>
211+
</M.Footer>
212+
</:modal>
213+
</ModalWithTrigger>
214+
</SNL.Item>
215+
<SNL.Item>
216+
<FlyoutWithTrigger @triggerText="Open flyout" id="nested-flyout">
217+
<:flyout as |F|>
218+
<F.Header>
219+
Flyout title
220+
</F.Header>
221+
<F.Body>
222+
<p class="hds-typography-body-300 hds-foreground-primary">
223+
Flyout body
224+
</p>
225+
</F.Body>
226+
<F.Footer as |FF|>
227+
<HdsButtonSet>
228+
<HdsButton
229+
type="submit"
230+
@text="Primary"
231+
{{on "click" FF.close}}
232+
/>
233+
<HdsButton
234+
type="button"
235+
@text="Secondary"
236+
@color="secondary"
237+
{{on "click" FF.close}}
238+
/>
239+
</HdsButtonSet>
240+
</F.Footer>
241+
</:flyout>
242+
</FlyoutWithTrigger>
243+
</SNL.Item>
244+
</HdsSideNavList>
245+
</:body>
246+
</HdsSideNav>
247+
</SF.Item>
248+
</ShwFlex>
144249
</template>;
145250

146251
export default SubSectionContent;

‎showcase/app/styles/showcase-components/frame.scss‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,18 @@ $shw-frame-navigation-bar-height: 48px;
3434
}
3535

3636
.shw-frame__open-link {
37-
width: 16px;
38-
height: 16px;
37+
display: flex;
38+
align-items: center;
39+
justify-content: flex-end;
40+
// dimensions meet a11y touch target minimums
41+
width: 48px;
42+
height: 48px;
43+
44+
> .hds-icon {
45+
width: 16px;
46+
height: 16px;
47+
}
48+
3949
color: var(--shw-color-gray-300);
4050

4151
&:hover {
@@ -52,4 +62,4 @@ $shw-frame-navigation-bar-height: 48px;
5262
width: 100%;
5363
height: calc(100% - #{$shw-frame-navigation-bar-height});
5464
border: none;
55-
}
65+
}

‎showcase/app/styles/showcase-pages/advanced-table.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,4 +93,16 @@ body.page-components-advanced-table {
9393
visibility: visible;
9494
opacity: 1;
9595
}
96+
97+
.shw-component-advanced-table__open-link {
98+
color: var(--shw-color-gray-300);
99+
100+
&:hover {
101+
color: var(--shw-color-gray-200);
102+
}
103+
104+
&:active {
105+
color: var(--shw-color-gray-100);
106+
}
107+
}
96108
}

0 commit comments

Comments
 (0)