Skip to content

Commit ffb7563

Browse files
author
shleewhite
committed
chore: refactor how content is marked as inert
1 parent 8dd5c5b commit ffb7563

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
@@ -34,7 +34,7 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
3434
private _body!: HTMLElement;
3535
private _bodyInitialOverflowValue = '';
3636
private _desktopMQ: MediaQueryList;
37-
private _containersToHide!: NodeListOf<Element>;
37+
private _navWrapperBody!: HTMLElement;
3838

3939
// we use the `lg` breakpoint for `desktop` viewports, but consumers can override its value
4040
private _desktopMQVal = this.args.breakpoint ?? hdsBreakpoints['lg'].px;
@@ -123,13 +123,11 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
123123
}
124124

125125
synchronizeInert(): void {
126-
this._containersToHide?.forEach((element): void => {
127-
if (this._isMinimized) {
128-
element.setAttribute('inert', '');
129-
} else {
130-
element.removeAttribute('inert');
131-
}
132-
});
126+
if (this._isMinimized) {
127+
this._navWrapperBody?.setAttribute('inert', '');
128+
} else {
129+
this._navWrapperBody?.removeAttribute('inert');
130+
}
133131
}
134132

135133
lockBodyScroll(): void {
@@ -186,16 +184,18 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
186184
}
187185

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

194+
@action
195+
didInsertNavWrapperBody(element: HTMLElement): void {
196+
this._navWrapperBody = element;
197+
}
198+
199199
@action
200200
setTransition(phase: string, event: TransitionEvent): void {
201201
// 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
@@ -156,7 +156,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
156156
test('it collapses when the ESC key is pressed on narrow viewports', async function (assert) {
157157
await render(hbs`<Hds::AppSideNav id='test-app-side-nav' @breakpoint='10000px'>
158158
<span id='test-app-side-nav-body' />
159-
<span class='hds-app-side-nav--hide-when-minimized' />
160159
</Hds::AppSideNav>`);
161160
assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
162161
await click('.hds-app-side-nav__toggle-button');
@@ -166,7 +165,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
166165

167166
await triggerKeyEvent('#test-app-side-nav', 'keydown', 'Escape');
168167
assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
169-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
168+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
170169
});
171170

172171
// COLLAPSIBLE
@@ -191,7 +190,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
191190
test('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) {
192191
await render(hbs`<Hds::AppSideNav @isCollapsible={{true}} id='test-app-side-nav'>
193192
<span id='test-app-side-nav-body' />
194-
<span class='hds-app-side-nav--hide-when-minimized' />
195193
</Hds::AppSideNav>`);
196194
assert
197195
.dom('#test-app-side-nav')
@@ -202,9 +200,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
202200
assert
203201
.dom('.hds-app-side-nav__toggle-button .hds-icon')
204202
.hasClass('hds-icon-chevrons-left');
205-
assert
206-
.dom('.hds-app-side-nav--hide-when-minimized')
207-
.doesNotHaveAttribute('inert');
203+
assert.dom('.hds-app-side-nav__wrapper-body').doesNotHaveAttribute('inert');
208204
assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert');
209205
assert.dom('body', document).doesNotHaveStyle('overflow');
210206

@@ -217,8 +213,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
217213
assert
218214
.dom('.hds-app-side-nav__toggle-button .hds-icon')
219215
.hasClass('hds-icon-chevrons-right');
220-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
221-
assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert');
216+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
222217
assert.dom('body', document).doesNotHaveStyle('overflow');
223218
});
224219

@@ -235,7 +230,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
235230
@onDesktopViewportChange={{this.onDesktopViewportChange}}
236231
>
237232
<span id='test-app-side-nav-body' />
238-
<span class='hds-app-side-nav--hide-when-minimized' />
239233
</Hds::AppSideNav>`);
240234

241235
assert.strictEqual(calls.length, 1, 'called with initial viewport');
@@ -247,7 +241,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
247241
'resizing to mobile triggers a false event'
248242
);
249243

250-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
244+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
251245
});
252246

253247
test('when collapsed and the viewport changes from mobile to desktop, it automatically expands and is no longer inert', async function (assert) {
@@ -263,29 +257,26 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
263257
@onDesktopViewportChange={{this.onDesktopViewportChange}}
264258
>
265259
<span id='test-app-side-nav-body' />
266-
<span class='hds-app-side-nav--hide-when-minimized' />
267260
</Hds::AppSideNav>`);
268261

269262
await click('.hds-app-side-nav__toggle-button');
270-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
263+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
271264

272265
await this.changeBrowserSize(false);
273266
assert.deepEqual(
274267
calls[1],
275268
[false],
276269
'resizing to mobile triggers a false event'
277270
);
278-
assert.dom('.hds-app-side-nav--hide-when-minimized').hasAttribute('inert');
271+
assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
279272

280273
await this.changeBrowserSize(true);
281274
assert.deepEqual(
282275
calls[2],
283276
[true],
284277
'resizing to desktop triggers a true event'
285278
);
286-
assert
287-
.dom('.hds-app-side-nav--hide-when-minimized')
288-
.doesNotHaveAttribute('inert');
279+
assert.dom('.hds-app-side-nav__wrapper-body').doesNotHaveAttribute('inert');
289280
assert.dom('body', document).doesNotHaveStyle('overflow');
290281
});
291282

@@ -302,7 +293,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
302293
@onDesktopViewportChange={{this.onDesktopViewportChange}}
303294
>
304295
<span id='test-app-side-nav-body' />
305-
<span class='hds-app-side-nav--hide-when-minimized' />
306296
</Hds::AppSideNav>`);
307297
await this.changeBrowserSize(false);
308298
assert.deepEqual(
@@ -334,7 +324,6 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
334324
@onDesktopViewportChange={{this.onDesktopViewportChange}}
335325
>
336326
<span id='test-app-side-nav-body' />
337-
<span class='hds-app-side-nav--hide-when-minimized' />
338327
</Hds::AppSideNav><button id='button-2'>Click</button>`);
339328

340329
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)