Skip to content

Commit aadb23b

Browse files
author
shleewhite
committed
chore: refactor how content is marked as inert
1 parent 32362be commit aadb23b

File tree

6 files changed

+26
-44
lines changed

6 files changed

+26
-44
lines changed

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

+1-1
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" {{did-insert this.didInsertNavWrapperBody}}>
3131
{{~yield~}}
3232
</div>
3333
</div>

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

+12-12
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
3131
private _body!: HTMLElement;
3232
private _bodyInitialOverflowValue = '';
3333
private _desktopMQ: MediaQueryList;
34-
private _containersToHide!: NodeListOf<Element>;
34+
private _navWrapperBody!: HTMLElement;
3535

3636
private _desktopMQVal = getComputedStyle(
3737
document.documentElement
@@ -121,13 +121,11 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
121121
}
122122

123123
synchronizeInert(): void {
124-
this._containersToHide?.forEach((element): void => {
125-
if (this._isMinimized) {
126-
element.setAttribute('inert', '');
127-
} else {
128-
element.removeAttribute('inert');
129-
}
130-
});
124+
if (this._isMinimized) {
125+
this._navWrapperBody?.setAttribute('inert', '');
126+
} else {
127+
this._navWrapperBody?.removeAttribute('inert');
128+
}
131129
}
132130

133131
lockBodyScroll(): void {
@@ -184,16 +182,18 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
184182
}
185183

186184
@action
187-
didInsert(element: HTMLElement): void {
188-
this._containersToHide = element.querySelectorAll(
189-
'.hds-app-side-nav--hide-when-minimized'
190-
);
185+
didInsert(): void {
191186
this._body = document.body;
192187
// Store the initial `overflow` value of `<body>` so we can reset to it
193188
this._bodyInitialOverflowValue =
194189
this._body.style.getPropertyValue('overflow');
195190
}
196191

192+
@action
193+
didInsertNavWrapperBody(element: HTMLElement): void {
194+
this._navWrapperBody = element;
195+
}
196+
197197
@action
198198
setTransition(phase: string, event: TransitionEvent): void {
199199
// we only want to respond to `width` animation/transitions

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

+1-1
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"
1212
{{did-update this.didUpdateSubnav this._numSubnavs}}
1313
/>
1414
</div>

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,7 @@
102102
overflow-y: auto;
103103
}
104104

105-
// "HIDE-WHEN-MINIMIZED" SPECIAL CLASS
106-
// this is a special class that is used to control which elements of the sidenav need to be:
107-
// - hidden (immediately) when the sidenav is "minimized"
108-
// - shown (transitioning their opacity) when the sidenav is "expanded"
109-
110-
.hds-app-side-nav--hide-when-minimized {
105+
.hds-app-side-nav__wrapper-body {
111106
.hds-app-side-nav--is-minimized & {
112107
visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
113108
opacity: 0;

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

+7-18
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,6 @@ 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' />
147146
</Hds::AppSideNav>`);
148147
assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
149148
await click('.hds-app-side-nav__toggle-button');
@@ -153,7 +152,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
153152

154153
await triggerKeyEvent('#test-app-side-nav', 'keydown', 'Escape');
155154
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');
155+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
157156
});
158157

159158
// COLLAPSIBLE
@@ -178,7 +177,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
178177
test('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) {
179178
await render(hbs`<Hds::AppSideNav @isCollapsible={{true}} id='test-app-side-nav'>
180179
<span id='test-app-side-nav-body' />
181-
<span class='hds-app-side-nav--hide-when-minimized' />
182180
</Hds::AppSideNav>`);
183181
assert
184182
.dom('#test-app-side-nav')
@@ -189,9 +187,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
189187
assert
190188
.dom('.hds-app-side-nav__toggle-button .hds-icon')
191189
.hasClass('hds-icon-chevrons-left');
192-
assert
193-
.dom('.hds-app-side-nav--hide-when-minimized')
194-
.doesNotHaveAttribute('inert');
190+
assert.dom('.hds-app-side-nav__wrapper-body').doesNotHaveAttribute('inert');
195191
assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert');
196192
assert.dom('body', document).doesNotHaveStyle('overflow');
197193

@@ -204,8 +200,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
204200
assert
205201
.dom('.hds-app-side-nav__toggle-button .hds-icon')
206202
.hasClass('hds-icon-chevrons-right');
207-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
208-
assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert');
203+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
209204
assert.dom('body', document).doesNotHaveStyle('overflow');
210205
});
211206

@@ -222,7 +217,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
222217
@onDesktopViewportChange={{this.onDesktopViewportChange}}
223218
>
224219
<span id='test-app-side-nav-body' />
225-
<span class='hds-app-side-nav--hide-when-minimized' />
226220
</Hds::AppSideNav>`);
227221

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

237-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
231+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
238232
});
239233

240234
test('when collapsed and the viewport changes from mobile to desktop, it automatically expands and is no longer inert', async function (assert) {
@@ -250,29 +244,26 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
250244
@onDesktopViewportChange={{this.onDesktopViewportChange}}
251245
>
252246
<span id='test-app-side-nav-body' />
253-
<span class='hds-app-side-nav--hide-when-minimized' />
254247
</Hds::AppSideNav>`);
255248

256249
await click('.hds-app-side-nav__toggle-button');
257-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
250+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
258251

259252
await this.changeBrowserSize(false);
260253
assert.deepEqual(
261254
calls[1],
262255
[false],
263256
'resizing to mobile triggers a false event'
264257
);
265-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
258+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
266259

267260
await this.changeBrowserSize(true);
268261
assert.deepEqual(
269262
calls[2],
270263
[true],
271264
'resizing to desktop triggers a true event'
272265
);
273-
assert
274-
.dom('.hds-app-side-nav--hide-when-minimized')
275-
.doesNotHaveAttribute('inert');
266+
assert.dom('.hds-app-side-nav__wrapper-body').doesNotHaveAttribute('inert');
276267
assert.dom('body', document).doesNotHaveStyle('overflow');
277268
});
278269

@@ -289,7 +280,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
289280
@onDesktopViewportChange={{this.onDesktopViewportChange}}
290281
>
291282
<span id='test-app-side-nav-body' />
292-
<span class='hds-app-side-nav--hide-when-minimized' />
293283
</Hds::AppSideNav>`);
294284
await this.changeBrowserSize(false);
295285
assert.deepEqual(
@@ -321,7 +311,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
321311
@onDesktopViewportChange={{this.onDesktopViewportChange}}
322312
>
323313
<span id='test-app-side-nav-body' />
324-
<span class='hds-app-side-nav--hide-when-minimized' />
325314
</Hds::AppSideNav><button id='button-2'>Click</button>`);
326315

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

‎website/docs/components/app-side-nav/partials/code/how-to-use.md

+4-6
Original file line numberDiff line numberDiff line change
@@ -201,18 +201,16 @@ Each one of these states has CSS class names associated, and they’re used by t
201201

202202
The App Side Nav component **automatically**:
203203

204-
- fades in/out the “actions” block in the header and the content injected in the body via “portals”.
204+
- fades in/out the the content in the navigation
205205
- swaps the toggle button icon from “menu” to “close” and moves it from one position to another
206206

207-
Any other content in the App Side Nav needs to be **explicitly handled** by the consumers (in this way they have full control of the content they add, and they can customize the transition as they want/need).
208-
209-
One possible way to do it is to use the **`hds-app-side-nav--hide-when-minimized` class**. This is a special class that can be applied to a DOM element so that it **automatically** fades in/out when the App Side Nav changes its “minimization” state.
210-
211-
More specifically:
207+
More specifically, the animation is:
212208

213209
- `minimized → maximized` transition: the content appears with a fade-in effect, when the width animation is already completed (the width is maximized)
214210
- `maximized → minimized` transition: the content disappears at once with no transition, before the width animation starts
215211

212+
Any other content in the App Side Nav needs to be **explicitly handled** by the consumers (in this way they have full control of the content they add, and they can customize the transition as they want/need).
213+
216214
#### Advanced customization
217215

218216
Some aspects of the responsiveness/animation/transition of the App Side Nav are parameterized in code via CSS custom properties. It means that _in theory_ they could be customized/overwritten. This though is **something that we don’t recommend**.

0 commit comments

Comments
 (0)