@charcoal-ui/react 3.6.0 → 3.8.0

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

@@ -1,109 +1,103 @@
 import { action } from '@storybook/addon-actions'
 import Checkbox from '.'
-import { Story } from '../../_lib/compat'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Checkbox',
   component: Checkbox,
-}
-
-type Props = {
-  checked: boolean
-  defaultChecked: boolean
-  disabled: boolean
-  readonly: boolean
-  className?: string
-  invalid: boolean
-}
-
-export const Labelled: Story<Props> = (props) => {
-  return (
-    <div>
-      <div style={{ marginBottom: '1em' }}>
-        <Checkbox
-          {...props}
-          name="labelled"
-          label="label"
-          onBlur={action('blur')}
-          onClick={action('click')}
-          onChange={action('change')}
-          onFocus={action('focus')}
-        >
-          同意する
-        </Checkbox>
-      </div>
+} as Meta<typeof Checkbox>
 
+export const Labelled: StoryObj<typeof Checkbox> = {
+  args: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+  },
+  render: (props) => {
+    return (
       <div>
-        <Checkbox
-          {...props}
-          name="labelled"
-          label="label"
-          onBlur={action('blur')}
-          onClick={action('click')}
-          onChange={action('change')}
-          onFocus={action('focus')}
-        >
-          <span style={{ width: 200, display: 'block' }}>
-            同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
-          </span>
-        </Checkbox>
-      </div>
-    </div>
-  )
-}
-
-Labelled.args = {
-  checked: false,
-  defaultChecked: false,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-}
+        <div style={{ marginBottom: '1em' }}>
+          <Checkbox
+            {...props}
+            name="labelled"
+            label="label"
+            onBlur={action('blur')}
+            onClick={action('click')}
+            onChange={action('change')}
+            onFocus={action('focus')}
+          >
+            同意する
+          </Checkbox>
+        </div>
 
-export const Invalid: Story<Omit<Props, 'invalid'>> = (props) => {
-  return (
-    <Checkbox
-      {...props}
-      name="labelled"
-      label="label"
-      invalid
-      onBlur={action('blur')}
-      onClick={action('click')}
-      onChange={action('change')}
-      onFocus={action('focus')}
-    >
-      同意する
-    </Checkbox>
-  )
-}
-
-Invalid.args = {
-  checked: false,
-  defaultChecked: false,
-  disabled: false,
-  readonly: false,
+        <div>
+          <Checkbox
+            {...props}
+            name="labelled"
+            label="label"
+            onBlur={action('blur')}
+            onClick={action('click')}
+            onChange={action('change')}
+            onFocus={action('focus')}
+          >
+            <span style={{ width: 200, display: 'block' }}>
+              同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
+            </span>
+          </Checkbox>
+        </div>
+      </div>
+    )
+  },
 }
 
-export const Unlabelled: Story<Props> = (props) => {
-  return (
-    <div>
+export const Invalid: StoryObj<typeof Checkbox> = {
+  args: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    readonly: false,
+  },
+  render: (props) => {
+    return (
       <Checkbox
         {...props}
-        name="unlabelled"
+        name="labelled"
         label="label"
+        invalid
         onBlur={action('blur')}
         onClick={action('click')}
         onChange={action('change')}
         onFocus={action('focus')}
-      />
-    </div>
-  )
+      >
+        同意する
+      </Checkbox>
+    )
+  },
 }
 
-Unlabelled.args = {
-  checked: false,
-  defaultChecked: false,
-  disabled: false,
-  readonly: false,
-  invalid: false,
+export const Unlabelled: StoryObj<typeof Checkbox> = {
+  args: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+  },
+  render: (props) => {
+    return (
+      <div>
+        <Checkbox
+          {...props}
+          name="unlabelled"
+          label="label"
+          onBlur={action('blur')}
+          onClick={action('click')}
+          onChange={action('change')}
+          onFocus={action('focus')}
+        />
+      </div>
+    )
+  },
 }

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/Clickable/index.story.tsx

@@ -1,17 +1,20 @@
 import { action } from '@storybook/addon-actions'
 import Clickable from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Clickable',
   component: Clickable,
-}
+} as Meta<typeof Clickable>
 
-export const Button = () => (
-  <Clickable onClick={action('click')}>button</Clickable>
-)
+export const Button: StoryObj = {
+  render: () => <Clickable onClick={action('click')}>button</Clickable>,
+}
 
-export const Link = () => (
-  <Clickable to="#" onClick={action('click')}>
-    link
-  </Clickable>
-)
+export const Link: StoryObj = {
+  render: () => (
+    <Clickable to="#" onClick={action('click')}>
+      link
+    </Clickable>
+  ),
+}

package/src/components/DropdownSelector/DropdownMenuItem.tsx

@@ -29,20 +29,7 @@ const StyledSpan = styled.span<{ isSelected?: boolean }>`
   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;
-  }
+  padding: 9px 0;
 
   display: flex;
   align-items: center;

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,
+}

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

@@ -1,6 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
+exports[`Storybook Tests DropdownSelector/MenuList Basic 1`] = `
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
 .c1 {
   list-style: none;
 }
@@ -33,11 +38,6 @@ exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
   background-color: var(--charcoal-surface3);
 }
 
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
 <div
   data-dark={false}
 >
@@ -208,7 +208,12 @@ exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
+exports[`Storybook Tests DropdownSelector/MenuList Disabled 1`] = `
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
 .c1 {
   list-style: none;
 }
@@ -241,11 +246,6 @@ exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
   background-color: var(--charcoal-surface3);
 }
 
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
 <div
   data-dark={false}
 >
@@ -287,7 +287,32 @@ exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
+exports[`Storybook Tests DropdownSelector/MenuList Group 1`] = `
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
+.c2 {
+  display: block;
+  color: var(--charcoal-text3);
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+}
+
+.c3 {
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+}
+
+.c1 {
+  display: block;
+}
+
 .c4 {
   list-style: none;
 }
@@ -320,31 +345,6 @@ exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
   background-color: var(--charcoal-surface3);
 }
 
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
-.c2 {
-  display: block;
-  color: var(--charcoal-text3);
-  font-size: 12px;
-  font-weight: bold;
-  padding: 12px 0 8px 16px;
-}
-
-.c3 {
-  padding-left: 0;
-  margin: 0;
-  box-sizing: border-box;
-  list-style: none;
-  overflow: hidden;
-}
-
-.c1 {
-  display: block;
-}
-
 <div
   data-dark={false}
 >

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

@@ -1,13 +1,13 @@
 import { action } from '@storybook/addon-actions'
-import { Story } from '../../../_lib/compat'
-import MenuList, { MenuListProps } from '.'
+import MenuList from '.'
 import MenuItem from '../MenuItem'
 import MenuItemGroup from '../MenuItemGroup'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/MenuList',
   component: MenuList,
-}
+} as Meta<typeof MenuList>
 
 function makeList(n: number, offset = 0) {
   return [...(Array(n) as undefined[])].map((_, i) => {
@@ -20,32 +20,38 @@ function makeList(n: number, offset = 0) {
   })
 }
 
-export const Basic: Story<MenuListProps> = () => {
-  return (
-    <>
-      <MenuList onChange={action('onChange')}>{makeList(10)}</MenuList>
-    </>
-  )
+export const Basic: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <>
+        <MenuList onChange={action('onChange')}>{makeList(10)}</MenuList>
+      </>
+    )
+  },
 }
 
-export const Disabled: Story<MenuListProps> = () => {
-  return (
-    <>
-      <MenuList onChange={action('onChange')}>
-        <MenuItem value="1">MenuItem</MenuItem>
-        <MenuItem value="2" disabled>
-          Disabled MenuItem
-        </MenuItem>
-      </MenuList>
-    </>
-  )
+export const Disabled: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <>
+        <MenuList onChange={action('onChange')}>
+          <MenuItem value="1">MenuItem</MenuItem>
+          <MenuItem value="2" disabled>
+            Disabled MenuItem
+          </MenuItem>
+        </MenuList>
+      </>
+    )
+  },
 }
 
-export const Group: Story<MenuListProps> = () => {
-  return (
-    <MenuList onChange={action('onChange')} value="1">
-      <MenuItemGroup text="Section1">{makeList(5)}</MenuItemGroup>
-      <MenuItemGroup text="Section2">{makeList(5, 5)}</MenuItemGroup>
-    </MenuList>
-  )
+export const Group: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <MenuList onChange={action('onChange')} value="1">
+        <MenuItemGroup text="Section1">{makeList(5)}</MenuItemGroup>
+        <MenuItemGroup text="Section2">{makeList(5, 5)}</MenuItemGroup>
+      </MenuList>
+    )
+  },
 }

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
+exports[`Storybook Tests DropdownSelector/Popover Basic 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -71,13 +71,19 @@ exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
   height: 40px;
 }
 
-.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[aria-disabled='false']:focus {
+  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) {
+  box-shadow: 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);
 }
 

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

@@ -1,12 +1,12 @@
 import { useRef, CSSProperties, useState } from 'react'
-import { Story } from '../../../_lib/compat'
-import Popover, { PopoverProps } from '.'
+import Popover from '.'
 import Button from '../../Button'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/Popover',
   component: Popover,
-}
+} as Meta<typeof Popover>
 
 function Base(props: { style?: CSSProperties }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -33,8 +33,8 @@ function Base(props: { style?: CSSProperties }) {
   )
 }
 
-export const Basic: Story<PopoverProps> = () => {
-  return (
+export const Basic: StoryObj = {
+  render: () => (
     <>
       <Base
         style={{
@@ -61,5 +61,5 @@ export const Basic: Story<PopoverProps> = () => {
         }}
       />
     </>
-  )
+  ),
 }