@charcoal-ui/react 5.8.1 → 5.9.0-beta.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.
Files changed (26) hide show
  1. package/dist/index.css +566 -586
  2. package/dist/index.css.map +1 -1
  3. package/dist/layered.css +566 -586
  4. package/dist/layered.css.map +1 -1
  5. package/package.json +5 -6
  6. package/src/components/Button/index.css +105 -120
  7. package/src/components/Checkbox/index.css +7 -7
  8. package/src/components/Clickable/index.css +11 -11
  9. package/src/components/DropdownSelector/index.css +33 -33
  10. package/src/components/FieldLabel/index.css +6 -6
  11. package/src/components/HintText/index.css +5 -7
  12. package/src/components/IconButton/index.css +87 -89
  13. package/src/components/LoadingSpinner/index.css +11 -9
  14. package/src/components/Modal/index.css +5 -5
  15. package/src/components/MultiSelect/__snapshots__/index.css.snap +3 -3
  16. package/src/components/MultiSelect/index.css +74 -82
  17. package/src/components/Pagination/__snapshots__/index.css.snap +15 -10
  18. package/src/components/Pagination/index.css +79 -80
  19. package/src/components/Radio/index.css +4 -4
  20. package/src/components/SegmentedControl/index.css +23 -25
  21. package/src/components/Switch/index.css +7 -7
  22. package/src/components/TagItem/__snapshots__/index.css.snap +2 -0
  23. package/src/components/TagItem/index.css +80 -71
  24. package/src/components/TextArea/index.css +24 -23
  25. package/src/components/TextEllipsis/index.css +10 -10
  26. package/src/components/TextField/index.css +19 -21
package/src/components/MultiSelect/index.css CHANGED
@@ -5,12 +5,12 @@
5
5
  position: relative;
6
6
  cursor: pointer;
7
7
  gap: 4px;
8
- }
9
8
 
10
- .charcoal-multi-select:disabled,
11
- .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
12
- opacity: 0.32;
13
- cursor: default;
9
+ &:disabled,
10
+ &[aria-disabled]:not([aria-disabled='false']) {
11
+ opacity: 0.32;
12
+ cursor: default;
13
+ }
14
14
  }
15
15
 
16
16
  .charcoal-multi-select-label {
@@ -19,22 +19,22 @@
19
19
  font-size: 14px;
20
20
  line-height: 22px;
21
21
  color: var(--charcoal-text2);
22
- }
23
22
 
24
- .charcoal-multi-select-label::before {
25
- display: block;
26
- width: 0;
27
- height: 0;
28
- content: '';
29
- margin-top: -4px;
30
- }
23
+ &::before {
24
+ display: block;
25
+ width: 0;
26
+ height: 0;
27
+ content: '';
28
+ margin-top: -4px;
29
+ }
31
30
 
32
- .charcoal-multi-select-label::after {
33
- display: block;
34
- width: 0;
35
- height: 0;
36
- content: '';
37
- margin-bottom: -4px;
31
+ &::after {
32
+ display: block;
33
+ width: 0;
34
+ height: 0;
35
+ content: '';
36
+ margin-bottom: -4px;
37
+ }
38
38
  }
39
39
 
40
40
  .charcoal-multi-select-input[type='checkbox'] {
@@ -48,65 +48,57 @@
48
48
  transition:
49
49
  0.2s background-color,
50
50
  0.2s box-shadow;
51
- }
52
51
 
53
- .charcoal-multi-select-input[type='checkbox']:checked {
54
- background-color: var(--charcoal-brand);
55
- }
52
+ &:checked {
53
+ background-color: var(--charcoal-brand);
54
+ }
56
55
 
57
- .charcoal-multi-select-input[type='checkbox']:focus {
58
- outline: none;
59
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
60
- }
56
+ &:focus {
57
+ outline: none;
58
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
59
+ }
61
60
 
62
- .charcoal-multi-select-input[type='checkbox']:focus-visible {
63
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
64
- }
61
+ &:focus-visible {
62
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
63
+ }
65
64
 
66
- .charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
67
- box-shadow: none;
68
- }
65
+ &:focus:not(:focus-visible) {
66
+ box-shadow: none;
67
+ }
69
68
 
70
- .charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not(
71
- [aria-disabled]
72
- ),
73
- .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
74
- background-color: var(--charcoal-text3-hover);
75
- }
69
+ &:hover:not(:disabled):not([aria-disabled]),
70
+ &:hover[aria-disabled='false'] {
71
+ background-color: var(--charcoal-text3-hover);
72
+ }
76
73
 
77
- .charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not(
78
- [aria-disabled]
79
- ),
80
- .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
81
- background-color: var(--charcoal-text3-press);
82
- }
74
+ &:active:not(:disabled):not([aria-disabled]),
75
+ &:active[aria-disabled='false'] {
76
+ background-color: var(--charcoal-text3-press);
77
+ }
83
78
 
84
- .charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not(
85
- [aria-disabled]
86
- ),
87
- .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
88
- background-color: var(--charcoal-brand-hover);
89
- }
79
+ &:checked:hover:not(:disabled):not([aria-disabled]),
80
+ &:checked:hover[aria-disabled='false'] {
81
+ background-color: var(--charcoal-brand-hover);
82
+ }
90
83
 
91
- .charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not(
92
- [aria-disabled]
93
- ),
94
- .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
95
- background-color: var(--charcoal-brand-press);
96
- }
84
+ &:checked:active:not(:disabled):not([aria-disabled]),
85
+ &:checked:active[aria-disabled='false'] {
86
+ background-color: var(--charcoal-brand-press);
87
+ }
97
88
 
98
- .charcoal-multi-select-input[aria-invalid='true'][data-overlay='false']:not(
99
- :disabled
100
- ):not([aria-disabled]) {
101
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
102
- }
89
+ &[aria-invalid='true'][data-overlay='false']:not(:disabled):not(
90
+ [aria-disabled]
91
+ ) {
92
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
93
+ }
103
94
 
104
- .charcoal-multi-select-input[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
105
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
106
- }
95
+ &[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
96
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
97
+ }
107
98
 
108
- .charcoal-multi-select-input[data-overlay='true'] {
109
- background-color: var(--charcoal-surface4);
99
+ &[data-overlay='true'] {
100
+ background-color: var(--charcoal-surface4);
101
+ }
110
102
  }
111
103
 
112
104
  .charcoal-multi-select-overlay {
@@ -122,20 +114,20 @@
122
114
  border-radius: 999999px;
123
115
  color: var(--charcoal-text5);
124
116
  transition: 0.2s box-shadow;
125
- }
126
-
127
- .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(
128
- :disabled
129
- ):not([aria-disabled]) {
130
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
131
- }
132
-
133
- .charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
134
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
135
- }
136
117
 
137
- .charcoal-multi-select-overlay[data-overlay='true'] {
138
- border-color: var(--charcoal-text5);
139
- border-width: 2px;
140
- border-style: solid;
118
+ &[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
119
+ [aria-disabled]
120
+ ) {
121
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
122
+ }
123
+
124
+ &[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
125
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
126
+ }
127
+
128
+ &[data-overlay='true'] {
129
+ border-color: var(--charcoal-text5);
130
+ border-width: 2px;
131
+ border-style: solid;
132
+ }
141
133
  }
package/src/components/Pagination/__snapshots__/index.css.snap CHANGED
@@ -4,6 +4,18 @@
4
4
  align-items: center;
5
5
  }
6
6
 
7
+ .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
8
+ min-width: 32px;
9
+ min-height: 32px;
10
+ }
11
+
12
+ .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
13
+ min-width: 40px;
14
+ min-height: 40px;
15
+ }
16
+
17
+ /* stylelint-disable no-descending-specificity */
18
+
7
19
  .charcoal-pagination-button {
8
20
  cursor: pointer;
9
21
  appearance: none;
@@ -43,16 +55,6 @@
43
55
  padding: 0;
44
56
  }
45
57
 
46
- .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
47
- min-width: 32px;
48
- min-height: 32px;
49
- }
50
-
51
- .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
52
- min-width: 40px;
53
- min-height: 40px;
54
- }
55
-
56
58
  .charcoal-pagination-button[hidden] {
57
59
  visibility: hidden;
58
60
  display: block;
@@ -91,6 +93,9 @@
91
93
  background-color: var(--charcoal-surface6);
92
94
  color: var(--charcoal-text5);
93
95
  }
96
+ /* stylelint-enable no-descending-specificity */
97
+
98
+ /* Kept flat: different root class from .charcoal-pagination-button */
94
99
 
95
100
  .charcoal-pagination-nav-button[hidden] {
96
101
  visibility: hidden;
package/src/components/Pagination/index.css CHANGED
@@ -2,8 +2,19 @@
2
2
  display: flex;
3
3
  justify-content: center;
4
4
  align-items: center;
5
+
6
+ &[data-size='S'] .charcoal-pagination-button {
7
+ min-width: 32px;
8
+ min-height: 32px;
9
+ }
10
+
11
+ &[data-size='M'] .charcoal-pagination-button {
12
+ min-width: 40px;
13
+ min-height: 40px;
14
+ }
5
15
  }
6
16
 
17
+ /* stylelint-disable no-descending-specificity */
7
18
  .charcoal-pagination-button {
8
19
  cursor: pointer;
9
20
  appearance: none;
@@ -35,91 +46,79 @@
35
46
  transition:
36
47
  0.2s background-color,
37
48
  0.2s box-shadow;
38
- }
39
-
40
- .charcoal-pagination-button:focus {
41
- outline: none;
42
- }
43
-
44
- .charcoal-pagination-button::-moz-focus-inner {
45
- border-style: none;
46
- padding: 0;
47
- }
48
-
49
- .charcoal-pagination[data-size='S'] .charcoal-pagination-button {
50
- min-width: 32px;
51
- min-height: 32px;
52
- }
53
-
54
- .charcoal-pagination[data-size='M'] .charcoal-pagination-button {
55
- min-width: 40px;
56
- min-height: 40px;
57
- }
58
-
59
- .charcoal-pagination-button[hidden] {
60
- visibility: hidden;
61
- display: block;
62
- }
63
-
64
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
65
- .charcoal-pagination-button[aria-disabled='false']:hover {
66
- color: var(--charcoal-text3);
67
- background-color: var(--charcoal-surface3);
68
- }
69
-
70
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
71
- .charcoal-pagination-button[aria-disabled='false']:active {
72
- color: var(--charcoal-text3);
73
- background-color: var(--charcoal-surface10);
74
- }
75
-
76
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
77
- .charcoal-pagination-button[aria-disabled='false']:focus {
78
- outline: none;
79
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
80
- }
81
-
82
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
83
- .charcoal-pagination-button[aria-disabled='false']:focus-visible {
84
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
85
- }
86
-
87
- .charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(
88
- :focus-visible
89
- ),
90
- .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
91
- box-shadow: none;
92
- }
93
-
94
- .charcoal-pagination-button[aria-current] {
95
- cursor: default;
96
- background-color: var(--charcoal-surface6);
97
- color: var(--charcoal-text5);
98
- }
99
-
100
- .charcoal-pagination-button[aria-current]:not(:disabled):not(
101
- [aria-disabled]
102
- ):hover,
103
- .charcoal-pagination-button[aria-current]:not(:disabled):not(
104
- [aria-disabled]
105
- ):active {
106
- background-color: var(--charcoal-surface6);
107
- color: var(--charcoal-text5);
108
- }
109
49
 
50
+ &:focus {
51
+ outline: none;
52
+ }
53
+
54
+ &::-moz-focus-inner {
55
+ border-style: none;
56
+ padding: 0;
57
+ }
58
+
59
+ &[hidden] {
60
+ visibility: hidden;
61
+ display: block;
62
+ }
63
+
64
+ &:not(:disabled):not([aria-disabled]):hover,
65
+ &[aria-disabled='false']:hover {
66
+ color: var(--charcoal-text3);
67
+ background-color: var(--charcoal-surface3);
68
+ }
69
+
70
+ &:not(:disabled):not([aria-disabled]):active,
71
+ &[aria-disabled='false']:active {
72
+ color: var(--charcoal-text3);
73
+ background-color: var(--charcoal-surface10);
74
+ }
75
+
76
+ &:not(:disabled):not([aria-disabled]):focus,
77
+ &[aria-disabled='false']:focus {
78
+ outline: none;
79
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
80
+ }
81
+
82
+ &:not(:disabled):not([aria-disabled]):focus-visible,
83
+ &[aria-disabled='false']:focus-visible {
84
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
85
+ }
86
+
87
+ &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
88
+ &[aria-disabled='false']:focus:not(:focus-visible) {
89
+ box-shadow: none;
90
+ }
91
+
92
+ &[aria-current] {
93
+ cursor: default;
94
+ background-color: var(--charcoal-surface6);
95
+ color: var(--charcoal-text5);
96
+
97
+ &:not(:disabled):not([aria-disabled]):hover,
98
+ &:not(:disabled):not([aria-disabled]):active {
99
+ background-color: var(--charcoal-surface6);
100
+ color: var(--charcoal-text5);
101
+ }
102
+ }
103
+ }
104
+ /* stylelint-enable no-descending-specificity */
105
+
106
+ /* Kept flat: different root class from .charcoal-pagination-button */
110
107
  .charcoal-pagination-nav-button[hidden] {
111
108
  visibility: hidden;
112
109
  display: block;
113
110
  }
114
111
 
115
- .charcoal-pagination-spacer,
116
- .charcoal-pagination-spacer:hover,
117
- .charcoal-pagination-spacer:active {
118
- cursor: default;
119
- color: var(--charcoal-text3);
120
- background: none;
121
- }
112
+ .charcoal-pagination-spacer {
113
+ &,
114
+ &:hover,
115
+ &:active {
116
+ cursor: default;
117
+ color: var(--charcoal-text3);
118
+ background: none;
119
+ }
122
120
 
123
- .charcoal-pagination-spacer.charcoal-icon-button:disabled {
124
- opacity: 1;
121
+ &.charcoal-icon-button:disabled {
122
+ opacity: 1;
123
+ }
125
124
  }
package/src/components/Radio/index.css CHANGED
@@ -4,11 +4,11 @@
4
4
  grid-gap: 4px;
5
5
  align-items: center;
6
6
  cursor: pointer;
7
- }
8
7
 
9
- .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
10
- opacity: 0.32;
11
- cursor: default;
8
+ &[aria-disabled]:not([aria-disabled='false']) {
9
+ opacity: 0.32;
10
+ cursor: default;
11
+ }
12
12
  }
13
13
 
14
14
  .charcoal-radio__label_div {
package/src/components/SegmentedControl/index.css CHANGED
@@ -4,18 +4,18 @@
4
4
 
5
5
  background-color: var(--charcoal-surface3);
6
6
  border-radius: 16px;
7
- }
8
7
 
9
- .charcoal-segmented-control[data-uniform-segment-width='true'],
10
- .charcoal-segmented-control[data-full-width='true'] {
11
- display: inline-grid;
12
- grid-auto-columns: minmax(80px, 1fr);
13
- grid-auto-rows: 32px;
14
- grid-auto-flow: column;
15
- }
8
+ &[data-uniform-segment-width='true'],
9
+ &[data-full-width='true'] {
10
+ display: inline-grid;
11
+ grid-auto-columns: minmax(80px, 1fr);
12
+ grid-auto-rows: 32px;
13
+ grid-auto-flow: column;
14
+ }
16
15
 
17
- .charcoal-segmented-control[data-full-width='true'] {
18
- width: 100%;
16
+ &[data-full-width='true'] {
17
+ width: 100%;
18
+ }
19
19
  }
20
20
 
21
21
  .charcoal-segmented-control-radio__label {
@@ -33,24 +33,22 @@
33
33
 
34
34
  font-size: 14px;
35
35
  line-height: 22px;
36
- }
37
36
 
38
- .charcoal-segmented-control-radio__label[aria-disabled]:not(
39
- [aria-disabled='false']
40
- ) {
41
- cursor: default;
42
- opacity: 0.32;
43
- }
37
+ &[aria-disabled]:not([aria-disabled='false']) {
38
+ cursor: default;
39
+ opacity: 0.32;
40
+ }
44
41
 
45
- .charcoal-segmented-control-radio__label[data-checked='true'] {
46
- background-color: var(--charcoal-brand);
47
- color: var(--charcoal-text5);
48
- }
42
+ &[data-checked='true'] {
43
+ background-color: var(--charcoal-brand);
44
+ color: var(--charcoal-text5);
45
+ }
49
46
 
50
- .charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
51
- .charcoal-segmented-control-radio__label[data-full-width='true'] {
52
- justify-content: center;
53
- white-space: nowrap;
47
+ &[data-uniform-segment-width='true'],
48
+ &[data-full-width='true'] {
49
+ justify-content: center;
50
+ white-space: nowrap;
51
+ }
54
52
  }
55
53
 
56
54
  .charcoal-segmented-control-radio__input {
package/src/components/Switch/index.css CHANGED
@@ -5,15 +5,15 @@
5
5
  cursor: pointer;
6
6
  outline: 0;
7
7
  gap: 4px;
8
- }
9
8
 
10
- .charcoal-switch__label[aria-disabled='true'] {
11
- opacity: 0.32;
12
- cursor: default;
13
- }
9
+ &[aria-disabled='true'] {
10
+ opacity: 0.32;
11
+ cursor: default;
14
12
 
15
- .charcoal-switch__label[aria-disabled='true'] > input {
16
- opacity: 1;
13
+ & > input {
14
+ opacity: 1;
15
+ }
16
+ }
17
17
  }
18
18
 
19
19
  .charcoal-switch__label_div {
package/src/components/TagItem/__snapshots__/index.css.snap CHANGED
@@ -131,6 +131,8 @@
131
131
  font-weight: normal;
132
132
  }
133
133
 
134
+ /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
135
+
134
136
  .charcoal-tag-item__labe__text[data-has-translate='true']::after {
135
137
  display: none;
136
138
  }