@charcoal-ui/react 3.4.0 → 3.6.0

package/src/components/Checkbox/index.tsx

@@ -4,8 +4,7 @@ import styled, { css } from 'styled-components'
 import { useCheckbox } from '@react-aria/checkbox'
 import { useObjectRef } from '@react-aria/utils'
 import { useToggleState } from 'react-stately'
-import { disabledSelector, px } from '@charcoal-ui/utils'
-import { theme } from '../../styled'
+import { disabledSelector } from '@charcoal-ui/utils'
 
 import type { AriaCheckboxProps } from '@react-types/checkbox'
 import Icon from '../Icon'
@@ -40,6 +39,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const ariaCheckboxProps = useMemo<AriaCheckboxProps>(
       () => ({
         ...props,
+        isInValid: invalid,
         isSelected: props.checked,
         defaultSelected: props.defaultChecked,
         validationState: invalid ? 'invalid' : 'valid',
@@ -58,7 +58,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
-          <CheckboxInput type="checkbox" {...inputProps} invalid={invalid} />
+          <CheckboxInput type="checkbox" {...inputProps} />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
             <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
           </CheckboxInputOverlay>
@@ -85,15 +85,18 @@ const InputRoot = styled.label`
     cursor: default;
   }
 
-  gap: ${({ theme }) => px(theme.spacing[4])};
-  ${theme((o) => [o.disabled])}
+  gap: 4px;
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 `
 
 const CheckboxRoot = styled.div`
   position: relative;
 `
 
-const CheckboxInput = styled.input<{ invalid: boolean }>`
+const CheckboxInput = styled.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -101,20 +104,47 @@ const CheckboxInput = styled.input<{ invalid: boolean }>`
     margin: 0;
     width: 20px;
     height: 20px;
+    border-radius: 4px;
+    transition: 0.2s box-shadow, 0.2s background-color;
 
     &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+      background-color: var(--charcoal-brand);
+
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        &:hover {
+          background-color: var(--charcoal-brand-hover);
+        }
+        &:active {
+          background-color: var(--charcoal-brand-press);
+        }
+      }
+    }
+
+    &:not(:disabled):not([aria-disabled]),
+    &[aria-disabled='false'] {
+      &:focus,
+      &:active {
+        outline: none;
+        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+        &:not(:focus-visible) {
+          outline: none;
+        }
+      }
+      &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+      }
+      &[aria-invalid='true'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+      }
     }
+
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme }) => theme.color.text4};
+      border-color: var(--charcoal-text4);
     }
-    ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
-    ${(p) => p.invalid && theme((o) => [o.outline.assertive])}
-
-    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
-    transition: all 0.2s !important;
   }
 `
 
@@ -126,15 +156,15 @@ const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  ${theme((o) => [o.width.px(24), o.height.px(24), o.font.text5])}
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
 
   ${({ checked }) => checked !== true && hiddenCss};
 `
 
 const InputLabel = styled.div`
-  ${theme((o) => [o.font.text2])}
-
+  color: var(--charcoal-text2);
   font-size: 14px;
   /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
   line-height: 20px;

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

@@ -17,6 +17,8 @@ exports[`Storyshots Clickable Button 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -66,6 +68,8 @@ exports[`Storyshots Clickable Link 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;

package/src/components/Clickable/index.tsx

@@ -65,6 +65,7 @@ const StyledClickableDiv = styled.div`
   text-rendering: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  text-decoration: none;
 
   &:focus {
     outline: none;

package/src/components/DropdownSelector/DropdownMenuItem.tsx

@@ -2,7 +2,6 @@ import styled from 'styled-components'
 import MenuItem, { MenuItemProps } from './MenuItem'
 import { MenuListContext } from './MenuList/MenuListContext'
 import { useContext } from 'react'
-import { theme } from '../../styled'
 import Icon from '../Icon'
 
 export type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>
@@ -27,7 +26,24 @@ export default function DropdownMenuItem(props: DropdownMenuItemProps) {
  * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる
  */
 const StyledSpan = styled.span<{ isSelected?: boolean }>`
-  ${theme((o) => [o.typography(14), o.font.text2])};
+  font-size: 14px;
+  line-height: 22px;
+  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;
+  }
+
   display: flex;
   align-items: center;
   width: 100%;
@@ -35,6 +51,6 @@ const StyledSpan = styled.span<{ isSelected?: boolean }>`
 `
 
 const Text2ColorIcon = styled(Icon)`
-  ${theme((o) => [o.font.text2])}
+  color: var(--charcoal-text2);
   padding-right: 4px;
 `

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

@@ -13,19 +13,15 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
 }
 
 .c3:disabled,
-.c3[aria-disabled]:not([aria-disabled=false]) {
+.c3[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3:active > input {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c3:disabled,
-.c3[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c4 {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -130,11 +126,8 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
-}
-
-.c1[aria-disabled="true"] {
   cursor: default;
 }
 

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

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react'
 import styled from 'styled-components'
-import { theme } from '../../../styled'
 
 export type CustomJSXElement =
   | keyof JSX.IntrinsicElements
@@ -44,15 +43,18 @@ const ItemDiv = styled.div`
   cursor: pointer;
   outline: none;
 
-  ${theme((o) => [o.padding.horizontal(16), o.disabled])}
+  padding-right: 16px;
+  padding-left: 16px;
 
-  &[aria-disabled="true"] {
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
 
   :hover,
   :focus,
   :focus-within {
-    ${theme((o) => [o.bg.surface3])}
+    background-color: var(--charcoal-surface3);
   }
 `

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

@@ -23,7 +23,7 @@ export default function MenuItemGroup(props: MenuItemGroupProps) {
 
 const TextSpan = styled.span`
   display: block;
-  color: ${({ theme }) => theme.color.text3};
+  color: var(--charcoal-text3);
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;

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

@@ -22,11 +22,8 @@ exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
 }
 
 .c2:disabled,
-.c2[aria-disabled]:not([aria-disabled=false]) {
+.c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
-}
-
-.c2[aria-disabled="true"] {
   cursor: default;
 }
 
@@ -233,11 +230,8 @@ exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
 }
 
 .c2:disabled,
-.c2[aria-disabled]:not([aria-disabled=false]) {
+.c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
-}
-
-.c2[aria-disabled="true"] {
   cursor: default;
 }
 
@@ -315,11 +309,8 @@ exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
 }
 
 .c5:disabled,
-.c5[aria-disabled]:not([aria-disabled=false]) {
+.c5[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
-}
-
-.c5[aria-disabled="true"] {
   cursor: default;
 }
 
@@ -336,7 +327,7 @@ exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
 
 .c2 {
   display: block;
-  color: #858585;
+  color: var(--charcoal-text3);
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;

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

@@ -17,6 +17,8 @@ exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -56,65 +58,46 @@ exports[`Storyshots DropdownSelector/Popover Basic 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);
-}
-
 <div
   data-dark={false}
 >

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

@@ -2,7 +2,6 @@ import { RefObject, useContext, useRef } from 'react'
 import { ReactNode } from 'react'
 import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
 import styled from 'styled-components'
-import { theme } from '../../../styled'
 import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'
 import { usePreventScroll } from './usePreventScroll'
 
@@ -74,11 +73,9 @@ const DropdownPopoverDiv = styled.div`
   list-style: none;
   overflow: auto;
   max-height: inherit;
-
-  ${theme((o) => [
-    o.bg.background1,
-    o.border.default,
-    o.borderRadius(8),
-    o.padding.vertical(8),
-  ])}
+  background-color: var(--charcoal-background1);
+  border: solid 1px var(--charcoal-border-default);
+  border-radius: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 `