Skip to content

Commit be0a5a1

Browse files
didoodidoo
authored
Merge pull request #2211 from hashicorp/dialog-primitive-non-breaking
`DialogPrimitive` with `Modal` and `Flyout` (non-breaking)
2 parents a83088e + 2e428ae commit be0a5a1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1269
-169
lines changed

‎.changeset/pretty-timers-rhyme.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@hashicorp/design-system-components": minor
3+
---
4+
5+
`DialogPrimitive` - Added set of utility "dialog" sub-components to act as primitives for `Modal` and `Flyout` (and to be used as standalone subcomponents if needed)
6+
7+
`Modal` - Replaced internal subcomponents to use the `DialogPrimitive` components.
8+
9+
`Flyout` - Replaced internal subcomponents to use the `DialogPrimitive` components.

‎packages/components/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,12 @@
149149
"./components/hds/code-block/title.js": "./dist/_app_/components/hds/code-block/title.js",
150150
"./components/hds/copy/button/index.js": "./dist/_app_/components/hds/copy/button/index.js",
151151
"./components/hds/copy/snippet/index.js": "./dist/_app_/components/hds/copy/snippet/index.js",
152+
"./components/hds/dialog-primitive/body.js": "./dist/_app_/components/hds/dialog-primitive/body.js",
153+
"./components/hds/dialog-primitive/description.js": "./dist/_app_/components/hds/dialog-primitive/description.js",
154+
"./components/hds/dialog-primitive/footer.js": "./dist/_app_/components/hds/dialog-primitive/footer.js",
155+
"./components/hds/dialog-primitive/header.js": "./dist/_app_/components/hds/dialog-primitive/header.js",
156+
"./components/hds/dialog-primitive/overlay.js": "./dist/_app_/components/hds/dialog-primitive/overlay.js",
157+
"./components/hds/dialog-primitive/wrapper.js": "./dist/_app_/components/hds/dialog-primitive/wrapper.js",
152158
"./components/hds/disclosure-primitive/index.js": "./dist/_app_/components/hds/disclosure-primitive/index.js",
153159
"./components/hds/dismiss-button/index.js": "./dist/_app_/components/hds/dismiss-button/index.js",
154160
"./components/hds/dropdown/footer.js": "./dist/_app_/components/hds/dropdown/footer.js",

‎packages/components/src/components/hds/dialog-primitive/body.hbs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{{! @glint-nocheck: not typesafe yet }}
2+
{{!
3+
Copyright (c) HashiCorp, Inc.
4+
SPDX-License-Identifier: MPL-2.0
5+
}}
6+
<div class="hds-dialog-primitive__body {{@contextualClass}}" tabindex="0" ...attributes>
7+
{{yield}}
8+
</div>

‎packages/components/src/components/hds/dialog-primitive/description.hbs

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{{! @glint-nocheck: not typesafe yet }}
2+
{{!
3+
Copyright (c) HashiCorp, Inc.
4+
SPDX-License-Identifier: MPL-2.0
5+
}}
6+
<div
7+
class="hds-dialog-primitive__description hds-typography-body-200 hds-foreground-primary {{@contextualClass}}"
8+
...attributes
9+
>
10+
{{yield}}
11+
</div>

‎packages/components/src/components/hds/dialog-primitive/footer.hbs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{{! @glint-nocheck: not typesafe yet }}
2+
{{!
3+
Copyright (c) HashiCorp, Inc.
4+
SPDX-License-Identifier: MPL-2.0
5+
}}
6+
<div class="hds-dialog-primitive__footer {{@contextualClass}}" ...attributes>
7+
{{yield (hash close=@onDismiss)}}
8+
</div>

‎packages/components/src/components/hds/dialog-primitive/header.hbs

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{{! @glint-nocheck: not typesafe yet }}
2+
{{!
3+
Copyright (c) HashiCorp, Inc.
4+
SPDX-License-Identifier: MPL-2.0
5+
}}
6+
<div
7+
class="hds-dialog-primitive__header {{if @contextualClassPrefix (concat @contextualClassPrefix '__header')}}"
8+
...attributes
9+
>
10+
{{#if @icon}}
11+
<FlightIcon
12+
class="hds-dialog-primitive__icon {{if @contextualClassPrefix (concat @contextualClassPrefix '__icon')}}"
13+
@name={{@icon}}
14+
@size="24"
15+
@isInlineBlock={{false}}
16+
/>
17+
{{/if}}
18+
19+
<div
20+
class="hds-dialog-primitive__title {{if @contextualClassPrefix (concat @contextualClassPrefix '__title')}}"
21+
id={{@id}}
22+
>
23+
{{#if @tagline}}
24+
<Hds::Text::Body
25+
class="hds-dialog-primitive__tagline {{if @contextualClassPrefix (concat @contextualClassPrefix '__tagline')}}"
26+
@tag="div"
27+
@size="100"
28+
>
29+
{{@tagline}}
30+
</Hds::Text::Body>
31+
{{/if}}
32+
33+
<Hds::Text::Display @tag="div" @size="300" @weight="semibold">
34+
{{yield}}
35+
</Hds::Text::Display>
36+
</div>
37+
38+
<Hds::DismissButton
39+
class="hds-dialog-primitive__dismiss {{if @contextualClassPrefix (concat @contextualClassPrefix '__dismiss')}}"
40+
{{on "click" this.onDismiss}}
41+
/>
42+
</div>

‎packages/components/src/components/hds/dialog-primitive/header.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
8+
const NOOP = () => {};
9+
10+
export default class HdsDialogPrimitiveHeaderComponent extends Component {
11+
/**
12+
* @param onDismiss
13+
* @type {function}
14+
* @default () => {}
15+
*/
16+
get onDismiss() {
17+
let { onDismiss } = this.args;
18+
19+
// notice: this is a guard used in case the button is used as standalone element (eg. in the showcase)
20+
// in reality it's always used inside the main components as a yielded component, so the onDismiss handler is always defined
21+
if (typeof onDismiss === 'function') {
22+
return onDismiss;
23+
} else {
24+
return NOOP;
25+
}
26+
}
27+
}

‎packages/components/src/components/hds/dialog-primitive/overlay.hbs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{{! @glint-nocheck: not typesafe yet }}
2+
{{!
3+
Copyright (c) HashiCorp, Inc.
4+
SPDX-License-Identifier: MPL-2.0
5+
}}
6+
<div class="hds-dialog-primitive__overlay {{@contextualClass}}"></div>

‎packages/components/src/components/hds/dialog-primitive/wrapper.hbs

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{{! @glint-nocheck: not typesafe yet }}
2+
{{!
3+
Copyright (c) HashiCorp, Inc.
4+
SPDX-License-Identifier: MPL-2.0
5+
}}
6+
<dialog class="hds-dialog-primitive__wrapper" ...attributes>
7+
<div class="hds-dialog-primitive__wrapper-header">
8+
{{yield to="header"}}
9+
</div>
10+
<div class="hds-dialog-primitive__wrapper-body">
11+
{{yield to="body"}}
12+
</div>
13+
<div class="hds-dialog-primitive__wrapper-footer">
14+
{{yield to="footer"}}
15+
</div>
16+
</dialog>

‎packages/components/src/components/hds/flyout/body.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
Copyright (c) HashiCorp, Inc.
44
SPDX-License-Identifier: MPL-2.0
55
}}
6+
{{!
7+
THIS SUBCOMPONENT IS NOW DEPRECATED
8+
}}
69
<div class="hds-flyout__body" ...attributes>
710
{{yield}}
811
</div>

‎packages/components/src/components/hds/flyout/body.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { deprecate } from '@ember/debug';
8+
9+
export default class HdsFlyoutBodyComponent extends Component {
10+
constructor() {
11+
super(...arguments);
12+
13+
deprecate(
14+
'The `Hds::Flyout::Body` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Body` as one-to-one replacement.',
15+
false,
16+
{
17+
id: 'hds.components.flyout.body',
18+
until: '5.0.0',
19+
url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
20+
for: '@hashicorp/design-system-components',
21+
since: {
22+
enabled: '4.6.0',
23+
},
24+
}
25+
);
26+
}
27+
}

‎packages/components/src/components/hds/flyout/description.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
Copyright (c) HashiCorp, Inc.
44
SPDX-License-Identifier: MPL-2.0
55
}}
6+
{{!
7+
THIS SUBCOMPONENT IS NOW DEPRECATED
8+
}}
69
<Hds::Text::Body class="hds-flyout__description" @tag="div" @size="200" @color="primary" ...attributes>
710
{{yield}}
811
</Hds::Text::Body>

‎packages/components/src/components/hds/flyout/description.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { deprecate } from '@ember/debug';
8+
9+
export default class HdsFlyoutDescriptionComponent extends Component {
10+
constructor() {
11+
super(...arguments);
12+
13+
deprecate(
14+
'The `Hds::Flyout::Description` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Description` as one-to-one replacement.',
15+
false,
16+
{
17+
id: 'hds.components.flyout.description',
18+
until: '5.0.0',
19+
url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
20+
for: '@hashicorp/design-system-components',
21+
since: {
22+
enabled: '4.6.0',
23+
},
24+
}
25+
);
26+
}
27+
}

‎packages/components/src/components/hds/flyout/footer.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
Copyright (c) HashiCorp, Inc.
44
SPDX-License-Identifier: MPL-2.0
55
}}
6+
{{!
7+
THIS SUBCOMPONENT IS NOW DEPRECATED
8+
}}
69
<div class="hds-flyout__footer" ...attributes>
710
{{yield (hash close=@onDismiss)}}
811
</div>

‎packages/components/src/components/hds/flyout/footer.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { deprecate } from '@ember/debug';
8+
9+
export default class HdsFlyoutFooterComponent extends Component {
10+
constructor() {
11+
super(...arguments);
12+
13+
deprecate(
14+
'The `Hds::Flyout::Footer` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Footer` as one-to-one replacement.',
15+
false,
16+
{
17+
id: 'hds.components.flyout.footer',
18+
until: '5.0.0',
19+
url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
20+
for: '@hashicorp/design-system-components',
21+
since: {
22+
enabled: '4.6.0',
23+
},
24+
}
25+
);
26+
}
27+
}

‎packages/components/src/components/hds/flyout/header.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
Copyright (c) HashiCorp, Inc.
44
SPDX-License-Identifier: MPL-2.0
55
}}
6+
{{!
7+
THIS SUBCOMPONENT IS NOW DEPRECATED
8+
}}
69
<div class="hds-flyout__header" ...attributes>
710
{{#if @icon}}
811
<FlightIcon class="hds-flyout__icon" @name={{@icon}} @size="24" @isInlineBlock={{false}} />

‎packages/components/src/components/hds/flyout/header.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { deprecate } from '@ember/debug';
8+
9+
export default class HdsFlyoutHeaderComponent extends Component {
10+
constructor() {
11+
super(...arguments);
12+
13+
deprecate(
14+
'The `Hds::Flyout::Header` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Header` as one-to-one replacement.',
15+
false,
16+
{
17+
id: 'hds.components.flyout.header',
18+
until: '5.0.0',
19+
url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
20+
for: '@hashicorp/design-system-components',
21+
since: {
22+
enabled: '4.6.0',
23+
},
24+
}
25+
);
26+
}
27+
}

‎packages/components/src/components/hds/flyout/index.hbs

+24-7
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,36 @@
33
Copyright (c) HashiCorp, Inc.
44
SPDX-License-Identifier: MPL-2.0
55
}}
6-
<dialog
6+
<Hds::DialogPrimitive::Wrapper
77
class={{this.classNames}}
88
...attributes
99
aria-labelledby={{this.id}}
1010
{{did-insert this.didInsert}}
1111
{{will-destroy this.willDestroyNode}}
1212
{{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
1313
>
14-
{{yield (hash Header=(component "hds/flyout/header" id=this.id onDismiss=this.onDismiss))}}
15-
{{yield (hash Description=(component "hds/flyout/description"))}}
16-
{{yield (hash Body=(component "hds/flyout/body"))}}
17-
{{yield (hash Footer=(component "hds/flyout/footer" onDismiss=this.onDismiss))}}
18-
</dialog>
14+
<:header>
15+
{{yield
16+
(hash
17+
Header=(component
18+
"hds/dialog-primitive/header" id=this.id onDismiss=this.onDismiss contextualClassPrefix="hds-flyout"
19+
)
20+
Description=(component "hds/dialog-primitive/description" contextualClass="hds-flyout__description")
21+
)
22+
}}
23+
</:header>
24+
<:body>
25+
{{yield (hash Body=(component "hds/dialog-primitive/body" contextualClass="hds-flyout__body"))}}
26+
</:body>
27+
<:footer>
28+
{{yield
29+
(hash
30+
Footer=(component "hds/dialog-primitive/footer" onDismiss=this.onDismiss contextualClass="hds-flyout__footer")
31+
)
32+
}}
33+
</:footer>
34+
</Hds::DialogPrimitive::Wrapper>
35+
1936
{{#if this.isOpen}}
20-
<div class="hds-flyout__overlay"></div>
37+
<Hds::DialogPrimitive::Overlay @contextualClass="hds-flyout__overlay" />
2138
{{/if}}

‎packages/components/src/components/hds/modal/body.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
Copyright (c) HashiCorp, Inc.
44
SPDX-License-Identifier: MPL-2.0
55
}}
6+
{{!
7+
THIS SUBCOMPONENT IS NOW DEPRECATED
8+
}}
69
<div class="hds-modal__body" ...attributes>
710
{{yield}}
811
</div>

‎packages/components/src/components/hds/modal/body.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { deprecate } from '@ember/debug';
8+
9+
export default class HdsModalBodyComponent extends Component {
10+
constructor() {
11+
super(...arguments);
12+
13+
deprecate(
14+
'The `Hds::Modal::Body` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Body` as one-to-one replacement.',
15+
false,
16+
{
17+
id: 'hds.components.modal.body',
18+
until: '5.0.0',
19+
url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
20+
for: '@hashicorp/design-system-components',
21+
since: {
22+
enabled: '4.6.0',
23+
},
24+
}
25+
);
26+
}
27+
}

0 commit comments

Comments
 (0)