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

package/src/components/Button/index.css

@@ -31,110 +31,125 @@
     0.2s background-color,
     0.2s box-shadow;
   height: 40px;
+}
+
+.charcoal-button:disabled,
+.charcoal-button[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,
+.charcoal-button[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-button:not(:disabled):not([aria-disabled]):hover,
+.charcoal-button[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.charcoal-button:not(:disabled):not([aria-disabled]):active,
+.charcoal-button[aria-disabled='false']:active,
+.charcoal-button[data-active='true'] {
+  color: var(--charcoal-text2-press);
+  background-color: var(--charcoal-surface3-press);
+}
+
+.charcoal-button[data-variant='Primary'] {
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-brand);
+}
+
+.charcoal-button[data-variant='Primary']:hover:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-brand-hover);
+}
+
+.charcoal-button[data-variant='Primary']:active:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-button[data-variant='Primary']:active[aria-disabled='false'],
+.charcoal-button[data-variant='Primary'][data-active='true'] {
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-brand-press);
+}
+
+.charcoal-button[data-variant='Overlay'] {
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface4);
+}
+
+.charcoal-button[data-variant='Overlay']:hover:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-surface4-hover);
+}
+
+.charcoal-button[data-variant='Overlay']:active:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],
+.charcoal-button[data-variant='Overlay'][data-active='true'] {
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-surface4-press);
+}
+
+.charcoal-button[data-variant='Navigation'] {
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface6);
+}
+
+.charcoal-button[data-variant='Navigation']:hover:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-surface6-hover);
+}
+
+.charcoal-button[data-variant='Navigation']:active:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],
+.charcoal-button[data-variant='Navigation'][data-active='true'] {
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-surface6-press);
+}
+
+.charcoal-button[data-variant='Danger'] {
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-assertive);
+}
+.charcoal-button[data-variant='Danger']:hover:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-assertive-hover);
+}
+
+.charcoal-button[data-variant='Danger']:active:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-button[data-variant='Danger']:active[aria-disabled='false'],
+.charcoal-button[data-variant='Danger'][data-active='true'] {
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-assertive-press);
+}
+
+.charcoal-button[data-size='S'] {
+  padding: 0 16px;
+  height: 32px;
+}
 
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    cursor: default;
-    opacity: 0.32;
-  }
-
-  &:not(:disabled):not([aria-disabled]):focus-visible,
-  &[aria-disabled='false']:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
-
-  &:not(:disabled):not([aria-disabled]):hover,
-  &[aria-disabled='false']:hover {
-    color: var(--charcoal-text2-hover);
-    background-color: var(--charcoal-surface3-hover);
-  }
-
-  &:not(:disabled):not([aria-disabled]):active,
-  &[aria-disabled='false']:active,
-  &[data-active='true'] {
-    color: var(--charcoal-text2-press);
-    background-color: var(--charcoal-surface3-press);
-  }
-
-  &[data-variant='Primary'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-brand);
-
-    &:hover:not(:disabled):not([aria-disabled]),
-    &:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-brand-hover);
-    }
-
-    &:active:not(:disabled):not([aria-disabled]),
-    &:active[aria-disabled='false'],
-    &[data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-brand-press);
-    }
-  }
-
-  &[data-variant='Overlay'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface4);
-
-    &:hover:not(:disabled):not([aria-disabled]),
-    &:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface4-hover);
-    }
-
-    &:active:not(:disabled):not([aria-disabled]),
-    &:active[aria-disabled='false'],
-    &[data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
-    }
-  }
-
-  &[data-variant='Navigation'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface6);
-
-    &:hover:not(:disabled):not([aria-disabled]),
-    &:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface6-hover);
-    }
-
-    &:active:not(:disabled):not([aria-disabled]),
-    &:active[aria-disabled='false'],
-    &[data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface6-press);
-    }
-  }
-
-  &[data-variant='Danger'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-assertive);
-
-    &:hover:not(:disabled):not([aria-disabled]),
-    &:hover[aria-disabled='false'] {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-assertive-hover);
-    }
-
-    &:active:not(:disabled):not([aria-disabled]),
-    &:active[aria-disabled='false'],
-    &[data-active='true'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-assertive-press);
-    }
-  }
-
-  &[data-size='S'] {
-    padding: 0 16px;
-    height: 32px;
-  }
-
-  &[data-full-width='true'] {
-    width: 100%;
-  }
+.charcoal-button[data-full-width='true'] {
+  width: 100%;
 }

package/src/components/Checkbox/index.css

@@ -3,15 +3,15 @@
   cursor: pointer;
   display: flex;
   gap: 4px;
+}
 
-  &[aria-disabled='true'] {
-    cursor: default;
-    opacity: 0.32;
+.charcoal-checkbox__label[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.32;
+}
 
-    & > input {
-      opacity: 1;
-    }
-  }
+.charcoal-checkbox__label[aria-disabled='true'] > input {
+  opacity: 1;
 }
 
 .charcoal-checkbox__label_div {

package/src/components/Clickable/index.css

@@ -24,18 +24,18 @@
 
   /* Remove the inheritance of text transform in Firefox. */
   text-transform: none;
+}
 
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    cursor: default;
-  }
+.charcoal-clickable:disabled,
+.charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
+}
 
-  &:focus {
-    outline: none;
-  }
+.charcoal-clickable:focus {
+  outline: none;
+}
 
-  &::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
+.charcoal-clickable::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
 }

package/src/components/DropdownSelector/DropdownMenuItem/index.css

@@ -34,3 +34,7 @@
   align-items: center;
   margin-left: 20px;
 }
+
+.charcoal-dropdown-selector-menu-fullwidth {
+  width: 100%;
+}

package/src/components/DropdownSelector/DropdownMenuItem/index.tsx

@@ -7,6 +7,7 @@ import Icon from '../../Icon'
 
 export type DropdownMenuItemProps = Omit<MenuItemProps, 'as'> & {
   secondary?: ReactNode
+  contentFullWidth?: boolean
 }
 
 /**
@@ -17,10 +18,18 @@ export default function DropdownMenuItem(props: DropdownMenuItemProps) {
   const isSelected = props.value === ctxValue
   const { children, secondary, ...rest } = props
 
+  const fullWidthClassName = props.contentFullWidth
+    ? 'charcoal-dropdown-selector-menu-fullwidth'
+    : ''
+
   return (
     <MenuItem {...rest} aria-selected={isSelected}>
-      <div>
-        <div className="charcoal-dropdown-selector-menu-item-container">
+      <div className={fullWidthClassName}>
+        <div
+          className={`charcoal-dropdown-selector-menu-item-container ${
+            fullWidthClassName
+          }`}
+        >
           {isSelected && (
             <Icon
               className="charcoal-dropdown-selector-menu-item-icon"
@@ -28,7 +37,7 @@ export default function DropdownMenuItem(props: DropdownMenuItemProps) {
             />
           )}
           <span
-            className="charcoal-dropdown-selector-menu-item"
+            className={`charcoal-dropdown-selector-menu-item ${fullWidthClassName}`}
             data-selected={isSelected}
           >
             {children}

package/src/components/DropdownSelector/index.css

@@ -3,11 +3,11 @@
   grid-template-columns: 1fr;
   grid-gap: 4px;
   width: 100%;
+}
 
-  &[aria-disabled='true'] {
-    cursor: default;
-    opacity: 0.32;
-  }
+.charcoal-dropdown-selector-root[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.32;
 }
 
 .charcoal-dropdown-selector-button {
@@ -31,39 +31,39 @@
   transition:
     0.2s box-shadow,
     0.2s background-color;
+}
 
-  &:disabled {
-    cursor: default;
-  }
+.charcoal-dropdown-selector-button:disabled {
+  cursor: default;
+}
 
-  &:not(:disabled) {
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+.charcoal-dropdown-selector-button:not(:disabled):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-dropdown-selector-button:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
 
-    &[data-active='true'],
-    &:active {
-      background-color: var(--charcoal-surface3-press);
-    }
+.charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
+.charcoal-dropdown-selector-button:not(:disabled):active {
+  background-color: var(--charcoal-surface3-press);
+}
 
-    &:hover {
-      background-color: var(--charcoal-surface3-hover);
-    }
+.charcoal-dropdown-selector-button:not(:disabled):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
 
-    &:focus:not(:focus-visible) {
-      box-shadow: none;
-    }
-  }
+.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
 
-  &[aria-invalid='true'],
-  &:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
+.charcoal-dropdown-selector-button[aria-invalid='true'],
+.charcoal-dropdown-selector-button:not(
+    :disabled
+  )[aria-invalid='true']:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
 }
 
 .charcoal-ui-dropdown-selector-text {
@@ -75,10 +75,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
 
-  &[data-placeholder='true'] {
-    color: var(--charcoal-text3);
-  }
+.charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
+  color: var(--charcoal-text3);
 }
 
 .charcoal-ui-dropdown-selector-icon {

package/src/components/FieldLabel/index.css

@@ -26,12 +26,12 @@
 .charcoal-field-label-root {
   display: inline-flex;
   align-items: center;
+}
 
-  & > .charcoal-field-label-required-text {
-    margin-left: 4px;
-  }
+.charcoal-field-label-root > .charcoal-field-label-required-text {
+  margin-left: 4px;
+}
 
-  & > .charcoal-field-label-sub-label {
-    margin-left: auto;
-  }
+.charcoal-field-label-root > .charcoal-field-label-sub-label {
+  margin-left: auto;
 }

package/src/components/HintText/index.css

@@ -4,13 +4,15 @@
   padding: 12px 16px;
   display: flex;
   align-items: flex-start;
+}
 
-  &[data-context='page'] {
-    justify-content: center;
+.charcoal-hint-text[data-context='page'] {
+  justify-content: center;
+}
 
-    @media (min-width: 744px) {
-      padding: 20px 40px;
-    }
+@media (min-width: 744px) {
+  .charcoal-hint-text[data-context='page'] {
+    padding: 20px 40px;
   }
 }
 

package/src/components/IconButton/index.css

@@ -23,96 +23,98 @@
   transition:
     0.2s background-color,
     0.2s box-shadow;
+}
 
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    cursor: default;
-    opacity: 0.32;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  &[data-size='XS'] {
-    width: 20px;
-    height: 20px;
-  }
-
-  &[data-size='S'] {
-    width: 32px;
-    height: 32px;
-  }
-
-  &[data-size='M'] {
-    width: 40px;
-    height: 40px;
-  }
-
-  &[data-variant='Default'] {
-    color: var(--charcoal-text3);
-    background-color: var(--charcoal-transparent);
-
-    &[data-active='true']:not(:disabled):not([aria-disabled]),
-    &[data-active='true'][aria-disabled='false'] {
-      color: var(--charcoal-text3-press);
-      background-color: var(--charcoal-transparent-press);
-    }
-
-    &[data-active='false']:not(:disabled):not([aria-disabled]):hover,
-    &[data-active='false'][aria-disabled='false']:hover {
-      color: var(--charcoal-text3-hover);
-      background-color: var(--charcoal-transparent-hover);
-    }
-
-    &[data-active='false']:not(:disabled):not([aria-disabled]):active,
-    &[data-active='false'][aria-disabled='false']:active {
-      color: var(--charcoal-text3-press);
-      background-color: var(--charcoal-transparent-press);
-    }
-  }
-
-  &[data-variant='Overlay'] {
-    color: var(--charcoal-text5);
-    background-color: var(--charcoal-surface4);
-
-    &[data-active='true']:not(:disabled):not([aria-disabled]),
-    &[data-active='true'][aria-disabled='false'] {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
-    }
-
-    &[data-active='false']:not(:disabled):not([aria-disabled]):hover,
-    &[data-active='false'][aria-disabled='false']:hover {
-      color: var(--charcoal-text5-hover);
-      background-color: var(--charcoal-surface4-hover);
-    }
+.charcoal-icon-button:disabled,
+.charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
+  opacity: 0.32;
+}
+.charcoal-icon-button:focus {
+  outline: none;
+}
+.charcoal-icon-button::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
 
-    &[data-active='false']:not(:disabled):not([aria-disabled]):active,
-    &[data-active='false'][aria-disabled='false']:active {
-      color: var(--charcoal-text5-press);
-      background-color: var(--charcoal-surface4-press);
-    }
-  }
+.charcoal-icon-button[data-size='XS'] {
+  width: 20px;
+  height: 20px;
+}
+.charcoal-icon-button[data-size='S'] {
+  width: 32px;
+  height: 32px;
+}
+.charcoal-icon-button[data-size='M'] {
+  width: 40px;
+  height: 40px;
+}
 
-  &:not(:disabled):not([aria-disabled]):focus,
-  &[aria-disabled='false']:focus {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+.charcoal-icon-button[data-variant='Default'] {
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+}
+.charcoal-icon-button[data-variant='Default'][data-active='true']:not(
+    :disabled
+  ):not([aria-disabled]),
+.charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
+.charcoal-icon-button[data-variant='Default'][data-active='false']:not(
+    :disabled
+  ):not([aria-disabled]):hover,
+.charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
+}
+.charcoal-icon-button[data-variant='Default'][data-active='false']:not(
+    :disabled
+  ):not([aria-disabled]):active,
+.charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
+}
 
-  &:not(:disabled):not([aria-disabled]):focus-visible,
-  &[aria-disabled='false']:focus-visible {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+.charcoal-icon-button[data-variant='Overlay'] {
+  color: var(--charcoal-text5);
+  background-color: var(--charcoal-surface4);
+}
+.charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(
+    :disabled
+  ):not([aria-disabled]),
+.charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-surface4-press);
+}
+.charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(
+    :disabled
+  ):not([aria-disabled]):hover,
+.charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
+  background-color: var(--charcoal-surface4-hover);
+}
+.charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(
+    :disabled
+  ):not([aria-disabled]):active,
+.charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
+  background-color: var(--charcoal-surface4-press);
+}
 
-  &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-  &[aria-disabled='false']:focus:not(:focus-visible) {
-    box-shadow: none;
-  }
+.charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,
+.charcoal-icon-button[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,
+.charcoal-icon-button[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(
+    :focus-visible
+  ),
+.charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }

package/src/components/LoadingSpinner/index.css

@@ -9,10 +9,9 @@
   opacity: 0.84;
   color: var(--charcoal-text4);
   background-color: var(--charcoal-background1);
-
-  &[data-transparent='true'] {
-    background-color: var(--charcoal-transparent);
-  }
+}
+.charcoal-loading-spinner[data-transparent='true'] {
+  background-color: var(--charcoal-transparent);
 }
 
 @keyframes charcoal-loading-spinner-icon-scale-out {
@@ -33,12 +32,11 @@
   background-color: currentColor;
   animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
   animation-iteration-count: infinite;
+}
 
-  &[data-reset-animation] {
-    animation: none;
-  }
-
-  &[data-once='true'] {
-    animation-iteration-count: 1;
-  }
+.charcoal-loading-spinner-icon[data-reset-animation] {
+  animation: none;
+}
+.charcoal-loading-spinner-icon[data-once='true'] {
+  animation-iteration-count: 1;
 }