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

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

@@ -0,0 +1,123 @@
+.charcoal-button {
+  appearance: none;
+  background: transparent;
+  box-sizing: border-box;
+  padding: 0 24px;
+  border-style: none;
+  outline: none;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  text-decoration: none;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  width: min-content;
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: 999999px;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  transition: 0.2s color,
+    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;
+}
+
+.charcoal-button[data-full-width='true'] {
+  width: 100%;
+}
+

package/src/components/Button/index.css

@@ -31,125 +31,110 @@
     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;
-}
 
-.charcoal-button[data-full-width='true'] {
-  width: 100%;
+  &: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%;
+  }
 }

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

@@ -0,0 +1,22 @@
+.charcoal-checkbox__label {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  gap: 4px;
+}
+
+.charcoal-checkbox__label[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.charcoal-checkbox__label[aria-disabled='true'] > input {
+  opacity: 1;
+}
+
+.charcoal-checkbox__label_div {
+  flex: 1;
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+}

package/src/components/Checkbox/index.css

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

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

@@ -0,0 +1,41 @@
+.charcoal-clickable {
+  cursor: pointer;
+
+  /* Reset button appearance */
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  text-decoration: none;
+
+  /* Change the font styles in all browsers. */
+  font: inherit;
+
+  /* Remove the margin in Firefox and Safari. */
+  margin: 0;
+
+  /* Show the overflow in Edge. */
+  overflow: visible;
+
+  /* Remove the inheritance of text transform in Firefox. */
+  text-transform: none;
+}
+
+.charcoal-clickable:disabled, .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
+}
+
+.charcoal-clickable:focus {
+  outline: none;
+}
+
+.charcoal-clickable::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+

package/src/components/Clickable/index.css

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

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

@@ -0,0 +1,79 @@
+.charcoal-dropdown-selector-root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
+  width: 100%;
+}
+
+.charcoal-dropdown-selector-root[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.charcoal-dropdown-selector-button {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  gap: 4px;
+  padding-right: 8px;
+  padding-left: 8px;
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  transition: 0.2s box-shadow,
+    0.2s background-color;
+}
+
+.charcoal-dropdown-selector-button:disabled {
+  cursor: default;
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):focus {
+  outline: none;
+  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);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled)[data-active='true'], .charcoal-dropdown-selector-button:not(:disabled):active {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.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 {
+  text-align: left;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
+  color: var(--charcoal-text3);
+}
+
+.charcoal-ui-dropdown-selector-icon {
+  color: var(--charcoal-text2);
+}
+

package/src/components/DropdownSelector/index.css

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

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

@@ -0,0 +1,37 @@
+.charcoal-field-label {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+  color: var(--charcoal-text1);
+}
+
+.charcoal-field-label-required-text {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.charcoal-field-label-sub-label {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text3);
+  transition: 0.2s color,
+    0.2s box-shadow;
+}
+
+.charcoal-field-label-root {
+  display: inline-flex;
+  align-items: center;
+}
+
+.charcoal-field-label-root > .charcoal-field-label-required-text {
+  margin-left: 4px;
+}
+
+.charcoal-field-label-root > .charcoal-field-label-sub-label {
+  margin-left: auto;
+}
+