@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/TagItem/index.css CHANGED
@@ -30,72 +30,76 @@
30
30
  border-radius: 4px;
31
31
 
32
32
  transition: 0.2s box-shadow;
33
- }
34
-
35
- .charcoal-tag-item[data-size='M'] {
36
- --charcoal-tag-item-size: 40px;
37
- --charcoal-tag-item-padding-left: 24px;
38
- --charcoal-tag-item-padding-right: 24px;
39
- }
40
- .charcoal-tag-item[data-size='S'] {
41
- --charcoal-tag-item-size: 32px;
42
- --charcoal-tag-item-padding-left: 16px;
43
- --charcoal-tag-item-padding-right: 16px;
44
- }
45
- .charcoal-tag-item[data-state='inactive'] {
46
- --charcoal-tag-item-color: var(--charcoal-text2);
47
- }
48
- .charcoal-tag-item[data-state='active'] {
49
- --charcoal-tag-item-padding-left: 16px;
50
- --charcoal-tag-item-padding-right: 8px;
51
- }
52
33
 
53
- .charcoal-tag-item:disabled,
54
- .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
55
- opacity: 0.32;
56
- cursor: default;
57
- }
58
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
59
- .charcoal-tag-item[aria-disabled='false']:focus-visible {
60
- outline: none;
61
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
62
- }
63
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
64
- .charcoal-tag-item[aria-disabled='false']:focus {
65
- outline: none;
66
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
67
- }
68
- .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(
69
- :focus-visible
70
- ),
71
- .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
72
- box-shadow: none;
34
+ &[data-size='M'] {
35
+ --charcoal-tag-item-size: 40px;
36
+ --charcoal-tag-item-padding-left: 24px;
37
+ --charcoal-tag-item-padding-right: 24px;
38
+ }
39
+
40
+ &[data-size='S'] {
41
+ --charcoal-tag-item-size: 32px;
42
+ --charcoal-tag-item-padding-left: 16px;
43
+ --charcoal-tag-item-padding-right: 16px;
44
+ }
45
+
46
+ &[data-state='inactive'] {
47
+ --charcoal-tag-item-color: var(--charcoal-text2);
48
+ }
49
+
50
+ &[data-state='active'] {
51
+ --charcoal-tag-item-padding-left: 16px;
52
+ --charcoal-tag-item-padding-right: 8px;
53
+ }
54
+
55
+ &:disabled,
56
+ &[aria-disabled]:not([aria-disabled='false']) {
57
+ opacity: 0.32;
58
+ cursor: default;
59
+ }
60
+
61
+ &:not(:disabled):not([aria-disabled]):focus-visible,
62
+ &[aria-disabled='false']:focus-visible {
63
+ outline: none;
64
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
65
+ }
66
+
67
+ &:not(:disabled):not([aria-disabled]):focus,
68
+ &[aria-disabled='false']:focus {
69
+ outline: none;
70
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
71
+ }
72
+
73
+ &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
74
+ &[aria-disabled='false']:focus:not(:focus-visible) {
75
+ box-shadow: none;
76
+ }
73
77
  }
74
78
 
75
79
  .charcoal-tag-item__bg {
76
80
  background-color: var(--charcoal-tag-item-bg);
77
- }
78
-
79
- .charcoal-tag-item__bg[data-bg-variant='image'] {
80
- background-color: var(--charcoal-surface4);
81
- }
82
81
 
83
- .charcoal-tag-item__bg[data-bg-variant='image']::before {
84
- content: '';
85
- position: absolute;
86
- z-index: 1;
87
- top: 0;
88
- left: 0;
89
- width: 100%;
90
- height: 100%;
91
- background-position: center;
92
- background-size: cover;
93
- background-image: var(--charcoal-tag-item-bg);
94
- mix-blend-mode: overlay;
95
- }
96
-
97
- .charcoal-tag-item__bg[data-state='inactive'] {
98
- background-color: var(--charcoal-surface3);
82
+ &[data-bg-variant='image'] {
83
+ background-color: var(--charcoal-surface4);
84
+
85
+ &::before {
86
+ content: '';
87
+ position: absolute;
88
+ z-index: 1;
89
+ top: 0;
90
+ left: 0;
91
+ width: 100%;
92
+ height: 100%;
93
+ background-position: center;
94
+ background-size: cover;
95
+ background-image: var(--charcoal-tag-item-bg);
96
+ mix-blend-mode: overlay;
97
+ }
98
+ }
99
+
100
+ &[data-state='inactive'] {
101
+ background-color: var(--charcoal-surface3);
102
+ }
99
103
  }
100
104
 
101
105
  .charcoal-tag-item__label {
@@ -104,18 +108,20 @@
104
108
  flex-direction: column;
105
109
  align-items: center;
106
110
  justify-content: center;
107
- }
108
- .charcoal-tag-item__label[data-has-translate='true'] {
109
- justify-content: space-between;
111
+
112
+ &[data-has-translate='true'] {
113
+ justify-content: space-between;
114
+ }
110
115
  }
111
116
 
112
117
  .charcoal-tag-item__label__translated {
113
118
  --charcoal-tag-item-text-font-size: 12px;
114
119
  --charcoal-tag-item-text-line-height: 20px;
115
120
  font-weight: bold;
116
- }
117
- .charcoal-tag-item__label__translated::before {
118
- display: none;
121
+
122
+ &::before {
123
+ display: none;
124
+ }
119
125
  }
120
126
 
121
127
  .charcoal-tag-item__label__text {
@@ -129,12 +135,15 @@
129
135
  color: inherit;
130
136
  white-space: nowrap;
131
137
  text-overflow: ellipsis;
138
+
139
+ &[data-has-translate='true'] {
140
+ --charcoal-tag-item-text-font-size: 10px;
141
+ --charcoal-tag-item-text-line-height: 14px;
142
+ font-weight: normal;
143
+ }
132
144
  }
133
- .charcoal-tag-item__label__text[data-has-translate='true'] {
134
- --charcoal-tag-item-text-font-size: 10px;
135
- --charcoal-tag-item-text-line-height: 14px;
136
- font-weight: normal;
137
- }
145
+
146
+ /* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
138
147
  .charcoal-tag-item__labe__text[data-has-translate='true']::after {
139
148
  display: none;
140
149
  }
package/src/components/TextArea/index.css CHANGED
@@ -2,10 +2,10 @@
2
2
  display: grid;
3
3
  grid-template-columns: 1fr;
4
4
  grid-gap: 4px;
5
- }
6
5
 
7
- .charcoal-text-area-root[aria-disabled='true'] {
8
- opacity: 0.32;
6
+ &[aria-disabled='true'] {
7
+ opacity: 0.32;
8
+ }
9
9
  }
10
10
 
11
11
  .charcoal-text-area-container {
@@ -19,23 +19,23 @@
19
19
  0.2s background-color,
20
20
  0.2s box-shadow;
21
21
  height: calc(22px * var(--charcoal-text-area-rows) + 18px);
22
- }
23
22
 
24
- .charcoal-text-area-container[aria-invalid='true'] {
25
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
26
- }
23
+ &[aria-invalid='true'] {
24
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
25
+ }
27
26
 
28
- .charcoal-text-area-container:focus-within {
29
- outline: none;
30
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
31
- }
27
+ &:focus-within {
28
+ outline: none;
29
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
30
+ }
32
31
 
33
- .charcoal-text-area-container:not([aria-disabled='true']):hover {
34
- background-color: var(--charcoal-surface3-hover);
35
- }
32
+ &:not([aria-disabled='true']):hover {
33
+ background-color: var(--charcoal-surface3-hover);
34
+ }
36
35
 
37
- .charcoal-text-area-container[aria-invalid='true']:focus-within {
38
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
36
+ &[aria-invalid='true']:focus-within {
37
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
38
+ }
39
39
  }
40
40
 
41
41
  .charcoal-text-area-textarea {
@@ -59,14 +59,15 @@
59
59
  appearance: none;
60
60
 
61
61
  background: none;
62
- }
63
- .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
64
- padding: calc(9px / 0.875) calc(8px / 0.875) 0;
65
- height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
66
- }
67
62
 
68
- .charcoal-text-area-textarea::placeholder {
69
- color: var(--charcoal-text3);
63
+ &[data-no-bottom-padding='true'] {
64
+ padding: calc(9px / 0.875) calc(8px / 0.875) 0;
65
+ height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
66
+ }
67
+
68
+ &::placeholder {
69
+ color: var(--charcoal-text3);
70
+ }
70
71
  }
71
72
 
72
73
  .charcoal-text-area-counter {
package/src/components/TextEllipsis/index.css CHANGED
@@ -4,17 +4,17 @@
4
4
  display: -webkit-box;
5
5
  -webkit-box-orient: vertical;
6
6
  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
7
- }
8
7
 
9
- .charcoal-text-ellipsis[data-has-line-height='true'] {
10
- line-height: var(--charcoal-text-ellipsis-line-height);
11
- }
8
+ &[data-has-line-height='true'] {
9
+ line-height: var(--charcoal-text-ellipsis-line-height);
10
+ }
12
11
 
13
- .charcoal-text-ellipsis[data-has-line-height='false'] {
14
- line-height: inherit;
15
- }
12
+ &[data-has-line-height='false'] {
13
+ line-height: inherit;
14
+ }
16
15
 
17
- .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
18
- text-overflow: ellipsis;
19
- white-space: nowrap;
16
+ &[data-line-limit='1'][data-use-nowrap='true'] {
17
+ text-overflow: ellipsis;
18
+ white-space: nowrap;
19
+ }
20
20
  }
package/src/components/TextField/index.css CHANGED
@@ -2,10 +2,10 @@
2
2
  display: grid;
3
3
  grid-template-columns: 1fr;
4
4
  grid-gap: 4px;
5
- }
6
5
 
7
- .charcoal-text-field-root[aria-disabled='true'] {
8
- opacity: 0.32;
6
+ &[aria-disabled='true'] {
7
+ opacity: 0.32;
8
+ }
9
9
  }
10
10
 
11
11
  .charcoal-text-field-container {
@@ -20,25 +20,23 @@
20
20
  padding: 0 8px;
21
21
  line-height: 22px;
22
22
  font-size: 14px;
23
- }
24
23
 
25
- .charcoal-text-field-container[data-invalid='true'] {
26
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
27
- }
24
+ &[data-invalid='true'] {
25
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
26
+ }
28
27
 
29
- .charcoal-text-field-container:not([aria-disabled='true']):hover {
30
- background-color: var(--charcoal-surface3-hover);
31
- }
28
+ &:not([aria-disabled='true']):hover {
29
+ background-color: var(--charcoal-surface3-hover);
30
+ }
32
31
 
33
- .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
34
- outline: none;
35
- box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
36
- }
32
+ &:not([aria-disabled='true']):focus-within {
33
+ outline: none;
34
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
35
+ }
37
36
 
38
- .charcoal-text-field-container:not(
39
- [aria-disabled='true']
40
- )[data-invalid='true']:focus-within {
41
- box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
37
+ &:not([aria-disabled='true'])[data-invalid='true']:focus-within {
38
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
39
+ }
42
40
  }
43
41
 
44
42
  .charcoal-text-field-prefix {
@@ -76,10 +74,10 @@
76
74
  background: transparent;
77
75
 
78
76
  color: var(--charcoal-text2);
79
- }
80
77
 
81
- .charcoal-text-field-input::placeholder {
82
- color: var(--charcoal-text3);
78
+ &::placeholder {
79
+ color: var(--charcoal-text3);
80
+ }
83
81
  }
84
82
 
85
83
  .charcoal-text-field-line-counter {