@charcoal-ui/react 3.6.0 → 3.8.0

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

@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import DropdownSelector, { DropdownSelectorProps } from '.'
-import { Story } from '../../_lib/compat'
 import { Divider } from './Divider'
 import MenuItemGroup from './MenuItemGroup'
 import DropdownMenuItem from './DropdownMenuItem'
@@ -8,11 +7,12 @@ import Modal from '../Modal'
 import { ModalBody, ModalHeader } from '../Modal/ModalPlumbing'
 import styled from 'styled-components'
 import Button from '../Button'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector',
   component: DropdownSelector,
-}
+} as Meta<typeof DropdownSelector>
 
 const baseProps: DropdownSelectorProps = {
   label: 'Label',
@@ -24,47 +24,38 @@ const baseProps: DropdownSelectorProps = {
   children: <DropdownMenuItem value="item" />,
 }
 
-export const Playground: Story<DropdownSelectorProps> = (
-  props: DropdownSelectorProps
-) => {
-  const [selected, setSelected] = useState('50')
-  return (
-    <div style={{ width: 288 }}>
-      <Button></Button>
-      <DropdownSelector
-        {...props}
-        onChange={(value) => {
-          setSelected(value)
-        }}
-        value={selected}
-        label="label"
-      >
-        {[...(Array(100) as undefined[])].map((_, i) => {
-          return (
-            <DropdownMenuItem key={i} value={i.toString()}>
-              {i}
-            </DropdownMenuItem>
-          )
-        })}
-      </DropdownSelector>
-    </div>
-  )
-}
-
-Playground.args = { ...baseProps }
+export const Playground: StoryObj<typeof DropdownSelector> = {
+  args: {
+    ...baseProps,
+  },
+  render: (props) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selected, setSelected] = useState('50')
 
-export const Basic: Story<DropdownSelectorProps> = (
-  props: DropdownSelectorProps
-) => {
-  return (
-    <div style={{ width: 288 }}>
-      <PlaygroundDropdownSelector {...props} />
-    </div>
-  )
+    return (
+      <div style={{ width: 288 }}>
+        <Button></Button>
+        <DropdownSelector
+          {...props}
+          onChange={(value) => {
+            setSelected(value)
+          }}
+          value={selected}
+          label="label"
+        >
+          {[...(Array(100) as undefined[])].map((_, i) => {
+            return (
+              <DropdownMenuItem key={i} value={i.toString()}>
+                {i}
+              </DropdownMenuItem>
+            )
+          })}
+        </DropdownSelector>
+      </div>
+    )
+  },
 }
 
-Basic.args = { ...baseProps }
-
 function PlaygroundDropdownSelector(props: Partial<DropdownSelectorProps>) {
   const [selected, setSelected] = useState('10')
   return (
@@ -83,6 +74,50 @@ function PlaygroundDropdownSelector(props: Partial<DropdownSelectorProps>) {
   )
 }
 
+export const Basic: StoryObj<typeof DropdownSelector> = {
+  args: {
+    ...baseProps,
+  },
+  render: (props) => (
+    <div style={{ width: 288 }}>
+      <PlaygroundDropdownSelector {...props} />
+    </div>
+  ),
+}
+
+export const LongNames: StoryObj<typeof DropdownSelector> = {
+  render: function Render(args) {
+    const [selected, setSelected] = useState('10')
+    return (
+      <div
+        style={{
+          width: 288,
+        }}
+      >
+        <DropdownSelector
+          {...args}
+          onChange={(value) => {
+            setSelected(value)
+          }}
+          value={selected}
+          label="label"
+        >
+          <DropdownMenuItem value={'10'}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+          </DropdownMenuItem>
+          <DropdownMenuItem value={'20'}>
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </DropdownMenuItem>
+          <DropdownMenuItem value={'30'}>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat.
+          </DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
+  },
+}
+
 const DummyBox = styled.div`
   border: solid 1px ${({ theme }) => theme.border.default.color};
   display: flex;
@@ -91,143 +126,144 @@ const DummyBox = styled.div`
   height: 256px;
 `
 
-export const InModal: Story<DropdownSelectorProps> = () => {
-  const [open, setOpen] = useState(true)
-  return (
-    <div
-      style={{
-        height: '10px',
-      }}
-    >
-      <button onClick={() => setOpen(true)}>open</button>
-      <Modal
-        bottomSheet="full"
-        title="modal"
-        isOpen={open}
-        isDismissable
-        onClose={() => {
-          setOpen(false)
+export const InModal: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [open, setOpen] = useState(true)
+    return (
+      <div
+        style={{
+          height: '10px',
         }}
       >
-        <ModalHeader />
-        <ModalBody>
-          <div
-            style={{
-              padding: '16px',
-            }}
-          >
-            <DummyBox>256px</DummyBox>
-            <PlaygroundDropdownSelector />
-            <DummyBox>256px</DummyBox>
-            <PlaygroundDropdownSelector />
-            <DummyBox>256px</DummyBox>
-          </div>
-        </ModalBody>
-      </Modal>
-    </div>
-  )
+        <button onClick={() => setOpen(true)}>open</button>
+        <Modal
+          bottomSheet="full"
+          title="modal"
+          isOpen={open}
+          isDismissable
+          onClose={() => {
+            setOpen(false)
+          }}
+        >
+          <ModalHeader />
+          <ModalBody>
+            <div
+              style={{
+                padding: '16px',
+              }}
+            >
+              <DummyBox>256px</DummyBox>
+              <PlaygroundDropdownSelector />
+              <DummyBox>256px</DummyBox>
+              <PlaygroundDropdownSelector />
+              <DummyBox>256px</DummyBox>
+            </div>
+          </ModalBody>
+        </Modal>
+      </div>
+    )
+  },
 }
 
-export const InFormTag: Story<DropdownSelectorProps> = (
-  props: DropdownSelectorProps
-) => {
-  const [selected, setSelected] = useState('')
-  return (
-    <form style={{ width: 288 }}>
-      <DropdownSelector
-        {...props}
-        onChange={(value) => {
-          setSelected(value)
-        }}
-        value={selected}
-        label="label"
-      >
-        <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
-        <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
-        <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
-      </DropdownSelector>
-    </form>
-  )
+export const InFormTag: StoryObj<typeof DropdownSelector> = {
+  render: function Render(props) {
+    const [selected, setSelected] = useState('')
+    return (
+      <form style={{ width: 288 }}>
+        <DropdownSelector
+          {...props}
+          onChange={(value) => {
+            setSelected(value)
+          }}
+          value={selected}
+          label="label"
+        >
+          <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
+          <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
+          <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
+        </DropdownSelector>
+      </form>
+    )
+  },
 }
 
-export const CustomChildren: Story<DropdownSelectorProps> = (
-  props: DropdownSelectorProps
-) => {
-  const [selected, setSelected] = useState('10')
-  return (
-    <div style={{ width: 288 }}>
-      <DropdownSelector
-        {...props}
-        onChange={(value) => {
-          setSelected(value)
-        }}
-        value={selected}
-        label="label"
-      >
-        <DropdownMenuItem value={'10'}>
-          <div
-            style={{
-              color: 'pink',
-              fontWeight: 'bold',
-            }}
-          >
-            Apple
-          </div>
-        </DropdownMenuItem>
-        <DropdownMenuItem value={'20'}>
-          <div
-            style={{
-              color: 'yellowgreen',
-              fontStyle: 'italic',
-            }}
-          >
-            Banana
-          </div>
-        </DropdownMenuItem>
-        <DropdownMenuItem value={'30'}>
-          <div
-            style={{
-              color: 'orange',
-              fontSize: '24px',
-            }}
-          >
-            Orange
-          </div>
-        </DropdownMenuItem>
-      </DropdownSelector>
-    </div>
-  )
+export const CustomChildren: StoryObj<typeof DropdownSelector> = {
+  args: { ...baseProps },
+  render: function Render(props) {
+    const [selected, setSelected] = useState('10')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          {...props}
+          onChange={(value) => {
+            setSelected(value)
+          }}
+          value={selected}
+          label="label"
+        >
+          <DropdownMenuItem value={'10'}>
+            <div
+              style={{
+                color: 'pink',
+                fontWeight: 'bold',
+              }}
+            >
+              Apple
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuItem value={'20'}>
+            <div
+              style={{
+                color: 'yellowgreen',
+                fontStyle: 'italic',
+              }}
+            >
+              Banana
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuItem value={'30'}>
+            <div
+              style={{
+                color: 'orange',
+                fontSize: '24px',
+              }}
+            >
+              Orange
+            </div>
+          </DropdownMenuItem>
+        </DropdownSelector>
+      </div>
+    )
+  },
 }
 
-CustomChildren.args = { ...baseProps }
-
-export const SectionList: Story<DropdownSelectorProps> = (
-  props: DropdownSelectorProps
-) => {
-  const [selected, setSelected] = useState('10')
-  return (
-    <div style={{ width: 288 }}>
-      <DropdownSelector
-        {...props}
-        onChange={(value) => {
-          setSelected(value)
-        }}
-        value={selected}
-        label="label"
-      >
-        <MenuItemGroup text="fruits">
-          <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
-          <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
-          <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
-        </MenuItemGroup>
-        <Divider />
-        <MenuItemGroup text="vehicle">
-          <DropdownMenuItem value={'40'}>bicycle</DropdownMenuItem>
-          <DropdownMenuItem value={'50'}>car</DropdownMenuItem>
-          <DropdownMenuItem value={'60'}>train</DropdownMenuItem>
-        </MenuItemGroup>
-      </DropdownSelector>
-    </div>
-  )
+export const SectionList: StoryObj<typeof DropdownSelector> = {
+  args: { ...baseProps },
+  render: function Render(props) {
+    const [selected, setSelected] = useState('10')
+    return (
+      <div style={{ width: 288 }}>
+        <DropdownSelector
+          {...props}
+          onChange={(value) => {
+            setSelected(value)
+          }}
+          value={selected}
+          label="label"
+        >
+          <MenuItemGroup text="fruits">
+            <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
+            <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
+            <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
+          </MenuItemGroup>
+          <Divider />
+          <MenuItemGroup text="vehicle">
+            <DropdownMenuItem value={'40'}>bicycle</DropdownMenuItem>
+            <DropdownMenuItem value={'50'}>car</DropdownMenuItem>
+            <DropdownMenuItem value={'60'}>train</DropdownMenuItem>
+          </MenuItemGroup>
+        </DropdownSelector>
+      </div>
+    )
+  },
 }
-SectionList.args = { ...baseProps }

package/src/components/DropdownSelector/index.tsx

@@ -6,6 +6,7 @@ import FieldLabel from '../FieldLabel'
 import { DropdownPopover } from './DropdownPopover'
 import { findPreviewRecursive } from './utils/findPreviewRecursive'
 import MenuList, { MenuListChildren } from './MenuList'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 export type DropdownSelectorProps = {
   label: string
@@ -48,6 +49,7 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         }}
         ref={triggerRef}
         type="button"
+        $active={isOpen}
       >
         <DropdownButtonText>
           {props.placeholder !== undefined && preview === undefined
@@ -98,7 +100,7 @@ const DropdownFieldLabel = styled(FieldLabel)`
   margin-bottom: 8px;
 `
 
-const DropdownButton = styled.button<{ invalid?: boolean }>`
+const DropdownButton = styled.button<{ invalid?: boolean; $active?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -108,6 +110,7 @@ const DropdownButton = styled.button<{ invalid?: boolean }>`
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
 
   ${disabledSelector} {
     cursor: default;
@@ -118,16 +121,24 @@ const DropdownButton = styled.button<{ invalid?: boolean }>`
   background-color: var(--charcoal-surface3);
   border-radius: 4px;
 
-  transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow, 0.2s background-color;
 
   &: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);
-    }
+    ${focusVisibleFocusRingCss}
+    ${({ $active }) =>
+      $active === true
+        ? css`
+            background-color: var(--charcoal-surface3-press);
+          `
+        : css`
+            &:hover {
+              background-color: var(--charcoal-surface3-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-surface3-press);
+            }
+          `}
   }
 
   ${({ invalid }) =>
@@ -146,20 +157,9 @@ const DropdownButtonText = styled.span`
   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;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const DropdownButtonIcon = styled(Icon)`

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Icon Default 1`] = `
+exports[`Storybook Tests Icon Default 1`] = `
 <div
   data-dark={false}
 >

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

@@ -1,6 +1,6 @@
-import Icon, { IconProps } from '.'
+import Icon from '.'
 import { KNOWN_ICON_FILES } from '@charcoal-ui/icons'
-import { Story } from '../../_lib/compat'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Icon',
@@ -19,14 +19,10 @@ export default {
       },
     },
   },
-}
-
-// NOTICE: コード生成のタイミングで不当に型エラーが出ることがあるので name を any にする
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template: Story<IconProps & { name: any }> = (props) => (
-  <Icon {...props} />
-)
-
-export const Default = Template.bind({})
+  args: {
+    name: KNOWN_ICON_FILES[0],
+    scale: 1,
+  },
+} as Meta<typeof Icon>
 
-Default.args = { name: KNOWN_ICON_FILES[0], scale: 1 }
+export const Default: StoryObj<typeof Icon> = {}