Skip to content

Commit 3b3850f

Browse files
author
shleewhite
committed
chore: rename class hds-app-side-nav-hide-when-minimized -> hds-app-side-nav--hide-when-minimized
1 parent ed2f77a commit 3b3850f

File tree

5 files changed

+17
-17
lines changed

5 files changed

+17
-17
lines changed

‎packages/components/src/components/hds/app-side-nav/index.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
/>
2828
{{/if}}
2929

30-
<div class="hds-app-side-nav__wrapper-body hds-app-side-nav-hide-when-minimized">
30+
<div class="hds-app-side-nav__wrapper-body hds-app-side-nav--hide-when-minimized">
3131
{{~yield~}}
3232
</div>
3333
</div>

‎packages/components/src/components/hds/app-side-nav/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
186186
@action
187187
didInsert(element: HTMLElement): void {
188188
this._containersToHide = element.querySelectorAll(
189-
'.hds-app-side-nav-hide-when-minimized'
189+
'.hds-app-side-nav--hide-when-minimized'
190190
);
191191
this._body = document.body;
192192
// Store the initial `overflow` value of `<body>` so we can reset to it

‎packages/components/src/components/hds/app-side-nav/portal/target.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@multiple={{true}}
99
@onChange={{this.panelsChanged}}
1010
@name={{if @targetName @targetName "hds-app-side-nav-portal-target"}}
11-
class="hds-app-side-nav__content-panels hds-app-side-nav-hide-when-minimized"
11+
class="hds-app-side-nav__content-panels hds-app-side-nav--hide-when-minimized"
1212
{{did-update this.didUpdateSubnav this._numSubnavs}}
1313
/>
1414
</div>

‎packages/components/src/styles/components/app-side-nav/main.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
// - hidden (immediately) when the sidenav is "minimized"
108108
// - shown (transitioning their opacity) when the sidenav is "expanded"
109109

110-
.hds-app-side-nav-hide-when-minimized {
110+
.hds-app-side-nav--hide-when-minimized {
111111
.hds-app-side-nav--is-minimized & {
112112
visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
113113
opacity: 0;

‎showcase/tests/integration/components/hds/app-side-nav/index-test.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
143143
await render(hbs`<style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
144144
<Hds::AppSideNav id='test-app-side-nav'>
145145
<span id='test-app-side-nav-body' />
146-
<span class='hds-app-side-nav-hide-when-minimized' />
146+
<span class='hds-app-side-nav--hide-when-minimized' />
147147
</Hds::AppSideNav>`);
148148
assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
149149
await click('.hds-app-side-nav__toggle-button');
@@ -153,7 +153,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
153153

154154
await triggerKeyEvent('#test-app-side-nav', 'keydown', 'Escape');
155155
assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
156-
assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
156+
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
157157
});
158158

159159
// COLLAPSIBLE
@@ -178,7 +178,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
178178
test('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) {
179179
await render(hbs`<Hds::AppSideNav @isCollapsible={{true}} id='test-app-side-nav'>
180180
<span id='test-app-side-nav-body' />
181-
<span class='hds-app-side-nav-hide-when-minimized' />
181+
<span class='hds-app-side-nav--hide-when-minimized' />
182182
</Hds::AppSideNav>`);
183183
assert
184184
.dom('#test-app-side-nav')
@@ -190,7 +190,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
190190
.dom('.hds-app-side-nav__toggle-button .hds-icon')
191191
.hasClass('hds-icon-chevrons-left');
192192
assert
193-
.dom('.hds-app-side-nav-hide-when-minimized')
193+
.dom('.hds-app-side-nav--hide-when-minimized')
194194
.doesNotHaveAttribute('inert');
195195
assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert');
196196
assert.dom('body', document).doesNotHaveStyle('overflow');
@@ -204,7 +204,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
204204
assert
205205
.dom('.hds-app-side-nav__toggle-button .hds-icon')
206206
.hasClass('hds-icon-chevrons-right');
207-
assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
207+
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
208208
assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert');
209209
assert.dom('body', document).doesNotHaveStyle('overflow');
210210
});
@@ -222,7 +222,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
222222
@onDesktopViewportChange={{this.onDesktopViewportChange}}
223223
>
224224
<span id='test-app-side-nav-body' />
225-
<span class='hds-app-side-nav-hide-when-minimized' />
225+
<span class='hds-app-side-nav--hide-when-minimized' />
226226
</Hds::AppSideNav>`);
227227

228228
assert.strictEqual(calls.length, 1, 'called with initial viewport');
@@ -234,7 +234,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
234234
'resizing to mobile triggers a false event'
235235
);
236236

237-
assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
237+
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
238238
});
239239

240240
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) {
250250
@onDesktopViewportChange={{this.onDesktopViewportChange}}
251251
>
252252
<span id='test-app-side-nav-body' />
253-
<span class='hds-app-side-nav-hide-when-minimized' />
253+
<span class='hds-app-side-nav--hide-when-minimized' />
254254
</Hds::AppSideNav>`);
255255

256256
await click('.hds-app-side-nav__toggle-button');
257-
assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
257+
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
258258

259259
await this.changeBrowserSize(false);
260260
assert.deepEqual(
261261
calls[1],
262262
[false],
263263
'resizing to mobile triggers a false event'
264264
);
265-
assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert');
265+
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
266266

267267
await this.changeBrowserSize(true);
268268
assert.deepEqual(
@@ -271,7 +271,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
271271
'resizing to desktop triggers a true event'
272272
);
273273
assert
274-
.dom('.hds-app-side-nav-hide-when-minimized')
274+
.dom('.hds-app-side-nav--hide-when-minimized')
275275
.doesNotHaveAttribute('inert');
276276
assert.dom('body', document).doesNotHaveStyle('overflow');
277277
});
@@ -289,7 +289,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
289289
@onDesktopViewportChange={{this.onDesktopViewportChange}}
290290
>
291291
<span id='test-app-side-nav-body' />
292-
<span class='hds-app-side-nav-hide-when-minimized' />
292+
<span class='hds-app-side-nav--hide-when-minimized' />
293293
</Hds::AppSideNav>`);
294294
await this.changeBrowserSize(false);
295295
assert.deepEqual(
@@ -321,7 +321,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
321321
@onDesktopViewportChange={{this.onDesktopViewportChange}}
322322
>
323323
<span id='test-app-side-nav-body' />
324-
<span class='hds-app-side-nav-hide-when-minimized' />
324+
<span class='hds-app-side-nav--hide-when-minimized' />
325325
</Hds::AppSideNav><button id='button-2'>Click</button>`);
326326

327327
await click('.hds-app-side-nav__toggle-button');

0 commit comments

Comments
 (0)