diff --git a/.changeset/cold-worlds-notice.md b/.changeset/cold-worlds-notice.md
new file mode 100644
index 00000000000..26319a386e3
--- /dev/null
+++ b/.changeset/cold-worlds-notice.md
@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+
+
+`Dropdown` - Removed the deprecated `@text` argument from the `HdsDropdownListItemInteractive` component.
+
+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))
+
+
diff --git a/packages/components/src/components/hds/dropdown/list-item/interactive.hbs b/packages/components/src/components/hds/dropdown/list-item/interactive.hbs
index 53fc34e1b9f..f62914dc95f 100644
--- a/packages/components/src/components/hds/dropdown/list-item/interactive.hbs
+++ b/packages/components/src/components/hds/dropdown/list-item/interactive.hbs
@@ -9,11 +9,7 @@
- {{#if (has-block)}}
- {{yield (hash Badge=(component "hds/badge" size="small"))}}
- {{else}}
- {{this.text}}
- {{/if}}
+ {{yield (hash Badge=(component "hds/badge" size="small"))}}
{{else}}
@@ -34,11 +30,7 @@
{{/if}}
- {{#if (has-block)}}
- {{yield (hash Badge=(component "hds/badge" size="small"))}}
- {{else}}
- {{this.text}}
- {{/if}}
+ {{yield (hash Badge=(component "hds/badge" size="small"))}}
{{#if @trailingIcon}}
diff --git a/packages/components/src/components/hds/dropdown/list-item/interactive.ts b/packages/components/src/components/hds/dropdown/list-item/interactive.ts
index 323942938b0..722866f4bc0 100644
--- a/packages/components/src/components/hds/dropdown/list-item/interactive.ts
+++ b/packages/components/src/components/hds/dropdown/list-item/interactive.ts
@@ -4,7 +4,7 @@
*/
import Component from '@glimmer/component';
-import { assert, deprecate } from '@ember/debug';
+import { assert } from '@ember/debug';
import { HdsDropdownListItemInteractiveColorValues } from './types.ts';
@@ -13,7 +13,6 @@ import type { HdsInteractiveSignature } from '../../interactive';
import type { HdsDropdownListItemInteractiveColors } from './types.ts';
import type { ComponentLike } from '@glint/template';
import type { HdsBadgeSignature } from '../../badge/index.ts';
-import type Owner from '@ember/owner';
export const DEFAULT_COLOR = HdsDropdownListItemInteractiveColorValues.Action;
export const COLORS: HdsDropdownListItemInteractiveColors[] = Object.values(
@@ -25,10 +24,6 @@ export interface HdsDropdownListItemInteractiveSignature {
color?: HdsDropdownListItemInteractiveColors;
icon?: HdsIconSignature['Args']['name'];
isLoading?: boolean;
- /**
- * @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
- */
- text?: string;
trailingIcon?: HdsIconSignature['Args']['name'];
};
Blocks: {
@@ -42,41 +37,6 @@ export interface HdsDropdownListItemInteractiveSignature {
}
export default class HdsDropdownListItemInteractive extends Component {
- constructor(
- owner: Owner,
- args: HdsDropdownListItemInteractiveSignature['Args']
- ) {
- super(owner, args);
-
- if (args.text !== undefined) {
- deprecate(
- 'The `@text` argument for "Hds::Dropdown::ListItem::Interactive" has been deprecated. Please put text in the yielded block.',
- false,
- {
- id: 'hds.dropdown.list-item.interactive',
- until: '5.0.0',
- url: 'https://helios.hashicorp.design/components/dropdown?tab=version%20history#4100',
- for: '@hashicorp/design-system-components',
- since: {
- available: '4.10.0',
- enabled: '5.0.0',
- },
- }
- );
- }
- }
-
- get text(): string {
- const { text } = this.args;
-
- assert(
- '@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value',
- text !== undefined
- );
-
- return text;
- }
-
get color(): HdsDropdownListItemInteractiveColors {
const { color = DEFAULT_COLOR } = this.args;
diff --git a/showcase/app/components/mock/app/header/app-header.gts b/showcase/app/components/mock/app/header/app-header.gts
index 8f9d9f66ad4..226e101691b 100644
--- a/showcase/app/components/mock/app/header/app-header.gts
+++ b/showcase/app/components/mock/app/header/app-header.gts
@@ -96,7 +96,9 @@ export default class MockAppHeaderAppHeader extends Component
-
+
+ Account Settings
+
diff --git a/showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts b/showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts
index 9c1734f77e5..a2414a80a74 100644
--- a/showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts
+++ b/showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts
@@ -43,10 +43,10 @@ const SubSectionListItemNotInteractive: TemplateOnlyComponent =
@text="A longer description that could span on multiple lines if the number of characters require more width than the dropdown provides by default."
/>
-
+
+ A longer item that could span multiple lines if the characters
+ surpass a certain length
+
@@ -60,10 +60,10 @@ const SubSectionListItemNotInteractive: TemplateOnlyComponent =
@text="A longer description that could span on multiple lines if the number of characters require more width than the dropdown provides by default."
/>
-
+
+ A longer item that could span multiple lines if the characters
+ surpass a certain length
+
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js
index 0a3873660f4..97ae809fa0c 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js
@@ -23,7 +23,7 @@ module(
test('it should render the component as a element with a CSS class that matches the component name', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert.dom('.hds-dropdown-list-item').hasTagName('li');
assert
@@ -35,19 +35,19 @@ module(
test('it should render the "list-item" with a button by default"', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert.dom('.hds-dropdown-list-item > button').exists();
});
test('it should render the "list-item" with a link if it has a @route parameter"', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert.dom('.hds-dropdown-list-item > a').exists();
});
test('it should render the "list-item" with a link if it has a @href argument"', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert.dom('.hds-dropdown-list-item > a').exists();
});
@@ -56,7 +56,7 @@ module(
test('it should render the "action" color as the default if no color is declared"', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert
.dom('.hds-dropdown-list-item')
@@ -64,7 +64,7 @@ module(
});
test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert
.dom('.hds-dropdown-list-item')
@@ -75,19 +75,19 @@ module(
test('if an `@icon` is declared a leading icon should be rendered', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
});
test('if an `@trailingIcon` is declared a trailing icon should be rendered', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert.dom('.hds-icon.hds-icon-external-link').exists();
});
test('if both an `@icon` and an `@trailingIcon` are declared both the leading and trailing icons should be rendered', async function (assert) {
await render(
- hbs``,
+ hbs`interactive`,
);
assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
assert.dom('.hds-icon.hds-icon-external-link').exists();
@@ -95,12 +95,6 @@ module(
// CONTENT
- test('it should render the text passed as @text prop', async function (assert) {
- await render(
- hbs``,
- );
- assert.dom('.hds-dropdown-list-item').hasText('interactive text');
- });
test('it should render the yielded content', async function (assert) {
await render(hbs`
@@ -109,29 +103,9 @@ module(
`);
assert.dom('.hds-dropdown-list-item').hasText('interactive');
});
- test('it should render the text passed as @text prop if content is yielded', async function (assert) {
- await render(hbs`
-
- interactive
-
- `);
- assert.dom('.hds-dropdown-list-item').doesNotContainText('erroneous');
- });
// ASSERTIONS
- test('it should throw an assertion if @text is missing/has no value and the component does not yield content', async function (assert) {
- const errorMessage =
- '@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value';
- assert.expect(2);
- setupOnerror(function (error) {
- assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
- });
- await render(hbs``);
- assert.throws(function () {
- throw new Error(errorMessage);
- });
- });
test('it should throw an assertion if an incorrect value for @color is provided', async function (assert) {
const errorMessage =
'@color for "Hds::Dropdown::ListItem::Interactive" must be one of the following: action, critical; received: foo';
@@ -140,7 +114,7 @@ module(
assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
});
await render(
- hbs``,
+ hbs`interactive text`,
);
assert.throws(function () {
throw new Error(errorMessage);
diff --git a/website/docs/components/dropdown/partials/code/component-api.md b/website/docs/components/dropdown/partials/code/component-api.md
index 4eb658a8d10..79eb1a3e1d4 100644
--- a/website/docs/components/dropdown/partials/code/component-api.md
+++ b/website/docs/components/dropdown/partials/code/component-api.md
@@ -209,9 +209,6 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp
" @type="yielded component">
The `Badge` component, yielded as contextual component inside `interactive` blocks of the `Dropdown`. It exposes the same API as the [`Badge` component](/components/badge).
-
- Text to be used in the item. If no text value is defined and no content is yielded, an error will be thrown.
-
Color applied to the text and (optional) icons.