HdsSideNav deprecations

.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 -->

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",

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';

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}}

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
 

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();
-  }
-}

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;

showcase/app/templates/page-components/side-nav.hbs

@@ -513,7 +513,7 @@
         </Hds::SideNav::Header>
       </div>
     </SF.Item>
-    <SF.Item @label="Logo (HomeLink) + Actions (IconButton + Dropdown)">
+    <SF.Item @label="Logo (HomeLink) + Actions (Button + Dropdown)">
       <div class="shw-component-sim-side-nav-header">
         <Hds::SideNav::Header>
           <:logo>
@@ -601,26 +601,6 @@
   </Shw::Flex>
 </section>
 
-<Shw::Divider @level={{2}} />
-
-<section data-test-percy>
-  {{! TODO: Once IconButton is fully deprecated, remove from examples }}
-  <Shw::Text::H3>SideNav::Header::IconButton (deprecated)</Shw::Text::H3>
-
-  <Shw::Text::H4>States</Shw::Text::H4>
-  <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
-      {{#each states as |state|}}
-        <SF.Item @label={{state}}>
-          <div class="shw-component-sim-side-nav-elem-wrapper">
-            <Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" mock-state-value={{state}} />
-          </div>
-        </SF.Item>
-      {{/each}}
-    {{/let}}
-  </Shw::Flex>
-</section>
-
 <Shw::Divider />
 
 <section data-test-percy>

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" />`,

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' },
   ],
 });