chore: rename class hds-app-side-nav-hide-when-minimized -> hds-app-side-nav--hide-when-minimized

shleewhite · shleewhite · commit 3b3850fb6552 · 2025-05-13T14:10:24.000-04:00
diff --git a/packages/components/src/components/hds/app-side-nav/index.hbs b/packages/components/src/components/hds/app-side-nav/index.hbs
@@ -27,7 +27,7 @@
       />
     {{/if}}
 
-    <div class="hds-app-side-nav__wrapper-body hds-app-side-nav-hide-when-minimized">
+    <div class="hds-app-side-nav__wrapper-body hds-app-side-nav--hide-when-minimized">
       {{~yield~}}
     </div>
   </div>
diff --git a/packages/components/src/components/hds/app-side-nav/index.ts b/packages/components/src/components/hds/app-side-nav/index.ts
@@ -186,7 +186,7 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
   @action
   didInsert(element: HTMLElement): void {
     this._containersToHide = element.querySelectorAll(
-      '.hds-app-side-nav-hide-when-minimized'
+      '.hds-app-side-nav--hide-when-minimized'
     );
     this._body = document.body;
     // Store the initial `overflow` value of `<body>` so we can reset to it
diff --git a/packages/components/src/components/hds/app-side-nav/portal/target.hbs b/packages/components/src/components/hds/app-side-nav/portal/target.hbs
@@ -8,7 +8,7 @@
     @multiple={{true}}
     @onChange={{this.panelsChanged}}
     @name={{if @targetName @targetName "hds-app-side-nav-portal-target"}}
-    class="hds-app-side-nav__content-panels hds-app-side-nav-hide-when-minimized"
+    class="hds-app-side-nav__content-panels hds-app-side-nav--hide-when-minimized"
     {{did-update this.didUpdateSubnav this._numSubnavs}}
   />
 </div>
diff --git a/packages/components/src/styles/components/app-side-nav/main.scss b/packages/components/src/styles/components/app-side-nav/main.scss
@@ -107,7 +107,7 @@
 // - hidden (immediately) when the sidenav is "minimized"
 // - shown (transitioning their opacity) when the sidenav is "expanded"
 
-.hds-app-side-nav-hide-when-minimized {
+.hds-app-side-nav--hide-when-minimized {
   .hds-app-side-nav--is-minimized & {
     visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
     opacity: 0;
diff --git a/showcase/tests/integration/components/hds/app-side-nav/index-test.js b/showcase/tests/integration/components/hds/app-side-nav/index-test.js
@@ -143,7 +143,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
     await render(hbs`<style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
 <Hds::AppSideNav id='test-app-side-nav'>
   <span id='test-app-side-nav-body' />
-  <span class='hds-app-side-nav-hide-when-minimized' />
+  <span class='hds-app-side-nav--hide-when-minimized' />
 </Hds::AppSideNav>`);
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
     await click('.hds-app-side-nav__toggle-button');
@@ -153,7 +153,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
 
     await triggerKeyEvent('#test-app-side-nav', 'keydown', 'Escape');
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
-    assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
+    assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
   });
 
   // COLLAPSIBLE
@@ -178,7 +178,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   test('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) {
     await render(hbs`<Hds::AppSideNav @isCollapsible={{true}} id='test-app-side-nav'>
   <span id='test-app-side-nav-body' />
-  <span class='hds-app-side-nav-hide-when-minimized' />
+  <span class='hds-app-side-nav--hide-when-minimized' />
 </Hds::AppSideNav>`);
     assert
       .dom('#test-app-side-nav')
@@ -190,7 +190,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
       .dom('.hds-app-side-nav__toggle-button .hds-icon')
       .hasClass('hds-icon-chevrons-left');
     assert
-      .dom('.hds-app-side-nav-hide-when-minimized')
+      .dom('.hds-app-side-nav--hide-when-minimized')
       .doesNotHaveAttribute('inert');
     assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert');
     assert.dom('body', document).doesNotHaveStyle('overflow');
@@ -204,7 +204,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
     assert
       .dom('.hds-app-side-nav__toggle-button .hds-icon')
       .hasClass('hds-icon-chevrons-right');
-    assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
+    assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
     assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert');
     assert.dom('body', document).doesNotHaveStyle('overflow');
   });
@@ -222,7 +222,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   @onDesktopViewportChange={{this.onDesktopViewportChange}}
 >
   <span id='test-app-side-nav-body' />
-  <span class='hds-app-side-nav-hide-when-minimized' />
+  <span class='hds-app-side-nav--hide-when-minimized' />
 </Hds::AppSideNav>`);
 
     assert.strictEqual(calls.length, 1, 'called with initial viewport');
@@ -234,7 +234,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
       'resizing to mobile triggers a false event'
     );
 
-    assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
+    assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
   });
 
   test('when collapsed and the viewport changes from mobile to desktop, it automatically expands and is no longer inert', async function (assert) {
@@ -250,19 +250,19 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   @onDesktopViewportChange={{this.onDesktopViewportChange}}
 >
   <span id='test-app-side-nav-body' />
-  <span class='hds-app-side-nav-hide-when-minimized' />
+  <span class='hds-app-side-nav--hide-when-minimized' />
 </Hds::AppSideNav>`);
 
     await click('.hds-app-side-nav__toggle-button');
-    assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
+    assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
 
     await this.changeBrowserSize(false);
     assert.deepEqual(
       calls[1],
       [false],
       'resizing to mobile triggers a false event'
     );
-    assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
+    assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
 
     await this.changeBrowserSize(true);
     assert.deepEqual(
@@ -271,7 +271,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
       'resizing to desktop triggers a true event'
     );
     assert
-      .dom('.hds-app-side-nav-hide-when-minimized')
+      .dom('.hds-app-side-nav--hide-when-minimized')
       .doesNotHaveAttribute('inert');
     assert.dom('body', document).doesNotHaveStyle('overflow');
   });
@@ -289,7 +289,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   @onDesktopViewportChange={{this.onDesktopViewportChange}}
 >
   <span id='test-app-side-nav-body' />
-  <span class='hds-app-side-nav-hide-when-minimized' />
+  <span class='hds-app-side-nav--hide-when-minimized' />
 </Hds::AppSideNav>`);
     await this.changeBrowserSize(false);
     assert.deepEqual(
@@ -321,7 +321,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   @onDesktopViewportChange={{this.onDesktopViewportChange}}
 >
   <span id='test-app-side-nav-body' />
-  <span class='hds-app-side-nav-hide-when-minimized' />
+  <span class='hds-app-side-nav--hide-when-minimized' />
 </Hds::AppSideNav><button id='button-2'>Click</button>`);
 
     await click('.hds-app-side-nav__toggle-button');
