@hashicorp/design-system-components 2.4.3 → 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
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
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
|
+
|
|
3
9
|
## 2.4.3
|
|
4
10
|
|
|
5
11
|
### 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
|
}
|