Merge branch 'master' into remove-conflict-v30.9.0

.circleci/config.yml

@@ -62,11 +62,14 @@ commands:
           command: yarn test-storybook:ci
       - store_test_results:
           path: junit.xml
-  # chromatic
   run-chromatic:
     steps:
       - checkout
       - run: yarn run chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} --exit-zero-on-changes
+  run-chromatic-master:
+    steps:
+      - checkout
+      - run: yarn run chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} --auto-accept-changes
   install-noto-sans-cjk-jp:
     steps:
       - run:
@@ -105,6 +108,11 @@ jobs:
     steps:
       - setup-for-test
       - run-chromatic
+  chromatic-deployment-master:
+    executor: node-active-lts
+    steps:
+      - setup-for-test
+      - run-chromatic-master
 workflows:
   multiple_builds:
     jobs:
@@ -115,4 +123,14 @@ workflows:
       - a11y-test:
           context: smarthr-dockerhub
       - chromatic-deployment:
+          filters:
+            branches:
+              ignore:
+                - master
+          context: smarthr-dockerhub
+      - chromatic-deployment-master:
+          filters:
+            branches:
+              only:
+                - master
           context: smarthr-dockerhub

package.json

@@ -21,18 +21,18 @@
     "@babel/preset-typescript": "^7.21.5",
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
-    "@storybook/addon-a11y": "^7.0.11",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/addon-interactions": "^7.0.11",
-    "@storybook/addon-storysource": "^7.0.11",
-    "@storybook/addons": "^7.0.11",
-    "@storybook/cli": "^7.0.11",
+    "@storybook/addon-a11y": "^7.0.12",
+    "@storybook/addon-essentials": "^7.0.12",
+    "@storybook/addon-interactions": "^7.0.12",
+    "@storybook/addon-storysource": "^7.0.12",
+    "@storybook/addons": "^7.0.12",
+    "@storybook/cli": "^7.0.12",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.11",
-    "@storybook/react-webpack5": "^7.0.11",
+    "@storybook/react": "^7.0.12",
+    "@storybook/react-webpack5": "^7.0.12",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.11",
+    "@storybook/theming": "^7.0.12",
     "@swc/core": "^1.3.58",
     "@swc/jest": "^0.2.26",
     "@testing-library/react-hooks": "^8.0.1",
@@ -74,7 +74,7 @@
     "react-test-renderer": "^18.2.0",
     "smarthr-normalize-css": "^1.1.0",
     "standard-version": "^9.3.2",
-    "storybook": "^7.0.11",
+    "storybook": "^7.0.12",
     "styled-components": "^5.3.10",
     "styled-reset": "^4.4.7",
     "stylelint": "^15.6.1",

src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx

@@ -2,7 +2,7 @@ import React, { FC, ReactNode, useCallback } from 'react'
 import styled, { css } from 'styled-components'
 
 import { Theme, useTheme } from '../../../hooks/useTheme'
-import { DecoratorsType } from '../../../types/props'
+import { DecoratorsType, ResponseMessageType } from '../../../types/props'
 import { Button } from '../../Button'
 import { HeadingTagTypes } from '../../Heading'
 import { FaCheckCircleIcon, FaExclamationCircleIcon } from '../../Icon'
@@ -57,18 +57,9 @@ export type BaseProps = {
   decorators?: DecoratorsType<'closeButtonLabel'>
 }
 
-type responseMessageType =
-  | {
-      status: 'success' | 'error'
-      text: ReactNode
-    }
-  | {
-      status: 'processing'
-    }
-
 export type ActionDialogContentInnerProps = BaseProps & {
   onClickClose: () => void
-  responseMessage?: responseMessageType
+  responseMessage?: ResponseMessageType
   titleId: string
 }
 

src/components/Dropdown/FilterDropdown/FilterDropdown.stories.tsx

@@ -1,11 +1,12 @@
 import { action } from '@storybook/addon-actions'
 import { Meta, StoryObj } from '@storybook/react'
-import React, { ReactNode, useCallback, useState } from 'react'
+import React, { ComponentProps, ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components'
 
+import { Button } from '../../Button'
 import { MultiComboBox, SingleComboBox } from '../../ComboBox'
 import { Input } from '../../Input'
-import { Stack } from '../../Layout'
+import { Cluster, Stack } from '../../Layout'
 import { RadioButton } from '../../RadioButton'
 
 import { FilterDropdown } from './FilterDropdown'
@@ -30,6 +31,8 @@ const Render: React.FC = () => {
   const [isFiltered2, setIsFiltered2] = React.useState(true)
   const [isFiltered3, setIsFiltered3] = React.useState(true)
   const [isFiltered4, setIsFiltered4] = React.useState(true)
+  const [responseMessage, setResponseMessage] =
+    useState<ComponentProps<typeof FilterDropdown>['responseMessage']>()
 
   return (
     <Wrapper>
@@ -138,6 +141,45 @@ const Render: React.FC = () => {
             </p>
           </FilterDropdown>
         </dd>
+        <dt>Has response message</dt>
+        <dd>
+          <FilterDropdown
+            isFiltered={isFiltered4}
+            onApply={() => setIsFiltered4(true)}
+            onReset={() => setIsFiltered4(false)}
+            responseMessage={responseMessage}
+          >
+            <Stack gap={1}>
+              <p>
+                You can change border text and color of the trigger button by setting `isFiltered`.
+              </p>
+              <p>切り替えボタン：</p>
+              <Cluster gap={0.5}>
+                <Button
+                  onClick={() => {
+                    setResponseMessage({ status: 'success', text: '適用しました。' })
+                  }}
+                >
+                  保存
+                </Button>
+                <Button
+                  onClick={() => {
+                    setResponseMessage({ status: 'error', text: '何らかのエラーが発生しました。' })
+                  }}
+                >
+                  エラー
+                </Button>
+                <Button
+                  onClick={() => {
+                    setResponseMessage({ status: 'processing' })
+                  }}
+                >
+                  保存中
+                </Button>
+              </Cluster>
+            </Stack>
+          </FilterDropdown>
+        </dd>
       </List>
     </Wrapper>
   )

src/components/Dropdown/FilterDropdown/FilterDropdown.tsx

@@ -3,10 +3,10 @@ import innerText from 'react-innertext'
 import styled, { css } from 'styled-components'
 
 import { Theme, useTheme } from '../../../hooks/useTheme'
-import { DecoratorType, DecoratorsType } from '../../../types/props'
+import { DecoratorType, DecoratorsType, ResponseMessageType } from '../../../types/props'
 import { Button } from '../../Button'
-import { FaCheckCircleIcon, FaFilterIcon, FaUndoAltIcon } from '../../Icon'
-import { Cluster } from '../../Layout'
+import { FaCheckCircleIcon, FaExclamationCircleIcon, FaFilterIcon, FaUndoAltIcon } from '../../Icon'
+import { Cluster, Stack } from '../../Layout'
 import { Dropdown } from '../Dropdown'
 import { DropdownCloser } from '../DropdownCloser'
 import { DropdownContent } from '../DropdownContent'
@@ -23,6 +23,7 @@ type Props = {
   decorators?: DecoratorsType<
     'status' | 'triggerButton' | 'applyButton' | 'cancelButton' | 'resetButton'
   >
+  responseMessage?: ResponseMessageType
 }
 type ElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof Props>
 
@@ -43,6 +44,7 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
   children,
   hasStatusText,
   decorators,
+  responseMessage,
   ...props
 }: Props) => {
   const themes = useTheme()
@@ -70,6 +72,8 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
     () => (hasStatusText ? undefined : innerText(status)),
     [status, hasStatusText],
   )
+  const isRequestProcessing =
+    responseMessage !== undefined && responseMessage.status === 'processing'
 
   return (
     <Dropdown>
@@ -93,25 +97,54 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
         <DropdownScrollArea>
           <ContentLayout themes={themes}>{children}</ContentLayout>
         </DropdownScrollArea>
-        <BottomLayout themes={themes}>
-          {onReset && (
-            <ResetButtonLayout themes={themes}>
-              <Button variant="text" size="s" prefix={<FaUndoAltIcon />} onClick={onReset}>
-                {resetButton}
-              </Button>
-            </ResetButtonLayout>
+        <ActionArea themes={themes}>
+          <Cluster gap={1} align="center" justify="space-between">
+            {onReset && (
+              <ResetButtonLayout themes={themes}>
+                <Button
+                  variant="text"
+                  size="s"
+                  prefix={<FaUndoAltIcon />}
+                  onClick={onReset}
+                  disabled={isRequestProcessing}
+                >
+                  {resetButton}
+                </Button>
+              </ResetButtonLayout>
+            )}
+
+            <RightButtonLayout>
+              <DropdownCloser>
+                <Button onClick={onCancel} disabled={isRequestProcessing}>
+                  {cancelButton}
+                </Button>
+              </DropdownCloser>
+              <DropdownCloser>
+                <Button variant="primary" onClick={onApply} loading={isRequestProcessing}>
+                  {applyButton}
+                </Button>
+              </DropdownCloser>
+            </RightButtonLayout>
+          </Cluster>
+          {responseMessage?.status === 'success' && (
+            <Message>
+              <FaCheckCircleIcon
+                color={themes.color.MAIN}
+                text={responseMessage.text}
+                role="alert"
+              />
+            </Message>
+          )}
+          {responseMessage?.status === 'error' && (
+            <Message>
+              <FaExclamationCircleIcon
+                color={themes.color.DANGER}
+                text={responseMessage.text}
+                role="alert"
+              />
+            </Message>
           )}
-          <RightButtonLayout>
-            <DropdownCloser>
-              <Button onClick={onCancel}>{cancelButton}</Button>
-            </DropdownCloser>
-            <DropdownCloser>
-              <Button variant="primary" onClick={onApply}>
-                {applyButton}
-              </Button>
-            </DropdownCloser>
-          </RightButtonLayout>
-        </BottomLayout>
+        </ActionArea>
       </DropdownContent>
     </Dropdown>
   )
@@ -139,10 +172,8 @@ const ContentLayout = styled.div<{ themes: Theme }>`
     padding: ${space(1.5)};
   `}
 `
-const BottomLayout = styled(Cluster).attrs({ gap: 1, align: 'center', justify: 'space-between' })<{
-  themes: Theme
-}>`
-  ${({ themes: { border, space } }) => css`
+const ActionArea = styled(Stack).attrs({ gap: 0.5 })<{ themes: Theme }>`
+  ${({ themes: { space, border } }) => css`
     border-block-start: ${border.shorthand};
     padding: ${space(1)} ${space(1.5)};
   `}
@@ -158,3 +189,6 @@ const RightButtonLayout = styled(Cluster).attrs({
 })`
   margin-inline-start: auto;
 `
+const Message = styled.div`
+  text-align: right;
+`

src/components/Table/Head.tsx

@@ -51,7 +51,7 @@ const StyledThead = styled.thead<{ themes: Theme; $fixed: boolean }>(({ themes,
       position: sticky;
       top: 0;
       left: 0;
-      z-index: ${zIndex.FIXED_MENU}; /* zIndexの値はセマンティクストークンとして管理しているため、明示的に値を指定しないと重なり順が崩れるため設定しています */
+      z-index: ${zIndex.FIXED_MENU}; /* zIndexの値はセマンティックトークンとして管理しているため、明示的に値を指定しないと重なり順が崩れるため設定しています */
     `
   )
 })

src/components/Table/Table.tsx

@@ -58,7 +58,7 @@ const Wrapper = styled.table<{ fixedHead: boolean; themes: Theme }>`
           position: sticky;
           top: 0;
           left: 0;
-          z-index: ${zIndex.FIXED_MENU}; /* zIndexの値はセマンティクストークンとして管理しているため、明示的に値を指定しないと重なり順が崩れるため設定しています */
+          z-index: ${zIndex.FIXED_MENU}; /* zIndexの値はセマンティックトークンとして管理しているため、明示的に値を指定しないと重なり順が崩れるため設定しています */
         `}
       }
 

src/types/props.ts

@@ -23,3 +23,12 @@ export type DecoratorsType<T extends string> = {
 }
 
 export type DecoratorType = (text: string) => ReactNode
+
+export type ResponseMessageType =
+  | {
+      status: 'success' | 'error'
+      text: ReactNode
+    }
+  | {
+      status: 'processing'
+    }