chore: update devdependencies (non-major) (minor)

.circleci/config.yml

@@ -49,6 +49,7 @@ commands:
           keys:
             - pnpm-packages-reg-{{ checksum "pnpm-lock.yaml" }}
       - run: pnpm ui install
+      - run: pnpm ui exec playwright install
       - save_cache:
           paths:
             - ~/.cache/pnpm

package.json

@@ -4,17 +4,17 @@
   "description": "SmartHR ui components built with React.",
   "author": "SmartHR-UI Team",
   "devDependencies": {
-    "@commitlint/cli": "^19.2.2",
+    "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "eslint": "^8.57.0",
-    "eslint-config-smarthr": "^6.28.0",
+    "eslint-config-smarthr": "^6.30.0",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "prettier-config-smarthr": "^1.0.0",
     "prettier-plugin-tailwindcss": "^0.5.14",
-    "stylelint": "^16.3.1",
+    "stylelint": "^16.5.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-smarthr": "^3.0.0",
     "stylelint-config-standard": "^36.0.0",

packages/smarthr-ui/package.json

@@ -30,6 +30,7 @@
     "@storybook/addon-interactions": "^8.0.10",
     "@storybook/addon-storysource": "^8.0.10",
     "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^1.0.0",
     "@storybook/addon-viewport": "^8.0.10",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.0.10",
@@ -39,7 +40,6 @@
     "@storybook/react-webpack5": "^8.0.10",
     "@storybook/source-loader": "^8.0.10",
     "@storybook/test": "^8.0.10",
-    "@storybook/addon-styling-webpack": "^1.0.0",
     "@storybook/test-runner": "^0.17.0",
     "@storybook/theming": "^8.0.10",
     "@swc/core": "^1.4.17",
@@ -50,7 +50,7 @@
     "@types/lodash.range": "^3.2.9",
     "@types/node": "^20.12.8",
     "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.2.25",
+    "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^17.0.9",
     "@types/react-transition-group": "^4.4.10",
     "@types/styled-components": "^5.1.34",
@@ -69,21 +69,22 @@
     "jest-styled-components": "^7.2.0",
     "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
+    "playwright": "^1.44.0",
     "postcss": "^8.4.38",
     "postcss-styled-syntax": "^0.6.4",
     "postcss-syntax": "^0.36.2",
-    "puppeteer": "^22.6.5",
+    "puppeteer": "^22.7.1",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
-    "react-test-renderer": "^18.2.0",
+    "react-test-renderer": "^18.3.1",
     "rimraf": "^5.0.5",
     "standard-version": "^9.3.2",
     "storybook": "^8.0.10",
     "storybook-addon-pseudo-states": "^3.0.1",
     "styled-components": "^5.3.11",
-    "testcafe": "3.5.0",
+    "testcafe": "3.6.0",
     "ts-loader": "^9.5.1",
     "ttypescript": "^1.5.15",
     "typescript-plugin-styled-components": "^3.0.0",

packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx

@@ -16,7 +16,6 @@ import { Dropdown, DropdownContent, DropdownScrollArea, DropdownTrigger } from '
 import { AnchorButton, Button, BaseProps as ButtonProps } from '../../Button'
 import { RemoteDialogTrigger } from '../../Dialog'
 import { FaCaretDownIcon, FaEllipsisIcon } from '../../Icon'
-import { Stack } from '../../Layout'
 
 type Actions = ActionItem | ActionItem[]
 
@@ -214,14 +213,12 @@ export const DropdownMenuButton: FC<Props & ElementProps> = ({
         </Button>
       </DropdownTrigger>
       <DropdownContent>
-        <DropdownScrollArea>
-          <Stack as="ul" gap={0} ref={containerRef} className={actionListStyle}>
-            {React.Children.map(children, (item, i) =>
-              // MEMO: {flag && <Button/>}のような書き方に対応させる為、型を変換する
-              // itemの存在チェックでfalsyな値は弾かれている想定
-              item ? <li key={i}>{actionItem(item as ActionItemTruthyType)}</li> : null,
-            )}
-          </Stack>
+        <DropdownScrollArea as="ul" ref={containerRef} className={actionListStyle}>
+          {React.Children.map(children, (item, i) =>
+            // MEMO: {flag && <Button/>}のような書き方に対応させる為、型を変換する
+            // itemの存在チェックでfalsyな値は弾かれている想定
+            item ? <li key={i}>{actionItem(item as ActionItemTruthyType)}</li> : null,
+          )}
         </DropdownScrollArea>
       </DropdownContent>
     </Dropdown>

packages/smarthr-ui/src/components/Dropdown/DropdownScrollArea.tsx

@@ -1,14 +1,18 @@
-import React, { ComponentProps, PropsWithChildren, useMemo } from 'react'
+import React, { ComponentProps, ElementType, PropsWithChildren, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-type Props = PropsWithChildren<ComponentProps<'div'>>
+type Props = PropsWithChildren<ComponentProps<'div'>> & {
+  as?: ElementType
+}
 
 const scrollArea = tv({
   base: 'smarthr-ui-Dropdown-scrollArea shr-flex-auto shr-overflow-y-auto',
 })
 
-export const DropdownScrollArea: React.FC<Props> = ({ className, ...props }) => {
-  const styles = useMemo(() => scrollArea({ className }), [className])
+export const DropdownScrollArea = forwardRef<HTMLDivElement, Props>(
+  ({ as: Component = 'div', className, ...props }, ref) => {
+    const styles = useMemo(() => scrollArea({ className }), [className])
 
-  return <div {...props} className={styles} />
-}
+    return <Component {...props} ref={ref} className={styles} />
+  },
+)

packages/smarthr-ui/src/components/FormControl/FormControl.stories.tsx

@@ -39,7 +39,7 @@ export const All: StoryFn = () => (
           title="氏名"
           statusLabelProps={{ type: 'grey', children: '任意' }}
           helpMessage="氏名を入力してください。"
-          errorMessages={'氏名が入力されていません。'}
+          errorMessages="氏名が入力されていません。"
         >
           <Input name="fullname" width="100%" />
         </FormControl>

packages/smarthr-ui/src/components/FormControl/FormControl.tsx

@@ -73,6 +73,7 @@ const formGroup = tv({
       'shr-self-start',
       'shr-px-[unset]',
     ],
+    errorList: ['shr-list-none'],
     errorIcon: ['smarthr-ui-FormControl-errorMessage', 'shr-text-danger'],
   },
 })
@@ -160,15 +161,17 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
     return Array.isArray(errorMessages) ? errorMessages : [errorMessages]
   }, [errorMessages])
 
-  const { wrapperStyle, labelStyle, errorIconStyle, childrenWrapperStyle } = useMemo(() => {
-    const { wrapper, label, errorIcon } = formGroup()
-    return {
-      wrapperStyle: wrapper({ className }),
-      labelStyle: label({ className: dangerouslyTitleHidden ? visuallyHiddenText() : '' }),
-      errorIconStyle: errorIcon(),
-      childrenWrapperStyle: childrenWrapper({ innerMargin, isRoleGroup }),
-    }
-  }, [className, dangerouslyTitleHidden, innerMargin, isRoleGroup])
+  const { wrapperStyle, labelStyle, errorListStyle, errorIconStyle, childrenWrapperStyle } =
+    useMemo(() => {
+      const { wrapper, label, errorList, errorIcon } = formGroup()
+      return {
+        wrapperStyle: wrapper({ className }),
+        labelStyle: label({ className: dangerouslyTitleHidden ? visuallyHiddenText() : '' }),
+        errorListStyle: errorList(),
+        errorIconStyle: errorIcon(),
+        childrenWrapperStyle: childrenWrapper({ innerMargin, isRoleGroup }),
+      }
+    }, [className, dangerouslyTitleHidden, innerMargin, isRoleGroup])
 
   return (
     <Stack
@@ -218,13 +221,13 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
       )}
 
       {actualErrorMessages.length > 0 && (
-        <Stack gap={0} id={`${managedHtmlFor}_errorMessages`}>
+        <ul id={`${managedHtmlFor}_errorMessages`} className={errorListStyle}>
           {actualErrorMessages.map((message, index) => (
-            <p key={index}>
+            <li key={index}>
               <FaCircleExclamationIcon text={message} className={errorIconStyle} />
-            </p>
+            </li>
           ))}
-        </Stack>
+        </ul>
       )}
 
       <div className={childrenWrapperStyle}>

packages/smarthr-ui/src/components/Icon/Icon.stories.tsx

@@ -26,24 +26,24 @@ export const All: StoryFn = () => (
   <Stack gap={2}>
     <Cluster gap={0.75} as="dl">
       {Object.entries(Icons).map(([name, Icon]) => (
-        <ItemWrapper key={`${Icon.displayName}`}>
+        <StyledBaseColumn key={`${Icon.displayName}`}>
           <dt>{name?.replace(/Icon$/, '')}</dt>
           <dd>
             <Icon />
           </dd>
-        </ItemWrapper>
+        </StyledBaseColumn>
       ))}
     </Cluster>
     <div>
       旧名称（非推奨）
       <Cluster gap={0.75} as="dl">
         {Object.entries(DeprecatedIcons).map(([name, Icon]) => (
-          <ItemWrapper key={`${Icon.displayName}`}>
+          <StyledBaseColumn key={`${Icon.displayName}`}>
             <dt>{name?.replace(/Icon$/, '')}</dt>
             <dd>
               <Icon />
             </dd>
-          </ItemWrapper>
+          </StyledBaseColumn>
         ))}
       </Cluster>
     </div>
@@ -158,7 +158,7 @@ export const GenerateIcon: StoryFn = () => {
   )
 }
 
-const ItemWrapper = styled(BaseColumn)`
+const StyledBaseColumn = styled(BaseColumn)`
   ${({ theme: { space } }) => css`
     flex-basis: 10em;