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

package/src/components/Modal/index.css

@@ -11,12 +11,12 @@
   box-sizing: border-box;
 
   background-color: var(--charcoal-surface4);
+}
 
-  @media (max-width: 743px) {
-    &[data-bottom-sheet='true'],
-    &[data-bottom-sheet='full'] {
-      padding: 0;
-    }
+@media (max-width: 743px) {
+  .charcoal-modal-background[data-bottom-sheet='true'],
+  .charcoal-modal-background[data-bottom-sheet='full'] {
+    padding: 0;
   }
 }
 

package/src/components/MultiSelect/__snapshots__/index.css.snap

@@ -81,15 +81,15 @@
   background-color: var(--charcoal-brand-press);
 }
 
-.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not([aria-disabled]) {
+.charcoal-multi-select-input[aria-invalid='true'][data-overlay='false']:not(:disabled):not([aria-disabled]) {
   box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
 }
 
-.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
+.charcoal-multi-select-input[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
   box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
 }
 
-.charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {
+.charcoal-multi-select-input[data-overlay='true'] {
   background-color: var(--charcoal-surface4);
 }
 

package/src/components/MultiSelect/index.css

@@ -5,12 +5,12 @@
   position: relative;
   cursor: pointer;
   gap: 4px;
+}
 
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-    cursor: default;
-  }
+.charcoal-multi-select:disabled,
+.charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
 }
 
 .charcoal-multi-select-label {
@@ -19,22 +19,22 @@
   font-size: 14px;
   line-height: 22px;
   color: var(--charcoal-text2);
+}
 
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
+.charcoal-multi-select-label::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
 
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+.charcoal-multi-select-label::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
 }
 
 .charcoal-multi-select-input[type='checkbox'] {
@@ -48,57 +48,65 @@
   transition:
     0.2s background-color,
     0.2s box-shadow;
+}
 
-  &:checked {
-    background-color: var(--charcoal-brand);
-  }
+.charcoal-multi-select-input[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
 
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+.charcoal-multi-select-input[type='checkbox']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
 
-  &:focus-visible {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+.charcoal-multi-select-input[type='checkbox']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
 
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-  }
+.charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
 
-  &:hover:not(:disabled):not([aria-disabled]),
-  &:hover[aria-disabled='false'] {
-    background-color: var(--charcoal-text3-hover);
-  }
+.charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-hover);
+}
 
-  &:active:not(:disabled):not([aria-disabled]),
-  &:active[aria-disabled='false'] {
-    background-color: var(--charcoal-text3-press);
-  }
+.charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-press);
+}
 
-  &:checked:hover:not(:disabled):not([aria-disabled]),
-  &:checked:hover[aria-disabled='false'] {
-    background-color: var(--charcoal-brand-hover);
-  }
+.charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-brand-hover);
+}
 
-  &:checked:active:not(:disabled):not([aria-disabled]),
-  &:checked:active[aria-disabled='false'] {
-    background-color: var(--charcoal-brand-press);
-  }
+.charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
+  background-color: var(--charcoal-brand-press);
+}
 
-  &[aria-invalid='true'][data-overlay='false']:not(:disabled):not(
-      [aria-disabled]
-    ) {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
+.charcoal-multi-select-input[aria-invalid='true'][data-overlay='false']:not(
+    :disabled
+  ):not([aria-disabled]) {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
 
-  &[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
+.charcoal-multi-select-input[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
 
-  &[data-overlay='true'] {
-    background-color: var(--charcoal-surface4);
-  }
+.charcoal-multi-select-input[data-overlay='true'] {
+  background-color: var(--charcoal-surface4);
 }
 
 .charcoal-multi-select-overlay {
@@ -114,20 +122,20 @@
   border-radius: 999999px;
   color: var(--charcoal-text5);
   transition: 0.2s box-shadow;
+}
+
+.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(
+    :disabled
+  ):not([aria-disabled]) {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
 
-  &[aria-invalid='true'][data-overlay='true']:not(:disabled):not(
-      [aria-disabled]
-    ) {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
-
-  &[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
-
-  &[data-overlay='true'] {
-    border-color: var(--charcoal-text5);
-    border-width: 2px;
-    border-style: solid;
-  }
+.charcoal-multi-select-overlay[data-overlay='true'] {
+  border-color: var(--charcoal-text5);
+  border-width: 2px;
+  border-style: solid;
 }

package/src/components/Pagination/__snapshots__/index.css.snap

@@ -4,18 +4,6 @@
   align-items: center;
 }
 
-.charcoal-pagination[data-size='S'] .charcoal-pagination-button {
-  min-width: 32px;
-  min-height: 32px;
-}
-
-.charcoal-pagination[data-size='M'] .charcoal-pagination-button {
-  min-width: 40px;
-  min-height: 40px;
-}
-
-/* stylelint-disable no-descending-specificity */
-
 .charcoal-pagination-button {
   cursor: pointer;
   appearance: none;
@@ -55,6 +43,16 @@
   padding: 0;
 }
 
+.charcoal-pagination[data-size='S'] .charcoal-pagination-button {
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.charcoal-pagination[data-size='M'] .charcoal-pagination-button {
+  min-width: 40px;
+  min-height: 40px;
+}
+
 .charcoal-pagination-button[hidden] {
   visibility: hidden;
   display: block;
@@ -93,9 +91,6 @@
   background-color: var(--charcoal-surface6);
   color: var(--charcoal-text5);
 }
-/* stylelint-enable no-descending-specificity */
-
-/* Kept flat: different root class from .charcoal-pagination-button */
 
 .charcoal-pagination-nav-button[hidden] {
   visibility: hidden;

package/src/components/Pagination/index.css

@@ -2,19 +2,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-
-  &[data-size='S'] .charcoal-pagination-button {
-    min-width: 32px;
-    min-height: 32px;
-  }
-
-  &[data-size='M'] .charcoal-pagination-button {
-    min-width: 40px;
-    min-height: 40px;
-  }
 }
 
-/* stylelint-disable no-descending-specificity */
 .charcoal-pagination-button {
   cursor: pointer;
   appearance: none;
@@ -46,79 +35,91 @@
   transition:
     0.2s background-color,
     0.2s box-shadow;
+}
+
+.charcoal-pagination-button:focus {
+  outline: none;
+}
+
+.charcoal-pagination-button::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.charcoal-pagination[data-size='S'] .charcoal-pagination-button {
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.charcoal-pagination[data-size='M'] .charcoal-pagination-button {
+  min-width: 40px;
+  min-height: 40px;
+}
+
+.charcoal-pagination-button[hidden] {
+  visibility: hidden;
+  display: block;
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,
+.charcoal-pagination-button[aria-disabled='false']:hover {
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-surface3);
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,
+.charcoal-pagination-button[aria-disabled='false']:active {
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-surface10);
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,
+.charcoal-pagination-button[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,
+.charcoal-pagination-button[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(
+    :focus-visible
+  ),
+.charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.charcoal-pagination-button[aria-current] {
+  cursor: default;
+  background-color: var(--charcoal-surface6);
+  color: var(--charcoal-text5);
+}
+
+.charcoal-pagination-button[aria-current]:not(:disabled):not(
+    [aria-disabled]
+  ):hover,
+.charcoal-pagination-button[aria-current]:not(:disabled):not(
+    [aria-disabled]
+  ):active {
+  background-color: var(--charcoal-surface6);
+  color: var(--charcoal-text5);
+}
 
-  &:focus {
-    outline: none;
-  }
-
-  &::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  &[hidden] {
-    visibility: hidden;
-    display: block;
-  }
-
-  &:not(:disabled):not([aria-disabled]):hover,
-  &[aria-disabled='false']:hover {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-surface3);
-  }
-
-  &:not(:disabled):not([aria-disabled]):active,
-  &[aria-disabled='false']:active {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-surface10);
-  }
-
-  &:not(:disabled):not([aria-disabled]):focus,
-  &[aria-disabled='false']:focus {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
-
-  &:not(:disabled):not([aria-disabled]):focus-visible,
-  &[aria-disabled='false']:focus-visible {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
-
-  &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-  &[aria-disabled='false']:focus:not(:focus-visible) {
-    box-shadow: none;
-  }
-
-  &[aria-current] {
-    cursor: default;
-    background-color: var(--charcoal-surface6);
-    color: var(--charcoal-text5);
-
-    &:not(:disabled):not([aria-disabled]):hover,
-    &:not(:disabled):not([aria-disabled]):active {
-      background-color: var(--charcoal-surface6);
-      color: var(--charcoal-text5);
-    }
-  }
-}
-/* stylelint-enable no-descending-specificity */
-
-/* Kept flat: different root class from .charcoal-pagination-button */
 .charcoal-pagination-nav-button[hidden] {
   visibility: hidden;
   display: block;
 }
 
-.charcoal-pagination-spacer {
-  &,
-  &:hover,
-  &:active {
-    cursor: default;
-    color: var(--charcoal-text3);
-    background: none;
-  }
+.charcoal-pagination-spacer,
+.charcoal-pagination-spacer:hover,
+.charcoal-pagination-spacer:active {
+  cursor: default;
+  color: var(--charcoal-text3);
+  background: none;
+}
 
-  &.charcoal-icon-button:disabled {
-    opacity: 1;
-  }
+.charcoal-pagination-spacer.charcoal-icon-button:disabled {
+  opacity: 1;
 }

package/src/components/Radio/index.css

@@ -4,11 +4,11 @@
   grid-gap: 4px;
   align-items: center;
   cursor: pointer;
+}
 
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-    cursor: default;
-  }
+.charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
 }
 
 .charcoal-radio__label_div {

package/src/components/SegmentedControl/index.css

@@ -4,18 +4,18 @@
 
   background-color: var(--charcoal-surface3);
   border-radius: 16px;
+}
 
-  &[data-uniform-segment-width='true'],
-  &[data-full-width='true'] {
-    display: inline-grid;
-    grid-auto-columns: minmax(80px, 1fr);
-    grid-auto-rows: 32px;
-    grid-auto-flow: column;
-  }
+.charcoal-segmented-control[data-uniform-segment-width='true'],
+.charcoal-segmented-control[data-full-width='true'] {
+  display: inline-grid;
+  grid-auto-columns: minmax(80px, 1fr);
+  grid-auto-rows: 32px;
+  grid-auto-flow: column;
+}
 
-  &[data-full-width='true'] {
-    width: 100%;
-  }
+.charcoal-segmented-control[data-full-width='true'] {
+  width: 100%;
 }
 
 .charcoal-segmented-control-radio__label {
@@ -33,22 +33,24 @@
 
   font-size: 14px;
   line-height: 22px;
+}
 
-  &[aria-disabled]:not([aria-disabled='false']) {
-    cursor: default;
-    opacity: 0.32;
-  }
+.charcoal-segmented-control-radio__label[aria-disabled]:not(
+    [aria-disabled='false']
+  ) {
+  cursor: default;
+  opacity: 0.32;
+}
 
-  &[data-checked='true'] {
-    background-color: var(--charcoal-brand);
-    color: var(--charcoal-text5);
-  }
+.charcoal-segmented-control-radio__label[data-checked='true'] {
+  background-color: var(--charcoal-brand);
+  color: var(--charcoal-text5);
+}
 
-  &[data-uniform-segment-width='true'],
-  &[data-full-width='true'] {
-    justify-content: center;
-    white-space: nowrap;
-  }
+.charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],
+.charcoal-segmented-control-radio__label[data-full-width='true'] {
+  justify-content: center;
+  white-space: nowrap;
 }
 
 .charcoal-segmented-control-radio__input {

package/src/components/Switch/index.css

@@ -5,15 +5,15 @@
   cursor: pointer;
   outline: 0;
   gap: 4px;
+}
 
-  &[aria-disabled='true'] {
-    opacity: 0.32;
-    cursor: default;
+.charcoal-switch__label[aria-disabled='true'] {
+  opacity: 0.32;
+  cursor: default;
+}
 
-    & > input {
-      opacity: 1;
-    }
-  }
+.charcoal-switch__label[aria-disabled='true'] > input {
+  opacity: 1;
 }
 
 .charcoal-switch__label_div {

package/src/components/TagItem/__snapshots__/index.css.snap

@@ -131,8 +131,6 @@
   font-weight: normal;
 }
 
-/* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
-
 .charcoal-tag-item__labe__text[data-has-translate='true']::after {
   display: none;
 }