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

package/src/components/TagItem/index.css

@@ -30,76 +30,72 @@
   border-radius: 4px;
 
   transition: 0.2s box-shadow;
+}
+
+.charcoal-tag-item[data-size='M'] {
+  --charcoal-tag-item-size: 40px;
+  --charcoal-tag-item-padding-left: 24px;
+  --charcoal-tag-item-padding-right: 24px;
+}
+.charcoal-tag-item[data-size='S'] {
+  --charcoal-tag-item-size: 32px;
+  --charcoal-tag-item-padding-left: 16px;
+  --charcoal-tag-item-padding-right: 16px;
+}
+.charcoal-tag-item[data-state='inactive'] {
+  --charcoal-tag-item-color: var(--charcoal-text2);
+}
+.charcoal-tag-item[data-state='active'] {
+  --charcoal-tag-item-padding-left: 16px;
+  --charcoal-tag-item-padding-right: 8px;
+}
 
-  &[data-size='M'] {
-    --charcoal-tag-item-size: 40px;
-    --charcoal-tag-item-padding-left: 24px;
-    --charcoal-tag-item-padding-right: 24px;
-  }
-
-  &[data-size='S'] {
-    --charcoal-tag-item-size: 32px;
-    --charcoal-tag-item-padding-left: 16px;
-    --charcoal-tag-item-padding-right: 16px;
-  }
-
-  &[data-state='inactive'] {
-    --charcoal-tag-item-color: var(--charcoal-text2);
-  }
-
-  &[data-state='active'] {
-    --charcoal-tag-item-padding-left: 16px;
-    --charcoal-tag-item-padding-right: 8px;
-  }
-
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-    cursor: default;
-  }
-
-  &: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]):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:not(:focus-visible),
-  &[aria-disabled='false']:focus:not(:focus-visible) {
-    box-shadow: none;
-  }
+.charcoal-tag-item:disabled,
+.charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+.charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
+.charcoal-tag-item[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
+.charcoal-tag-item[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(
+    :focus-visible
+  ),
+.charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
 .charcoal-tag-item__bg {
   background-color: var(--charcoal-tag-item-bg);
+}
+
+.charcoal-tag-item__bg[data-bg-variant='image'] {
+  background-color: var(--charcoal-surface4);
+}
 
-  &[data-bg-variant='image'] {
-    background-color: var(--charcoal-surface4);
-
-    &::before {
-      content: '';
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-position: center;
-      background-size: cover;
-      background-image: var(--charcoal-tag-item-bg);
-      mix-blend-mode: overlay;
-    }
-  }
-
-  &[data-state='inactive'] {
-    background-color: var(--charcoal-surface3);
-  }
+.charcoal-tag-item__bg[data-bg-variant='image']::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-size: cover;
+  background-image: var(--charcoal-tag-item-bg);
+  mix-blend-mode: overlay;
+}
+
+.charcoal-tag-item__bg[data-state='inactive'] {
+  background-color: var(--charcoal-surface3);
 }
 
 .charcoal-tag-item__label {
@@ -108,20 +104,18 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
-  &[data-has-translate='true'] {
-    justify-content: space-between;
-  }
+}
+.charcoal-tag-item__label[data-has-translate='true'] {
+  justify-content: space-between;
 }
 
 .charcoal-tag-item__label__translated {
   --charcoal-tag-item-text-font-size: 12px;
   --charcoal-tag-item-text-line-height: 20px;
   font-weight: bold;
-
-  &::before {
-    display: none;
-  }
+}
+.charcoal-tag-item__label__translated::before {
+  display: none;
 }
 
 .charcoal-tag-item__label__text {
@@ -135,15 +129,12 @@
   color: inherit;
   white-space: nowrap;
   text-overflow: ellipsis;
-
-  &[data-has-translate='true'] {
-    --charcoal-tag-item-text-font-size: 10px;
-    --charcoal-tag-item-text-line-height: 14px;
-    font-weight: normal;
-  }
 }
-
-/* Kept flat: different class name from .charcoal-tag-item__label__text (note: "labe" typo in original) */
+.charcoal-tag-item__label__text[data-has-translate='true'] {
+  --charcoal-tag-item-text-font-size: 10px;
+  --charcoal-tag-item-text-line-height: 14px;
+  font-weight: normal;
+}
 .charcoal-tag-item__labe__text[data-has-translate='true']::after {
   display: none;
 }

package/src/components/TextArea/index.css

@@ -2,10 +2,10 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 4px;
+}
 
-  &[aria-disabled='true'] {
-    opacity: 0.32;
-  }
+.charcoal-text-area-root[aria-disabled='true'] {
+  opacity: 0.32;
 }
 
 .charcoal-text-area-container {
@@ -19,23 +19,23 @@
     0.2s background-color,
     0.2s box-shadow;
   height: calc(22px * var(--charcoal-text-area-rows) + 18px);
+}
 
-  &[aria-invalid='true'] {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
+.charcoal-text-area-container[aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
 
-  &:focus-within {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+.charcoal-text-area-container:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
 
-  &:not([aria-disabled='true']):hover {
-    background-color: var(--charcoal-surface3-hover);
-  }
+.charcoal-text-area-container:not([aria-disabled='true']):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
 
-  &[aria-invalid='true']:focus-within {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
+.charcoal-text-area-container[aria-invalid='true']:focus-within {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
 }
 
 .charcoal-text-area-textarea {
@@ -59,15 +59,14 @@
   appearance: none;
 
   background: none;
+}
+.charcoal-text-area-textarea[data-no-bottom-padding='true'] {
+  padding: calc(9px / 0.875) calc(8px / 0.875) 0;
+  height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+}
 
-  &[data-no-bottom-padding='true'] {
-    padding: calc(9px / 0.875) calc(8px / 0.875) 0;
-    height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
-  }
-
-  &::placeholder {
-    color: var(--charcoal-text3);
-  }
+.charcoal-text-area-textarea::placeholder {
+  color: var(--charcoal-text3);
 }
 
 .charcoal-text-area-counter {

package/src/components/TextEllipsis/index.css

@@ -4,17 +4,17 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
+}
 
-  &[data-has-line-height='true'] {
-    line-height: var(--charcoal-text-ellipsis-line-height);
-  }
+.charcoal-text-ellipsis[data-has-line-height='true'] {
+  line-height: var(--charcoal-text-ellipsis-line-height);
+}
 
-  &[data-has-line-height='false'] {
-    line-height: inherit;
-  }
+.charcoal-text-ellipsis[data-has-line-height='false'] {
+  line-height: inherit;
+}
 
-  &[data-line-limit='1'][data-use-nowrap='true'] {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/src/components/TextField/index.css

@@ -2,10 +2,10 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 4px;
+}
 
-  &[aria-disabled='true'] {
-    opacity: 0.32;
-  }
+.charcoal-text-field-root[aria-disabled='true'] {
+  opacity: 0.32;
 }
 
 .charcoal-text-field-container {
@@ -20,23 +20,25 @@
   padding: 0 8px;
   line-height: 22px;
   font-size: 14px;
+}
 
-  &[data-invalid='true'] {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
+.charcoal-text-field-container[data-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
 
-  &:not([aria-disabled='true']):hover {
-    background-color: var(--charcoal-surface3-hover);
-  }
+.charcoal-text-field-container:not([aria-disabled='true']):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
 
-  &:not([aria-disabled='true']):focus-within {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+.charcoal-text-field-container:not([aria-disabled='true']):focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
 
-  &:not([aria-disabled='true'])[data-invalid='true']:focus-within {
-    box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-  }
+.charcoal-text-field-container:not(
+    [aria-disabled='true']
+  )[data-invalid='true']:focus-within {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
 }
 
 .charcoal-text-field-prefix {
@@ -74,10 +76,10 @@
   background: transparent;
 
   color: var(--charcoal-text2);
+}
 
-  &::placeholder {
-    color: var(--charcoal-text3);
-  }
+.charcoal-text-field-input::placeholder {
+  color: var(--charcoal-text3);
 }
 
 .charcoal-text-field-line-counter {

package/src/index.ts

@@ -60,6 +60,10 @@ export {
   default as DropdownSelector,
   type DropdownSelectorProps,
 } from './components/DropdownSelector'
+export {
+  default as MenuItem,
+  type MenuItemProps,
+} from './components/DropdownSelector/MenuItem'
 export {
   default as DropdownMenuItem,
   type DropdownMenuItemProps,