@charcoal-ui/react 5.6.0 → 5.8.0-beta.0

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 (46) hide show
  1. package/dist/index.cjs +3 -2
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +566 -586
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.js +3 -2
  6. package/dist/index.js.map +1 -1
  7. package/dist/layered.css +566 -586
  8. package/dist/layered.css.map +1 -1
  9. package/package.json +6 -5
  10. package/src/__tests__/css-output.test.ts +77 -0
  11. package/src/components/Button/__snapshots__/index.css.snap +123 -0
  12. package/src/components/Button/index.css +105 -120
  13. package/src/components/Checkbox/__snapshots__/index.css.snap +22 -0
  14. package/src/components/Checkbox/index.css +7 -7
  15. package/src/components/Clickable/__snapshots__/index.css.snap +41 -0
  16. package/src/components/Clickable/index.css +11 -11
  17. package/src/components/DropdownSelector/__snapshots__/index.css.snap +79 -0
  18. package/src/components/DropdownSelector/index.css +33 -33
  19. package/src/components/FieldLabel/__snapshots__/index.css.snap +37 -0
  20. package/src/components/FieldLabel/index.css +6 -6
  21. package/src/components/HintText/__snapshots__/index.css.snap +37 -0
  22. package/src/components/HintText/index.css +5 -7
  23. package/src/components/IconButton/__snapshots__/index.css.snap +107 -0
  24. package/src/components/IconButton/index.css +87 -89
  25. package/src/components/LoadingSpinner/__snapshots__/index.css.snap +47 -0
  26. package/src/components/LoadingSpinner/index.css +11 -9
  27. package/src/components/Modal/__snapshots__/index.css.snap +35 -0
  28. package/src/components/Modal/index.css +5 -5
  29. package/src/components/MultiSelect/__snapshots__/index.css.snap +124 -0
  30. package/src/components/MultiSelect/index.css +74 -82
  31. package/src/components/Pagination/__snapshots__/index.css.snap +114 -0
  32. package/src/components/Pagination/index.css +79 -80
  33. package/src/components/Radio/__snapshots__/index.css.snap +18 -0
  34. package/src/components/Radio/index.css +4 -4
  35. package/src/components/SegmentedControl/__snapshots__/index.css.snap +61 -0
  36. package/src/components/SegmentedControl/index.css +23 -25
  37. package/src/components/Switch/__snapshots__/index.css.snap +23 -0
  38. package/src/components/Switch/index.css +7 -7
  39. package/src/components/TagItem/__snapshots__/index.css.snap +139 -0
  40. package/src/components/TagItem/index.css +80 -71
  41. package/src/components/TextArea/__snapshots__/index.css.snap +78 -0
  42. package/src/components/TextArea/index.css +24 -23
  43. package/src/components/TextEllipsis/__snapshots__/index.css.snap +20 -0
  44. package/src/components/TextEllipsis/index.css +10 -10
  45. package/src/components/TextField/__snapshots__/index.css.snap +86 -0
  46. package/src/components/TextField/index.css +19 -21
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 {