@charcoal-ui/react 3.7.0 → 3.9.0

package/src/components/Button/index.story.tsx

@@ -1,8 +1,7 @@
-import { action } from '@storybook/addon-actions'
 import { useRef } from 'react'
-import { Story } from '../../_lib/compat'
 import { ClickableElement } from '../Clickable'
 import Button, { ButtonProps } from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Button',
@@ -21,167 +20,171 @@ export default {
       },
     },
   },
-}
-
-const DefaultStory = (args: ButtonProps) => (
-  <Button {...args} onClick={action('click')}>
-    Button
-  </Button>
-)
+  render: (args) => <Button {...args}>Button</Button>,
+} as Meta<typeof Button>
 
-export const Default: Story<ButtonProps> = DefaultStory.bind({})
+export const Default: StoryObj<typeof Button> = {}
 
-export const Primary: Story<ButtonProps> = DefaultStory.bind({})
-Primary.args = {
-  variant: 'Primary',
+export const Primary: StoryObj<typeof Button> = {
+  args: {
+    variant: 'Primary',
+  },
 }
 
-export const Navigation: Story<ButtonProps> = DefaultStory.bind({})
-Navigation.args = {
-  variant: 'Navigation',
+export const Navigation: StoryObj<typeof Button> = {
+  args: {
+    variant: 'Navigation',
+  },
 }
 
-export const Overlay: Story<ButtonProps> = DefaultStory.bind({})
-Overlay.args = {
-  variant: 'Overlay',
+export const Overlay: StoryObj<typeof Button> = {
+  args: {
+    variant: 'Overlay',
+  },
 }
 
-export const Danger: Story<ButtonProps> = DefaultStory.bind({})
-Danger.args = {
-  variant: 'Danger',
+export const Danger: StoryObj<typeof Button> = {
+  args: {
+    variant: 'Danger',
+  },
 }
 
-export const Small: Story<ButtonProps> = DefaultStory.bind({})
-Small.args = {
-  size: 'S',
+export const Small: StoryObj<typeof Button> = {
+  args: {
+    size: 'S',
+  },
 }
 
-export const Fixed: Story<ButtonProps> = DefaultStory.bind({})
-Fixed.args = {
-  fullWidth: true,
+export const Fixed: StoryObj<typeof Button> = {
+  args: {
+    fullWidth: true,
+  },
 }
 
-export const Disabled: Story<ButtonProps> = DefaultStory.bind({})
-Disabled.args = {
-  disabled: true,
+export const Disabled: StoryObj<typeof Button> = {
+  args: {
+    disabled: true,
+  },
 }
 
-export const Link: Story<ButtonProps> = DefaultStory.bind({})
-Link.args = {
-  to: '#',
+export const Active: StoryObj<typeof Button> = {
+  args: {
+    isActive: true,
+  },
 }
 
-const NihongoStory = (args: ButtonProps) => (
-  <Button {...args} onClick={action('click')}>
-    日本語だよ
-  </Button>
-)
-
-export const Nihongo: Story<ButtonProps> = NihongoStory.bind({})
-
-const FocusStory = (args: ButtonProps) => <FocusStoryInternal {...args} />
-const FocusStoryInternal = (args: ButtonProps) => {
-  const ref = useRef<ClickableElement>(null)
-  const focus = () => ref.current?.focus()
-  return (
-    <Button {...args} onMouseOver={focus} ref={ref}>
-      Mouse over to focus
-    </Button>
-  )
+export const Link: StoryObj<typeof Button> = {
+  args: {
+    to: '#',
+  },
 }
 
-export const Focus: Story<ButtonProps> = FocusStory.bind({})
-
-const LayoutExampleStory = (args: ButtonProps) => (
-  <div
-    css={`
-      display: grid;
-      gap: 24px;
-    `}
-  >
-    <div
-      css={`
-        display: grid;
-        grid: auto / auto-flow min-content;
-        gap: 8px;
-      `}
-    >
-      <Button {...args}>Grid</Button>
-      <Button {...args} variant="Navigation">
-        Layout
-      </Button>
-      <Button {...args} variant="Danger">
-        Sample
-      </Button>
-    </div>
-    <div
-      css={`
-        display: grid;
-        grid: auto-flow auto / 392px;
-        gap: 8px;
-      `}
-    >
-      <Button {...args} variant="Primary" fullWidth>
-        Submit
-      </Button>
-      <Button {...args} variant="Default" fullWidth>
-        Cancel
-      </Button>
-    </div>
-    <div
-      css={`
-        display: flex;
+export const Nihongo: StoryObj<typeof Button> = {
+  render: (args) => <Button {...args}>日本語だよ</Button>,
+}
 
-        & > * + * {
-          margin-left: 8px;
-        }
-      `}
-    >
-      <Button {...args}>Flex</Button>
-      <Button {...args} variant="Navigation">
-        Layout
-      </Button>
-      <Button {...args} variant="Danger">
-        Sample
+export const Focus: StoryObj<typeof Button> = {
+  render: function Render(args) {
+    const ref = useRef<ClickableElement>(null)
+    const focus = () => ref.current?.focus()
+    return (
+      <Button {...args} onMouseOver={focus} ref={ref}>
+        Mouse over to focus
       </Button>
-    </div>
-    <div
-      css={`
-        display: flex;
-        flex-direction: column;
-        width: 392px;
+    )
+  },
+}
 
-        & > * + * {
-          margin-top: 8px;
-        }
-      `}
-    >
-      <Button {...args} variant="Primary" fullWidth>
-        Submit
-      </Button>
-      <Button {...args} variant="Default" fullWidth>
-        Cancel
-      </Button>
-    </div>
+export const LayoutExample: StoryObj<typeof Button> = {
+  render: (args: ButtonProps) => (
     <div
       css={`
-        display: flex;
-        flex-direction: column;
-        width: 392px;
-
-        & > * + * {
-          margin-top: 8px;
-        }
+        display: grid;
+        gap: 24px;
       `}
     >
-      <Button {...args} variant="Primary" fullWidth>
-        すべて見る
-      </Button>
-      <Button {...args} variant="Default">
-        作品を投稿
-      </Button>
+      <div
+        css={`
+          display: grid;
+          grid: auto / auto-flow min-content;
+          gap: 8px;
+        `}
+      >
+        <Button {...args}>Grid</Button>
+        <Button {...args} variant="Navigation">
+          Layout
+        </Button>
+        <Button {...args} variant="Danger">
+          Sample
+        </Button>
+      </div>
+      <div
+        css={`
+          display: grid;
+          grid: auto-flow auto / 392px;
+          gap: 8px;
+        `}
+      >
+        <Button {...args} variant="Primary" fullWidth>
+          Submit
+        </Button>
+        <Button {...args} variant="Default" fullWidth>
+          Cancel
+        </Button>
+      </div>
+      <div
+        css={`
+          display: flex;
+
+          & > * + * {
+            margin-left: 8px;
+          }
+        `}
+      >
+        <Button {...args}>Flex</Button>
+        <Button {...args} variant="Navigation">
+          Layout
+        </Button>
+        <Button {...args} variant="Danger">
+          Sample
+        </Button>
+      </div>
+      <div
+        css={`
+          display: flex;
+          flex-direction: column;
+          width: 392px;
+
+          & > * + * {
+            margin-top: 8px;
+          }
+        `}
+      >
+        <Button {...args} variant="Primary" fullWidth>
+          Submit
+        </Button>
+        <Button {...args} variant="Default" fullWidth>
+          Cancel
+        </Button>
+      </div>
+      <div
+        css={`
+          display: flex;
+          flex-direction: column;
+          width: 392px;
+
+          & > * + * {
+            margin-top: 8px;
+          }
+        `}
+      >
+        <Button {...args} variant="Primary" fullWidth>
+          すべて見る
+        </Button>
+        <Button {...args} variant="Default">
+          作品を投稿
+        </Button>
+      </div>
     </div>
-  </div>
-)
-
-export const LayoutExample = LayoutExampleStory.bind({})
+  ),
+}

package/src/components/Button/index.tsx

@@ -17,6 +17,7 @@ export type ButtonProps = Partial<{
   variant: Variant
   size: Size
   fullWidth: boolean
+  isActive: boolean
 }> &
   ClickableProps
 
@@ -27,6 +28,7 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
     size = 'M',
     fullWidth: fixed = false,
     disabled = false,
+    isActive = false,
     ...rest
   },
   ref
@@ -39,6 +41,7 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
       $color={variantToFont(variant)}
       $size={size}
       $fullWidth={fixed}
+      $isActive={isActive}
       ref={ref}
     >
       {children}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Checkbox Invalid 1`] = `
+exports[`Storybook Tests Checkbox Invalid 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -11,13 +11,9 @@ exports[`Storyshots Checkbox Invalid 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -39,6 +35,18 @@ exports[`Storyshots Checkbox Invalid 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -54,23 +62,18 @@ exports[`Storyshots Checkbox Invalid 1`] = `
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled='false']:focus,
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled='false']:active {
+.c2[type='checkbox'][aria-disabled='false']:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
 .c2[type='checkbox'][aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -145,6 +148,7 @@ exports[`Storyshots Checkbox Invalid 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        readOnly={false}
         type="checkbox"
       />
       <div
@@ -167,7 +171,7 @@ exports[`Storyshots Checkbox Invalid 1`] = `
 </div>
 `;
 
-exports[`Storyshots Checkbox Labelled 1`] = `
+exports[`Storybook Tests Checkbox Labelled 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -178,13 +182,9 @@ exports[`Storyshots Checkbox Labelled 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -206,6 +206,18 @@ exports[`Storyshots Checkbox Labelled 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -221,23 +233,18 @@ exports[`Storyshots Checkbox Labelled 1`] = `
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled='false']:focus,
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled='false']:active {
+.c2[type='checkbox'][aria-disabled='false']:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
 .c2[type='checkbox'][aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -319,6 +326,7 @@ exports[`Storyshots Checkbox Labelled 1`] = `
             onTouchEnd={[Function]}
             onTouchMove={[Function]}
             onTouchStart={[Function]}
+            readOnly={false}
             type="checkbox"
           />
           <div
@@ -367,6 +375,7 @@ exports[`Storyshots Checkbox Labelled 1`] = `
             onTouchEnd={[Function]}
             onTouchMove={[Function]}
             onTouchStart={[Function]}
+            readOnly={false}
             type="checkbox"
           />
           <div
@@ -400,7 +409,7 @@ exports[`Storyshots Checkbox Labelled 1`] = `
 </div>
 `;
 
-exports[`Storyshots Checkbox Unlabelled 1`] = `
+exports[`Storybook Tests Checkbox Unlabelled 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -411,13 +420,9 @@ exports[`Storyshots Checkbox Unlabelled 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -439,6 +444,18 @@ exports[`Storyshots Checkbox Unlabelled 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -454,23 +471,18 @@ exports[`Storyshots Checkbox Unlabelled 1`] = `
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled='false']:focus,
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled='false']:active {
+.c2[type='checkbox'][aria-disabled='false']:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
 .c2[type='checkbox'][aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -540,6 +552,7 @@ exports[`Storyshots Checkbox Unlabelled 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          readOnly={false}
           type="checkbox"
         />
         <div

package/src/components/Checkbox/index.tsx

@@ -4,10 +4,10 @@ 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 } from '@charcoal-ui/utils'
 
 import type { AriaCheckboxProps } from '@react-types/checkbox'
 import Icon from '../Icon'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 type CheckboxLabelProps =
   | {
@@ -58,7 +58,11 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
-          <CheckboxInput type="checkbox" {...inputProps} />
+          <CheckboxInput
+            type="checkbox"
+            {...inputProps}
+            readOnly={props.readonly}
+          />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
             <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
           </CheckboxInputOverlay>
@@ -81,13 +85,11 @@ const InputRoot = styled.label`
   display: flex;
 
   cursor: pointer;
-  ${disabledSelector} {
-    cursor: default;
-  }
 
   gap: 4px;
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
+    cursor: default;
     opacity: 0.32;
   }
 `
@@ -107,6 +109,13 @@ const CheckboxInput = styled.input`
     border-radius: 4px;
     transition: 0.2s box-shadow, 0.2s background-color;
 
+    &:disabled {
+      cursor: default;
+    }
+    &:read-only {
+      cursor: default;
+    }
+
     &:checked {
       background-color: var(--charcoal-brand);
 
@@ -123,18 +132,7 @@ const CheckboxInput = styled.input`
 
     &: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);
-      }
+      ${focusVisibleFocusRingCss}
       &[aria-invalid='true'] {
         box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
       }

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Clickable Button 1`] = `
+exports[`Storybook Tests Clickable Button 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -51,7 +51,7 @@ exports[`Storyshots Clickable Button 1`] = `
 </div>
 `;
 
-exports[`Storyshots Clickable Link 1`] = `
+exports[`Storybook Tests Clickable Link 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;