Skip to content

Commit 093887b

Browse files
zamoorezamoore
committed
HdsDropdownListItemInteractive - Remove deprecated @text argument (#3212)
1 parent 9a3243d commit 093887b

File tree

7 files changed

+35
-99
lines changed

7 files changed

+35
-99
lines changed

‎.changeset/cold-worlds-notice.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@hashicorp/design-system-components": major
3+
---
4+
5+
<!-- START components/dropdown -->
6+
7+
`Dropdown` - Removed the deprecated `@text` argument from the `HdsDropdownListItemInteractive` component.
8+
9+
To migrate run the codemod `v4/dropdown-list-item-interactive` (see [readme file](https://github.com/hashicorp/design-system/tree/main/packages/codemods/transforms/v4/dropdown-list-item-interactive))
10+
11+
<!-- END -->

‎packages/components/src/components/hds/dropdown/list-item/interactive.hbs‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@
99
<Hds::Icon @name="loading" />
1010
</div>
1111
<Hds::Text::Body @tag="div" @size="100" @weight="regular" class="hds-dropdown-list-item__interactive-text">
12-
{{#if (has-block)}}
13-
{{yield (hash Badge=(component "hds/badge" size="small"))}}
14-
{{else}}
15-
{{this.text}}
16-
{{/if}}
12+
{{yield (hash Badge=(component "hds/badge" size="small"))}}
1713
</Hds::Text::Body>
1814
</div>
1915
{{else}}
@@ -34,11 +30,7 @@
3430
</span>
3531
{{/if}}
3632
<Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="span" @size="200" @weight="medium">
37-
{{#if (has-block)}}
38-
{{yield (hash Badge=(component "hds/badge" size="small"))}}
39-
{{else}}
40-
{{this.text}}
41-
{{/if}}
33+
{{yield (hash Badge=(component "hds/badge" size="small"))}}
4234
</Hds::Text::Body>
4335
{{#if @trailingIcon}}
4436
<span class="hds-dropdown-list-item__interactive-icon hds-dropdown-list-item__interactive-icon--trailing">

‎packages/components/src/components/hds/dropdown/list-item/interactive.ts‎

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import Component from '@glimmer/component';
7-
import { assert, deprecate } from '@ember/debug';
7+
import { assert } from '@ember/debug';
88

99
import { HdsDropdownListItemInteractiveColorValues } from './types.ts';
1010

@@ -13,7 +13,6 @@ import type { HdsInteractiveSignature } from '../../interactive';
1313
import type { HdsDropdownListItemInteractiveColors } from './types.ts';
1414
import type { ComponentLike } from '@glint/template';
1515
import type { HdsBadgeSignature } from '../../badge/index.ts';
16-
import type Owner from '@ember/owner';
1716

1817
export const DEFAULT_COLOR = HdsDropdownListItemInteractiveColorValues.Action;
1918
export const COLORS: HdsDropdownListItemInteractiveColors[] = Object.values(
@@ -25,10 +24,6 @@ export interface HdsDropdownListItemInteractiveSignature {
2524
color?: HdsDropdownListItemInteractiveColors;
2625
icon?: HdsIconSignature['Args']['name'];
2726
isLoading?: boolean;
28-
/**
29-
* @deprecated The `@text` argument for "Hds::Dropdown::ListItem::Interactive" has been deprecated. Please put text in the yielded block. See: https://helios.hashicorp.design/components/dropdown?tab=version%20history#4100
30-
*/
31-
text?: string;
3227
trailingIcon?: HdsIconSignature['Args']['name'];
3328
};
3429
Blocks: {
@@ -42,41 +37,6 @@ export interface HdsDropdownListItemInteractiveSignature {
4237
}
4338

4439
export default class HdsDropdownListItemInteractive extends Component<HdsDropdownListItemInteractiveSignature> {
45-
constructor(
46-
owner: Owner,
47-
args: HdsDropdownListItemInteractiveSignature['Args']
48-
) {
49-
super(owner, args);
50-
51-
if (args.text !== undefined) {
52-
deprecate(
53-
'The `@text` argument for "Hds::Dropdown::ListItem::Interactive" has been deprecated. Please put text in the yielded block.',
54-
false,
55-
{
56-
id: 'hds.dropdown.list-item.interactive',
57-
until: '5.0.0',
58-
url: 'https://helios.hashicorp.design/components/dropdown?tab=version%20history#4100',
59-
for: '@hashicorp/design-system-components',
60-
since: {
61-
available: '4.10.0',
62-
enabled: '5.0.0',
63-
},
64-
}
65-
);
66-
}
67-
}
68-
69-
get text(): string {
70-
const { text } = this.args;
71-
72-
assert(
73-
'@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value',
74-
text !== undefined
75-
);
76-
77-
return text;
78-
}
79-
8040
get color(): HdsDropdownListItemInteractiveColors {
8141
const { color = DEFAULT_COLOR } = this.args;
8242

‎showcase/app/components/mock/app/header/app-header.gts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,9 @@ export default class MockAppHeaderAppHeader extends Component<MockAppHeaderAppHe
9696
<dd.ToggleIcon @icon="user" @text="user menu" />
9797
<dd.Title @text="Signed In" />
9898
<dd.Description @text="[email protected]" />
99-
<dd.Interactive @href="#" @text="Account Settings" />
99+
<dd.Interactive @href="#">
100+
Account Settings
101+
</dd.Interactive>
100102
</HdsDropdown>
101103
</:utilityActions>
102104
</HdsAppHeader>

‎showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ const SubSectionListItemNotInteractive: TemplateOnlyComponent = <template>
4343
@text="A longer description that could span on multiple lines if the number of characters require more width than the dropdown provides by default."
4444
/>
4545
<HdsDropdownListItemSeparator />
46-
<HdsDropdownListItemInteractive
47-
@route="index"
48-
@text="A longer item that could span multiple lines if the characters surpass a certain length"
49-
/>
46+
<HdsDropdownListItemInteractive @route="index">
47+
A longer item that could span multiple lines if the characters
48+
surpass a certain length
49+
</HdsDropdownListItemInteractive>
5050
</ul>
5151
</div>
5252
</SF.Item>
@@ -60,10 +60,10 @@ const SubSectionListItemNotInteractive: TemplateOnlyComponent = <template>
6060
@text="A longer description that could span on multiple lines if the number of characters require more width than the dropdown provides by default."
6161
/>
6262
<HdsDropdownListItemSeparator />
63-
<HdsDropdownListItemInteractive
64-
@route="index"
65-
@text="A longer item that could span multiple lines if the characters surpass a certain length"
66-
/>
63+
<HdsDropdownListItemInteractive @route="index">
64+
A longer item that could span multiple lines if the characters
65+
surpass a certain length
66+
</HdsDropdownListItemInteractive>
6767
</ul>
6868
</div>
6969
</SF.Item>

‎showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js‎

Lines changed: 10 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module(
2323

2424
test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
2525
await render(
26-
hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
26+
hbs`<Hds::Dropdown::ListItem::Interactive>interactive</Hds::Dropdown::ListItem::Interactive>`,
2727
);
2828
assert.dom('.hds-dropdown-list-item').hasTagName('li');
2929
assert
@@ -35,19 +35,19 @@ module(
3535

3636
test('it should render the "list-item" with a button by default"', async function (assert) {
3737
await render(
38-
hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
38+
hbs`<Hds::Dropdown::ListItem::Interactive>interactive</Hds::Dropdown::ListItem::Interactive>`,
3939
);
4040
assert.dom('.hds-dropdown-list-item > button').exists();
4141
});
4242
test('it should render the "list-item" with a link if it has a @route parameter"', async function (assert) {
4343
await render(
44-
hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" @route="index" />`,
44+
hbs`<Hds::Dropdown::ListItem::Interactive @route="index">interactive</Hds::Dropdown::ListItem::Interactive>`,
4545
);
4646
assert.dom('.hds-dropdown-list-item > a').exists();
4747
});
4848
test('it should render the "list-item" with a link if it has a @href argument"', async function (assert) {
4949
await render(
50-
hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" @href="#" />`,
50+
hbs`<Hds::Dropdown::ListItem::Interactive @href="#">interactive</Hds::Dropdown::ListItem::Interactive>`,
5151
);
5252
assert.dom('.hds-dropdown-list-item > a').exists();
5353
});
@@ -56,15 +56,15 @@ module(
5656

5757
test('it should render the "action" color as the default if no color is declared"', async function (assert) {
5858
await render(
59-
hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
59+
hbs`<Hds::Dropdown::ListItem::Interactive>interactive</Hds::Dropdown::ListItem::Interactive>`,
6060
);
6161
assert
6262
.dom('.hds-dropdown-list-item')
6363
.hasClass('hds-dropdown-list-item--color-action');
6464
});
6565
test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
6666
await render(
67-
hbs`<Hds::Dropdown::ListItem::Interactive @color="critical" @text="interactive" @icon="trash" />`,
67+
hbs`<Hds::Dropdown::ListItem::Interactive @color="critical" @icon="trash">interactive</Hds::Dropdown::ListItem::Interactive>`,
6868
);
6969
assert
7070
.dom('.hds-dropdown-list-item')
@@ -75,32 +75,26 @@ module(
7575

7676
test('if an `@icon` is declared a leading icon should be rendered', async function (assert) {
7777
await render(
78-
hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @text="interactive" />`,
78+
hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy">interactive</Hds::Dropdown::ListItem::Interactive>`,
7979
);
8080
assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
8181
});
8282
test('if an `@trailingIcon` is declared a trailing icon should be rendered', async function (assert) {
8383
await render(
84-
hbs`<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link" @text="interactive" />`,
84+
hbs`<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link">interactive</Hds::Dropdown::ListItem::Interactive>`,
8585
);
8686
assert.dom('.hds-icon.hds-icon-external-link').exists();
8787
});
8888
test('if both an `@icon` and an `@trailingIcon` are declared both the leading and trailing icons should be rendered', async function (assert) {
8989
await render(
90-
hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @trailingIcon="external-link" @text="interactive" />`,
90+
hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @trailingIcon="external-link">interactive</Hds::Dropdown::ListItem::Interactive>`,
9191
);
9292
assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
9393
assert.dom('.hds-icon.hds-icon-external-link').exists();
9494
});
9595

9696
// CONTENT
9797

98-
test('it should render the text passed as @text prop', async function (assert) {
99-
await render(
100-
hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive text" />`,
101-
);
102-
assert.dom('.hds-dropdown-list-item').hasText('interactive text');
103-
});
10498
test('it should render the yielded content', async function (assert) {
10599
await render(hbs`
106100
<Hds::Dropdown::ListItem::Interactive>
@@ -109,29 +103,9 @@ module(
109103
`);
110104
assert.dom('.hds-dropdown-list-item').hasText('interactive');
111105
});
112-
test('it should render the text passed as @text prop if content is yielded', async function (assert) {
113-
await render(hbs`
114-
<Hds::Dropdown::ListItem::Interactive @text="erroneous">
115-
interactive
116-
</Hds::Dropdown::ListItem::Interactive>
117-
`);
118-
assert.dom('.hds-dropdown-list-item').doesNotContainText('erroneous');
119-
});
120106

121107
// ASSERTIONS
122108

123-
test('it should throw an assertion if @text is missing/has no value and the component does not yield content', async function (assert) {
124-
const errorMessage =
125-
'@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value';
126-
assert.expect(2);
127-
setupOnerror(function (error) {
128-
assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
129-
});
130-
await render(hbs`<Hds::Dropdown::ListItem::Interactive />`);
131-
assert.throws(function () {
132-
throw new Error(errorMessage);
133-
});
134-
});
135109
test('it should throw an assertion if an incorrect value for @color is provided', async function (assert) {
136110
const errorMessage =
137111
'@color for "Hds::Dropdown::ListItem::Interactive" must be one of the following: action, critical; received: foo';
@@ -140,7 +114,7 @@ module(
140114
assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
141115
});
142116
await render(
143-
hbs`<Hds::Dropdown::ListItem::Interactive @color="foo" @text="interactive text" />`,
117+
hbs`<Hds::Dropdown::ListItem::Interactive @color="foo">interactive text</Hds::Dropdown::ListItem::Interactive>`,
144118
);
145119
assert.throws(function () {
146120
throw new Error(errorMessage);

‎website/docs/components/dropdown/partials/code/component-api.md‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -209,9 +209,6 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp
209209
<C.Property @name="<[I].Badge>" @type="yielded component">
210210
The `Badge` component, yielded as contextual component inside `interactive` blocks of the `Dropdown`. It exposes the same API as the [`Badge` component](/components/badge).
211211
</C.Property>
212-
<C.Property @name="text" @required={{true}} @deprecated={{true}} @type="string">
213-
Text to be used in the item. If no text value is defined and no content is yielded, an error will be thrown.
214-
</C.Property>
215212
<C.Property @name="color" @type="enum" @values={{array "action" "critical" }} @default="action">
216213
Color applied to the text and (optional) icons.
217214
</C.Property>

0 commit comments

Comments
 (0)