SideNav - Deprecate SideNav::Header::IconButton (HDS-3770 )

.changeset/new-teachers-pay.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Hds::SideNav::Header::IconButton` - Deprecate the component. Use the `Hds::Button` component with `isIconOnly` set to `true` as a replacement.

packages/components/src/components/hds/side-nav/header/icon-button.hbs

@@ -2,7 +2,9 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-
+{{!
+  THIS SUBCOMPONENT IS NOW DEPRECATED
+}}
 <Hds::Interactive
   class="hds-side-nav__icon-button"
   @current-when={{@current-when}}

packages/components/src/components/hds/side-nav/header/icon-button.ts

@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
 
 import type { HdsIconSignature } from '../../icon';
 import type { HdsInteractiveSignature } from '../../interactive/';
@@ -18,11 +18,27 @@ interface HdsSideNavHeaderIconButtonSignature {
 }
 
 export default class HdsSideNavHeaderIconButtonComponent extends Component<HdsSideNavHeaderIconButtonSignature> {
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @description The value of `aria-label`
-   */
+  constructor(
+    owner: unknown,
+    args: HdsSideNavHeaderIconButtonSignature['Args']
+  ) {
+    super(owner, args);
+
+    deprecate(
+      'The `Hds::SideNav::Header::IconButton` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::Button` with the `isIconOnly` variant instead.',
+      false,
+      {
+        id: 'hds.components.sidenav.header.iconbutton',
+        until: '5.0.0',
+        url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4100',
+        for: '@hashicorp/design-system-components',
+        since: {
+          enabled: '4.10.0',
+        },
+      }
+    );
+  }
+
   get ariaLabel(): string {
     const { ariaLabel } = this.args;
 

showcase/app/routes/components/side-nav.js

@@ -5,4 +5,26 @@
 
 import Route from '@ember/routing/route';
 
-export default class ComponentsSideNavRoute extends Route {}
+import { COLORS as DROPDOWN_TOGGLE_BUTTON_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/toggle/button';
+import { COLORS as DROPDOWN_ITEM_INTERACTIVE_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/interactive';
+
+export default class ComponentsSideNavRoute extends Route {
+  model() {
+    // these are used only for presentation purpose in the showcase
+    const DROPDOWN_TOGGLE_STATES = [
+      'default',
+      'hover',
+      'active',
+      'focus',
+      'disabled',
+    ];
+    const DROPDOWN_ITEM_STATES = ['default', 'hover', 'active', 'focus'];
+
+    return {
+      DROPDOWN_TOGGLE_BUTTON_COLORS,
+      DROPDOWN_TOGGLE_STATES,
+      DROPDOWN_ITEM_INTERACTIVE_COLORS,
+      DROPDOWN_ITEM_STATES,
+    };
+  }
+}

showcase/app/styles/showcase-pages/side-nav.scss

@@ -8,6 +8,17 @@
 body.components-side-nav {
   $shw-component-side-nav-background: #0c0c0e;
 
+  // constrain max-width of button examples
+  .shw-component-button-examples-section {
+    .hds-side-nav:has(button) {
+      width: max-content;
+      // The heights don't make a visual difference with the current component style but if you inspect you will see that
+      // there is extra space around the button examples which could cause an unforeseen issue. So for that reason, we override the height.
+      height: auto;
+      min-height: 0;
+    }
+  }
+
   // used to simulate a "root" container for the sidenav
   .shw-component-sim-side-nav-root-container {
     height: 600px;
@@ -79,4 +90,21 @@ body.components-side-nav {
       transform: none !important;
     }
   }
+
+  .shw-component-sidenav-dropdown-states-matrix {
+    .shw-grid__item {
+      // we hide all the labels (except for the first "row")
+      &:nth-child(n + 7) {
+        .shw-label {
+          visibility: hidden;
+        }
+      }
+      // we show the labels in the first "column"
+      &:nth-child(6n + 1) {
+        .shw-label {
+          visibility: visible;
+        }
+      }
+    }
+  }
 }

showcase/app/templates/components/app-header.hbs

@@ -347,38 +347,22 @@
 
   <Shw::Text::H4>States</Shw::Text::H4>
 
-  <Shw::Text::Body>Secondary</Shw::Text::Body>
-  <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
-      {{#each states as |state|}}
-        <SF.Item @label={{state}}>
-          <div class="hds-app-header">
-            <Hds::Button
-              @color="secondary"
-              @icon="search"
-              @isIconOnly={{true}}
-              @text="Search"
-              mock-state-value={{state}}
-            />
-          </div>
-        </SF.Item>
-      {{/each}}
-    {{/let}}
-  </Shw::Flex>
-
-  <Shw::Text::Body>Primary</Shw::Text::Body>
-  <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
-      {{#each states as |state|}}
-        <SF.Item @label={{state}}>
-
-          <div class="hds-app-header">
-            <Hds::Button @icon="search" @isIconOnly={{true}} @text="Search" mock-state-value={{state}} />
-          </div>
-        </SF.Item>
-      {{/each}}
-    {{/let}}
-  </Shw::Flex>
+  {{#let (array "Primary" "Secondary") as |colors|}}
+    {{#each colors as |color|}}
+      <Shw::Text::Body>{{color}}</Shw::Text::Body>
+      <Shw::Flex as |SF|>
+        {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
+          {{#each states as |state|}}
+            <SF.Item @label={{state}}>
+              <div class="hds-app-header">
+                <Hds::Button @icon="search" @isIconOnly={{true}} @text="Search" mock-state-value={{state}} />
+              </div>
+            </SF.Item>
+          {{/each}}
+        {{/let}}
+      </Shw::Flex>
+    {{/each}}
+  {{/let}}
 
   <Shw::Divider @level="2" />