Merge branch 'refs/heads/master' into HEAD

kufu · Feb 6, 2024 · 68171ce · 68171ce
2 parents ccf403e + 081ca60
commit 68171ce
Show file tree

Hide file tree

Showing 15 changed files with 645 additions and 607 deletions.
diff --git a/.github/workflows/publishRelease.yml b/.github/workflows/publishRelease.yml
@@ -60,7 +60,7 @@ jobs:
           git checkout master
           git cherry-pick $NEW_TAG
       - name: craete pull request
-        uses: peter-evans/create-pull-request@v5
+        uses: peter-evans/create-pull-request@v6
         with:
           title: 'chore(release): ${{ env.NEW_TAG }}'
           branch: 'merge-release-${{ env.NEW_TAG }}'
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "dayjs": "^1.11.10",
     "lodash.merge": "^4.6.2",
     "lodash.range": "^3.2.0",
-    "polished": "^4.2.2",
+    "polished": "^4.3.0",
     "react-draggable": "^4.4.6",
     "react-icons": "^5.0.1",
     "react-innertext": "^1.1.5",
@@ -23,28 +23,28 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "^18.6.0",
     "@commitlint/config-conventional": "^18.6.0",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-storysource": "^7.6.10",
+    "@storybook/addon-a11y": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-storysource": "^7.6.12",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addons": "^7.6.10",
-    "@storybook/cli": "^7.6.10",
+    "@storybook/addons": "^7.6.12",
+    "@storybook/cli": "^7.6.12",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-webpack5": "^7.6.10",
-    "@storybook/source-loader": "^7.6.10",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-webpack5": "^7.6.12",
+    "@storybook/source-loader": "^7.6.12",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.10",
-    "@swc/core": "^1.3.106",
-    "@swc/jest": "^0.2.31",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
+    "@storybook/theming": "^7.6.12",
+    "@swc/core": "^1.4.0",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/react": "^14.2.1",
+    "@types/jest": "^29.5.12",
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
-    "@types/node": "^20.11.7",
-    "@types/react": "^18.2.48",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.54",
     "@types/react-dom": "^18.2.18",
     "@types/react-test-renderer": "^17.0.9",
     "@types/react-transition-group": "^4.4.10",
@@ -54,38 +54,38 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-polyfill-corejs2": "^0.4.8",
     "babel-plugin-polyfill-regenerator": "^0.5.5",
-    "chromatic": "^10.6.1",
+    "chromatic": "^10.7.1",
     "ecma-version-validator-webpack-plugin": "^1.2.1",
     "eslint": "^8.56.0",
-    "eslint-config-smarthr": "^6.17.0",
+    "eslint-config-smarthr": "^6.18.0",
     "eslint-plugin-storybook": "^0.6.15",
     "fs-extra": "^11.2.0",
     "glob": "10.3.10",
     "http-server": "^14.1.1",
-    "husky": "^9.0.6",
+    "husky": "^9.0.10",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.2",
     "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.34",
     "postcss-styled-syntax": "^0.6.4",
     "postcss-syntax": "^0.36.2",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "prettier-config-smarthr": "^1.0.0",
     "prettier-plugin-tailwindcss": "^0.5.11",
-    "puppeteer": "^21.9.0",
+    "puppeteer": "^22.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "smarthr-normalize-css": "^1.1.0",
     "standard-version": "^9.3.2",
-    "storybook": "^7.6.10",
+    "storybook": "^7.6.12",
     "storybook-addon-pseudo-states": "^2.1.2",
     "styled-components": "^5.3.11",
     "styled-reset": "^4.5.2",
-    "stylelint": "^16.2.0",
+    "stylelint": "^16.2.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-smarthr": "^3.0.0",
     "stylelint-config-standard": "^36.0.0",
@@ -97,7 +97,7 @@
     "typescript": "^5.3.3",
     "typescript-plugin-styled-components": "^3.0.0",
     "wait-on": "^7.2.0",
-    "webpack": "^5.90.0"
+    "webpack": "^5.90.1"
   },
   "peerDependencies": {
     "react": "16.13.0 || ^17.0.1 || ^18.0.0",
@@ -178,7 +178,7 @@
   "typings": "lib/index.d.ts",
   "resolutions": {
     "@babel/helper-compilation-targets": "^7.23.6",
-    "@types/react": "^18.2.48",
+    "@types/react": "^18.2.54",
     "minimist": "1.2.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/src/components/AccordionPanel/AccordionPanelContent.tsx b/src/components/AccordionPanel/AccordionPanelContent.tsx
@@ -26,7 +26,7 @@ const accordionPanelContent = tv({
     'shr-ease-in-out',
     'shr-invisible',
     'shr-opacity-0',
-    '[&.entered]:shr-max-h-screen',
+    '[&.entered]:shr-max-h-[revert]',
     '[&.entered]:shr-visible',
     '[&.entered]:shr-opacity-100',
   ],

diff --git a/src/components/AppNavi/AppNavi.tsx b/src/components/AppNavi/AppNavi.tsx
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components'
 
 import { Theme, useTheme } from '../../hooks/useTheme'
 import { Nav } from '../SectioningContent'
-import { StatusLabel as StatusLabelComponent } from '../StatusLabel'
+import { StatusLabel } from '../StatusLabel'
 
 import { AppNaviAnchor, AppNaviAnchorProps } from './AppNaviAnchor'
 import { AppNaviButton, AppNaviButtonProps } from './AppNaviButton'
@@ -45,9 +45,9 @@ export const AppNavi: VFC<Props & ElementProps> = ({
   return (
     <WrapperNav {...props} themes={theme} className={`${className} ${classNames.wrapper}`}>
       {label && (
-        <StatusLabel themes={theme} className={classNames.label}>
+        <StyledStatusLabel themes={theme} className={classNames.label}>
           {label}
-        </StatusLabel>
+        </StyledStatusLabel>
       )}
 
       {buttons && (
@@ -134,7 +134,7 @@ const WrapperNav = styled(Nav)<{ themes: Theme }>`
     padding-left: ${spacingByChar(1.5)};
   `}
 `
-const StatusLabel = styled(StatusLabelComponent)<{ themes: Theme }>`
+const StyledStatusLabel = styled(StatusLabel)<{ themes: Theme }>`
   ${({ themes: { spacingByChar } }) => css`
     margin-right: ${spacingByChar(1)};
   `}

diff --git a/src/components/ComboBox/MultiComboBox.tsx b/src/components/ComboBox/MultiComboBox.tsx
@@ -473,7 +473,7 @@ const Container = styled.div.attrs(
       background-color: ${color.WHITE};
       padding: ${space(0.25)} ${space(0.5)};
       cursor: text;
-      min-width: 20em;
+      min-width: 15em;
       box-sizing: border-box;
 
       @media (prefers-contrast: more) {

diff --git a/src/components/ComboBox/MultiSelectedItem.tsx b/src/components/ComboBox/MultiSelectedItem.tsx
@@ -58,13 +58,13 @@ export function MultiSelectedItem<T>({
         disabled={disabled}
         className={`${classNames.selectedItem} shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em`}
       >
-        <ItemLabel
+        <Item
           enableEllipsis={enableEllipsis}
           className={classNames.selectedItemLabel}
           ref={labelRef}
         >
           {item.label}
-        </ItemLabel>
+        </Item>
 
         {deletable && (
           <DeleteButton
@@ -96,7 +96,7 @@ export function MultiSelectedItem<T>({
   )
 }
 
-const ItemLabel = styled.span<{ enableEllipsis?: boolean }>`
+const Item = styled.span<{ enableEllipsis?: boolean }>`
   ${({ enableEllipsis }) => css`
     ${enableEllipsis &&
     css`

diff --git a/src/components/FormControl/FormControl.tsx b/src/components/FormControl/FormControl.tsx
@@ -2,7 +2,7 @@ import React, { ComponentProps } from 'react'
 
 import { FormGroup } from '../FormGroup'
 
-type Props = Omit<ComponentProps<typeof FormGroup>, 'as'>
+type Props = Omit<ComponentProps<typeof FormGroup>, 'as' | 'dangerouslyTitleHidden'>
 
 export const FormControl: React.FC<Props> = FormGroup
 // 一部スタイリングが内部的に FormGroup という名前に依存しているため置き換え

diff --git a/src/components/FormGroup/FormGroup.tsx b/src/components/FormGroup/FormGroup.tsx
@@ -23,6 +23,7 @@ import { Select } from '../Select'
 import { StatusLabel } from '../StatusLabel'
 import { Text } from '../Text'
 import { Textarea } from '../Textarea'
+import { visuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText'
 
 import { useClassNames } from './useClassNames'
 
@@ -34,6 +35,8 @@ type Props = PropsWithChildren<{
   title: ReactNode
   /** タイトルの見出しのタイプ */
   titleType?: HeadingTypes
+  /** タイトルの見出しを視覚的に隠すかどうか */
+  dangerouslyTitleHidden?: boolean
   /** label 要素に適用する `htmlFor` 値 */
   htmlFor?: string
   /** label 要素に適用する `id` 値 */
@@ -64,6 +67,7 @@ type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props | 'aria-lab
 export const FormGroup: React.FC<Props & ElementProps> = ({
   title,
   titleType = 'blockTitle',
+  dangerouslyTitleHidden = false,
   htmlFor,
   labelId,
   innerMargin,
@@ -106,21 +110,26 @@ export const FormGroup: React.FC<Props & ElementProps> = ({
       className={`${className} ${disabledClass} ${classNames.wrapper}`}
       forwardedAs={as}
     >
-      <FormLabel
+      <TitleCluster
         htmlFor={!isRoleGroup ? managedHtmlFor : undefined}
         id={managedLabelId}
         className={`${classNames.label}`}
         forwardedAs={isRoleGroup ? 'legend' : 'label'}
+        dangerouslyTitleHidden={dangerouslyTitleHidden}
+        // Stack 対象にしないための hidden
+        hidden={dangerouslyTitleHidden || undefined}
       >
-        <GroupLabelText styleType={titleType}>{title}</GroupLabelText>
+        <Text as="span" styleType={titleType}>
+          {title}
+        </Text>
         {statusLabelList.length > 0 && (
           <Cluster gap={0.25} as="span">
             {statusLabelList.map((statusLabelProp, index) => (
               <StatusLabel {...statusLabelProp} key={index} />
             ))}
           </Cluster>
         )}
-      </FormLabel>
+      </TitleCluster>
 
       {helpMessage && (
         <p className={classNames.helpMessage} id={`${managedHtmlFor}_helpMessage`}>
@@ -264,13 +273,17 @@ const WrapperStack = styled(Stack).attrs<{
   `}
 `
 
-const FormLabel = styled(Cluster).attrs({ align: 'center' })`
+type FormLabelProps = Pick<Props, 'className' | 'dangerouslyTitleHidden'>
+const TitleCluster = styled(Cluster).attrs(
+  ({ className, dangerouslyTitleHidden }: FormLabelProps) => ({
+    align: 'center',
+    className: dangerouslyTitleHidden ? visuallyHiddenText({ className }) : className,
+  }),
+)<FormLabelProps>`
   /* flex-item が stretch してクリッカブル領域が広がりすぎないようにする */
   align-self: start;
 `
 
-const GroupLabelText = styled(Text).attrs({ forwardedAs: 'span' })``
-
 const ErrorMessage = styled.p<{ themes: Theme }>`
   ${({ themes: { color } }) => css`
     .smarthr-ui-FormGroup-errorMessage {
@@ -279,14 +292,11 @@ const ErrorMessage = styled.p<{ themes: Theme }>`
   `}
 `
 
-const ChildrenWrapper = styled.div<{
-  innerMargin: Props['innerMargin']
-  isRoleGroup: boolean
-}>`
+const ChildrenWrapper = styled.div<{ isRoleGroup: boolean } & Pick<Props, 'innerMargin'>>`
   ${({ innerMargin, isRoleGroup }) => css`
     ${(innerMargin || isRoleGroup) &&
     css`
-      &&&&&&& {
+      &&& {
         margin-block-start: ${useSpacing(innerMargin || (isRoleGroup ? 1 : 0.5))};
       }
     `}

diff --git a/src/components/Layout/Stack/Stack.stories.tsx b/src/components/Layout/Stack/Stack.stories.tsx
@@ -42,7 +42,7 @@ export const All: StoryFn = () => (
         </Base>
       </Stack>
     </Content>
-    <SideAreaStack gap="XXS" className="[&_>_*:nth-child(2)]:shr-mb-auto">
+    <SideAreaStack gap="XXS" className="[&_>_:not([hidden]):nth-child(2)]:shr-mb-auto">
       <Base padding={1.5}>
         <p>各要素の間隔は 1rem が標準です。</p>
       </Base>
@@ -51,7 +51,8 @@ export const All: StoryFn = () => (
       </Base>
       <Base padding={1.5}>
         <p>
-          要素を離して表示したい場合は、<code>[&_&gt;_*:nth-child(2)]:shr-mb-auto</code>
+          要素を離して表示したい場合は、
+          <code>[&_&gt;_:not([hidden]):nth-child(2)]:shr-mb-auto</code>
           と書きます。
         </p>
       </Base>

diff --git a/src/components/Layout/Stack/Stack.tsx b/src/components/Layout/Stack/Stack.tsx
@@ -12,28 +12,28 @@ const stack = tv({
       false: 'shr-flex',
     },
     gap: {
-      0: '[&_>_*_+_*]:shr-mt-0',
-      0.25: '[&_>_*_+_*]:shr-mt-0.25',
-      0.5: '[&_>_*_+_*]:shr-mt-0.5',
-      0.75: '[&_>_*_+_*]:shr-mt-0.75',
-      1: '[&_>_*_+_*]:shr-mt-1',
-      1.25: '[&_>_*_+_*]:shr-mt-1.25',
-      1.5: '[&_>_*_+_*]:shr-mt-1.5',
-      2: '[&_>_*_+_*]:shr-mt-2',
-      2.5: '[&_>_*_+_*]:shr-mt-2.5',
-      3: '[&_>_*_+_*]:shr-mt-3',
-      3.5: '[&_>_*_+_*]:shr-mt-3.5',
-      4: '[&_>_*_+_*]:shr-mt-4',
-      8: '[&_>_*_+_*]:shr-mt-8',
-      X3S: '[&_>_*_+_*]:shr-mt-0.25',
-      XXS: '[&_>_*_+_*]:shr-mt-0.5',
-      XS: '[&_>_*_+_*]:shr-mt-1',
-      S: '[&_>_*_+_*]:shr-mt-1.5',
-      M: '[&_>_*_+_*]:shr-mt-2',
-      L: '[&_>_*_+_*]:shr-mt-2.5',
-      XL: '[&_>_*_+_*]:shr-mt-3',
-      XXL: '[&_>_*_+_*]:shr-mt-3.5',
-      X3L: '[&_>_*_+_*]:shr-mt-4',
+      0: 'shr-space-y-0',
+      0.25: 'shr-space-y-0.25',
+      0.5: 'shr-space-y-0.5',
+      0.75: 'shr-space-y-0.75',
+      1: 'shr-space-y-1',
+      1.25: 'shr-space-y-1.25',
+      1.5: 'shr-space-y-1.5',
+      2: 'shr-space-y-2',
+      2.5: 'shr-space-y-2.5',
+      3: 'shr-space-y-3',
+      3.5: 'shr-space-y-3.5',
+      4: 'shr-space-y-4',
+      8: 'shr-space-y-8',
+      X3S: 'shr-space-y-0.25',
+      XXS: 'shr-space-y-0.5',
+      XS: 'shr-space-y-1',
+      S: 'shr-space-y-1.5',
+      M: 'shr-space-y-2',
+      L: 'shr-space-y-2.5',
+      XL: 'shr-space-y-3',
+      XXL: 'shr-space-y-3.5',
+      X3L: 'shr-space-y-4',
     } as { [key in Gap]: string },
     align: {
       start: 'shr-items-start',

diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
@@ -70,7 +70,7 @@ const loaderStyle = tv({
     type: {
       primary: {
         textSlot: ['shr-text-black'],
-        line: ['shr-border-brand', 'contrast-more:shr-border-main'],
+        line: ['shr-border-main'],
       },
       light: {
         textSlot: ['shr-text-white'],