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

package/src/components/FieldLabel/index.css

@@ -26,12 +26,12 @@
 .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-required-text {
+    margin-left: 4px;
+  }
 
-.charcoal-field-label-root > .charcoal-field-label-sub-label {
-  margin-left: auto;
+  & > .charcoal-field-label-sub-label {
+    margin-left: auto;
+  }
 }

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

@@ -0,0 +1,37 @@
+.charcoal-hint-text {
+  background-color: var(--charcoal-surface3);
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.charcoal-hint-text[data-context='page'] {
+  justify-content: center;
+}
+
+@media (min-width: 744px) {
+
+.charcoal-hint-text[data-context='page'] {
+  padding: 20px 40px;
+}
+}
+
+.charcoal-hint-text-icon {
+  display: flex;
+  align-items: center;
+  color: var(--charcoal-text3);
+  height: 22px;
+  margin: 0 4px 0 0;
+}
+
+.charcoal-hint-text-message {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+

package/src/components/HintText/index.css

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

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

@@ -0,0 +1,107 @@
+.charcoal-icon-button {
+  cursor: pointer;
+  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;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999999px;
+  transition: 0.2s background-color,
+    0.2s box-shadow;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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);
+}
+
+.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);
+}
+
+.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/IconButton/index.css

@@ -23,98 +23,96 @@
   transition:
     0.2s background-color,
     0.2s box-shadow;
-}
 
-.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;
-}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    cursor: default;
+    opacity: 0.32;
+  }
 
-.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;
-}
+  &:focus {
+    outline: none;
+  }
 
-.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);
-}
+  &::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
 
-.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);
-}
+  &[data-size='XS'] {
+    width: 20px;
+    height: 20px;
+  }
 
-.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;
+  &[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);
+    }
+
+    &[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);
+    }
+  }
+
+  &: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;
+  }
 }

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

@@ -0,0 +1,47 @@
+.charcoal-loading-spinner {
+  box-sizing: content-box;
+  margin: auto;
+  padding: var(--charcoal-loading-spinner-padding);
+  border-radius: 8px;
+  font-size: var(--charcoal-loading-spinner-size);
+  width: var(--charcoal-loading-spinner-size);
+  height: var(--charcoal-loading-spinner-size);
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-background1);
+}
+
+.charcoal-loading-spinner[data-transparent='true'] {
+  background-color: var(--charcoal-transparent);
+}
+
+@keyframes charcoal-loading-spinner-icon-scale-out {
+
+from {
+  transform: scale(0);
+  opacity: 1;
+}
+
+to {
+  transform: scale(1);
+  opacity: 0;
+}
+}
+
+.charcoal-loading-spinner-icon {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
+  animation-iteration-count: infinite;
+}
+
+.charcoal-loading-spinner-icon[data-reset-animation] {
+  animation: none;
+}
+
+.charcoal-loading-spinner-icon[data-once='true'] {
+  animation-iteration-count: 1;
+}
+

package/src/components/LoadingSpinner/index.css

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

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

@@ -0,0 +1,35 @@
+.charcoal-modal-background {
+  overflow: auto;
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  padding: 40px 0;
+  box-sizing: border-box;
+  background-color: var(--charcoal-surface4);
+}
+
+@media (max-width: 743px) {
+
+.charcoal-modal-background[data-bottom-sheet='true'], .charcoal-modal-background[data-bottom-sheet='full'] {
+  padding: 0;
+}
+}
+
+.charcoal-modal-close-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  color: var(--charcoal-text3);
+  transition: 0.2s color;
+}
+
+.charcoal-modal-title {
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+}
+

package/src/components/Modal/index.css

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

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

@@ -0,0 +1,124 @@
+.charcoal-multi-select {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.charcoal-multi-select:disabled, .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.charcoal-multi-select-label {
+  display: flow-root;
+  align-items: center;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+}
+
+.charcoal-multi-select-label::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.charcoal-multi-select-label::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.charcoal-multi-select-input[type='checkbox'] {
+  appearance: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--charcoal-text3);
+  border-radius: 999999px;
+  transition: 0.2s background-color,
+    0.2s box-shadow;
+}
+
+.charcoal-multi-select-input[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.charcoal-multi-select-input[type='checkbox']:focus {
+  outline: none;
+  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);
+}
+
+.charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.charcoal-multi-select-input[type='checkbox'][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'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {
+  background-color: var(--charcoal-surface4);
+}
+
+.charcoal-multi-select-overlay {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  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);
+}
+
+.charcoal-multi-select-overlay[data-overlay='true'] {
+  border-color: var(--charcoal-text5);
+  border-width: 2px;
+  border-style: solid;
+}
+