@charcoal-ui/react 3.7.0 → 3.8.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;
@@ -54,23 +54,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);
 }
 
@@ -167,7 +162,7 @@ exports[`Storyshots Checkbox Invalid 1`] = `
 </div>
 `;
 
-exports[`Storyshots Checkbox Labelled 1`] = `
+exports[`Storybook Tests Checkbox Labelled 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -221,23 +216,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);
 }
 
@@ -400,7 +390,7 @@ exports[`Storyshots Checkbox Labelled 1`] = `
 </div>
 `;
 
-exports[`Storyshots Checkbox Unlabelled 1`] = `
+exports[`Storybook Tests Checkbox Unlabelled 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -454,23 +444,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);
 }
 

package/src/components/Checkbox/index.tsx

@@ -8,6 +8,7 @@ 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 =
   | {
@@ -123,18 +124,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;

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

@@ -1,6 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
+exports[`Storybook Tests DropdownSelector/ListItem Basic 1`] = `
+.c0 {
+  list-style: none;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c1:hover,
+.c1:focus,
+.c1:focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
 .c3 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -18,10 +50,6 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
   cursor: default;
 }
 
-.c3:active > input {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c4 {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -55,6 +83,15 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
 }
 
 .c4:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c4:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c4:focus-visible {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -105,38 +142,6 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
   transition: transform 0.2s;
 }
 
-.c0 {
-  list-style: none;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c1:hover,
-.c1:focus,
-.c1:focus-within {
-  background-color: var(--charcoal-surface3);
-}
-
 .c2 {
   color: red;
 }

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

@@ -1,20 +1,20 @@
 import { useState } from 'react'
-import { Story } from '../../../_lib/compat'
 import Icon from '../../Icon'
 import Switch from '../../Switch'
-import ListItem, { ListItemProps } from '.'
+import ListItem from '.'
 import styled from 'styled-components'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/ListItem',
   component: ListItem,
-}
+} as Meta<typeof ListItem>
 
 const CustomLink = styled.a`
   color: red;
 `
 
-export const Basic: Story<ListItemProps> = () => {
+const BasicRender = () => {
   const [checked, setChecked] = useState(false)
   const handleCheck = () => {
     setChecked((v) => !v)
@@ -49,3 +49,7 @@ export const Basic: Story<ListItemProps> = () => {
     </>
   )
 }
+
+export const Basic: StoryObj<typeof ListItem> = {
+  render: BasicRender,
+}