HdsSideNav deprecations (#3230)

zamoore · zamoore · commit ae85ade5a8f7 · 2025-10-14T17:52:46.000-04:00
diff --git a/.changeset/spicy-ads-roll.md b/.changeset/spicy-ads-roll.md
@@ -0,0 +1,10 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/side-nav -->
+`SideNav` - Removed deprecated features
+- Removed the `@ariaLabel` argument
+- Removed the `HdsSideNavHeaderIconButton` component
+- Updated the deprecation removal version from `5.0.0` to `6.0.0`
+<!-- END -->
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -331,7 +331,6 @@
       "./components/hds/separator.js": "./dist/_app_/components/hds/separator.js",
       "./components/hds/side-nav/base.js": "./dist/_app_/components/hds/side-nav/base.js",
       "./components/hds/side-nav/header/home-link.js": "./dist/_app_/components/hds/side-nav/header/home-link.js",
-      "./components/hds/side-nav/header/icon-button.js": "./dist/_app_/components/hds/side-nav/header/icon-button.js",
       "./components/hds/side-nav/header.js": "./dist/_app_/components/hds/side-nav/header.js",
       "./components/hds/side-nav.js": "./dist/_app_/components/hds/side-nav.js",
       "./components/hds/side-nav/list/back-link.js": "./dist/_app_/components/hds/side-nav/list/back-link.js",
diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts
@@ -279,7 +279,6 @@ export { default as HdsSideNav } from './components/hds/side-nav/index.ts';
 export { default as HdsSideNavBase } from './components/hds/side-nav/base.ts';
 export { default as HdsSideNavHeader } from './components/hds/side-nav/header/index.ts';
 export { default as HdsSideNavHeaderHomeLink } from './components/hds/side-nav/header/home-link.ts';
-export { default as HdsSideNavHeaderIconButton } from './components/hds/side-nav/header/icon-button.ts';
 export { default as HdsSideNavList } from './components/hds/side-nav/list/index.ts';
 export { default as HdsSideNavListBackLink } from './components/hds/side-nav/list/back-link.ts';
 export { default as HdsSideNavListItem } from './components/hds/side-nav/list/item.ts';
diff --git a/packages/components/src/components/hds/side-nav/header/icon-button.hbs b/packages/components/src/components/hds/side-nav/header/icon-button.hbs
diff --git a/packages/components/src/components/hds/side-nav/header/icon-button.ts b/packages/components/src/components/hds/side-nav/header/icon-button.ts
diff --git a/packages/components/src/components/hds/side-nav/index.hbs b/packages/components/src/components/hds/side-nav/index.hbs
@@ -34,8 +34,7 @@
       <div class="hds-side-nav__overlay" {{on "click" this.toggleMinimizedStatus}} />
       {{! template-lint-enable no-invalid-interactive}}
       <Hds::SideNav::ToggleButton
-        aria-label={{this.ariaLabel}}
-        aria-labelledby={{unless this.ariaLabel "hds-side-nav-header"}}
+        aria-labelledby="hds-side-nav-header"
         aria-expanded={{if this.isMinimized "false" "true"}}
         @icon={{if this.isMinimized "chevrons-right" "chevrons-left"}}
         {{on "click" this.toggleMinimizedStatus}}
diff --git a/packages/components/src/components/hds/side-nav/index.ts b/packages/components/src/components/hds/side-nav/index.ts
@@ -23,10 +23,6 @@ export interface HdsSideNavSignature {
     a11yRefocusNavigationText?: string;
     a11yRefocusRouteChangeValidator?: string;
     a11yRefocusExcludeAllQueryParams?: boolean;
-    /**
-     * @deprecated The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button
-     */
-    ariaLabel?: string | undefined;
 
     onToggleMinimizedStatus?: (arg: boolean) => void;
 
@@ -84,7 +80,7 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
       false,
       {
         id: 'hds.components.sidenav',
-        until: '5.0.0',
+        until: '6.0.0',
         url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',
         for: '@hashicorp/design-system-components',
         since: {
@@ -93,23 +89,6 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
         },
       }
     );
-
-    if (args.ariaLabel !== undefined) {
-      deprecate(
-        'The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button',
-        false,
-        {
-          id: 'hds.sidenav',
-          until: '5.0.0',
-          url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',
-          for: '@hashicorp/design-system-components',
-          since: {
-            available: '4.14.0',
-            enabled: '5.0.0',
-          },
-        }
-      );
-    }
   }
 
   addEventListeners(): void {
@@ -157,13 +136,6 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
     return (this.isResponsive && !this.isDesktop) || this.isCollapsible;
   }
 
-  /**
-   * @deprecated The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button
-   */
-  get ariaLabel(): string | undefined {
-    return this.args.ariaLabel;
-  }
-
   get classNames(): string {
     const classes = []; // `hds-side-nav` is already set by the "Hds::SideNav::Base" component
 
diff --git a/packages/components/src/styles/components/side-nav/header.scss b/packages/components/src/styles/components/side-nav/header.scss
@@ -94,29 +94,3 @@
     }
   }
 }
-
-// generic "icon-button"
-
-// TODO: Replace this component with Hds::Button
-.hds-side-nav__icon-button {
-  @include hds-interactive-dark-theme();
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px; // same height as the dropdown "toggle"
-  height: 36px;
-  padding: 5px; // we take in account the transparent border
-
-  // disabled state:
-  &:disabled,
-  &[disabled],
-  &.mock-disabled,
-  &:disabled:focus,
-  &[disabled]:focus,
-  &.mock-disabled:focus,
-  &:disabled:hover,
-  &[disabled]:hover,
-  &.mock-disabled:hover {
-    @include hds-interactive-dark-theme-state-disabled();
-  }
-}
diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts
@@ -200,7 +200,6 @@ import type HdsSideNavPortalComponent from './components/hds/side-nav/portal';
 import type HdsSideNavPortalTargetComponent from './components/hds/side-nav/portal/target';
 import type HdsSideNavHeaderComponent from './components/hds/side-nav/header';
 import type HdsSideNavHeaderHomeLinkComponent from './components/hds/side-nav/header/home-link';
-import type HdsSideNavHeaderIconButtonComponent from './components/hds/side-nav/header/icon-button';
 import type HdsSideNavListComponent from './components/hds/side-nav/list';
 import type HdsSideNavListBackLinkComponent from './components/hds/side-nav/list/back-link';
 import type HdsSideNavListItemComponent from './components/hds/side-nav/list/item';
@@ -920,10 +919,6 @@ export default interface HdsComponentsRegistry {
   'hds/side-nav/header/home-link': typeof HdsSideNavHeaderHomeLinkComponent;
   HdsSideNavHeaderHomeLink: typeof HdsSideNavHeaderHomeLinkComponent;
 
-  'Hds::SideNav::Header::IconButton': typeof HdsSideNavHeaderIconButtonComponent;
-  'hds/side-nav/header/icon-button': typeof HdsSideNavHeaderIconButtonComponent;
-  HdsSideNavHeaderIconButton: typeof HdsSideNavHeaderIconButtonComponent;
-
   'Hds::SideNav::List': typeof HdsSideNavListComponent;
   'hds/side-nav/list': typeof HdsSideNavListComponent;
   HdsSideNavList: typeof HdsSideNavListComponent;
diff --git a/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.js b/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.js
diff --git a/showcase/tests/integration/components/hds/side-nav/index-test.js b/showcase/tests/integration/components/hds/side-nav/index-test.js
@@ -211,28 +211,6 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
 
   // COLLAPSIBLE
 
-  test('if the @ariaLabel argument is not provided the default aria-labelledby value is set on the toggle button', async function (assert) {
-    await render(
-      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" />`,
-    );
-    assert
-      .dom('.hds-side-nav__toggle-button')
-      .hasAttribute('aria-labelledby', 'hds-side-nav-header');
-    assert.dom('.hds-side-nav__toggle-button').hasNoAttribute('aria-label');
-  });
-
-  test('if the @ariaLabel argument is provided the label value is set on the toggle button', async function (assert) {
-    await render(
-      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" @ariaLabel="Test"/>`,
-    );
-    assert
-      .dom('.hds-side-nav__toggle-button')
-      .hasNoAttribute('aria-labelledby');
-    assert
-      .dom('.hds-side-nav__toggle-button')
-      .hasAttribute('aria-label', 'Test');
-  });
-
   test('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) {
     await render(
       hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" />`,
diff --git a/website/app/deprecation-workflow.js b/website/app/deprecation-workflow.js
@@ -37,6 +37,5 @@ setupDeprecationWorkflow({
     { handler: 'throw', matchId: 'hds.components.modal.body' },
     { handler: 'throw', matchId: 'hds.components.modal.footer' },
     { handler: 'throw', matchId: 'hds.components.modal.header' },
-    { handler: 'throw', matchId: 'hds.components.sidenav.header.iconbutton' },
   ],
 });
diff --git a/website/docs/components/side-nav/partials/code/component-api.md b/website/docs/components/side-nav/partials/code/component-api.md
@@ -49,9 +49,6 @@ This is the full-fledged component (responsive and animated).
       </C.Property>
     </Doc::ComponentApi>
   </C.Property>
-  <C.Property @name="ariaLabel" @type="string" @deprecated={{true}}>
-    Accepts a string; the fallback is set to `Open menu` if the menu is closed, and `Close menu` if the menu is open.<br /><br />Note: The purpose of this argument has been replaced by an `aria-labelledby` attribute referencing the "hds-side-nav-header" `h2` combined with the use of `aria-expanded` on the Toggle button tab.
-  </C.Property>
   <C.Property @name="onToggleMinimizedStatus" @type="function">
     Callback function invoked when the `SideNav` is collapsed or expanded. The function receives a boolean argument stating if the `SideNav` is minimized or not.
   </C.Property>
@@ -132,46 +129,6 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp
   </C.Property>
 </Doc::ComponentApi>
 
-### SideNav::Header::IconButton
-
-!!! Warning
-
-**Deprecation notice**
-
-The `SideNav::Header::IconButton` subcomponent is now deprecated. Use the `Hds::Button` component with the `isIconOnly` variant instead.
-
-* [Example usage of an Icon-only Button](/components/side-nav?tab=code#actions) within the Side Nav `:actions` block.
-* [Icon-only Button documentation](/components/button?tab=code#icon-only-button)
-!!!
-
-The `SideNav::Header::IconButton` component.
-
-It internally uses the [`Hds::Interactive`](/utilities/interactive) utility component. For more details about this component API, please refer to [its documentation page](/utilities/interactive?tab=code#component-api).
-
-<Doc::ComponentApi as |C|>
-  <C.Property @name="icon" @type="string" @required={{true}}>
-    Used to show an icon. Any [icon](/icons/library) name is accepted.
-  </C.Property>
-  <C.Property @name="href">
-    URL parameter that’s passed down to the `<a>` element.
-  </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean">
-    Controls whether or not the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
-  </C.Property>
-  <C.Property @name="route/models/model/query/current-when/replace">
-    Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.
-  </C.Property>
-  <C.Property @name="isRouteExternal" @type="boolean" @default="false">
-    This controls if the “LinkTo” is external to the Ember engine, in which case it will use a `<LinkToExternal>` for the `@route`.
-  </C.Property>
-  <C.Property @name="ariaLabel" @type="string" @required={{true}}>
-    The value of the `aria-label`. If no text value is defined an error will be thrown.
-  </C.Property>
-  <C.Property @name="...attributes">
-    This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
-  </C.Property>
-</Doc::ComponentApi>
-
 ### SideNav::PortalTarget
 
 The `SideNav::PortalTarget` component is used to receive some content "transported" through the portal and inject it into its position in the DOM tree. For details about how portals work refer to the [`ember-stargate` documentation](https://github.com/simonihmig/ember-stargate).
