@hashicorp/design-system-components 0.12.1 → 0.12.4

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,32 @@
1
1
  # @hashicorp/design-system-components
2
2
 
3
+ ## 0.12.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#343](https://github.com/hashicorp/design-system/pull/343) [`a74711c8`](https://github.com/hashicorp/design-system/commit/a74711c8c0de6843625781488ed94521c7f8cb7c) Thanks [@MelSumner](https://github.com/MelSumner)! - Fixes copy-item bug in FireFox
8
+
9
+ * [#328](https://github.com/hashicorp/design-system/pull/328) [`32b36ab1`](https://github.com/hashicorp/design-system/commit/32b36ab132b3356923ef6d1f3f36c2f7036e852c) Thanks [@didoo](https://github.com/didoo)! - updated `font-weight` to `medium` for `Link::Standalone` component (to be in sync with design specs)
10
+
11
+ - [#319](https://github.com/hashicorp/design-system/pull/319) [`7c96344f`](https://github.com/hashicorp/design-system/commit/7c96344f3c83baecc56daac6dfdddb809c161c1f) Thanks [@didoo](https://github.com/didoo)! - updated the `Hds::Dropdown::ListItem::Interactive` to support the `isLoading` state
12
+
13
+ - Updated dependencies []:
14
+ - @hashicorp/ember-flight-icons@2.0.8
15
+
16
+ ## 0.12.3
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies [[`a46fc035`](https://github.com/hashicorp/design-system/commit/a46fc03570f51e8375b15571ddcb10e62ba446fb)]:
21
+ - @hashicorp/design-system-tokens@0.8.1
22
+
23
+ ## 0.12.2
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies []:
28
+ - @hashicorp/ember-flight-icons@2.0.7
29
+
3
30
  ## 0.12.1
4
31
 
5
32
  ### Patch Changes
@@ -9,7 +36,7 @@
9
36
 
10
37
  ## 0.12.0
11
38
 
12
- ### Minor Changes
39
+ ### Minor Changes (Some Breaking)
13
40
 
14
41
  - [#217](https://github.com/hashicorp/design-system/pull/217) [`210edd17`](https://github.com/hashicorp/design-system/commit/210edd17431e6e3097260aed0df5a8902f93b7f7) Thanks [@didoo](https://github.com/didoo)! - # Interactive
15
42
 
@@ -54,25 +81,24 @@
54
81
 
55
82
  ## 0.11.0
56
83
 
57
- ### Minor Changes
84
+ ### Minor Changes (Some Breaking)
58
85
 
59
86
  - [#245](https://github.com/hashicorp/design-system/pull/245) [`c6de1018`](https://github.com/hashicorp/design-system/commit/c6de101880ec1c21971e3775e1a21b6cb9e69757) Thanks [@didoo](https://github.com/didoo)! - - Added `Alert` component
60
87
  - Added `Toast` component
88
+ - [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)! - - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components) (🚨 Breaking)
89
+ - updated focus state treatment for `Dropdown` component (🚨 Breaking)
61
90
 
62
91
  ### Patch Changes
63
92
 
64
- - [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)! - - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components)
65
- - updated focus state treatment for `Dropdown` component
66
-
67
- * [#225](https://github.com/hashicorp/design-system/pull/225) [`f1f07179`](https://github.com/hashicorp/design-system/commit/f1f0717952b3e6b41676135cf00e77a6e55579ec) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - update to ember-keyboard@8.1.0 in packages/components
93
+ - [#225](https://github.com/hashicorp/design-system/pull/225) [`f1f07179`](https://github.com/hashicorp/design-system/commit/f1f0717952b3e6b41676135cf00e77a6e55579ec) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - update to ember-keyboard@8.1.0 in packages/components
68
94
 
69
95
  - [#265](https://github.com/hashicorp/design-system/pull/265) [`79bc3e99`](https://github.com/hashicorp/design-system/commit/79bc3e99cd5cc6cb60fc82286d5726c0d0ffbd82) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - npx ember-cli-update@4.3.0 dependency updates
70
96
 
71
- * [#253](https://github.com/hashicorp/design-system/pull/253) [`21786983`](https://github.com/hashicorp/design-system/commit/21786983d4ebbb3f38a72d4d105504169bfeda78) Thanks [@MelSumner](https://github.com/MelSumner)! - bugfix for icon size in copy-item component
97
+ - [#253](https://github.com/hashicorp/design-system/pull/253) [`21786983`](https://github.com/hashicorp/design-system/commit/21786983d4ebbb3f38a72d4d105504169bfeda78) Thanks [@MelSumner](https://github.com/MelSumner)! - bugfix for icon size in copy-item component
72
98
 
73
99
  ## 0.10.0
74
100
 
75
- ### Minor Changes
101
+ ### Minor Changes (Some Breaking)
76
102
 
77
103
  - [#200](https://github.com/hashicorp/design-system/pull/200) [`a8072537`](https://github.com/hashicorp/design-system/commit/a8072537542791398d375cde4a7a85c2955c66da) Thanks [@didoo](https://github.com/didoo)! - Updated Dropdown component:
78
104
 
@@ -80,8 +106,8 @@
80
106
  - fixed issue with `list-item/interactive` height
81
107
  - added handling of dynamic `width` for the list
82
108
  - exposed an `onClose` event
83
- - removed the default icon for `toggle/icon`
84
- - removed icon requirement from the `critical` list item
109
+ - removed the default icon for `toggle/icon` (🚨 Breaking)
110
+ - removed icon requirement from the `critical` list item (🚨 Breaking)
85
111
  - updated the documentation and integration tests
86
112
  - some code refactorings, reorganizations and cleanups
87
113
 
@@ -123,9 +149,9 @@
123
149
 
124
150
  ## 0.7.0
125
151
 
126
- ### Minor Changes
152
+ ### Minor Changes (Some Breaking)
127
153
 
128
- - [#150](https://github.com/hashicorp/design-system/pull/150) [`c236c159`](https://github.com/hashicorp/design-system/commit/c236c159f7d7ec6edc661710963f5733eb961edf) Thanks [@didoo](https://github.com/didoo)! - removed “box-sizing“ declarations from the components (we assume the consumers codebase already have set it to “border-box“ by default
154
+ - [#150](https://github.com/hashicorp/design-system/pull/150) [`c236c159`](https://github.com/hashicorp/design-system/commit/c236c159f7d7ec6edc661710963f5733eb961edf) Thanks [@didoo](https://github.com/didoo)! - removed “box-sizing“ declarations from the components (we assume the consumers codebase already have set it to “border-box“ by default (🚨 Breaking)
129
155
 
130
156
  ## 0.6.0
131
157
 
@@ -146,9 +172,9 @@
146
172
 
147
173
  ## 0.5.0
148
174
 
149
- ### Minor Changes
175
+ ### Minor Changes (Some Breaking)
150
176
 
151
- - [#127](https://github.com/hashicorp/design-system/pull/127) [`fa13190f`](https://github.com/hashicorp/design-system/commit/fa13190f1058f172898221aa1e1913965bfa53e9) Thanks [@didoo](https://github.com/didoo)! - removed the “isDisabled“ prop from the “Button” component; added instructions for developers to manually add it themselves if needed.
177
+ - [#127](https://github.com/hashicorp/design-system/pull/127) [`fa13190f`](https://github.com/hashicorp/design-system/commit/fa13190f1058f172898221aa1e1913965bfa53e9) Thanks [@didoo](https://github.com/didoo)! - removed the “isDisabled“ prop from the “Button” component; added instructions for developers to manually add it themselves if needed. (🚨 Breaking)
152
178
 
153
179
  ### Patch Changes
154
180
 
@@ -10,7 +10,7 @@
10
10
  </div>
11
11
  {{else}}
12
12
  <LinkTo
13
- class="hds-breadcrumb__link {{if @hover 'is-hover'}} {{if @active 'is-active'}} {{if @focus 'is-focus'}}"
13
+ class="hds-breadcrumb__link"
14
14
  @models={{hds-link-to-models @model @models}}
15
15
  @query={{hds-link-to-query @query}}
16
16
  @route={{@route}}
@@ -3,10 +3,7 @@
3
3
  <:toggle as |t|>
4
4
  <button
5
5
  type="button"
6
- class="hds-breadcrumb__truncation-toggle
7
- {{if @hover 'is-hover'}}
8
- {{if @active 'is-active'}}
9
- {{if @focus 'is-focus'}}"
6
+ class="hds-breadcrumb__truncation-toggle"
10
7
  aria-expanded={{if t.isOpen "true" "false"}}
11
8
  {{on "click" t.onClickToggle}}
12
9
  >
@@ -40,16 +40,24 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
40
40
  async copyCode() {
41
41
  // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
42
42
  await navigator.clipboard.writeText(this.args.text);
43
- const result = await navigator.clipboard.readText();
44
43
 
45
- if (result === this.args.text) {
44
+ if (navigator.clipboard.readText) {
45
+ const result = await navigator.clipboard.readText();
46
+
47
+ if (result === this.args.text) {
48
+ this.isSuccess = true;
49
+ }
50
+ } else {
51
+ // assume that it works so Firefox can show the success state
52
+ // doesn't confirm that you'll get the correct pasted text
53
+ // but we accept this as a reasonable tradeoff
54
+ // since users can always copy/paste manually.
46
55
  this.isSuccess = true;
47
- // console.log(`result is ${result}`);
48
-
49
- // make it fade back to the default state
50
- setTimeout(() => {
51
- this.isSuccess = false;
52
- }, 1000);
53
56
  }
57
+
58
+ // make it fade back to the default state
59
+ setTimeout(() => {
60
+ this.isSuccess = false;
61
+ }, 1000);
54
62
  }
55
63
  }
@@ -1,22 +1,33 @@
1
1
  <li class={{this.classNames}}>
2
- <Hds::Interactive
3
- @current-when={{@current-when}}
4
- @models={{hds-link-to-models @model @models}}
5
- @query={{hds-link-to-query @query}}
6
- @replace={{@replace}}
7
- @route={{@route}}
8
- @isRouteExternal={{@isRouteExternal}}
9
- @href={{@href}}
10
- @isHrefExternal={{@isHrefExternal}}
11
- ...attributes
12
- >
13
- {{#if @icon}}
2
+ {{#if @isLoading}}
3
+ <div class="hds-dropdown-list-item__interactive-loading-wrapper" ...attributes>
14
4
  <div class="hds-dropdown-list-item__interactive-icon">
15
- <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
5
+ <FlightIcon @name="loading" @isInlineBlock={{false}} />
6
+ </div>
7
+ <div class="hds-dropdown-list-item__interactive-text hds-typography-body-100 hds-font-weight-regular">
8
+ {{this.text}}
16
9
  </div>
17
- {{/if}}
18
- <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
19
- {{this.text}}
20
10
  </div>
21
- </Hds::Interactive>
11
+ {{else}}
12
+ <Hds::Interactive
13
+ @current-when={{@current-when}}
14
+ @models={{hds-link-to-models @model @models}}
15
+ @query={{hds-link-to-query @query}}
16
+ @replace={{@replace}}
17
+ @route={{@route}}
18
+ @isRouteExternal={{@isRouteExternal}}
19
+ @href={{@href}}
20
+ @isHrefExternal={{@isHrefExternal}}
21
+ ...attributes
22
+ >
23
+ {{#if @icon}}
24
+ <div class="hds-dropdown-list-item__interactive-icon">
25
+ <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
26
+ </div>
27
+ {{/if}}
28
+ <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
29
+ {{this.text}}
30
+ </div>
31
+ </Hds::Interactive>
32
+ {{/if}}
22
33
  </li>
@@ -84,7 +84,6 @@
84
84
  color: var(--token-color-foreground-action);
85
85
 
86
86
  &:focus,
87
- &.is-focus,
88
87
  &:focus-visible {
89
88
  outline: 2px solid var(--token-color-focus-action-internal);
90
89
  outline-offset: 1px;
@@ -132,8 +131,7 @@
132
131
  margin-top: 1px;
133
132
  }
134
133
 
135
- &:hover,
136
- &.is-hover {
134
+ &:hover {
137
135
  &::before { // we re-use the pseudo-element created by the "focus-ring" mixin
138
136
  background-color: rgba(#dedfe3, 0.4);
139
137
  }
@@ -142,8 +140,7 @@
142
140
  // notice: this is used not only for the focus, but also to increase the clickable area
143
141
  @include hds-focus-ring-with-pseudo-element($top: -4px, $right: -4px, $bottom: -4px, $left: -4px);
144
142
 
145
- &:active,
146
- &.is-active {
143
+ &:active {
147
144
  color: var(--token-color-foreground-secondary);
148
145
  &::before {
149
146
  background-color: rgba(#dedfe3, 0.4);
@@ -77,7 +77,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
77
77
  text-decoration-color: transparent;
78
78
 
79
79
  &:hover,
80
- &.is-hover {
80
+ &.mock-hover {
81
81
  color: var(--token-color-palette-neutral-600);
82
82
 
83
83
  > .hds-breadcrumb__text {
@@ -89,7 +89,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
89
89
  @include hds-focus-ring-basic();
90
90
 
91
91
  &:active,
92
- &.is-active {
92
+ &.mock-active {
93
93
  color: var(--token-color-foreground-secondary);
94
94
 
95
95
  > .hds-breadcrumb__text {
@@ -155,7 +155,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
155
155
  width: $hds-breadcrumb-item-height;
156
156
 
157
157
  &:hover,
158
- &.is-hover {
158
+ &.mock-hover {
159
159
  border-color: var(--token-color-border-strong);
160
160
  color: var(--token-color-foreground-faint);
161
161
  }
@@ -164,13 +164,13 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
164
164
  @include hds-focus-ring-basic();
165
165
 
166
166
  &:focus,
167
- &.is-focus {
167
+ &.mock-focus {
168
168
  background-color: transparent;
169
169
  border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
170
170
  }
171
171
 
172
172
  &:active,
173
- &.is-active {
173
+ &.mock-active {
174
174
  background-color: var(--token-color-surface-interactive-active);
175
175
  border-color: var(--token-color-border-strong);
176
176
  color: var(--token-color-foreground-primary);
@@ -185,7 +185,7 @@ $hds-dropdown-toggle-border-radius: 5px;
185
185
  background-color: var(--token-color-surface-interactive-active);
186
186
  }
187
187
 
188
- &.mock-success {
188
+ &.is-success {
189
189
  background-color: var(--token-color-surface-success);
190
190
  border-color: var(--token-color-border-success);
191
191
 
@@ -333,14 +333,14 @@ $hds-dropdown-toggle-border-radius: 5px;
333
333
  }
334
334
  }
335
335
 
336
- .hds-dropdown-list-item__interactive-text {
337
- text-align: left; // the button element was centering text
338
- }
339
-
340
336
  .hds-dropdown-list-item__interactive-icon {
341
337
  margin-right: 8px;
342
338
  }
343
339
 
340
+ .hds-dropdown-list-item__interactive-text {
341
+ text-align: left; // the button element was centering text
342
+ }
343
+
344
344
  .hds-dropdown-list-item--color-action {
345
345
  a, button {
346
346
  color: var(--token-color-foreground-primary);
@@ -371,6 +371,20 @@ $hds-dropdown-toggle-border-radius: 5px;
371
371
  }
372
372
  }
373
373
 
374
+ .hds-dropdown-list-item__interactive-loading-wrapper {
375
+ align-items: center;
376
+ display: flex;
377
+ padding: 8px 10px 8px 16px;
378
+
379
+ .hds-dropdown-list-item__interactive-text {
380
+ color: var(--token-color-foreground-faint);
381
+ }
382
+
383
+ .hds-dropdown-list-item__interactive-icon {
384
+ color: var(--token-color-foreground-primary);
385
+ }
386
+ }
387
+
374
388
  .hds-dropdown-list-item--separator {
375
389
  height: 4px;
376
390
  position: relative;
@@ -19,6 +19,7 @@ $hds-link-standalone-border-width: 1px;
19
19
  border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
20
20
  display: flex;
21
21
  font-family: var(--token-typography-font-stack-text);
22
+ font-weight: var(--token-typography-font-weight-medium);
22
23
  justify-content: center;
23
24
  // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
24
25
  text-decoration-color: transparent;
@@ -8,7 +8,6 @@
8
8
 
9
9
  // default focus for browsers that still rely on ":focus"
10
10
  &:focus,
11
- &.is-focus,
12
11
  &.mock-focus {
13
12
  box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
14
13
  }
@@ -22,8 +21,7 @@
22
21
  }
23
22
  // remove the focus ring on "active + focused" state (by design)
24
23
  &:focus:active,
25
- &.is-focus.is-active,
26
- &.mock-focus.is-active {
24
+ &.mock-focus.mock-active {
27
25
  box-shadow: none;
28
26
  }
29
27
  }
@@ -47,7 +45,6 @@
47
45
 
48
46
  // default focus for browsers that still rely on ":focus"
49
47
  &:focus,
50
- &.is-focus,
51
48
  &.mock-focus {
52
49
  &::before {
53
50
  box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
@@ -67,8 +64,7 @@
67
64
  }
68
65
  // remove the focus ring on "active + focused" state (by design)
69
66
  &:focus:active,
70
- &.is-focus.is-active,
71
- &.mock-focus.is-active {
67
+ &.mock-focus.mock-active {
72
68
  &::before {
73
69
  box-shadow: none;
74
70
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "0.12.1",
3
+ "version": "0.12.4",
4
4
  "description": "HashiCorp Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",
@@ -34,8 +34,8 @@
34
34
  "test:ember:percy": "percy exec ember test"
35
35
  },
36
36
  "dependencies": {
37
- "@hashicorp/design-system-tokens": "^0.8.0",
38
- "@hashicorp/ember-flight-icons": "^2.0.6",
37
+ "@hashicorp/design-system-tokens": "^0.8.1",
38
+ "@hashicorp/ember-flight-icons": "^2.0.8",
39
39
  "ember-auto-import": "^2.4.1",
40
40
  "ember-cli-babel": "^7.26.11",
41
41
  "ember-cli-htmlbars": "^6.0.1",