Skip to content

Commit bc55b7b

Browse files
shleewhiteshleewhite
authored
Merge pull request #2264 from hashicorp/shleewhite/hds-2691/ts-flyout
Convert Flyout to TypeScript
2 parents f284667 + fb9cf93 commit bc55b7b

14 files changed

+158
-37
lines changed

‎.changeset/six-students-provide.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hashicorp/design-system-components": minor
3+
---
4+
5+
`Flyout`: Converted component to TypeScript

‎packages/components/src/components.ts

+18-8
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ import HdsDialogPrimitiveOverlay from './components/hds/dialog-primitive/overlay
2424
import HdsDialogPrimitiveWrapper from './components/hds/dialog-primitive/wrapper.ts';
2525
import HdsDisclosurePrimitive from './components/hds/disclosure-primitive/index.ts';
2626
import HdsDismissButton from './components/hds/dismiss-button/index.ts';
27+
import HdsFlyout from './components/hds/flyout/index.ts';
28+
import HdsFlyoutBody from './components/hds/flyout/body.ts';
29+
import HdsFlyoutDescription from './components/hds/flyout/description.ts';
30+
import HdsFlyoutFooter from './components/hds/flyout/footer.ts';
31+
import HdsFlyoutHeader from './components/hds/flyout/header.ts';
2732
import HdsFormCharacterCount from './components/hds/form/character-count/index.ts';
2833
import HdsFormCheckboxBase from './components/hds/form/checkbox/base.ts';
2934
import HdsFormCheckboxField from './components/hds/form/checkbox/field.ts';
@@ -40,16 +45,16 @@ import HdsFormLegend from './components/hds/form/legend/index.ts';
4045
import HdsFormMaskedInputBase from './components/hds/form/masked-input/base.ts';
4146
import HdsFormMaskedInputField from './components/hds/form/masked-input/field.ts';
4247
import HdsFormRadioBase from './components/hds/form/radio/base.ts';
43-
import HdsFormRadioField from './components/hds/form/radio/field.ts';
44-
import HdsFormRadioGroup from './components/hds/form/radio/group.ts';
4548
import HdsFormRadioCard from './components/hds/form/radio-card/index.ts';
4649
import HdsFormRadioCardGroup from './components/hds/form/radio-card/group.ts';
50+
import HdsFormRadioField from './components/hds/form/radio/field.ts';
51+
import HdsFormRadioGroup from './components/hds/form/radio/group.ts';
4752
import HdsFormSelectBase from './components/hds/form/select/base.ts';
4853
import HdsFormSelectField from './components/hds/form/select/field.ts';
49-
import HdsFormTextInputBase from './components/hds/form/text-input/base.ts';
50-
import HdsFormTextInputField from './components/hds/form/text-input/field.ts';
5154
import HdsFormTextareaBase from './components/hds/form/textarea/base.ts';
5255
import HdsFormTextareaField from './components/hds/form/textarea/field.ts';
56+
import HdsFormTextInputBase from './components/hds/form/text-input/base.ts';
57+
import HdsFormTextInputField from './components/hds/form/text-input/field.ts';
5358
import HdsFormToggleBase from './components/hds/form/toggle/base.ts';
5459
import HdsFormToggleField from './components/hds/form/toggle/field.ts';
5560
import HdsFormToggleGroup from './components/hds/form/toggle/group.ts';
@@ -106,6 +111,11 @@ export {
106111
HdsDialogPrimitiveWrapper,
107112
HdsDisclosurePrimitive,
108113
HdsDismissButton,
114+
HdsFlyout,
115+
HdsFlyoutBody,
116+
HdsFlyoutDescription,
117+
HdsFlyoutFooter,
118+
HdsFlyoutHeader,
109119
HdsFormCharacterCount,
110120
HdsFormCheckboxBase,
111121
HdsFormCheckboxField,
@@ -122,16 +132,16 @@ export {
122132
HdsFormMaskedInputBase,
123133
HdsFormMaskedInputField,
124134
HdsFormRadioBase,
125-
HdsFormRadioField,
126-
HdsFormRadioGroup,
127135
HdsFormRadioCard,
128136
HdsFormRadioCardGroup,
137+
HdsFormRadioField,
138+
HdsFormRadioGroup,
129139
HdsFormSelectBase,
130140
HdsFormSelectField,
131-
HdsFormTextInputBase,
132-
HdsFormTextInputField,
133141
HdsFormTextareaBase,
134142
HdsFormTextareaField,
143+
HdsFormTextInputBase,
144+
HdsFormTextInputField,
135145
HdsFormToggleBase,
136146
HdsFormToggleField,
137147
HdsFormToggleGroup,

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{{! @glint-nocheck: not typesafe yet }}
21
{{!
32
Copyright (c) HashiCorp, Inc.
43
SPDX-License-Identifier: MPL-2.0

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

+10-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,16 @@
66
import Component from '@glimmer/component';
77
import { deprecate } from '@ember/debug';
88

9-
export default class HdsFlyoutBodyComponent extends Component {
10-
constructor() {
11-
super(...arguments);
9+
export interface HdsFlyoutBodySignature {
10+
Blocks: {
11+
default: [];
12+
};
13+
Element: HTMLDivElement;
14+
}
15+
16+
export default class HdsFlyoutBodyComponent extends Component<HdsFlyoutBodySignature> {
17+
constructor(owner: unknown) {
18+
super(owner, {});
1219

1320
deprecate(
1421
'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.',

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{{! @glint-nocheck: not typesafe yet }}
21
{{!
32
Copyright (c) HashiCorp, Inc.
43
SPDX-License-Identifier: MPL-2.0

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

+11-3
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,18 @@
55

66
import Component from '@glimmer/component';
77
import { deprecate } from '@ember/debug';
8+
import type { HdsTextBodySignature } from '../text/body';
89

9-
export default class HdsFlyoutDescriptionComponent extends Component {
10-
constructor() {
11-
super(...arguments);
10+
interface HdsFlyoutDescriptionSignature {
11+
Blocks: {
12+
default: [];
13+
};
14+
Element: HdsTextBodySignature['Element'];
15+
}
16+
17+
export default class HdsFlyoutDescriptionComponent extends Component<HdsFlyoutDescriptionSignature> {
18+
constructor(owner: unknown) {
19+
super(owner, {});
1220

1321
deprecate(
1422
'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.',

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{{! @glint-nocheck: not typesafe yet }}
21
{{!
32
Copyright (c) HashiCorp, Inc.
43
SPDX-License-Identifier: MPL-2.0

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

+13-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,19 @@
66
import Component from '@glimmer/component';
77
import { deprecate } from '@ember/debug';
88

9-
export default class HdsFlyoutFooterComponent extends Component {
10-
constructor() {
11-
super(...arguments);
9+
interface HdsFlyoutFooterSignature {
10+
Args: {
11+
onDismiss?: (event: MouseEvent) => void;
12+
};
13+
Blocks: {
14+
default: [{ close?: (event: MouseEvent) => void }];
15+
};
16+
Element: HTMLDivElement;
17+
}
18+
19+
export default class HdsFlyoutFooterComponent extends Component<HdsFlyoutFooterSignature> {
20+
constructor(owner: unknown, args: HdsFlyoutFooterSignature['Args']) {
21+
super(owner, args);
1222

1323
deprecate(
1424
'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.',

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{{! @glint-nocheck: not typesafe yet }}
21
{{!
32
Copyright (c) HashiCorp, Inc.
43
SPDX-License-Identifier: MPL-2.0

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

+17-3
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,24 @@
55

66
import Component from '@glimmer/component';
77
import { deprecate } from '@ember/debug';
8+
import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
89

9-
export default class HdsFlyoutHeaderComponent extends Component {
10-
constructor() {
11-
super(...arguments);
10+
export interface HdsFlyoutHeaderSignature {
11+
Args: {
12+
id?: string;
13+
tagline?: string;
14+
onDismiss: (event: MouseEvent) => void;
15+
icon?: FlightIconSignature['Args']['name'] | false;
16+
};
17+
Blocks: {
18+
default: [];
19+
};
20+
Element: HTMLDivElement;
21+
}
22+
23+
export default class HdsFlyoutHeaderComponent extends Component<HdsFlyoutHeaderSignature> {
24+
constructor(owner: unknown, args: HdsFlyoutHeaderSignature['Args']) {
25+
super(owner, args);
1226

1327
deprecate(
1428
'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.',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
{{! @glint-nocheck: not typesafe yet }}
21
{{!
32
Copyright (c) HashiCorp, Inc.
43
SPDX-License-Identifier: MPL-2.0
@@ -9,6 +8,7 @@
98
aria-labelledby={{this.id}}
109
{{did-insert this.didInsert}}
1110
{{will-destroy this.willDestroyNode}}
11+
{{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}
1212
{{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
1313
>
1414
<:header>

‎packages/components/src/components/hds/flyout/index.js ‎packages/components/src/components/hds/flyout/index.ts

+56-12
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,59 @@ import { action } from '@ember/object';
99
import { assert } from '@ember/debug';
1010
import { getElementId } from '../../../utils/hds-get-element-id.ts';
1111
import { buildWaiter } from '@ember/test-waiters';
12+
import type { WithBoundArgs } from '@glint/template';
1213

13-
let waiter = buildWaiter('@hashicorp/design-system-components:flyout');
14+
import type { HdsFlyoutSizes } from './types.ts';
1415

15-
export const DEFAULT_SIZE = 'medium';
16+
import { HdsFlyoutSizesValues } from './types.ts';
17+
import HdsDialogPrimitiveBodyComponent from '../dialog-primitive/body.ts';
18+
import HdsDialogPrimitiveDescriptionComponent from '../dialog-primitive/description.ts';
19+
import HdsDialogPrimitiveFooterComponent from '../dialog-primitive/footer.ts';
20+
import HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';
21+
22+
const waiter = buildWaiter('@hashicorp/design-system-components:flyout');
23+
24+
export const DEFAULT_SIZE = HdsFlyoutSizesValues.Medium;
1625
export const DEFAULT_HAS_OVERLAY = true;
17-
export const SIZES = ['medium', 'large'];
26+
export const SIZES: string[] = Object.values(HdsFlyoutSizesValues);
27+
28+
export interface HdsFlyoutIndexSignature {
29+
Args: {
30+
isDismissDisabled?: boolean;
31+
size?: HdsFlyoutSizes;
32+
onOpen?: () => void;
33+
onClose?: (event: Event) => void;
34+
};
35+
Blocks: {
36+
default: [
37+
{
38+
Header?: WithBoundArgs<
39+
typeof HdsDialogPrimitiveHeaderComponent,
40+
'id' | 'onDismiss' | 'contextualClassPrefix'
41+
>;
42+
Description?: WithBoundArgs<
43+
typeof HdsDialogPrimitiveDescriptionComponent,
44+
'contextualClass'
45+
>;
46+
Body?: WithBoundArgs<
47+
typeof HdsDialogPrimitiveBodyComponent,
48+
'contextualClass'
49+
>;
50+
Footer?: WithBoundArgs<
51+
typeof HdsDialogPrimitiveFooterComponent,
52+
'onDismiss' | 'contextualClass'
53+
>;
54+
},
55+
];
56+
};
57+
Element: HTMLDialogElement;
58+
}
1859

19-
export default class HdsFlyoutIndexComponent extends Component {
60+
export default class HdsFlyoutIndexComponent extends Component<HdsFlyoutIndexSignature> {
2061
@tracked isOpen = false;
62+
element!: HTMLDialogElement;
63+
body!: HTMLElement;
64+
bodyInitialOverflowValue = '';
2165

2266
/**
2367
* Sets the size of the flyout
@@ -27,8 +71,8 @@ export default class HdsFlyoutIndexComponent extends Component {
2771
* @type {string}
2872
* @default 'medium'
2973
*/
30-
get size() {
31-
let { size = DEFAULT_SIZE } = this.args;
74+
get size(): HdsFlyoutSizes {
75+
const { size = DEFAULT_SIZE } = this.args;
3276

3377
assert(
3478
`@size for "Hds::Flyout" must be one of the following: ${SIZES.join(
@@ -53,24 +97,24 @@ export default class HdsFlyoutIndexComponent extends Component {
5397
* @return {string} The "class" attribute to apply to the component.
5498
*/
5599
get classNames() {
56-
let classes = ['hds-flyout'];
100+
const classes = ['hds-flyout'];
57101

58102
// add a class based on the @size argument
59103
classes.push(`hds-flyout--size-${this.size}`);
60104

61105
return classes.join(' ');
62106
}
63107

64-
@action registerOnCloseCallback() {
108+
@action registerOnCloseCallback(event: Event) {
65109
if (this.args.onClose && typeof this.args.onClose === 'function') {
66-
this.args.onClose();
110+
this.args.onClose(event);
67111
}
68112

69113
this.isOpen = false;
70114
}
71115

72116
@action
73-
didInsert(element) {
117+
didInsert(element: HTMLDialogElement) {
74118
// Store references of `<dialog>` and `<body>` elements
75119
this.element = element;
76120
this.body = document.body;
@@ -122,8 +166,8 @@ export default class HdsFlyoutIndexComponent extends Component {
122166
// when using `click` or other helpers from '@ember/test-helpers'
123167
// Notice: this code will get stripped out in production builds (DEBUG evaluates to `true` in dev/test builds, but `false` in prod builds)
124168
if (this.element.open) {
125-
let token = waiter.beginAsync();
126-
let listener = () => {
169+
const token = waiter.beginAsync();
170+
const listener = () => {
127171
waiter.endAsync(token);
128172
this.element.removeEventListener('close', listener);
129173
};

‎packages/components/src/components/hds/flyout/types.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum HdsFlyoutSizesValues {
2+
Medium = 'medium',
3+
Large = 'large',
4+
}
5+
6+
export type HdsFlyoutSizes = `${HdsFlyoutSizesValues}`;

‎packages/components/src/template-registry.ts

+21
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@ import type HdsDialogPrimitiveHeaderComponent from './components/hds/dialog-prim
4141
import type HdsDialogPrimitiveOverlayComponent from './components/hds/dialog-primitive/overlay';
4242
import type HdsDialogPrimitiveWrapperComponent from './components/hds/dialog-primitive/wrapper';
4343
import type HdsDismissButtonComponent from './components/hds/dismiss-button';
44+
import type HdsFlyoutBodyComponent from './components/hds/flyout/body';
45+
import type HdsFlyoutDescriptionComponent from './components/hds/flyout/description';
46+
import type HdsFlyoutFooterComponent from './components/hds/flyout/footer';
47+
import type HdsFlyoutHeaderComponent from './components/hds/flyout/header';
48+
import type HdsFlyoutComponent from './components/hds/flyout';
4449
import type HdsFormCharacterCountComponent from './components/hds/form/character-count';
4550
import type HdsFormCheckboxBaseComponent from './components/hds/form/checkbox/base';
4651
import type HdsFormCheckboxFieldComponent from './components/hds/form/checkbox/field';
@@ -266,6 +271,22 @@ export default interface HdsComponentsRegistry {
266271
'Hds::DismissButton': typeof HdsDismissButtonComponent;
267272
'hds/dismiss-button': typeof HdsDismissButtonComponent;
268273

274+
// Flyout
275+
'Hds::Flyout': typeof HdsFlyoutComponent;
276+
'hds/flyout': typeof HdsFlyoutComponent;
277+
278+
'Hds::Flyout::Body': typeof HdsFlyoutBodyComponent;
279+
'hds/flyout/body': typeof HdsFlyoutBodyComponent;
280+
281+
'Hds::Flyout::Description': typeof HdsFlyoutDescriptionComponent;
282+
'hds/flyout/description': typeof HdsFlyoutDescriptionComponent;
283+
284+
'Hds::Flyout::Footer': typeof HdsFlyoutFooterComponent;
285+
'hds/flyout/footer': typeof HdsFlyoutFooterComponent;
286+
287+
'Hds::Flyout::Header': typeof HdsFlyoutHeaderComponent;
288+
'hds/flyout/header': typeof HdsFlyoutHeaderComponent;
289+
269290
// FORM
270291

271292
// Form CharacterCount

0 commit comments

Comments
 (0)