@hashicorp/design-system-components 0.12.7 → 0.12.8

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/addon/components/hds/alert/index.hbs +2 -2
  3. package/addon/components/hds/alert/index.js +12 -0
  4. package/app/styles/components/button.scss +0 -6
  5. package/app/styles/components/form/checkbox.scss +3 -20
  6. package/app/styles/components/form/error.scss +0 -1
  7. package/app/styles/components/form/radio.scss +5 -20
  8. package/app/styles/components/form/select.scss +17 -14
  9. package/app/styles/components/form/text-input.scss +23 -15
  10. package/app/styles/components/form/textarea.scss +23 -14
  11. package/app/styles/components/form/toggle.scss +6 -20
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @hashicorp/design-system-components
2
2
 
3
+ ## 0.12.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#400](https://github.com/hashicorp/design-system/pull/400) [`d87d622b`](https://github.com/hashicorp/design-system/commit/d87d622b0f1f8829a0d5e6a48cfcd8ad8ff6f425) Thanks [@alex-ju](https://github.com/alex-ju)! - Determine alert component's role based on the presence of interactive elements
8
+
3
9
  ## 0.12.7
4
10
 
5
11
  ### Patch Changes
package/addon/components/hds/alert/index.hbs CHANGED
@@ -1,11 +1,11 @@
1
- <div class={{this.classNames}} role="alert" aria-live="polite" ...attributes>
1
+ <div class={{this.classNames}} role={{this.role}} aria-live="polite" aria-describedby="content" ...attributes>
2
2
  {{#if this.icon}}
3
3
  <div class="hds-alert__icon">
4
4
  <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} @isInlineBlock={{false}} />
5
5
  </div>
6
6
  {{/if}}
7
7
 
8
- <div class="hds-alert__content">
8
+ <div class="hds-alert__content" {{did-insert this.didInsertContent}}>
9
9
  <div class="hds-alert__text">
10
10
  {{yield (hash Title=(component "hds/alert/title"))}}
11
11
  {{yield (hash Description=(component "hds/alert/description"))}}
package/addon/components/hds/alert/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import Component from '@glimmer/component';
2
+ import { action } from '@ember/object';
2
3
  import { assert } from '@ember/debug';
4
+ import { tracked } from '@glimmer/tracking';
3
5
 
4
6
  export const TYPES = ['page', 'inline', 'compact'];
5
7
  export const DEFAULT_COLOR = 'neutral';
@@ -19,6 +21,8 @@ export const MAPPING_COLORS_TO_ICONS = {
19
21
  };
20
22
 
21
23
  export default class HdsAlertIndexComponent extends Component {
24
+ @tracked role = 'alert';
25
+
22
26
  constructor() {
23
27
  super(...arguments);
24
28
 
@@ -125,4 +129,12 @@ export default class HdsAlertIndexComponent extends Component {
125
129
 
126
130
  return classes.join(' ');
127
131
  }
132
+
133
+ @action
134
+ didInsertContent(element) {
135
+ let actions = element.querySelectorAll('button, a');
136
+ if (actions.length) {
137
+ this.role = 'alertdialog';
138
+ }
139
+ }
128
140
  }
package/app/styles/components/button.scss CHANGED
@@ -33,13 +33,10 @@ $hds-button-focus-border-width: 3px;
33
33
 
34
34
  // This covers all of the browsers and focus scenarios (due to the custom focus design).
35
35
  &:disabled,
36
- &[disabled],
37
36
  &.mock-disabled,
38
37
  &:disabled:focus,
39
- &[disabled]:focus,
40
38
  &.mock-disabled:focus,
41
39
  &:disabled:hover,
42
- &[disabled]:hover,
43
40
  &.mock-disabled:hover {
44
41
  background-color: var(--token-color-surface-faint);
45
42
  border-color: var(--token-color-border-primary);
@@ -258,13 +255,10 @@ $size-props: (
258
255
  }
259
256
 
260
257
  &:disabled,
261
- &[disabled],
262
258
  &.mock-disabled,
263
259
  &:disabled:focus,
264
- &[disabled]:focus,
265
260
  &.mock-disabled:focus,
266
261
  &:disabled:hover,
267
- &[disabled]:hover,
268
262
  &.mock-disabled:hover {
269
263
  background-color: transparent;
270
264
  border-color: transparent;
package/app/styles/components/form/checkbox.scss CHANGED
@@ -56,18 +56,8 @@ $hds-form-checkbox-control-border-radius: 3px;
56
56
  &.mock-focus:checked,
57
57
  &.mock-focus:not(:checked) {
58
58
  border-color: var(--token-color-palette-blue-400);
59
- outline: 2px solid var(--token-color-focus-action-external);
60
- outline-offset: 0px;
61
- }
62
-
63
- // active
64
-
65
- &:active:not(:checked),
66
- &.mock-active:not(:checked),
67
- &:active:checked,
68
- &.mock-active:checked {
69
- background-color: var(--token-color-palette-blue-400);
70
- border-color: var(--token-color-palette-blue-400);
59
+ outline: 3px solid var(--token-color-focus-action-external);
60
+ outline-offset: 1px;
71
61
  }
72
62
 
73
63
  // INVALID
@@ -90,14 +80,6 @@ $hds-form-checkbox-control-border-radius: 3px;
90
80
  border-color: var(--token-color-palette-red-400);
91
81
  }
92
82
 
93
- &.hds-form-checkbox--is-invalid:active:not(:checked),
94
- &.hds-form-checkbox--is-invalid.mock-active:not(:checked),
95
- &.hds-form-checkbox--is-invalid:active:checked,
96
- &.hds-form-checkbox--is-invalid.mock-active:checked {
97
- background-color: var(--token-color-palette-red-400);
98
- border-color: var(--token-color-palette-red-400);
99
- }
100
-
101
83
  // DISABLED
102
84
 
103
85
  &:disabled:not(:checked),
@@ -109,5 +91,6 @@ $hds-form-checkbox-control-border-radius: 3px;
109
91
  box-shadow: none;
110
92
  // notice: the "tick" color is hardcoded here!
111
93
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e");
94
+ cursor: not-allowed;
112
95
  }
113
96
  }
package/app/styles/components/form/error.scss CHANGED
@@ -11,7 +11,6 @@
11
11
  }
12
12
 
13
13
  .hds-form-error__icon {
14
- color: var(--token-color-foreground-critical-on-surface);
15
14
  flex: none;
16
15
  height: 14px;
17
16
  margin: 2px 8px 2px 0;
package/app/styles/components/form/radio.scss CHANGED
@@ -55,18 +55,8 @@ $hds-form-radio-control-size: 16px;
55
55
  &.mock-focus:checked,
56
56
  &.mock-focus:not(:checked) {
57
57
  border-color: var(--token-color-palette-blue-400);
58
- outline: 2px solid var(--token-color-focus-action-external);
59
- outline-offset: 0px;
60
- }
61
-
62
- // active
63
-
64
- &:active:not(:checked),
65
- &.mock-active:not(:checked),
66
- &:active:checked,
67
- &.mock-active:checked {
68
- background-color: var(--token-color-palette-blue-400);
69
- border-color: var(--token-color-palette-blue-400);
58
+ outline: 3px solid var(--token-color-focus-action-external);
59
+ outline-offset: 1px;
70
60
  }
71
61
 
72
62
  // INVALID
@@ -89,20 +79,14 @@ $hds-form-radio-control-size: 16px;
89
79
  border-color: var(--token-color-palette-red-400);
90
80
  }
91
81
 
92
- &.hds-form-radio--is-invalid:active:not(:checked),
93
- &.hds-form-radio--is-invalid.mock-active:not(:checked),
94
- &.hds-form-radio--is-invalid:active:checked,
95
- &.hds-form-radio--is-invalid.mock-active:checked {
96
- background-color: var(--token-color-palette-red-400);
97
- border-color: var(--token-color-palette-red-400);
98
- }
99
-
100
82
  // DISABLED
101
83
 
102
84
  &:disabled:not(:checked),
103
85
  &.hds-form-checkbox--is-invalid:disabled:not(:checked) {
104
86
  background-color: var(--token-color-surface-strong);
105
87
  border-color: var(--token-color-border-primary);
88
+ box-shadow: none;
89
+ cursor: not-allowed;
106
90
  }
107
91
  &:disabled:checked,
108
92
  &.hds-form-checkbox--is-invalid:disabled:checked {
@@ -111,5 +95,6 @@ $hds-form-radio-control-size: 16px;
111
95
  box-shadow: none;
112
96
  // notice: the "dot" color is hardcoded here!
113
97
  background-image: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23656a76'/%3e%3c/svg%3e");
98
+ cursor: not-allowed;
114
99
  }
115
100
  }
package/app/styles/components/form/select.scss CHANGED
@@ -9,12 +9,8 @@
9
9
  .hds-form-select {
10
10
  border: 1px solid var(--token-color-palette-neutral-400);
11
11
  border-radius: 5px;
12
- box-shadow: var(--hds-elevation-inset-box-shadow);
13
- color: var(--token-color-foreground-primary);
14
- font-family: var(--token-typography-body-200-font-family);
15
- font-size: var(--token-typography-body-200-font-size);
16
- line-height: var(--token-typography-body-200-line-height);
17
- padding: 7px;
12
+ color: var(--token-color-foreground-strong);
13
+ padding: 7px; // we have to take into account the border
18
14
  max-width: 100%;
19
15
 
20
16
  // STATUS
@@ -30,26 +26,33 @@
30
26
  &.mock-focus {
31
27
  border-color: var(--token-color-focus-action-internal);
32
28
  // TODO: Safari doesn't apply a rounded border
33
- outline: 2px solid var(--token-color-focus-action-external);
29
+ outline: 3px solid var(--token-color-focus-action-external);
34
30
  outline-offset: 0px;
35
31
  }
36
32
 
37
- &:active,
38
- &.mock-active {
39
- background-color: var(--token-color-surface-interactive-disabled);
40
- border-color: var(--token-color-border-primary);
41
- }
42
-
43
33
  // DISABLED
44
34
 
45
35
  &:disabled {
46
36
  background-color: var(--token-color-surface-strong);
47
37
  border-color: var(--token-color-border-primary);
38
+ cursor: not-allowed;
48
39
  }
49
40
 
50
41
  // INVALID
51
42
 
52
43
  &.hds-form-select--is-invalid {
53
- border-color: var(--token-color-foreground-critical);
44
+ border-color: #C00005; // TODO convert to form-controls design token
45
+
46
+ &:hover,
47
+ &.mock-hover {
48
+ border-color: #940004; // TODO convert to form-controls design token
49
+ }
50
+
51
+ // TODO add handling of focus-visible
52
+ &:focus,
53
+ &.mock-focus {
54
+ border-color: var(--token-color-focus-critical-internal);
55
+ outline-color: var(--token-color-focus-critical-external);
56
+ }
54
57
  }
55
58
  }
package/app/styles/components/form/text-input.scss CHANGED
@@ -7,14 +7,12 @@
7
7
  // "BASE" CONTROL
8
8
 
9
9
  .hds-form-text-input {
10
+ background-color: var(--token-color-surface-primary);
10
11
  border: 1px solid var(--token-color-palette-neutral-400);
11
12
  border-radius: 5px;
12
13
  box-shadow: var(--hds-elevation-inset-box-shadow);
13
- color: var(--token-color-foreground-primary);
14
- font-family: var(--token-typography-body-200-font-family);
15
- font-size: var(--token-typography-body-200-font-size);
16
- line-height: var(--token-typography-body-200-line-height);
17
- padding: 7px;
14
+ color: var(--token-color-foreground-strong);
15
+ padding: 7px; // we have to take into account the border
18
16
  width: 100%;
19
17
  max-width: 100%;
20
18
 
@@ -37,35 +35,46 @@
37
35
  &.mock-focus {
38
36
  border-color: var(--token-color-focus-action-internal);
39
37
  // TODO: Safari doesn't apply a rounded border
40
- outline: 2px solid var(--token-color-focus-action-external);
38
+ outline: 3px solid var(--token-color-focus-action-external);
41
39
  outline-offset: 0px;
42
40
  }
43
41
 
44
- &:active,
45
- &.mock-active {
46
- border-color: var(--token-color-focus-action-internal);
47
- }
48
-
49
42
  // READONLY
50
43
 
51
44
  &:read-only,
52
45
  &[readonly] {
53
46
  background-color: var(--token-color-surface-strong);
54
47
  border-color: var(--token-color-palette-neutral-400);
48
+ box-shadow: none;
49
+ color: var(--token-color-foreground-primary);
55
50
  }
56
51
 
57
52
  // DISABLED
58
53
 
59
- &:disabled,
60
- &[disabled] {
54
+ &:disabled {
61
55
  background-color: var(--token-color-surface-interactive-disabled);
62
56
  border-color: var(--token-color-border-primary);
57
+ box-shadow: none;
58
+ color: var(--token-color-foreground-disabled);
59
+ cursor: not-allowed;
63
60
  }
64
61
 
65
62
  // INVALID
66
63
 
67
64
  &.hds-form-text-input--is-invalid {
68
- border-color: var(--token-color-foreground-critical);
65
+ border-color: #C00005; // TODO convert to form-controls design token
66
+
67
+ &:hover,
68
+ &.mock-hover {
69
+ border-color: #940004; // TODO convert to form-controls design token
70
+ }
71
+
72
+ // TODO add handling of focus-visible
73
+ &:focus,
74
+ &.mock-focus {
75
+ border-color: var(--token-color-focus-critical-internal);
76
+ outline-color: var(--token-color-focus-critical-external);
77
+ }
69
78
  }
70
79
  }
71
80
 
@@ -84,7 +93,6 @@
84
93
  width: initial;
85
94
 
86
95
  // show the native icon dimmed if disabled (hidden in Chrome)
87
- &[disabled]::-webkit-calendar-picker-indicator,
88
96
  &:disabled::-webkit-calendar-picker-indicator {
89
97
  visibility: visible;
90
98
  opacity: 0.5;
package/app/styles/components/form/textarea.scss CHANGED
@@ -7,14 +7,12 @@
7
7
  // "BASE" CONTROL
8
8
 
9
9
  .hds-form-textarea {
10
+ background-color: var(--token-color-surface-primary);
10
11
  border: 1px solid var(--token-color-palette-neutral-400);
11
12
  border-radius: 5px;
12
13
  box-shadow: var(--hds-elevation-inset-box-shadow);
13
- color: var(--token-color-foreground-primary);
14
- font-family: var(--token-typography-body-200-font-family);
15
- font-size: var(--token-typography-body-200-font-size);
16
- line-height: var(--token-typography-body-200-line-height);
17
- padding: 4px 8px;
14
+ color: var(--token-color-foreground-strong);
15
+ padding: 3px 7px; // we have to take into account the border
18
16
  resize: vertical;
19
17
  width: 100%;
20
18
  max-width: 100%;
@@ -38,34 +36,45 @@
38
36
  &.mock-focus {
39
37
  border-color: var(--token-color-focus-action-internal);
40
38
  // TODO: Safari doesn't apply a rounded border
41
- outline: 2px solid var(--token-color-focus-action-external);
39
+ outline: 3px solid var(--token-color-focus-action-external);
42
40
  outline-offset: 0px;
43
41
  }
44
42
 
45
- &:active,
46
- &.mock-active {
47
- border-color: var(--token-color-focus-action-internal);
48
- }
49
-
50
43
  // READONLY
51
44
 
52
45
  &:read-only,
53
46
  &[readonly] {
54
47
  background-color: var(--token-color-surface-strong);
55
48
  border-color: var(--token-color-palette-neutral-400);
49
+ box-shadow: none;
50
+ color: var(--token-color-foreground-primary);
56
51
  }
57
52
 
58
53
  // DISABLED
59
54
 
60
- &:disabled,
61
- &[disabled] {
55
+ &:disabled {
62
56
  background-color: var(--token-color-surface-interactive-disabled);
63
57
  border-color: var(--token-color-border-primary);
58
+ box-shadow: none;
59
+ color: var(--token-color-foreground-disabled);
60
+ cursor: not-allowed;
64
61
  }
65
62
 
66
63
  // INVALID
67
64
 
68
65
  &.hds-form-textarea--is-invalid {
69
- border-color: var(--token-color-foreground-critical);
66
+ border-color: #C00005; // TODO convert to form-controls design token
67
+
68
+ &:hover,
69
+ &.mock-hover {
70
+ border-color: #940004; // TODO convert to form-controls design token
71
+ }
72
+
73
+ // TODO add handling of focus-visible
74
+ &:focus,
75
+ &.mock-focus {
76
+ border-color: var(--token-color-focus-critical-internal);
77
+ outline-color: var(--token-color-focus-critical-external);
78
+ }
70
79
  }
71
80
  }
package/app/styles/components/form/toggle.scss CHANGED
@@ -38,6 +38,10 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
38
38
  right: 0;
39
39
  top: 0;
40
40
  z-index: 1;
41
+
42
+ &:disabled {
43
+ cursor: not-allowed;
44
+ }
41
45
  }
42
46
 
43
47
  // facade (visible)
@@ -74,8 +78,8 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
74
78
  // used for the focus
75
79
 
76
80
  &::before {
77
- $border-width: 2px;
78
- $shift: $border-width + 1px; // we need to take in account also the border width of the parent
81
+ $border-width: 3px;
82
+ $shift: $border-width + 2px; // we need to take in account also the border width of the parent
79
83
  border-radius: $hds-form-toggle-border-radius + $border-width;
80
84
  border-width: $border-width;
81
85
  bottom: -$shift;
@@ -133,16 +137,6 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
133
137
  }
134
138
  }
135
139
 
136
- // active
137
-
138
- :active:not(:checked) + &,
139
- .mock-active:not(:checked) + &,
140
- :active:checked + &,
141
- .mock-active:checked + & {
142
- background-color: var(--token-color-palette-blue-400);
143
- --border-color: var(--token-color-palette-blue-400);
144
- }
145
-
146
140
  // INVALID
147
141
 
148
142
  .hds-form-toggle--is-invalid :not(:checked) + & {
@@ -163,14 +157,6 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
163
157
  background-color: var(--token-color-palette-red-400);
164
158
  }
165
159
 
166
- .hds-form-toggle--is-invalid :active:not(:checked) + &,
167
- .hds-form-toggle--is-invalid .mock-active:not(:checked) + &,
168
- .hds-form-toggle--is-invalid :active:checked + &,
169
- .hds-form-toggle--is-invalid .mock-active:checked + & {
170
- background-color: var(--token-color-palette-red-400);
171
- --border-color: var(--token-color-palette-red-400);
172
- }
173
-
174
160
  // DISABLED
175
161
 
176
162
  :disabled:not(:checked) + &,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "0.12.7",
3
+ "version": "0.12.8",
4
4
  "description": "HashiCorp Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",