Merge branch 'master' into use-aria-disabled-to-button

kufu · Jun 14, 2024 · 40e2959 · 40e2959
2 parents e223c4b + 71053ed
commit 40e2959
Show file tree

Hide file tree

Showing 56 changed files with 12,763 additions and 9,769 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -3,19 +3,19 @@ version: 2.1
 executors:
   node-maintenance:
     docker:
-      - image: cimg/node:22.1.0
+      - image: cimg/node:22.2.0
         auth:
           username: smarthrinc
           password: $DOCKER_HUB_ACCESS_TOKEN
   node-active-lts:
     docker:
-      - image: cimg/node:22.1.0
+      - image: cimg/node:22.2.0
         auth:
           username: smarthrinc
           password: $DOCKER_HUB_ACCESS_TOKEN
   node-active-lts-browsers:
     docker:
-      - image: cimg/node:22.1.0-browsers
+      - image: cimg/node:22.2.0-browsers
         auth:
           username: smarthrinc
           password: $DOCKER_HUB_ACCESS_TOKEN

diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-20.13.1
+20.14.0
diff --git a/package.json b/package.json
@@ -7,16 +7,16 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "eslint": "^8.57.0",
-    "eslint-config-smarthr": "^6.30.0",
+    "eslint-config-smarthr": "^6.32.0",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "prettier": "^3.2.5",
+    "lint-staged": "^15.2.5",
+    "prettier": "^3.3.1",
     "prettier-config-smarthr": "^1.0.0",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "stylelint": "^16.5.0",
+    "prettier-plugin-tailwindcss": "^0.6.4",
+    "stylelint": "^16.6.1",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-smarthr": "^3.0.0",
+    "stylelint-config-smarthr": "^3.0.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "ts-node": "^10.9.2",
@@ -27,11 +27,11 @@
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "prepare": "husky"
   },
-  "packageManager": "pnpm@8.15.8+sha256.691fe176eea9a8a80df20e4976f3dfb44a04841ceb885638fe2a26174f81e65e",
+  "packageManager": "pnpm@9.3.0",
   "pnpm": {
     "overrides": {
-      "@babel/helper-compilation-targets": "^7.23.6",
-      "@types/react": "^18.3.2",
+      "@babel/helper-compilation-targets": "^7.24.7",
+      "@types/react": "^18.3.3",
       "minimist": "1.2.8",
       "react": "^18.3.1",
       "react-dom": "^18.3.1"

diff --git a/packages/smarthr-ui/.storybook/preview.tsx b/packages/smarthr-ui/.storybook/preview.tsx
@@ -74,6 +74,9 @@ const preview: Preview = {
         </>
       ),
     },
+    chromatic: {
+      forcedColors: 'none',
+    },
   },
   decorators: [
     (Story, context) => {

diff --git a/packages/smarthr-ui/CHANGELOG.md b/packages/smarthr-ui/CHANGELOG.md
@@ -2,6 +2,67 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [51.2.0](https://github.com/kufu/smarthr-ui/compare/v51.1.1...v51.2.0) (2024-06-11)
+
+
+### Features
+
+* PageCounterのレイアウトを変更 ([#4685](https://github.com/kufu/smarthr-ui/issues/4685)) ([e864580](https://github.com/kufu/smarthr-ui/commit/e864580b69047316dda14574886fd0dacd8e013d))
+
+
+### Bug Fixes
+
+* **Balloon:** Safariで影の表示が崩れるバグを修正 ([#4697](https://github.com/kufu/smarthr-ui/issues/4697)) ([ffd29a8](https://github.com/kufu/smarthr-ui/commit/ffd29a8aafdbcc5a13ce0abd668ac605ad7dc17b))
+
+### [51.1.1](https://github.com/kufu/smarthr-ui/compare/v51.1.0...v51.1.1) (2024-06-05)
+
+
+### Bug Fixes
+
+* iOS系端末の場合、Select, Radio系入力要素にrequired属性を設定しないように変更 ([#4660](https://github.com/kufu/smarthr-ui/issues/4660)) ([9096449](https://github.com/kufu/smarthr-ui/commit/9096449e5d23178ad60df2ccd40dd19d0678feb0))
+* 背景色として使う可能性のない色を bgColor 関連 props から消す ([#4688](https://github.com/kufu/smarthr-ui/issues/4688)) ([3c9954d](https://github.com/kufu/smarthr-ui/commit/3c9954d2b81669be3e6be48a02f350e4857001e4))
+
+## [51.1.0](https://github.com/kufu/smarthr-ui/compare/v51.0.0...v51.1.0) (2024-05-28)
+
+
+### Features
+
+* SearchInput コンポーネントに onClickClear オプションを追加 ([#4635](https://github.com/kufu/smarthr-ui/issues/4635)) ([48be8b4](https://github.com/kufu/smarthr-ui/commit/48be8b414a97dfd0d917ac6ace05a6f58d46af36))
+* ダイアログコンテンツに背景色とパディングを設定できるようにする ([#4677](https://github.com/kufu/smarthr-ui/issues/4677)) ([ee8dbf3](https://github.com/kufu/smarthr-ui/commit/ee8dbf3dfa297af322e41dfde4e6439b3d2fbac9))
+
+## [51.0.0](https://github.com/kufu/smarthr-ui/compare/v50.1.0...v51.0.0) (2024-05-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* AccordionPanelのアイコン無し(NoIcon)の削除を行う (#4669)
+
+### Features
+
+* AccordionPanelのアイコン無し(NoIcon)の削除を行う ([#4669](https://github.com/kufu/smarthr-ui/issues/4669)) ([c12824c](https://github.com/kufu/smarthr-ui/commit/c12824c65775264ad3e830f445ffbc885241df92))
+* Loaderを強制カラーモードに対応 ([#4645](https://github.com/kufu/smarthr-ui/issues/4645)) ([3a00da3](https://github.com/kufu/smarthr-ui/commit/3a00da3ed83463089497fac53cbff74203cd9c3c))
+
+
+### Bug Fixes
+
+* Combobox に autocomplete が渡せない不具合を修正 ([#4664](https://github.com/kufu/smarthr-ui/issues/4664)) ([4dd2838](https://github.com/kufu/smarthr-ui/commit/4dd28388ff9d5645026d7d1868a34e418bd91dd0))
+* **MultiCombobox:** 高さのガタツキを修正 ([#4665](https://github.com/kufu/smarthr-ui/issues/4665)) ([9639371](https://github.com/kufu/smarthr-ui/commit/96393715a1f9872382265d60252ad02ca7c248c1))
+* RadioButtonPanel.storiesのlist-styleを修正 ([#4666](https://github.com/kufu/smarthr-ui/issues/4666)) ([c990d2a](https://github.com/kufu/smarthr-ui/commit/c990d2ad787b326d78ffc8e8d7656ea76dbb13ab))
+
+## [50.1.0](https://github.com/kufu/smarthr-ui/compare/v50.0.0...v50.1.0) (2024-05-21)
+
+
+### Features
+
+* 言語切替UIを実装 ([#4613](https://github.com/kufu/smarthr-ui/issues/4613)) ([3b6e5f8](https://github.com/kufu/smarthr-ui/commit/3b6e5f8b5e2272fd4a405dbc6f2c8f2780eecb30))
+
+
+### Bug Fixes
+
+* **Switch:** フォーカスリングが表示されるように修正 ([#4650](https://github.com/kufu/smarthr-ui/issues/4650)) ([9ac3738](https://github.com/kufu/smarthr-ui/commit/9ac37380cb5ecbd5ae5a0928456b357ee48e9738))
+* Text[styleType] の時 Heading と同等とみなし leading="TIGHT" があたるように修正 ([#4655](https://github.com/kufu/smarthr-ui/issues/4655)) ([fc93b11](https://github.com/kufu/smarthr-ui/commit/fc93b11b8ebf798a3e82e0f0b46d73847dd186ae))
+* すべてのダイアログコンテンツの padding を統一 ([#4644](https://github.com/kufu/smarthr-ui/issues/4644)) ([79211b4](https://github.com/kufu/smarthr-ui/commit/79211b4d5b654d2fae0e7ee3af56eec627bbac73))
+
 ## [50.0.0](https://github.com/kufu/smarthr-ui/compare/v49.0.1...v50.0.0) (2024-05-14)
 
 

diff --git a/packages/smarthr-ui/e2e/components/ComboBox/MultiComboBox.test.ts b/packages/smarthr-ui/e2e/components/ComboBox/MultiComboBox.test.ts
@@ -2,7 +2,7 @@ import { Selector } from 'testcafe'
 
 fixture('MultiComboBox')
   .page(
-    'http://localhost:6006/iframe.html?args=&id=forms（フォーム）-combobox--multi&viewMode=story',
+    'http://localhost:6006/iframe.html?args=&id=forms（フォーム）-multicombobox--multi-combobox&viewMode=story',
   )
   .beforeEach(async (t) => {
     await t.maximizeWindow()

diff --git a/packages/smarthr-ui/e2e/components/ComboBox/SingleComboBox.test.ts b/packages/smarthr-ui/e2e/components/ComboBox/SingleComboBox.test.ts
@@ -2,7 +2,7 @@ import { Selector } from 'testcafe'
 
 fixture('SingleComboBox')
   .page(
-    'http://localhost:6006/iframe.html?args=&id=forms（フォーム）-combobox--single&viewMode=story',
+    'http://localhost:6006/iframe.html?args=&id=forms（フォーム）-singlecombobox--single-combobox&viewMode=story',
   )
   .beforeEach(async (t) => {
     await t.maximizeWindow()

diff --git a/packages/smarthr-ui/package.json b/packages/smarthr-ui/package.json
@@ -1,11 +1,11 @@
 {
   "name": "smarthr-ui",
   "description": "SmartHR ui components built with React.",
-  "version": "50.0.0",
+  "version": "51.2.0",
   "author": "SmartHR-UI Team",
   "dependencies": {
     "@smarthr/wareki": "^1.2.0",
-    "css-loader": "^7.1.1",
+    "css-loader": "^7.1.2",
     "dayjs": "^1.11.11",
     "lodash.merge": "^4.6.2",
     "lodash.range": "^3.2.0",
@@ -17,39 +17,39 @@
     "react-transition-group": "^4.4.5",
     "style-loader": "^4.0.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@storybook/addon-a11y": "^8.0.10",
-    "@storybook/addon-actions": "^8.0.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-storysource": "^8.0.10",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@storybook/addon-a11y": "^8.1.6",
+    "@storybook/addon-actions": "^8.1.6",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-interactions": "^8.1.6",
+    "@storybook/addon-storysource": "^8.1.6",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-viewport": "^8.0.10",
+    "@storybook/addon-viewport": "^8.1.6",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.0.10",
-    "@storybook/cli": "^8.0.10",
-    "@storybook/manager-api": "^8.0.10",
-    "@storybook/react": "^8.0.10",
-    "@storybook/react-webpack5": "^8.0.10",
-    "@storybook/source-loader": "^8.0.10",
-    "@storybook/test": "^8.0.10",
-    "@storybook/test-runner": "^0.18.0",
-    "@storybook/theming": "^8.0.10",
-    "@swc/core": "^1.5.5",
+    "@storybook/blocks": "^8.1.6",
+    "@storybook/cli": "^8.1.6",
+    "@storybook/manager-api": "^8.1.6",
+    "@storybook/react": "^8.1.6",
+    "@storybook/react-webpack5": "^8.1.6",
+    "@storybook/source-loader": "^8.1.6",
+    "@storybook/test": "^8.1.6",
+    "@storybook/test-runner": "^0.18.2",
+    "@storybook/theming": "^8.1.6",
+    "@swc/core": "^1.5.25",
     "@swc/jest": "^0.2.36",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
-    "@types/node": "^20.12.11",
-    "@types/react": "^18.3.2",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^17.0.9",
     "@types/react-transition-group": "^4.4.10",
@@ -59,29 +59,29 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-polyfill-corejs2": "^0.4.11",
     "babel-plugin-polyfill-regenerator": "^0.6.2",
-    "chromatic": "^11.3.2",
+    "chromatic": "^11.5.3",
     "ecma-version-validator-webpack-plugin": "^1.2.1",
     "fs-extra": "^11.2.0",
-    "glob": "10.3.15",
+    "glob": "10.4.1",
     "http-server": "^14.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
     "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.44.0",
+    "playwright": "^1.44.1",
     "postcss": "^8.4.38",
     "postcss-styled-syntax": "^0.6.4",
     "postcss-syntax": "^0.36.2",
-    "puppeteer": "^22.8.0",
+    "puppeteer": "^22.10.0",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^5.0.7",
     "standard-version": "^9.3.2",
-    "storybook": "^8.0.10",
+    "storybook": "^8.1.6",
     "storybook-addon-pseudo-states": "^3.1.1",
     "styled-components": "^5.3.11",
     "testcafe": "3.6.0",

diff --git a/packages/smarthr-ui/public/exports/smarthr-ui-props.json b/packages/smarthr-ui/public/exports/smarthr-ui-props.json
diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.stories.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.stories.tsx
@@ -123,30 +123,14 @@ export const AccordionStyle: StoryFn = () => (
         </BorderList>
       </AccordionPanel>
     </AccordionPanelBase>
-    <AccordionPanelBase>
-      <AccordionPanel displayIcon={false}>
-        <BorderList>
-          {arr.map((_, i) => (
-            <li key={i}>
-              <AccordionPanelItem name={`no-icon-${i}`}>
-                <AccordionPanelTrigger>No Icon {i}</AccordionPanelTrigger>
-                <AccordionPanelContent>
-                  <Content>{content()}</Content>
-                </AccordionPanelContent>
-              </AccordionPanelItem>
-            </li>
-          ))}
-        </BorderList>
-      </AccordionPanel>
-    </AccordionPanelBase>
   </Wrapper>
 )
 AccordionStyle.storyName = 'Accordion style'
 
 export const ExpandedOptions: StoryFn = () => (
   <Wrapper>
     <AccordionPanelBase>
-      <AccordionPanel displayIcon={true} expandableMultiply={true}>
+      <AccordionPanel expandableMultiply={true}>
         {arr.map((_, i) => (
           <AccordionPanelItem key={i} name={`expandable-multiply-${i}`}>
             <AccordionPanelTrigger>Expandable Multiply {i}</AccordionPanelTrigger>
@@ -158,7 +142,7 @@ export const ExpandedOptions: StoryFn = () => (
       </AccordionPanel>
     </AccordionPanelBase>
     <AccordionPanelBase>
-      <AccordionPanel displayIcon={true} defaultExpanded={['default-expanded-0']}>
+      <AccordionPanel defaultExpanded={['default-expanded-0']}>
         {arr.map((_, i) => (
           <AccordionPanelItem key={i} name={`default-expanded-${i}`}>
             <AccordionPanelTrigger>Default Expanded {i}</AccordionPanelTrigger>
@@ -176,7 +160,7 @@ ExpandedOptions.storyName = 'Expanded options'
 export const Callback: StoryFn = () => (
   <Wrapper>
     <AccordionPanelBase>
-      <AccordionPanel displayIcon={false} expandableMultiply={true} onClick={action('Clicked')}>
+      <AccordionPanel expandableMultiply={true} onClick={action('Clicked')}>
         {arr.map((_, i) => (
           <AccordionPanelItem key={i} name={`expandable-multiply-${i}`}>
             <AccordionPanelTrigger>Expandable Multiply {i}</AccordionPanelTrigger>

diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx
@@ -23,8 +23,6 @@ import {
 type Props = PropsWithChildren<{
   /** アイコンの左右位置 */
   iconPosition?: 'left' | 'right'
-  /** アイコンを表示するかどうか */
-  displayIcon?: boolean
   /** 複数のパネルを同時に開くことを許容するかどうか */
   expandableMultiply?: boolean
   /** デフォルトで開いた状態にするアイテムの `name` の配列 */
@@ -36,15 +34,13 @@ type ElementProps = Omit<ComponentProps<'div'>, keyof Props>
 
 export const AccordionPanelContext = React.createContext<{
   iconPosition: 'left' | 'right'
-  displayIcon: boolean
   expandedItems: Map<string, string>
   expandableMultiply: boolean
   parentRef: React.RefObject<HTMLDivElement> | null
   onClickTrigger?: (itemName: string, isExpanded: boolean) => void
   onClickProps?: (expandedItems: string[]) => void
 }>({
   iconPosition: 'left',
-  displayIcon: true,
   expandedItems: new Map(),
   expandableMultiply: false,
   parentRef: null,
@@ -56,7 +52,6 @@ const accordionWrapper = tv({
 
 export const AccordionPanel: React.FC<Props & ElementProps> = ({
   iconPosition = 'left',
-  displayIcon = true,
   expandableMultiply = false,
   defaultExpanded = [],
   className,
@@ -119,7 +114,6 @@ export const AccordionPanel: React.FC<Props & ElementProps> = ({
         onClickProps,
         expandedItems,
         iconPosition,
-        displayIcon,
         expandableMultiply,
         parentRef,
       }}

diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx
@@ -74,14 +74,8 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
     }
   }, [className])
   const { name } = useContext(AccordionPanelItemContext)
-  const {
-    iconPosition,
-    displayIcon,
-    expandedItems,
-    onClickTrigger,
-    onClickProps,
-    expandableMultiply,
-  } = useContext(AccordionPanelContext)
+  const { iconPosition, expandedItems, onClickTrigger, onClickProps, expandableMultiply } =
+    useContext(AccordionPanelContext)
 
   const isExpanded = getIsInclude(expandedItems, name)
 
@@ -113,11 +107,9 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
         type="button"
       >
         <Cluster className="shr-flex-nowrap" align="center" as="span">
-          {displayIcon && iconPosition === 'left' && <FaCaretRightIcon className={leftIconStyle} />}
+          {iconPosition === 'left' && <FaCaretRightIcon className={leftIconStyle} />}
           <span className={titleStyle}>{children}</span>
-          {displayIcon && iconPosition === 'right' && (
-            <FaCaretDownIcon className={rightIconStyle} />
-          )}
+          {iconPosition === 'right' && <FaCaretDownIcon className={rightIconStyle} />}
         </Cluster>
       </button>
     </Heading>