@charcoal-ui/react 3.4.0 → 3.6.0

package/src/components/DropdownSelector/__snapshots__/index.story.storyshot

@@ -9,12 +9,6 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
-}
-
-.c0:disabled:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]):disabled,
-.c0:disabled[aria-disabled]:not([aria-disabled=false]),
-.c0[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
   opacity: 0.32;
 }
 
@@ -50,22 +44,11 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
+.c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
+.c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -140,12 +123,6 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
-}
-
-.c0:disabled:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]):disabled,
-.c0:disabled[aria-disabled]:not([aria-disabled=false]),
-.c0[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
   opacity: 0.32;
 }
 
@@ -181,22 +158,11 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
+.c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
+.c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -280,12 +246,6 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
-}
-
-.c0:disabled:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]):disabled,
-.c0:disabled[aria-disabled]:not([aria-disabled=false]),
-.c0[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
   opacity: 0.32;
 }
 
@@ -321,22 +281,11 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
+.c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
+.c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -417,6 +366,8 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -445,12 +396,6 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 .c7:disabled,
 .c7[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
-}
-
-.c7:disabled:disabled,
-.c7[aria-disabled]:not([aria-disabled=false]):disabled,
-.c7:disabled[aria-disabled]:not([aria-disabled=false]),
-.c7[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
   opacity: 0.32;
 }
 
@@ -486,22 +431,11 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 }
 
 .c8:not(:disabled):not([aria-disabled]):focus,
-.c8[aria-disabled=false]:focus,
+.c8[aria-disabled='false']:focus,
 .c8:not(:disabled):not([aria-disabled]):active,
-.c8[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c8:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c8[aria-disabled=false]:focus:not(:focus-visible),
-.c8:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c8[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c8[aria-disabled='false']:active,
 .c8:not(:disabled):not([aria-disabled]):focus-visible,
-.c8[aria-disabled=false]:focus-visible {
+.c8[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -560,40 +494,29 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c12:hover:not(:disabled):not([aria-disabled]),
-.c12:hover[aria-disabled=false] {
-  background-color: var(--charcoal-transparent-hover);
+.c12:not(:disabled):not([aria-disabled]):hover,
+.c12[aria-disabled='false']:hover {
+  background-color: var( --charcoal-transparent-hover );
 }
 
-.c12:active:not(:disabled):not([aria-disabled]),
-.c12:active[aria-disabled=false] {
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c12:disabled,
-.c12[aria-disabled]:not([aria-disabled=false]) {
-  opacity: 0.32;
+.c12:not(:disabled):not([aria-disabled]):active,
+.c12[aria-disabled='false']:active {
+  background-color: var( --charcoal-transparent-press );
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled=false]:focus,
+.c12[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled=false]:active {
+.c12[aria-disabled='false']:active,
+.c12:not(:disabled):not([aria-disabled]):focus-visible,
+.c12[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c12[aria-disabled=false]:focus:not(:focus-visible),
-.c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c12[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus-visible,
-.c12[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+.c12:disabled,
+.c12[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
 }
 
 .c1 {
@@ -603,7 +526,7 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   height: -moz-fit-content;
   height: fit-content;
   width: 440px;
-  background-color: #ffffff;
+  background-color: var(--charcoal-surface1);
   border-radius: 24px;
 }
 
@@ -630,7 +553,7 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   justify-content: center;
   padding: 40px 0;
   box-sizing: border-box;
-  background-color: rgba(0,0,0,0.32);
+  background-color: var(--charcoal-surface4);
 }
 
 .c13 {
@@ -642,13 +565,13 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   transition: 0.2s color;
 }
 
-.c13:hover:not(:disabled):not([aria-disabled]),
-.c13:hover[aria-disabled=false] {
+.c13:not(:disabled):not([aria-disabled]):hover,
+.c13[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c13:active:not(:disabled):not([aria-disabled]),
-.c13:active[aria-disabled=false] {
+.c13:not(:disabled):not([aria-disabled]):active,
+.c13[aria-disabled='false']:active {
   color: var(--charcoal-text3-press);
 }
 
@@ -844,11 +767,8 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
           </div>
         </div>
         <button
-          className="c11 c12 c13 sc-hiCibw c13"
-          height={32}
+          className="c11 c12 c13"
           onClick={[Function]}
-          size="S"
-          width={32}
         >
           <pixiv-icon
             name="24/Close"
@@ -877,6 +797,8 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -916,65 +838,46 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  border-radius: 999999px;
   font-size: 14px;
   line-height: 22px;
   font-weight: bold;
   padding-right: 24px;
   padding-left: 24px;
-  border-radius: 999999px;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
   -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   transition: 0.2s color,0.2s background-color,0.2s box-shadow;
   height: 40px;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
-  color: var(--charcoal-text2-hover);
-}
-
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
-  color: var(--charcoal-text2-press);
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active,
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled='false']:focus,
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text2-hover);
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  color: var(--charcoal-text2-press);
   background-color: var(--charcoal-surface3-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
-.c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c2 {
   display: inline-block;
   width: 100%;
@@ -983,12 +886,6 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
 .c2:disabled,
 .c2[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
-}
-
-.c2:disabled:disabled,
-.c2[aria-disabled]:not([aria-disabled=false]):disabled,
-.c2:disabled[aria-disabled]:not([aria-disabled=false]),
-.c2[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
   opacity: 0.32;
 }
 
@@ -1024,22 +921,11 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
 }
 
 .c3:not(:disabled):not([aria-disabled]):focus,
-.c3[aria-disabled=false]:focus,
+.c3[aria-disabled='false']:focus,
 .c3:not(:disabled):not([aria-disabled]):active,
-.c3[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[aria-disabled=false]:focus:not(:focus-visible),
-.c3:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c3[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c3[aria-disabled='false']:active,
 .c3:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[aria-disabled=false]:focus-visible {
+.c3[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -1118,12 +1004,6 @@ exports[`Storyshots DropdownSelector Section List 1`] = `
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled=false]) {
   cursor: default;
-}
-
-.c0:disabled:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]):disabled,
-.c0:disabled[aria-disabled]:not([aria-disabled=false]),
-.c0[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
   opacity: 0.32;
 }
 
@@ -1159,22 +1039,11 @@ exports[`Storyshots DropdownSelector Section List 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
+.c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
+.c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }

package/src/components/DropdownSelector/index.tsx

@@ -1,9 +1,8 @@
 import { ReactNode, useState, useRef } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { disabledSelector } from '@charcoal-ui/utils'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
-import { theme } from '../../styled'
 import { DropdownPopover } from './DropdownPopover'
 import { findPreviewRecursive } from './utils/findPreviewRecursive'
 import MenuList, { MenuListChildren } from './MenuList'
@@ -90,14 +89,13 @@ const DropdownSelectorRoot = styled.div`
 
   ${disabledSelector} {
     cursor: default;
-    ${theme((o) => o.disabled)}
+    opacity: 0.32;
   }
 `
 
 const DropdownFieldLabel = styled(FieldLabel)`
   width: 100%;
-
-  ${theme((o) => o.margin.bottom(8))}
+  margin-bottom: 8px;
 `
 
 const DropdownButton = styled.button<{ invalid?: boolean }>`
@@ -115,31 +113,83 @@ const DropdownButton = styled.button<{ invalid?: boolean }>`
     cursor: default;
   }
 
+  padding-right: 8px;
+  padding-left: 8px;
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+
+  transition: 0.2s box-shadow;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+  }
+
   ${({ invalid }) =>
-    theme((o) => [
-      o.padding.horizontal(8),
-      o.outline.default.focus,
-      o.bg.surface3,
-      o.borderRadius(4),
-      invalid === true && o.outline.assertive,
-    ])}
+    invalid === true &&
+    css`
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+      }
+    `}
 `
 
 const DropdownButtonText = styled.span`
   text-align: left;
-
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 
 const DropdownButtonIcon = styled(Icon)`
-  ${theme((o) => [o.font.text2])}
+  color: var(--charcoal-text2);
 `
 
 const AssertiveText = styled.div<{ invalid?: boolean }>`
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--charcoal-text2);
+  line-height: 22px;
+  display: flow-root;
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
+
   ${({ invalid }) =>
-    theme((o) => [
-      o.typography(14),
-      o.margin.top(8),
-      invalid === true ? o.font.assertive : o.font.text2,
-    ])}
+    invalid === true &&
+    css`
+      color: var(--charcoal-assertive);
+    `}
 `

package/src/components/FieldLabel/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { createTheme } from '@charcoal-ui/styled'
 
 export interface FieldLabelProps
   extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -41,22 +40,88 @@ const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
 
 export default FieldLabel
 
-const theme = createTheme(styled)
-
 const Label = styled.label`
-  ${theme((o) => [o.typography(14).bold, o.font.text1])}
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+  color: var(--charcoal-text1);
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 
 const RequiredText = styled.span`
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 
 const SubLabelClickable = styled.div`
-  ${theme((o) => [
-    o.typography(14),
-    o.font.text3.hover.press,
-    o.outline.default.focus,
-  ])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text3);
+  transition: 0.2s color, 0.2s box-shadow;
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:hover {
+      color: var(--charcoal-text3-hover);
+    }
+    &:active {
+      color: var(--charcoal-text3-press);
+    }
+    &:active,
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+  }
 `
 
 const FieldLabelWrapper = styled.div`
@@ -64,10 +129,10 @@ const FieldLabelWrapper = styled.div`
   align-items: center;
 
   > ${RequiredText} {
-    ${theme((o) => o.margin.left(4))}
+    margin-left: 4px;
   }
 
   > ${SubLabelClickable} {
-    ${theme((o) => o.margin.left('auto'))}
+    margin-left: auto;
   }
 `