@hashicorp/design-system-components 2.7.0 → 2.7.1
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 +37 -0
- package/README.md +1 -1
- package/addon/components/hds/dropdown/list-item/checkmark.hbs +3 -3
- package/addon/components/hds/dropdown/list-item/separator.hbs +6 -1
- package/addon/components/hds/flyout/index.js +8 -1
- package/addon/components/hds/modal/index.js +8 -1
- package/addon/components/hds/side-nav/list/link.hbs +5 -3
- package/app/styles/components/alert.scss +2 -8
- package/app/styles/components/application-state.scss +1 -7
- package/app/styles/components/badge.scss +1 -4
- package/app/styles/components/button-set.scss +1 -4
- package/app/styles/components/button.scss +0 -8
- package/app/styles/components/dropdown.scss +4 -11
- package/app/styles/components/flyout.scss +1 -2
- package/app/styles/components/form/error.scss +2 -1
- package/app/styles/components/link/standalone.scss +2 -9
- package/app/styles/components/modal.scss +1 -2
- package/app/styles/components/pagination.scss +2 -9
- package/app/styles/components/side-nav/content.scss +1 -7
- package/app/styles/components/side-nav/header.scss +1 -2
- package/app/styles/components/table.scss +4 -4
- package/app/styles/components/tabs.scss +1 -8
- package/app/styles/components/tooltip.scss +1 -0
- package/app/styles/mixins/_button.scss +1 -0
- package/package.json +22 -21
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,42 @@
|
|
|
1
1
|
# @hashicorp/design-system-components
|
|
2
2
|
|
|
3
|
+
## 2.7.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1438](https://github.com/hashicorp/design-system/pull/1438) [`ae852e7f8`](https://github.com/hashicorp/design-system/commit/ae852e7f83da72c62ee7791f89ac5c4a9e6bc7c6) Thanks [@didoo](https://github.com/didoo)! - `TooltipButton` - added `text-align: inherit` to the "button" element
|
|
8
|
+
|
|
9
|
+
- [#1444](https://github.com/hashicorp/design-system/pull/1444) [`5a4d036e1`](https://github.com/hashicorp/design-system/commit/5a4d036e1dd349dfde1b1f8e278d332fac7abe7e) Thanks [@MelSumner](https://github.com/MelSumner)! - Internal accessibility tweaks for dropdown component
|
|
10
|
+
|
|
11
|
+
- [#1395](https://github.com/hashicorp/design-system/pull/1395) [`e6e0c22c5`](https://github.com/hashicorp/design-system/commit/e6e0c22c538e381f4a97428dc35cf1295ce6ae21) Thanks [@alex-ju](https://github.com/alex-ju)! - Upgraded Ember.js to latest stable release 4.12, including upgrades to:
|
|
12
|
+
|
|
13
|
+
- `ember-auto-import` from `2.6.0` to `2.6.3`
|
|
14
|
+
- `ember-cli-htmlbars` from `6.1.0` to `6.2.0`
|
|
15
|
+
|
|
16
|
+
Upgraded the following dependencies:
|
|
17
|
+
|
|
18
|
+
- `ember-focus-trap` from `1.0.1` to `1.0.2`
|
|
19
|
+
- `ember-keyboard"` from `8.1.0` to `8.2.0`
|
|
20
|
+
- `ember-truth-helpers` from `3.0.0` to `3.1.1`
|
|
21
|
+
- `sass` from `1.58.3` to `1.62.1`
|
|
22
|
+
|
|
23
|
+
Shifted our supported version of Node.js from `12.* || 14.* || >= 16` to `14.* || 16.* || >= 18`
|
|
24
|
+
|
|
25
|
+
- [#1425](https://github.com/hashicorp/design-system/pull/1425) [`921aa03b9`](https://github.com/hashicorp/design-system/commit/921aa03b95f56da21e794ee62ecc96019f5c4bb7) Thanks [@didoo](https://github.com/didoo)! - `Table` - Set `min-height` instead of `height` for the table head cells + Updated the cells' internal padding to align with the design specs in Figma
|
|
26
|
+
|
|
27
|
+
- [#1433](https://github.com/hashicorp/design-system/pull/1433) [`9aa5291d1`](https://github.com/hashicorp/design-system/commit/9aa5291d187bc867baf7c069c9dd17856cb5f79f) Thanks [@didoo](https://github.com/didoo)! - - Updated CSS code of components to use flex `gap`
|
|
28
|
+
|
|
29
|
+
- Fixed an issue with `Hds::Sidenav::Link` that was generating an empty node
|
|
30
|
+
|
|
31
|
+
This will lead to a minimal visual impact on some edge cases of `Alert/Toast` (multiple description items) and `SideNav` (text + generic content)
|
|
32
|
+
|
|
33
|
+
- [#1426](https://github.com/hashicorp/design-system/pull/1426) [`1f8886a2d`](https://github.com/hashicorp/design-system/commit/1f8886a2d5117d74a0dddd4bca4a09d9fcedc8da) Thanks [@MelSumner](https://github.com/MelSumner)! - Style tweaks to standalone link
|
|
34
|
+
|
|
35
|
+
- [#1434](https://github.com/hashicorp/design-system/pull/1434) [`eadefc4bd`](https://github.com/hashicorp/design-system/commit/eadefc4bdb4e5fd6c110a7be1d7d9aa720695678) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix scroll management on `Modal` and `Flyout` resulting in stray `style` attribute on `<body>` element
|
|
36
|
+
|
|
37
|
+
- Updated dependencies [[`e6e0c22c5`](https://github.com/hashicorp/design-system/commit/e6e0c22c538e381f4a97428dc35cf1295ce6ae21)]:
|
|
38
|
+
- @hashicorp/ember-flight-icons@3.0.6
|
|
39
|
+
|
|
3
40
|
## 2.7.0
|
|
4
41
|
|
|
5
42
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
}}
|
|
5
5
|
|
|
6
|
-
{{! template-lint-disable require-context-role require-presentational-children }}
|
|
7
|
-
<li class={{this.classNames}}>
|
|
6
|
+
{{! template-lint-disable no-invalid-role require-context-role require-presentational-children }}
|
|
7
|
+
<li class={{this.classNames}} role="none">
|
|
8
8
|
<Hds::Interactive
|
|
9
9
|
@current-when={{@current-when}}
|
|
10
10
|
@models={{hds-link-to-models @model @models}}
|
|
@@ -37,4 +37,4 @@
|
|
|
37
37
|
</span>
|
|
38
38
|
</Hds::Interactive>
|
|
39
39
|
</li>
|
|
40
|
-
{{! template-lint-enable require-context-role require-presentational-children }}
|
|
40
|
+
{{! template-lint-enable no-invalid-role require-context-role require-presentational-children }}
|
|
@@ -2,4 +2,9 @@
|
|
|
2
2
|
Copyright (c) HashiCorp, Inc.
|
|
3
3
|
SPDX-License-Identifier: MPL-2.0
|
|
4
4
|
}}
|
|
5
|
-
<li
|
|
5
|
+
<li
|
|
6
|
+
class="hds-dropdown-list-item hds-dropdown-list-item--variant-separator"
|
|
7
|
+
aria-hidden="true"
|
|
8
|
+
role="separator"
|
|
9
|
+
...attributes
|
|
10
|
+
></li>
|
|
@@ -121,7 +121,14 @@ export default class HdsFlyoutIndexComponent extends Component {
|
|
|
121
121
|
|
|
122
122
|
// Reset page `overflow` property
|
|
123
123
|
if (this.body) {
|
|
124
|
-
this.body.style.
|
|
124
|
+
this.body.style.removeProperty('overflow');
|
|
125
|
+
if (this.bodyInitialOverflowValue === '') {
|
|
126
|
+
if (this.body.style.length === 0) {
|
|
127
|
+
this.body.removeAttribute('style');
|
|
128
|
+
}
|
|
129
|
+
} else {
|
|
130
|
+
this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
|
|
131
|
+
}
|
|
125
132
|
}
|
|
126
133
|
}
|
|
127
134
|
}
|
|
@@ -158,7 +158,14 @@ export default class HdsModalIndexComponent extends Component {
|
|
|
158
158
|
|
|
159
159
|
// Reset page `overflow` property
|
|
160
160
|
if (this.body) {
|
|
161
|
-
this.body.style.
|
|
161
|
+
this.body.style.removeProperty('overflow');
|
|
162
|
+
if (this.bodyInitialOverflowValue === '') {
|
|
163
|
+
if (this.body.style.length === 0) {
|
|
164
|
+
this.body.removeAttribute('style');
|
|
165
|
+
}
|
|
166
|
+
} else {
|
|
167
|
+
this.body.style.setProperty('overflow', this.bodyInitialOverflowValue);
|
|
168
|
+
}
|
|
162
169
|
}
|
|
163
170
|
}
|
|
164
171
|
}
|
|
@@ -20,9 +20,11 @@
|
|
|
20
20
|
<FlightIcon class="hds-side-nav__list-item-icon-leading" @name={{@icon}} />
|
|
21
21
|
{{/if}}
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
{{#if @text}}
|
|
24
|
+
<span class="hds-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium">
|
|
25
|
+
{{@text}}
|
|
26
|
+
</span>
|
|
27
|
+
{{/if}}
|
|
26
28
|
|
|
27
29
|
{{#if @count}}
|
|
28
30
|
<Hds::BadgeCount @text={{@count}} @type="inverted" @size="small" />
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
.hds-alert__text {
|
|
38
38
|
display: flex;
|
|
39
39
|
flex-direction: column;
|
|
40
|
+
gap: 4px;
|
|
40
41
|
justify-content: center;
|
|
41
42
|
color: var(--token-color-foreground-warning-on-surface);
|
|
42
43
|
font-size: var(--token-typography-body-200-font-size);
|
|
@@ -59,10 +60,6 @@
|
|
|
59
60
|
font-weight: var(--token-typography-font-weight-regular);
|
|
60
61
|
word-break: break-word;
|
|
61
62
|
|
|
62
|
-
.hds-alert__title + & {
|
|
63
|
-
margin-top: 4px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
63
|
// we add very basic styling for elements that may be injected via the "description" string
|
|
67
64
|
|
|
68
65
|
strong {
|
|
@@ -106,15 +103,12 @@
|
|
|
106
103
|
|
|
107
104
|
.hds-alert__actions {
|
|
108
105
|
display: flex;
|
|
106
|
+
gap: 16px;
|
|
109
107
|
align-items: center;
|
|
110
108
|
|
|
111
109
|
> * {
|
|
112
110
|
margin-top: 16px;
|
|
113
111
|
}
|
|
114
|
-
|
|
115
|
-
> * + * {
|
|
116
|
-
margin-left: 8px;
|
|
117
|
-
}
|
|
118
112
|
}
|
|
119
113
|
|
|
120
114
|
// DISMISS
|
|
@@ -33,23 +33,17 @@ $hds-application-state-padding: 12px 0;
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.hds-application-state__body {
|
|
36
|
-
display: flex;
|
|
37
36
|
padding: $hds-application-state-padding;
|
|
38
37
|
color: var(--token-color-foreground-faint);
|
|
39
38
|
}
|
|
40
39
|
|
|
41
40
|
.hds-application-state__footer {
|
|
42
41
|
display: flex;
|
|
42
|
+
gap: 8px;
|
|
43
43
|
justify-content: space-between;
|
|
44
44
|
|
|
45
45
|
&.hds-application-state__footer--has-divider {
|
|
46
46
|
padding: $hds-application-state-padding;
|
|
47
47
|
border-top: 1px solid var(--token-color-border-strong);
|
|
48
48
|
}
|
|
49
|
-
|
|
50
|
-
// in case users do something outside design guidelines
|
|
51
|
-
.hds-link-standalone + .hds-link-standalone {
|
|
52
|
-
margin-left: 8px;
|
|
53
|
-
}
|
|
54
49
|
}
|
|
55
|
-
|
|
@@ -69,6 +69,7 @@ $size-props: (
|
|
|
69
69
|
|
|
70
70
|
@each $size in $hds-badge-sizes {
|
|
71
71
|
.hds-badge--size-#{$size} {
|
|
72
|
+
gap: map-get($size-props, $size, "gap");
|
|
72
73
|
min-height: map-get($size-props, $size, "height");
|
|
73
74
|
padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
|
|
74
75
|
|
|
@@ -81,10 +82,6 @@ $size-props: (
|
|
|
81
82
|
font-size: map-get($size-props, $size, "font-size");
|
|
82
83
|
line-height: map-get($size-props, $size, "line-height");
|
|
83
84
|
}
|
|
84
|
-
|
|
85
|
-
.hds-badge__icon + .hds-badge__text {
|
|
86
|
-
margin-inline-start: map-get($size-props, $size, "gap");
|
|
87
|
-
}
|
|
88
85
|
}
|
|
89
86
|
}
|
|
90
87
|
|
|
@@ -29,6 +29,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
|
|
|
29
29
|
|
|
30
30
|
.hds-dropdown-toggle-icon {
|
|
31
31
|
display: flex;
|
|
32
|
+
gap: 2px;
|
|
32
33
|
align-items: center;
|
|
33
34
|
justify-content: center;
|
|
34
35
|
padding: 1px;
|
|
@@ -56,10 +57,6 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
|
|
|
56
57
|
&.mock-disabled {
|
|
57
58
|
@include hds-button-state-disabled();
|
|
58
59
|
}
|
|
59
|
-
|
|
60
|
-
.hds-dropdown-toggle-chevron {
|
|
61
|
-
padding-left: 4px;
|
|
62
|
-
}
|
|
63
60
|
}
|
|
64
61
|
|
|
65
62
|
.hds-dropdown-toggle-icon__wrapper {
|
|
@@ -146,19 +143,18 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
|
|
|
146
143
|
|
|
147
144
|
.hds-dropdown-toggle-button__icon {
|
|
148
145
|
flex: none;
|
|
149
|
-
margin-right: 0.375rem;
|
|
150
146
|
}
|
|
151
147
|
|
|
152
148
|
.hds-dropdown-toggle-button__badge,
|
|
153
149
|
.hds-dropdown-toggle-button__count {
|
|
154
|
-
margin: -3px 0 -3px
|
|
150
|
+
margin: -3px 0 -3px 0;
|
|
155
151
|
}
|
|
156
152
|
|
|
157
153
|
// TOGGLE / CHEVRON
|
|
158
154
|
|
|
159
155
|
.hds-dropdown-toggle-chevron {
|
|
160
156
|
margin-left: auto;
|
|
161
|
-
padding-left:
|
|
157
|
+
padding-left: 2px;
|
|
162
158
|
|
|
163
159
|
.flight-icon-chevron-down {
|
|
164
160
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -258,11 +254,8 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
|
|
|
258
254
|
}
|
|
259
255
|
|
|
260
256
|
> .hds-button-set {
|
|
257
|
+
gap: 8px;
|
|
261
258
|
margin: 8px 0;
|
|
262
|
-
|
|
263
|
-
> * + * {
|
|
264
|
-
margin-left: 8px;
|
|
265
|
-
}
|
|
266
259
|
}
|
|
267
260
|
}
|
|
268
261
|
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
.hds-flyout__header {
|
|
54
54
|
display: flex;
|
|
55
55
|
flex: none;
|
|
56
|
+
gap: 16px;
|
|
56
57
|
align-items: flex-start;
|
|
57
58
|
padding: 16px 24px;
|
|
58
59
|
color: var(--token-color-foreground-strong);
|
|
@@ -61,7 +62,6 @@
|
|
|
61
62
|
.hds-flyout__icon {
|
|
62
63
|
flex: none;
|
|
63
64
|
align-self: center;
|
|
64
|
-
margin-right: 16px;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.hds-flyout__title {
|
|
@@ -75,7 +75,6 @@
|
|
|
75
75
|
|
|
76
76
|
.hds-flyout__dismiss {
|
|
77
77
|
align-self: center;
|
|
78
|
-
margin-left: 16px;
|
|
79
78
|
}
|
|
80
79
|
|
|
81
80
|
.hds-flyout__description {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
.hds-form-error {
|
|
11
11
|
display: flex;
|
|
12
|
+
gap: 8px;
|
|
12
13
|
align-items: flex-start;
|
|
13
14
|
color: var(--token-form-error-color);
|
|
14
15
|
}
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
flex: none;
|
|
18
19
|
width: var(--token-form-error-icon-size);
|
|
19
20
|
height: var(--token-form-error-icon-size);
|
|
20
|
-
margin: 2px
|
|
21
|
+
margin: 2px 0 2px 0;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.hds-form-error__content {
|
|
@@ -17,6 +17,7 @@ $hds-link-standalone-border-width: 1px;
|
|
|
17
17
|
|
|
18
18
|
.hds-link-standalone {
|
|
19
19
|
display: flex;
|
|
20
|
+
gap: 0.375rem;
|
|
20
21
|
align-items: center;
|
|
21
22
|
justify-content: center;
|
|
22
23
|
width: fit-content;
|
|
@@ -33,14 +34,6 @@ $hds-link-standalone-border-width: 1px;
|
|
|
33
34
|
text-decoration: underline;
|
|
34
35
|
text-decoration-color: transparent;
|
|
35
36
|
transition: text-decoration-color 0.25s ease-in;
|
|
36
|
-
|
|
37
|
-
.hds-link-standalone__icon + & {
|
|
38
|
-
margin-left: 0.375rem;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
& + .hds-link-standalone__icon {
|
|
42
|
-
margin-left: 0.375rem;
|
|
43
|
-
}
|
|
44
37
|
}
|
|
45
38
|
|
|
46
39
|
// SIZE
|
|
@@ -49,7 +42,7 @@ $hds-link-standalone-border-width: 1px;
|
|
|
49
42
|
$size-props: (
|
|
50
43
|
"small": (
|
|
51
44
|
"font-size": 0.8125rem, // 13px;
|
|
52
|
-
"icon-size":
|
|
45
|
+
"icon-size": 0.75rem, // 12px
|
|
53
46
|
"line-height": 1.231, // ~16px
|
|
54
47
|
),
|
|
55
48
|
"medium": (
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
.hds-modal__header {
|
|
43
43
|
display: flex;
|
|
44
44
|
flex: none;
|
|
45
|
+
gap: 16px;
|
|
45
46
|
align-items: flex-start;
|
|
46
47
|
padding: 16px 24px;
|
|
47
48
|
border-top-left-radius: inherit;
|
|
@@ -51,7 +52,6 @@
|
|
|
51
52
|
.hds-modal__icon {
|
|
52
53
|
flex: none;
|
|
53
54
|
align-self: center;
|
|
54
|
-
margin-right: 16px;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.hds-modal__title {
|
|
@@ -64,7 +64,6 @@
|
|
|
64
64
|
|
|
65
65
|
.hds-modal__dismiss {
|
|
66
66
|
align-self: center;
|
|
67
|
-
margin-left: 16px;
|
|
68
67
|
}
|
|
69
68
|
|
|
70
69
|
.hds-modal__body {
|
|
@@ -120,8 +120,9 @@ $pagination-layout-breakpoint: 1000px;
|
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
// only the "Previous" & "Next" (`Arrow`) controls can be disabled
|
|
124
123
|
.hds-pagination-nav__arrow {
|
|
124
|
+
gap: var(--token-pagination-nav-control-icon-spacing);
|
|
125
|
+
// only the "Previous" & "Next" (`Arrow`) controls can be disabled
|
|
125
126
|
// notice: when `@disabled={{true}}` is applied, the code always renders a `<button>` element
|
|
126
127
|
// so no need to add the [disabled] selector here (elsewhere it's done to cover the `a[disabled]` case)
|
|
127
128
|
&:disabled,
|
|
@@ -134,19 +135,11 @@ $pagination-layout-breakpoint: 1000px;
|
|
|
134
135
|
.hds-pagination-nav__arrow--direction-prev {
|
|
135
136
|
flex-direction: row;
|
|
136
137
|
justify-content: flex-start;
|
|
137
|
-
|
|
138
|
-
.hds-pagination-nav__arrow-label {
|
|
139
|
-
margin-left: var(--token-pagination-nav-control-icon-spacing);
|
|
140
|
-
}
|
|
141
138
|
}
|
|
142
139
|
|
|
143
140
|
.hds-pagination-nav__arrow--direction-next {
|
|
144
141
|
flex-direction: row-reverse;
|
|
145
142
|
justify-content: flex-end;
|
|
146
|
-
|
|
147
|
-
.hds-pagination-nav__arrow-label {
|
|
148
|
-
margin-right: 6px;
|
|
149
|
-
}
|
|
150
143
|
}
|
|
151
144
|
|
|
152
145
|
.hds-pagination-nav__number--is-selected {
|
|
@@ -67,6 +67,7 @@
|
|
|
67
67
|
|
|
68
68
|
.hds-side-nav__list-item-link { // <a>/<button> element (via Hds::Interactive)
|
|
69
69
|
display: flex;
|
|
70
|
+
gap: var(--token-side-nav-body-list-item-content-spacing-horizontal);
|
|
70
71
|
align-items: center;
|
|
71
72
|
width: 100%;
|
|
72
73
|
min-height: var(--token-side-nav-body-list-item-height);
|
|
@@ -118,11 +119,6 @@
|
|
|
118
119
|
background: var(--token-color-surface-strong);
|
|
119
120
|
}
|
|
120
121
|
}
|
|
121
|
-
|
|
122
|
-
.hds-badge,
|
|
123
|
-
.hds-badge-count {
|
|
124
|
-
margin-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
|
|
125
|
-
}
|
|
126
122
|
}
|
|
127
123
|
|
|
128
124
|
// special override for the "back-link" element (no visible active state, by design)
|
|
@@ -149,11 +145,9 @@
|
|
|
149
145
|
|
|
150
146
|
.hds-side-nav__list-item-icon-leading {
|
|
151
147
|
flex: none;
|
|
152
|
-
margin-right: var(--token-side-nav-body-list-item-content-spacing-horizontal);
|
|
153
148
|
}
|
|
154
149
|
|
|
155
150
|
.hds-side-nav__list-item-icon-trailing {
|
|
156
151
|
flex: none;
|
|
157
152
|
margin-left: auto;
|
|
158
|
-
padding-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
|
|
159
153
|
}
|
|
@@ -15,9 +15,9 @@ $hds-table-border-width: 1px;
|
|
|
15
15
|
$hds-table-inner-border-radius: $hds-table-border-radius - $hds-table-border-width;
|
|
16
16
|
$hds-table-border-color: var(--token-color-border-primary);
|
|
17
17
|
$hds-table-header-height: 48px;
|
|
18
|
-
$hds-table-cell-padding-medium:
|
|
19
|
-
$hds-table-cell-padding-short:
|
|
20
|
-
$hds-table-cell-padding-tall:
|
|
18
|
+
$hds-table-cell-padding-medium: 14px 16px 13px 16px; // the 1px difference is to account for the bottom border
|
|
19
|
+
$hds-table-cell-padding-short: 6px 16px 5px 16px; // the 1px difference is to account for the bottom border
|
|
20
|
+
$hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to account for the bottom border
|
|
21
21
|
|
|
22
22
|
.hds-table {
|
|
23
23
|
width: 100%;
|
|
@@ -51,7 +51,7 @@ $hds-table-cell-padding-tall: 20px 16px;
|
|
|
51
51
|
|
|
52
52
|
.hds-table__th,
|
|
53
53
|
.hds-table__th-sort {
|
|
54
|
-
height: $hds-table-header-height;
|
|
54
|
+
min-height: $hds-table-header-height;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
@@ -73,6 +73,7 @@
|
|
|
73
73
|
);
|
|
74
74
|
position: static;
|
|
75
75
|
display: flex;
|
|
76
|
+
gap: var(--token-tabs-tab-gutter);
|
|
76
77
|
align-items: center;
|
|
77
78
|
padding: 0;
|
|
78
79
|
color: inherit;
|
|
@@ -89,14 +90,6 @@
|
|
|
89
90
|
}
|
|
90
91
|
}
|
|
91
92
|
|
|
92
|
-
.hds-tabs__tab-icon {
|
|
93
|
-
margin-right: var(--token-tabs-tab-gutter);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.hds-tabs__tab-count {
|
|
97
|
-
margin-left: var(--token-tabs-tab-gutter);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
93
|
.hds-tabs__tab-indicator {
|
|
101
94
|
position: absolute;
|
|
102
95
|
right: 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hashicorp/design-system-components",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.1",
|
|
4
4
|
"description": "Helios Design System Components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"hashicorp",
|
|
@@ -34,43 +34,44 @@
|
|
|
34
34
|
"test": "npm-run-all lint test:*",
|
|
35
35
|
"test:ember": "ember test",
|
|
36
36
|
"test:ember-compatibility": "ember try:each",
|
|
37
|
-
"test:ember:percy": "percy exec ember test"
|
|
37
|
+
"test:ember:percy": "percy exec ember test",
|
|
38
|
+
"test:a11y": "ENABLE_A11Y_AUDIT=true ember test"
|
|
38
39
|
},
|
|
39
40
|
"dependencies": {
|
|
40
41
|
"@ember/render-modifiers": "^2.0.5",
|
|
41
42
|
"@hashicorp/design-system-tokens": "^1.5.0",
|
|
42
|
-
"@hashicorp/ember-flight-icons": "^3.0.
|
|
43
|
+
"@hashicorp/ember-flight-icons": "^3.0.6",
|
|
43
44
|
"dialog-polyfill": "^0.5.6",
|
|
44
45
|
"ember-a11y-refocus": "^3.0.2",
|
|
45
|
-
"ember-auto-import": "^2.6.
|
|
46
|
+
"ember-auto-import": "^2.6.3",
|
|
46
47
|
"ember-cached-decorator-polyfill": "^0.1.4",
|
|
47
48
|
"ember-cli-babel": "^7.26.11",
|
|
48
49
|
"ember-cli-htmlbars": "^6.2.0",
|
|
49
50
|
"ember-cli-sass": "^10.0.1",
|
|
50
51
|
"ember-composable-helpers": "^4.5.0",
|
|
51
|
-
"ember-focus-trap": "^1.0.
|
|
52
|
-
"ember-keyboard": "^8.
|
|
52
|
+
"ember-focus-trap": "^1.0.2",
|
|
53
|
+
"ember-keyboard": "^8.2.0",
|
|
53
54
|
"ember-named-blocks-polyfill": "^0.2.5",
|
|
54
55
|
"ember-stargate": "^0.4.3",
|
|
55
56
|
"ember-style-modifier": "^0.8.0",
|
|
56
|
-
"ember-truth-helpers": "^3.
|
|
57
|
-
"sass": "^1.
|
|
57
|
+
"ember-truth-helpers": "^3.1.1",
|
|
58
|
+
"sass": "^1.62.1",
|
|
58
59
|
"tippy.js": "^6.3.7"
|
|
59
60
|
},
|
|
60
61
|
"devDependencies": {
|
|
61
62
|
"@ember/optional-features": "^2.0.0",
|
|
62
|
-
"@ember/string": "^3.
|
|
63
|
+
"@ember/string": "^3.1.1",
|
|
63
64
|
"@ember/test-helpers": "^2.9.3",
|
|
64
|
-
"@embroider/test-setup": "^2.
|
|
65
|
+
"@embroider/test-setup": "^2.1.1",
|
|
65
66
|
"@glimmer/component": "^1.1.2",
|
|
66
67
|
"@glimmer/tracking": "^1.1.2",
|
|
67
|
-
"@percy/cli": "^1.24.
|
|
68
|
+
"@percy/cli": "^1.24.2",
|
|
68
69
|
"@percy/ember": "^4.2.0",
|
|
69
70
|
"babel-eslint": "^10.1.0",
|
|
70
71
|
"broccoli-asset-rev": "^3.0.0",
|
|
71
|
-
"ember-a11y-testing": "^5.2.
|
|
72
|
+
"ember-a11y-testing": "^5.2.1",
|
|
72
73
|
"ember-body-class": "^3.0.0",
|
|
73
|
-
"ember-cli": "~4.
|
|
74
|
+
"ember-cli": "~4.12.1",
|
|
74
75
|
"ember-cli-clipboard": "^1.0.0",
|
|
75
76
|
"ember-cli-dependency-checker": "^3.3.1",
|
|
76
77
|
"ember-cli-deprecation-workflow": "^2.1.0",
|
|
@@ -81,32 +82,32 @@
|
|
|
81
82
|
"ember-concurrency": "^2.3.7",
|
|
82
83
|
"ember-load-initializers": "^2.1.2",
|
|
83
84
|
"ember-page-title": "^7.0.0",
|
|
84
|
-
"ember-power-select": "^6.0.
|
|
85
|
+
"ember-power-select": "^6.0.1",
|
|
85
86
|
"ember-qunit": "^6.2.0",
|
|
86
|
-
"ember-resolver": "^10.
|
|
87
|
-
"ember-source": "~4.
|
|
87
|
+
"ember-resolver": "^10.1.0",
|
|
88
|
+
"ember-source": "~4.12.0",
|
|
88
89
|
"ember-source-channel-url": "^3.0.0",
|
|
89
90
|
"ember-template-lint": "^4.18.2",
|
|
90
91
|
"ember-template-lint-plugin-prettier": "^4.1.0",
|
|
91
92
|
"ember-try": "^2.0.0",
|
|
92
93
|
"eslint": "^7.32.0",
|
|
93
|
-
"eslint-config-prettier": "^8.
|
|
94
|
-
"eslint-plugin-ember": "^11.
|
|
94
|
+
"eslint-config-prettier": "^8.8.0",
|
|
95
|
+
"eslint-plugin-ember": "^11.7.2",
|
|
95
96
|
"eslint-plugin-node": "^11.1.0",
|
|
96
97
|
"eslint-plugin-prettier": "^4.2.1",
|
|
97
98
|
"eslint-plugin-qunit": "^7.3.4",
|
|
98
99
|
"loader.js": "^4.7.0",
|
|
99
100
|
"npm-run-all": "^4.1.5",
|
|
100
|
-
"prettier": "^2.8.
|
|
101
|
+
"prettier": "^2.8.8",
|
|
101
102
|
"qunit": "^2.19.4",
|
|
102
103
|
"qunit-dom": "^2.0.0",
|
|
103
104
|
"stylelint": "^14.16.1",
|
|
104
105
|
"stylelint-config-rational-order": "^0.1.2",
|
|
105
106
|
"stylelint-config-standard-scss": "^5.0.0",
|
|
106
|
-
"webpack": "^5.
|
|
107
|
+
"webpack": "^5.84.1"
|
|
107
108
|
},
|
|
108
109
|
"engines": {
|
|
109
|
-
"node": "
|
|
110
|
+
"node": "14.* || 16.* || >= 18"
|
|
110
111
|
},
|
|
111
112
|
"ember": {
|
|
112
113
|
"edition": "octane"
|