@hashicorp/design-system-components 0.12.13 → 0.12.14

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 (22) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/NEW-COMPONENT-CHECKLIST.md +3 -5
  3. package/addon/components/hds/form/checkbox/field.hbs +1 -0
  4. package/addon/components/hds/form/checkbox/group.hbs +9 -2
  5. package/addon/components/hds/form/indicator/index.hbs +2 -2
  6. package/addon/components/hds/form/indicator/index.js +22 -0
  7. package/addon/components/hds/form/radio/field.hbs +1 -0
  8. package/addon/components/hds/form/radio/group.hbs +9 -2
  9. package/app/styles/components/form/checkbox.scss +20 -29
  10. package/app/styles/components/form/error.scss +3 -3
  11. package/app/styles/components/form/helper-text.scss +1 -1
  12. package/app/styles/components/form/index.scss +0 -3
  13. package/app/styles/components/form/indicator.scss +1 -6
  14. package/app/styles/components/form/label.scss +1 -1
  15. package/app/styles/components/form/legend.scss +1 -1
  16. package/app/styles/components/form/radio.scss +21 -30
  17. package/app/styles/components/form/select.scss +15 -16
  18. package/app/styles/components/form/text-input.scss +26 -29
  19. package/app/styles/components/form/textarea.scss +14 -14
  20. package/app/styles/components/form/toggle.scss +46 -52
  21. package/package.json +3 -3
  22. package/app/styles/components/form/_tokens.scss +0 -41
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @hashicorp/design-system-components
2
2
 
3
+ ## 0.12.14
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @hashicorp/ember-flight-icons@2.0.9
9
+
3
10
  ## 0.12.13
4
11
 
5
12
  ### Patch Changes
package/NEW-COMPONENT-CHECKLIST.md CHANGED
@@ -76,11 +76,9 @@ The engineering checklist has six parts: creating the feature branch, component
76
76
  ### Component Creation
77
77
 
78
78
  - [ ] create new branch from main for the component (`git checkout -b USER/COMPONENT-NAME`)
79
- - [ ] create new component
80
- - `ember generate component hds/COMPONENT-NAME/index --gc` (the component won't need to be invoked with index, it's just to put all the files in the correct place)
81
- - tip: if you forget to generate the backing class (via `--gc`), you can add it with `ember generate component-class hds/COMPONENT-NAME/index`.
82
- - if it's a child component, then `hds/COMPONENT_NAME/CHILD_NAME` instead of `index`
83
- - tip: if you need to destroy a component and start over again, `ember destroy component hds/COMPONENT-NAME/index` will remove the component and the related files as appropriate.
79
+ - [ ] create new component using a blueprint
80
+ - `ember generate hds-component COMPONENT-NAME`
81
+ - if it's a child component, then `hds/COMPONENT_NAME/CHILD_NAME`
84
82
  - [ ] **component template**
85
83
  - use semantic HTML
86
84
  - the component should have a css class that is the same as the component (e.g. `hds/button` should have a class name of `hds-button` on the component, and additional CSS classes should start with this same class name.
package/addon/components/hds/form/checkbox/field.hbs CHANGED
@@ -10,6 +10,7 @@
10
10
  <Hds::Form::Checkbox::Base
11
11
  class="hds-form-field__control"
12
12
  @value={{@value}}
13
+ name={{@name}}
13
14
  ...attributes
14
15
  id={{F.id}}
15
16
  aria-describedby={{F.ariaDescribedBy}}
package/addon/components/hds/form/checkbox/group.hbs CHANGED
@@ -1,4 +1,11 @@
1
- <Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...attributes as |F|>
1
+ <Hds::Form::Fieldset
2
+ @layout={{@layout}}
3
+ @name={{@name}}
4
+ @isRequired={{@isRequired}}
5
+ @isOptional={{@isOptional}}
6
+ ...attributes
7
+ as |F|
8
+ >
2
9
  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
3
10
  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
4
11
  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
@@ -6,7 +13,7 @@
6
13
  {{yield
7
14
  (hash
8
15
  Checkbox::Field=(component
9
- "hds/form/checkbox/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
16
+ "hds/form/checkbox/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired name=@name
10
17
  )
11
18
  )
12
19
  }}
package/addon/components/hds/form/indicator/index.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#if @isOptional}}
2
- <span class="hds-form-indicator hds-form-indicator--optional">(Optional)</span>
2
+ <span class={{this.classNames}}>(Optional)</span>
3
3
  {{/if}}
4
4
  {{#if @isRequired}}
5
- <Hds::Badge class="hds-form-indicator" @size="small" @color="neutral" @text="Required" />
5
+ <Hds::Badge class={{this.classNames}} @size="small" @color="neutral" @text="Required" />
6
6
  {{/if}}
package/addon/components/hds/form/indicator/index.js ADDED
@@ -0,0 +1,22 @@
1
+ import Component from '@glimmer/component';
2
+
3
+ export default class HdsFormIndicatorIndexComponent extends Component {
4
+ /**
5
+ * Get the class names to apply to the component.
6
+ * @method classNames
7
+ * @return {string} The "class" attribute to apply to the component.
8
+ */
9
+ get classNames() {
10
+ let classes = ['hds-form-indicator'];
11
+
12
+ if (this.args.isOptional) {
13
+ // add speficic class for "optional" indicator
14
+ classes.push('hds-form-indicator--optional');
15
+
16
+ // add typographic classes
17
+ classes.push('hds-typography-body-100', 'hds-font-weight-regular');
18
+ }
19
+
20
+ return classes.join(' ');
21
+ }
22
+ }
package/addon/components/hds/form/radio/field.hbs CHANGED
@@ -10,6 +10,7 @@
10
10
  <Hds::Form::Radio::Base
11
11
  class="hds-form-field__control"
12
12
  @value={{@value}}
13
+ name={{@name}}
13
14
  ...attributes
14
15
  id={{F.id}}
15
16
  aria-describedby={{F.ariaDescribedBy}}
package/addon/components/hds/form/radio/group.hbs CHANGED
@@ -1,4 +1,11 @@
1
- <Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...attributes as |F|>
1
+ <Hds::Form::Fieldset
2
+ @layout={{@layout}}
3
+ @name={{@name}}
4
+ @isRequired={{@isRequired}}
5
+ @isOptional={{@isOptional}}
6
+ ...attributes
7
+ as |F|
8
+ >
2
9
  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
3
10
  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
4
11
  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
@@ -6,7 +13,7 @@
6
13
  {{yield
7
14
  (hash
8
15
  Radio::Field=(component
9
- "hds/form/radio/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
16
+ "hds/form/radio/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired name=@name
10
17
  )
11
18
  )
12
19
  }}
package/app/styles/components/form/checkbox.scss CHANGED
@@ -10,10 +10,10 @@
10
10
  .hds-form-checkbox {
11
11
  appearance: none;
12
12
  background-position: center center;
13
- background-size: 12px 12px;
14
- border-radius: var(--token-form-checkbox-border-radius);
13
+ background-size: var(--token-form-checkbox-background-image-size) var(--token-form-checkbox-background-image-size);
14
+ border-width: var(--token-form-checkbox-border-width);
15
15
  border-style: solid;
16
- border-width: 1px;
16
+ border-radius: var(--token-form-checkbox-border-radius);
17
17
  cursor: pointer;
18
18
  height: var(--token-form-checkbox-size);
19
19
  margin: 0;
@@ -25,41 +25,33 @@
25
25
  // base (default)
26
26
 
27
27
  &:not(:checked) {
28
- background-color: var(--token-form-control-background-color-default);
29
- border-color: var(--token-form-control-border-color-default);
28
+ background-color: var(--token-form-control-base-surface-color-default);
29
+ border-color: var(--token-form-control-base-border-color-default);
30
30
  box-shadow: var(--hds-elevation-inset-box-shadow);
31
31
  }
32
32
  &:checked {
33
- background-color: var(--token-form-control-background-color-checked);
34
- border-color: var(--token-form-control-border-color-checked);
35
- // notice: the "tick" color is hardcoded here!
36
- 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='%23FFF'/%3e%3c/svg%3e");
33
+ background-color: var(--token-form-control-checked-surface-color-default);
34
+ border-color: var(--token-form-control-checked-border-color-default);
35
+ background-image: var(--token-form-checkbox-background-image-data-url);
37
36
  }
38
37
 
39
38
  // hover
40
39
 
41
40
  &:hover:not(:checked),
42
41
  &.mock-hover:not(:checked) {
43
- background-color: var(--token-form-control-background-color-default-hover);
44
- border-color: var(--token-form-control-border-color-default-hover);
42
+ background-color: var(--token-form-control-base-surface-color-hover);
43
+ border-color: var(--token-form-control-base-border-color-hover);
45
44
  }
46
45
  &:hover:checked,
47
46
  &.mock-hover:checked {
48
- background-color: var(--token-form-control-background-color-checked-hover);
49
- border-color: var(--token-form-control-border-color-checked-hover);
47
+ background-color: var(--token-form-control-checked-border-color-default);
48
+ border-color: var(--token-form-control-checked-border-color-hover);
50
49
  }
51
50
 
52
- // focus
51
+ // focus (same for all the states)
53
52
 
54
- &:focus:not(:checked),
55
- &.mock-focus:not(:checked) {
56
- border-color: var(--token-form-control-border-color-default);
57
- outline: 3px solid var(--token-color-focus-action-external);
58
- outline-offset: 1px;
59
- }
60
- &:focus:checked,
61
- &.mock-focus:checked {
62
- border-color: var(--token-form-control-border-color-checked);
53
+ &:focus,
54
+ &.mock-focus {
63
55
  outline: 3px solid var(--token-color-focus-action-external);
64
56
  outline-offset: 1px;
65
57
  }
@@ -67,17 +59,16 @@
67
59
  // DISABLED
68
60
 
69
61
  &:disabled:not(:checked) {
70
- background-color: var(--token-form-control-background-color-disabled);
71
- border-color: var(--token-form-control-border-color-disabled);
62
+ background-color: var(--token-form-control-disabled-surface-color);
63
+ border-color: var(--token-form-control-disabled-border-color);
72
64
  box-shadow: none;
73
65
  cursor: not-allowed;
74
66
  }
75
67
  &:disabled:checked {
76
- background-color: var(--token-form-control-background-color-disabled);
77
- border-color: var(--token-form-control-border-color-disabled);
68
+ background-color: var(--token-form-control-disabled-surface-color);
69
+ border-color: var(--token-form-control-disabled-border-color);
78
70
  box-shadow: none;
79
- // notice: the "tick" color is hardcoded here!
80
- 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");
71
+ background-image: var(--token-form-checkbox-background-image-data-url-disabled);
81
72
  cursor: not-allowed;
82
73
  }
83
74
  }
package/app/styles/components/form/error.scss CHANGED
@@ -6,15 +6,15 @@
6
6
 
7
7
  .hds-form-error {
8
8
  align-items: flex-start;
9
- color: var(--token-form-control-foreground-color-critical);
9
+ color: var(--token-form-error-color);
10
10
  display: flex;
11
11
  }
12
12
 
13
13
  .hds-form-error__icon {
14
14
  flex: none;
15
- height: 14px;
15
+ height: var(--token-form-error-icon-size);
16
16
  margin: 2px 8px 2px 0;
17
- width: 14px;
17
+ width: var(--token-form-error-icon-size);
18
18
  }
19
19
 
20
20
  .hds-form-error__content {
package/app/styles/components/form/helper-text.scss CHANGED
@@ -5,6 +5,6 @@
5
5
  //
6
6
 
7
7
  .hds-form-helper-text {
8
- color: var(--token-form-helper-text-foreground-color);
8
+ color: var(--token-form-helper-text-color);
9
9
  display: block;
10
10
  }
package/app/styles/components/form/index.scss CHANGED
@@ -2,9 +2,6 @@
2
2
  // FORM > INDEX
3
3
  //
4
4
 
5
- // TODO/TEMP: this will be replaced with proper tokens later
6
- @use "./_tokens";
7
-
8
5
  @use "./label";
9
6
  @use "./helper-text";
10
7
  @use "./error";
package/app/styles/components/form/indicator.scss CHANGED
@@ -6,10 +6,5 @@
6
6
 
7
7
  // Used for the 'optional' indicator
8
8
  .hds-form-indicator--optional {
9
- color: var(--token-color-foreground-faint);
10
- font-family: var(--token-typography-font-stack-text);
11
- font-size: var(--token-typography-body-100-font-size);
12
- font-weight: var(--token-typography-font-weight-regular);
13
- // notice: here we're using the same line-height as the label/legend text to have the right vertical alignment
14
- line-height: var(--token-typography-body-200-font-size);
9
+ color: var(--token-form-indicator-optional-color);
15
10
  }
package/app/styles/components/form/label.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  //
6
6
 
7
7
  .hds-form-label {
8
- color: var(--token-form-label-foreground-color);
8
+ color: var(--token-form-label-color);
9
9
  display: block;
10
10
  max-width: 100%;
11
11
  width: max-content; // to avoid it extends the full width of the parent container, leading to invisible interactive area
package/app/styles/components/form/legend.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  //
6
6
 
7
7
  .hds-form-legend {
8
- color: var(--token-form-label-foreground-color); // same color as "label"
8
+ color: var(--token-form-legend-color);
9
9
  display: block;
10
10
 
11
11
  // if a "badge" element (included the 'required' indicator) is child of the legend
package/app/styles/components/form/radio.scss CHANGED
@@ -10,56 +10,48 @@
10
10
  .hds-form-radio {
11
11
  appearance: none;
12
12
  background-position: center center;
13
- background-size: 12px 12px;
13
+ background-size: var(--token-form-radio-background-image-size) var(--token-form-radio-background-image-size);
14
14
  border-radius: 50%;
15
15
  border-style: solid;
16
- border-width: 1px;
16
+ border-width: var(--token-form-radio-border-width);
17
17
  cursor: pointer;
18
- height: var(--token-form-checkbox-size); // same as checkbox
18
+ height: var(--token-form-radio-size);
19
19
  margin: 0;
20
20
  padding: 0;
21
- width: var(--token-form-checkbox-size);
21
+ width: var(--token-form-radio-size);
22
22
 
23
23
  // STATUS
24
24
 
25
25
  // base (default)
26
26
 
27
27
  &:not(:checked) {
28
- background-color: var(--token-form-control-background-color-default);
29
- border-color: var(--token-form-control-border-color-default);
28
+ background-color: var(--token-form-control-base-surface-color-default);
29
+ border-color: var(--token-form-control-base-border-color-default);
30
30
  box-shadow: var(--hds-elevation-inset-box-shadow);
31
31
  }
32
32
  &:checked {
33
- background-color: var(--token-form-control-background-color-checked);
34
- border-color: var(--token-form-control-border-color-checked);
35
- // notice: the "dot" color is hardcoded here!
36
- 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='%23ffffff'/%3e%3c/svg%3e");
33
+ background-color: var(--token-form-control-checked-surface-color-default);
34
+ border-color: var(--token-form-control-checked-border-color-default);
35
+ background-image: var(--token-form-radio-background-image-data-url);
37
36
  }
38
37
 
39
38
  // hover
40
39
 
41
40
  &:hover:not(:checked),
42
41
  &.mock-hover:not(:checked) {
43
- background-color: var(--token-form-control-background-color-default-hover);
44
- border-color: var(--token-form-control-border-color-default-hover);
42
+ background-color: var(--token-form-control-base-surface-color-hover);
43
+ border-color: var(--token-form-control-base-border-color-hover);
45
44
  }
46
45
  &:hover:checked,
47
46
  &.mock-hover:checked {
48
- background-color: var(--token-form-control-background-color-checked-hover);
49
- border-color: var(--token-form-control-border-color-checked-hover);
47
+ background-color: var(--token-form-control-checked-border-color-default);
48
+ border-color: var(--token-form-control-checked-border-color-hover);
50
49
  }
51
50
 
52
- // focus
51
+ // focus (same for all the states)
53
52
 
54
- &:focus:not(:checked),
55
- &.mock-focus:not(:checked) {
56
- border-color: var(--token-form-control-border-color-default);;
57
- outline: 3px solid var(--token-color-focus-action-external);
58
- outline-offset: 1px;
59
- }
60
- &:focus:checked,
61
- &.mock-focus:checked {
62
- border-color: var(--token-form-control-border-color-checked);
53
+ &:focus,
54
+ &.mock-focus {
63
55
  outline: 3px solid var(--token-color-focus-action-external);
64
56
  outline-offset: 1px;
65
57
  }
@@ -67,17 +59,16 @@
67
59
  // DISABLED
68
60
 
69
61
  &:disabled:not(:checked) {
70
- background-color: var(--token-form-control-background-color-disabled);
71
- border-color: var(--token-form-control-border-color-disabled);
62
+ background-color: var(--token-form-control-disabled-surface-color);
63
+ border-color: var(--token-form-control-disabled-border-color);
72
64
  box-shadow: none;
73
65
  cursor: not-allowed;
74
66
  }
75
67
  &:disabled:checked {
76
- background-color: var(--token-form-control-background-color-disabled);
77
- border-color: var(--token-form-control-border-color-disabled);
68
+ background-color: var(--token-form-control-disabled-surface-color);
69
+ border-color: var(--token-form-control-disabled-border-color);
78
70
  box-shadow: none;
79
- // notice: the "dot" color is hardcoded here!
80
- 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='%238C909C'/%3e%3c/svg%3e");
71
+ background-image: var(--token-form-radio-background-image-data-url-disabled);
81
72
  cursor: not-allowed;
82
73
  }
83
74
  }
package/app/styles/components/form/select.scss CHANGED
@@ -8,17 +8,17 @@
8
8
 
9
9
  .hds-form-select {
10
10
  appearance: none;
11
- background-color: var(--token-form-control-background-color-default);
12
- // notice: the icon color is hardcoded here!
13
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E");
14
- background-position: right 7px top 9px; // we have to take into account the border
11
+ background-color: var(--token-form-control-base-surface-color-default);
12
+ background-image: var(--token-form-select-background-image-data-url);
13
+ background-position: right var(--token-form-select-background-image-position-right-x) top var(--token-form-select-background-image-position-top-y); // we have to take into account the border
15
14
  background-repeat: no-repeat;
16
- background-size: 16px;
17
- border: 1px solid var(--token-form-control-border-color-default);
15
+ background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
16
+ border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
18
17
  border-radius: var(--token-form-control-border-radius);
19
- color: var(--token-form-control-foreground-color-default);
18
+ color: var(--token-form-control-base-foreground-value-color);
20
19
  box-shadow: var(--token-elevation-low-box-shadow);
21
- padding: 7px 31px 7px 7px; // we have to take into account the border - 32px is to have space for the icon
20
+ padding: var( --token-form-control-padding);
21
+ padding-right: calc(var( --token-form-control-padding) + 24px); // extra space for the icon
22
22
  max-width: 100%;
23
23
 
24
24
 
@@ -26,7 +26,7 @@
26
26
 
27
27
  &:hover,
28
28
  &.mock-hover {
29
- border-color: var(--token-form-control-border-color-default-hover);
29
+ border-color: var(--token-form-control-base-border-color-hover);
30
30
  }
31
31
 
32
32
  // focus (same for all the states)
@@ -42,11 +42,10 @@
42
42
  // DISABLED
43
43
 
44
44
  &:disabled {
45
- // notice: the icon color is hardcoded here!
46
- background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E");
47
- background-color: var(--token-form-control-background-color-disabled);
48
- border-color: var(--token-form-control-border-color-disabled);
49
- color: var(--token-form-control-foreground-color-disabled);
45
+ background-image: var(--token-form-select-background-image-data-url-disabled);
46
+ background-color: var(--token-form-control-disabled-surface-color);
47
+ border-color: var(--token-form-control-disabled-border-color);
48
+ color: var(--token-form-control-disabled-foreground-color);
50
49
  cursor: not-allowed;
51
50
  box-shadow: none;
52
51
  }
@@ -54,11 +53,11 @@
54
53
  // INVALID
55
54
 
56
55
  &.hds-form-select--is-invalid {
57
- border-color: var(--token-form-control-border-color-critical);
56
+ border-color: var(--token-form-control-invalid-border-color-default);
58
57
 
59
58
  &:hover,
60
59
  &.mock-hover {
61
- border-color: var(--token-form-control-border-color-critical-hover);
60
+ border-color: var(--token-form-control-invalid-border-color-hover);
62
61
  }
63
62
 
64
63
  &:focus,
package/app/styles/components/form/text-input.scss CHANGED
@@ -7,26 +7,26 @@
7
7
  // "BASE" CONTROL
8
8
 
9
9
  .hds-form-text-input {
10
- background-color: var(--token-form-control-background-color-default);
11
- border: 1px solid var(--token-form-control-border-color-default);
10
+ background-color: var(--token-form-control-base-surface-color-default);
11
+ border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
12
12
  border-radius: var(--token-form-control-border-radius);
13
13
  box-shadow: var(--hds-elevation-inset-box-shadow);
14
- color: var(--token-form-control-foreground-color-default);
15
- padding: 7px; // we have to take into account the border
14
+ color: var(--token-form-control-base-foreground-value-color);
15
+ padding: var( --token-form-control-padding);
16
16
  width: 100%;
17
17
  max-width: 100%;
18
18
 
19
19
  // PLACEHOLDER
20
20
 
21
21
  ::placeholder {
22
- color: var(--token-form-control-placeholder-color);
22
+ color: var(--token-form-control-base-foreground-placeholder-color);
23
23
  }
24
24
 
25
25
  // STATUS
26
26
 
27
27
  &:hover,
28
28
  &.mock-hover {
29
- border-color: var(--token-form-control-border-color-default-hover);
29
+ border-color: var(--token-form-control-base-border-color-hover);
30
30
  }
31
31
 
32
32
  // focus (same for all the states)
@@ -42,30 +42,30 @@
42
42
  // READONLY
43
43
 
44
44
  &:read-only {
45
- background-color: var(--token-form-control-background-color-readonly);
46
- border-color: var(--token-form-control-border-color-readonly);
45
+ background-color: var(--token-form-control-readonly-surface-color);
46
+ border-color: var(--token-form-control-readonly-border-color);
47
47
  box-shadow: none;
48
- color: var(--token-form-control-foreground-color-readonly);
48
+ color: var(--token-form-control-readonly-foreground-color);
49
49
  }
50
50
 
51
51
  // DISABLED
52
52
 
53
53
  &:disabled {
54
- background-color: var(--token-form-control-background-color-disabled);
55
- border-color: var(--token-form-control-border-color-disabled);
54
+ background-color: var(--token-form-control-disabled-surface-color);
55
+ border-color: var(--token-form-control-disabled-border-color);
56
56
  box-shadow: none;
57
- color: var(--token-form-control-foreground-color-disabled);
57
+ color: var(--token-form-control-disabled-foreground-color);
58
58
  cursor: not-allowed;
59
59
  }
60
60
 
61
61
  // INVALID
62
62
 
63
63
  &.hds-form-text-input--is-invalid {
64
- border-color: var(--token-form-control-border-color-critical);
64
+ border-color: var(--token-form-control-invalid-border-color-default);
65
65
 
66
66
  &:hover,
67
67
  &.mock-hover {
68
- border-color: var(--token-form-control-border-color-critical-hover);
68
+ border-color: var(--token-form-control-invalid-border-color-hover);
69
69
  }
70
70
 
71
71
  &:focus,
@@ -107,37 +107,34 @@
107
107
  // notice: the original in Chrome has two assets, one for light and one for dark mode, and uses a special syntax, but apparently it doesn't work if used in a stylesheet
108
108
  &[type="date"] {
109
109
  &::-webkit-calendar-picker-indicator {
110
- // notice: the icon color is hardcoded here!
111
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e");
110
+ background-image: var(--token-form-text-input-background-image-data-url-date);
112
111
  background-position: center center;
113
- background-size: 16px;
112
+ background-size: var(--token-form-text-input-background-image-size);
114
113
  }
115
114
  }
116
115
  &[type="time"] {
117
116
  &::-webkit-calendar-picker-indicator {
118
- // notice: the icon color is hardcoded here!
119
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e");
117
+ background-image: var(--token-form-text-input-background-image-data-url-time);
120
118
  background-position: center center;
121
- background-size: 16px;
119
+ background-size: var(--token-form-text-input-background-image-size);
122
120
  }
123
121
  }
124
122
 
125
123
  // SEARCH
126
124
  &[type="search"] {
127
- padding-left: 32px;
128
- // notice: the icon color is hardcoded here!
129
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e");
130
- background-position: 7px 50%;
131
- background-size: 16px;
125
+ padding-left: calc(var( --token-form-control-padding) + 24px); // extra space for the icon
126
+ background-image: var(--token-form-text-input-background-image-data-url-search);
127
+ background-position: var(--token-form-text-input-background-image-position-x) 50%;
128
+ background-size: var(--token-form-text-input-background-image-size);
132
129
  background-repeat: no-repeat;
133
130
 
134
131
  &::-webkit-search-cancel-button {
135
132
  -webkit-appearance: none;
136
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e");
133
+ background-image: var(--token-form-text-input-background-image-data-url-search-cancel);
137
134
  background-position: center center;
138
- background-size: 16px;
139
- height: 16px;
140
- width: 16px;
135
+ background-size: var(--token-form-text-input-background-image-size);
136
+ height: var(--token-form-text-input-background-image-size);
137
+ width: var(--token-form-text-input-background-image-size);
141
138
  }
142
139
  }
143
140
  }
package/app/styles/components/form/textarea.scss CHANGED
@@ -7,12 +7,12 @@
7
7
  // "BASE" CONTROL
8
8
 
9
9
  .hds-form-textarea {
10
- background-color: var(--token-form-control-background-color-default);
11
- border: 1px solid var(--token-form-control-border-color-default);
10
+ background-color: var(--token-form-control-base-surface-color-default);
11
+ border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
12
12
  border-radius: var(--token-form-control-border-radius);
13
13
  box-shadow: var(--hds-elevation-inset-box-shadow);
14
- color: var(--token-form-control-foreground-color-default);
15
- padding: 7px; // we have to take into account the border
14
+ color: var(--token-form-control-base-foreground-value-color);
15
+ padding: var( --token-form-control-padding);
16
16
  resize: vertical;
17
17
  width: 100%;
18
18
  max-width: 100%;
@@ -20,14 +20,14 @@
20
20
  // PLACEHOLDER
21
21
 
22
22
  ::placeholder {
23
- color: var(--token-form-control-placeholder-color);
23
+ color: var(--token-form-control-base-foreground-placeholder-color);
24
24
  }
25
25
 
26
26
  // STATUS
27
27
 
28
28
  &:hover,
29
29
  &.mock-hover {
30
- border-color: var(--token-form-control-border-color-default-hover);
30
+ border-color: var(--token-form-control-base-border-color-hover);
31
31
  }
32
32
 
33
33
  // focus (same for all the states)
@@ -43,30 +43,30 @@
43
43
  // READONLY
44
44
 
45
45
  &:read-only {
46
- background-color: var(--token-form-control-background-color-readonly);
47
- border-color: var(--token-form-control-border-color-readonly);
46
+ background-color: var(--token-form-control-readonly-surface-color);
47
+ border-color: var(--token-form-control-disabled-border-color);
48
48
  box-shadow: none;
49
- color: var(--token-form-control-foreground-color-readonly);
49
+ color: var(--token-form-control-disabled-foreground-color);
50
50
  }
51
51
 
52
52
  // DISABLED
53
53
 
54
54
  &:disabled {
55
- background-color: var(--token-form-control-background-color-disabled);
56
- border-color: var(--token-form-control-border-color-disabled);
55
+ background-color: var(--token-form-control-disabled-surface-color);
56
+ border-color: var(--token-form-control-disabled-border-color);
57
57
  box-shadow: none;
58
- color: var(--token-form-control-foreground-color-disabled);
58
+ color: var(--token-form-control-disabled-foreground-color);
59
59
  cursor: not-allowed;
60
60
  }
61
61
 
62
62
  // INVALID
63
63
 
64
64
  &.hds-form-textarea--is-invalid {
65
- border-color: var(--token-form-control-border-color-critical);
65
+ border-color: var(--token-form-control-invalid-border-color-default);
66
66
 
67
67
  &:hover,
68
68
  &.mock-hover {
69
- border-color: var(--token-form-control-border-color-critical-hover);
69
+ border-color: var(--token-form-control-invalid-border-color-hover);
70
70
  }
71
71
 
72
72
  &:focus,
package/app/styles/components/form/toggle.scss CHANGED
@@ -4,11 +4,6 @@
4
4
  // properties within each class are sorted alphabetically
5
5
  //
6
6
 
7
- @use "sass:math";
8
-
9
- $hds-form-toggle-control-width: 32px;
10
- $hds-form-toggle-control-height: 16px; // for the other controls we use "--token-form-checkbox-size" but in this case we need a Sass variable to do math operations on it
11
- $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
12
7
 
13
8
  // "BASE" CONTROL
14
9
 
@@ -47,41 +42,54 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
47
42
  // facade (visible)
48
43
 
49
44
  .hds-form-toggle__facade {
45
+ background-image: var(--token-form-toggle-background-image-data-url);
50
46
  background-repeat: no-repeat;
51
- background-position: 2px 50%;
52
- background-size: 12px 12px;
53
- border-radius: $hds-form-toggle-border-radius;
47
+ background-position: var(--token-form-toggle-background-image-position-x) 50%;
48
+ background-size: var(--token-form-toggle-background-image-size) var(--token-form-toggle-background-image-size);
49
+ border-radius: calc(var(--token-form-toggle-height) / 2);
54
50
  // notice: we want to share the border color between the "thumb" and the "track" so we use a local CSS prop for this
55
- border: 1px solid var(--border-color);
51
+ border: var(--token-form-radio-border-width) solid var(--border-color);
56
52
  display: block;
57
- height: $hds-form-toggle-control-height;
53
+ height: var(--token-form-toggle-height);
58
54
  position: relative;
59
- width: $hds-form-toggle-control-width;
60
- transition: background 0.2s;
55
+ width: var(--token-form-toggle-width);
56
+
57
+ @media (prefers-reduced-motion: no-preference) {
58
+ transition-property: all;
59
+ transition-duration: var(--token-form-toggle-transition-duration);
60
+ transition-timing-function: var(--token-form-toggle-transition-timing-function);
61
+ }
61
62
 
62
63
  // used for the "thumb"
63
64
 
64
65
  &::after {
65
- background-color: #fff;
66
+ background-color: var(--token-form-control-base-surface-color-default);
66
67
  border-radius: 50%;
67
- border: 1px solid var(--border-color);
68
- width: $hds-form-toggle-control-height;
69
- height: $hds-form-toggle-control-height;
68
+ border: var(--token-form-radio-border-width) solid var(--border-color);
69
+ width: var(--token-form-toggle-thumb-size);
70
+ height: var(--token-form-toggle-thumb-size);
70
71
  content: '';
71
- left: -1px;
72
+ left: calc(var(--token-form-radio-border-width) * -1);
72
73
  position: absolute;
73
74
  transform: translate3d(0, 0, 0);
74
- transition: transform 0.2s cubic-bezier(0.68, -0.2, 0.265, 1.15), border-color 0.2s ease-in;
75
- top: -1px;
75
+ top: calc(var(--token-form-radio-border-width) * -1);;
76
+
77
+ @media (prefers-reduced-motion: no-preference) {
78
+ transition-property: all;
79
+ transition-duration: var(--token-form-toggle-transition-duration);
80
+ transition-timing-function: var(--token-form-toggle-transition-timing-function);
81
+ }
76
82
  }
77
83
 
78
84
  // used for the focus
79
85
 
80
86
  &::before {
81
- $border-width: 3px;
82
- $shift: $border-width + 2px; // we need to take in account also the border width of the parent
83
- border-radius: $hds-form-toggle-border-radius + $border-width;
84
- border-width: $border-width;
87
+ // notice: to avoid too many nested calc() operation, we have decided to compute directly the values in Sass
88
+ $outline-width: 3px;
89
+ $outline-offset: 1px;
90
+ $shift: $outline-width + $outline-offset + 1px; // here 1px refers to "--token-form-radio-border-width"
91
+ border-radius: calc(var(--token-form-toggle-height) / 2 + $outline-width + $outline-offset);
92
+ border-width: $outline-width;
85
93
  bottom: -$shift;
86
94
  content: "";
87
95
  left: -$shift;
@@ -96,18 +104,16 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
96
104
  // base (default)
97
105
 
98
106
  :not(:checked) + & {
99
- --border-color: var(--token-form-control-border-color-default);
100
- background-color: var(--token-color-surface-strong); // not like the other controls!
107
+ --border-color: var(--token-form-control-base-border-color-default);
108
+ background-color: var(--token-form-toggle-base-surface-color-default); // this is specific for "toggle", is not like the other controls!
101
109
  }
102
110
  :checked + & {
103
- --border-color: var(--token-form-control-border-color-checked);
104
- background-color: var(--token-form-control-background-color-checked);
105
- // notice: the "tick" color is hardcoded here!
106
- 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='%23FFF'/%3e%3c/svg%3e");
111
+ --border-color: var(--token-form-control-checked-border-color-default);
112
+ background-color: var(--token-form-control-checked-surface-color-default);
107
113
 
108
114
  &::after {
109
- $shift: $hds-form-toggle-control-width - $hds-form-toggle-control-height;
110
- transform: translate3d($shift, 0, 0);
115
+ $translation: calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size));
116
+ transform: translate3d($translation, 0, 0);
111
117
  }
112
118
  }
113
119
 
@@ -115,32 +121,21 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
115
121
 
116
122
  :hover:not(:checked) + &,
117
123
  .mock-hover:not(:checked) + & {
118
- --border-color: var(--token-form-control-border-color-default-hover);
124
+ --border-color: var(--token-form-control-base-border-color-hover);
119
125
  }
120
126
  :hover:checked + &,
121
127
  .mock-hover:checked + & {
122
- --border-color: var(--token-form-control-border-color-checked-hover);
123
- background-color: var(--token-form-control-background-color-checked-hover);
128
+ --border-color: var(--token-form-control-checked-border-color-hover);
129
+ background-color: var(--token-form-control-checked-border-color-default);
124
130
  }
125
131
 
126
132
  // focus (same for all the states)
127
133
 
128
- :focus:not(:checked) + &,
129
- .mock-focus:not(:checked) + & {
130
- --border-color: var(--token-form-control-border-color-default);
131
-
132
- &::before {
133
- border-style: solid;
134
- border-color: var( --token-color-focus-action-external);
135
- }
136
- }
137
- :focus:checked + &,
138
- .mock-focus:checked + & {
139
- --border-color: var(--token-form-control-border-color-checked);
140
-
134
+ :focus + &,
135
+ .mock-focus + & {
141
136
  &::before {
142
137
  border-style: solid;
143
- border-color: var( --token-color-focus-action-external);
138
+ border-color: var(--token-color-focus-action-external);
144
139
  }
145
140
  }
146
141
 
@@ -148,9 +143,8 @@ $hds-form-toggle-border-radius: math.div($hds-form-toggle-control-height, 2);
148
143
 
149
144
  :disabled:not(:checked) + &,
150
145
  :disabled:checked + & {
151
- background-color: var(--token-form-control-background-color-disabled);
152
- --border-color: var(--token-form-control-border-color-disabled);
153
- // notice: the "tick" color is hardcoded here!
154
- 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");
146
+ --border-color: var(--token-form-control-disabled-border-color);
147
+ background-color: var(--token-form-control-disabled-surface-color);
148
+ background-image: var(--token-form-toggle-background-image-data-url-disabled);
155
149
  }
156
150
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "0.12.13",
3
+ "version": "0.12.14",
4
4
  "description": "HashiCorp Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@hashicorp/design-system-tokens": "^0.8.1",
38
- "@hashicorp/ember-flight-icons": "^2.0.8",
38
+ "@hashicorp/ember-flight-icons": "^2.0.9",
39
39
  "ember-auto-import": "^2.4.1",
40
40
  "ember-cli-babel": "^7.26.11",
41
41
  "ember-cli-htmlbars": "^6.0.1",
@@ -50,7 +50,7 @@
50
50
  "@embroider/test-setup": "^1.5.0",
51
51
  "@glimmer/component": "^1.0.4",
52
52
  "@glimmer/tracking": "^1.0.4",
53
- "@percy/cli": "^1.6.1",
53
+ "@percy/cli": "^1.6.3",
54
54
  "@percy/ember": "^3.0.0",
55
55
  "babel-eslint": "^10.1.0",
56
56
  "broccoli-asset-rev": "^3.0.0",
package/app/styles/components/form/_tokens.scss DELETED
@@ -1,41 +0,0 @@
1
- //
2
- // FORM > TOKENS
3
- //
4
- // TODO: this will be removed once we define the correct component-level tokens for the "form controls" component
5
- //
6
-
7
- :root {
8
- // INPUT / DEFAULT
9
- --token-form-control-foreground-color-default: var(--token-color-foreground-strong);
10
- --token-form-control-background-color-default: var(--token-color-surface-interactive);
11
- --token-form-control-background-color-default-hover: var(--token-color-surface-interactive-hover);
12
- --token-form-control-border-color-default: #8c909c;
13
- --token-form-control-border-color-default-hover: #656a76;
14
- // INPUT / CHECKED
15
- --token-form-control-background-color-checked: #1060FF;
16
- --token-form-control-background-color-checked-hover: #0C56E9;
17
- --token-form-control-border-color-checked: #0C56E9;
18
- --token-form-control-border-color-checked-hover: #0046D1;
19
- // INPUT / READONLY
20
- --token-form-control-foreground-color-readonly: var(--token-color-foreground-primary);
21
- --token-form-control-background-color-readonly: var(--token-color-surface-strong);
22
- --token-form-control-border-color-readonly: var(--token-color-border-faint);
23
- // INPUT / DISABLED
24
- --token-form-control-foreground-color-disabled: var(--token-color-foreground-disabled);
25
- --token-form-control-background-color-disabled: var(--token-color-surface-interactive-disabled);
26
- --token-form-control-border-color-disabled: var(--token-color-border-primary);
27
- // INPUT / INVALID
28
- --token-form-control-foreground-color-critical: var(--token-color-foreground-critical-on-surface);
29
- --token-form-control-border-color-critical: #c00005;
30
- --token-form-control-border-color-critical-hover: #940004;
31
- // INPUT / PLACEHOLDER
32
- --token-form-control-placeholder-color: var(--token-color-foreground-faint);
33
- // INPUT / BORDER SIZING
34
- --token-form-control-border-radius: 5px;
35
- // LABEL/HELPER-TEXT
36
- --token-form-label-foreground-color: var(--token-color-foreground-strong);
37
- --token-form-helper-text-foreground-color: var(--token-color-foreground-faint);
38
- // CHECKBOX
39
- --token-form-checkbox-size: 16px;
40
- --token-form-checkbox-border-radius: 3px;
41
- }