@hashicorp/design-system-components 2.4.2 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/addon/components/hds/breadcrumb/truncation.js +5 -0
- package/addon/components/hds/dismiss-button/index.js +5 -0
- package/addon/components/hds/flyout/index.js +16 -1
- package/addon/components/hds/modal/index.js +16 -1
- package/addon/components/hds/side-nav/index.hbs +7 -1
- package/addon/components/hds/side-nav/index.js +17 -0
- package/addon/components/hds/side-nav/portal/index.hbs +1 -1
- package/addon/components/hds/side-nav/portal/target.hbs +1 -1
- package/app/styles/components/side-nav/content.scss +1 -1
- package/app/styles/components/side-nav/main.scss +6 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @hashicorp/design-system-components
|
|
2
2
|
|
|
3
|
+
## 2.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1391](https://github.com/hashicorp/design-system/pull/1391) [`0a7c53886`](https://github.com/hashicorp/design-system/commit/0a7c5388643f95891082dde2b27b66716372b514) Thanks [@alex-ju](https://github.com/alex-ju)! - Embed page scroll management into the `Modal` and `Flyout` components
|
|
8
|
+
|
|
9
|
+
## 2.4.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#1388](https://github.com/hashicorp/design-system/pull/1388) [`56a6b94df`](https://github.com/hashicorp/design-system/commit/56a6b94dfa337a887153e39393ed2a2bb1b93774) Thanks [@didoo](https://github.com/didoo)! - Fixed `SideNav` issue with content resizing when transitioning its `width`
|
|
14
|
+
|
|
3
15
|
## 2.4.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -60,8 +60,15 @@ export default class HdsFlyoutIndexComponent extends Component {
|
|
|
60
60
|
|
|
61
61
|
@action
|
|
62
62
|
didInsert(element) {
|
|
63
|
-
// Store
|
|
63
|
+
// Store references of `<dialog>` and `<body>` elements
|
|
64
64
|
this.element = element;
|
|
65
|
+
this.body = document.body;
|
|
66
|
+
|
|
67
|
+
if (this.body) {
|
|
68
|
+
// Store the initial `overflow` value of `<body>` so we can reset to it
|
|
69
|
+
this.bodyInitialOverflowValue =
|
|
70
|
+
this.body.style.getPropertyValue('overflow');
|
|
71
|
+
}
|
|
65
72
|
|
|
66
73
|
// Register `<dialog>` element for polyfilling if no native support is available
|
|
67
74
|
if (!element.showModal) {
|
|
@@ -98,6 +105,9 @@ export default class HdsFlyoutIndexComponent extends Component {
|
|
|
98
105
|
this.element.showModal();
|
|
99
106
|
this.isOpen = true;
|
|
100
107
|
|
|
108
|
+
// Prevent page from scrolling when the dialog is open
|
|
109
|
+
if (this.body) this.body.style.setProperty('overflow', 'hidden');
|
|
110
|
+
|
|
101
111
|
// Call "onOpen" callback function
|
|
102
112
|
if (this.args.onOpen && typeof this.args.onOpen === 'function') {
|
|
103
113
|
this.args.onOpen();
|
|
@@ -108,5 +118,10 @@ export default class HdsFlyoutIndexComponent extends Component {
|
|
|
108
118
|
onDismiss() {
|
|
109
119
|
// Make flyout dialog invisible using the native `close` method
|
|
110
120
|
this.element.close();
|
|
121
|
+
|
|
122
|
+
// Reset page `overflow` property
|
|
123
|
+
if (this.body) {
|
|
124
|
+
this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
|
|
125
|
+
}
|
|
111
126
|
}
|
|
112
127
|
}
|
|
@@ -86,8 +86,15 @@ export default class HdsModalIndexComponent extends Component {
|
|
|
86
86
|
|
|
87
87
|
@action
|
|
88
88
|
didInsert(element) {
|
|
89
|
-
// Store
|
|
89
|
+
// Store references of `<dialog>` and `<body>` elements
|
|
90
90
|
this.element = element;
|
|
91
|
+
this.body = document.body;
|
|
92
|
+
|
|
93
|
+
if (this.body) {
|
|
94
|
+
// Store the initial `overflow` value of `<body>` so we can reset to it
|
|
95
|
+
this.bodyInitialOverflowValue =
|
|
96
|
+
this.body.style.getPropertyValue('overflow');
|
|
97
|
+
}
|
|
91
98
|
|
|
92
99
|
// Register `<dialog>` element for polyfilling if no native support is available
|
|
93
100
|
if (!element.showModal) {
|
|
@@ -135,6 +142,9 @@ export default class HdsModalIndexComponent extends Component {
|
|
|
135
142
|
this.element.showModal();
|
|
136
143
|
this.isOpen = true;
|
|
137
144
|
|
|
145
|
+
// Prevent page from scrolling when the dialog is open
|
|
146
|
+
if (this.body) this.body.style.setProperty('overflow', 'hidden');
|
|
147
|
+
|
|
138
148
|
// Call "onOpen" callback function
|
|
139
149
|
if (this.args.onOpen && typeof this.args.onOpen === 'function') {
|
|
140
150
|
this.args.onOpen();
|
|
@@ -145,5 +155,10 @@ export default class HdsModalIndexComponent extends Component {
|
|
|
145
155
|
onDismiss() {
|
|
146
156
|
// Make modal dialog invisible using the native `close` method
|
|
147
157
|
this.element.close();
|
|
158
|
+
|
|
159
|
+
// Reset page `overflow` property
|
|
160
|
+
if (this.body) {
|
|
161
|
+
this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
|
|
162
|
+
}
|
|
148
163
|
}
|
|
149
164
|
}
|
|
@@ -3,7 +3,13 @@
|
|
|
3
3
|
SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
}}
|
|
5
5
|
|
|
6
|
-
<Hds::SideNav::Base
|
|
6
|
+
<Hds::SideNav::Base
|
|
7
|
+
class={{this.classNames}}
|
|
8
|
+
...attributes
|
|
9
|
+
{{on "transitionstart" (fn this.setTransition "start")}}
|
|
10
|
+
{{on "transitionend" (fn this.setTransition "end")}}
|
|
11
|
+
{{focus-trap isActive=this.shouldTrapFocus}}
|
|
12
|
+
>
|
|
7
13
|
<:root>
|
|
8
14
|
{{#if this.hasA11yRefocus}}
|
|
9
15
|
<NavigationNarrator
|
|
@@ -12,6 +12,7 @@ import { registerDestructor } from '@ember/destroyable';
|
|
|
12
12
|
export default class HdsSideNavComponent extends Component {
|
|
13
13
|
@tracked isResponsive = this.args.isResponsive ?? true;
|
|
14
14
|
@tracked isMinimized = this.isResponsive; // we set it minimized by default so that if we switch viewport from desktop to mobile its already minimized
|
|
15
|
+
@tracked isAnimating = false;
|
|
15
16
|
@tracked isDesktop = true;
|
|
16
17
|
hasA11yRefocus = this.args.hasA11yRefocus ?? true;
|
|
17
18
|
|
|
@@ -84,6 +85,9 @@ export default class HdsSideNavComponent extends Component {
|
|
|
84
85
|
} else {
|
|
85
86
|
classes.push('hds-side-nav--is-not-minimized');
|
|
86
87
|
}
|
|
88
|
+
if (this.isAnimating) {
|
|
89
|
+
classes.push('hds-side-nav--is-animating');
|
|
90
|
+
}
|
|
87
91
|
|
|
88
92
|
return classes.join(' ');
|
|
89
93
|
}
|
|
@@ -106,6 +110,19 @@ export default class HdsSideNavComponent extends Component {
|
|
|
106
110
|
}
|
|
107
111
|
}
|
|
108
112
|
|
|
113
|
+
@action
|
|
114
|
+
setTransition(phase, event) {
|
|
115
|
+
// we only want to respond to `width` animation/transitions
|
|
116
|
+
if (event.propertyName !== 'width') {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
if (phase === 'start') {
|
|
120
|
+
this.isAnimating = true;
|
|
121
|
+
} else {
|
|
122
|
+
this.isAnimating = false;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
109
126
|
@action
|
|
110
127
|
updateDesktopVariable(event) {
|
|
111
128
|
this.isDesktop = event.matches;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
}}
|
|
5
5
|
|
|
6
6
|
<Portal @target={{if @targetName @targetName "hds-side-nav-portal-target"}}>
|
|
7
|
-
<div class="hds-side-nav__content-panel
|
|
7
|
+
<div class="hds-side-nav__content-panel" ...attributes>
|
|
8
8
|
<Hds::SideNav::List aria-label={{@ariaLabel}} as |ListElements|>
|
|
9
9
|
{{yield ListElements}}
|
|
10
10
|
</Hds::SideNav::List>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
@multiple={{true}}
|
|
9
9
|
@onChange={{this.panelsChanged}}
|
|
10
10
|
@name={{if @targetName @targetName "hds-side-nav-portal-target"}}
|
|
11
|
-
class="hds-side-nav__content-panels"
|
|
11
|
+
class="hds-side-nav__content-panels hds-side-nav-hide-when-minimized"
|
|
12
12
|
{{did-update this.didUpdateSubnav this.numSubnavs}}
|
|
13
13
|
/>
|
|
14
14
|
</div>
|
|
@@ -202,5 +202,10 @@
|
|
|
202
202
|
var(--hds-app-sidenav-animation-easing)
|
|
203
203
|
var(--hds-app-sidenav-animation-delay);
|
|
204
204
|
}
|
|
205
|
-
}
|
|
206
205
|
|
|
206
|
+
// we want to avoid accidental interactions with the navigation elements while the sidenav is animating its width
|
|
207
|
+
// (elements with `visibility: visible` can already be interacted with, while their opacity is transitioning)
|
|
208
|
+
.hds-side-nav--is-animating & {
|
|
209
|
+
pointer-events: none;
|
|
210
|
+
}
|
|
211
|
+
}
|