From 53be7d27164526a45a2f16ea9eb945d238a20f28 Mon Sep 17 00:00:00 2001 From: uknmr Date: Fri, 13 Dec 2024 17:03:32 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix(DropdownMenuButton):=20=E3=83=A1?= =?UTF-8?q?=E3=83=8B=E3=83=A5=E3=83=BC=E5=86=85=E3=83=9C=E3=82=BF=E3=83=B3?= =?UTF-8?q?=E3=81=AE=E8=A7=92=E4=B8=B8=E3=82=92=E3=82=84=E3=82=81=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dropdown/DropdownMenuButton/DropdownMenuButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx index 809d4856ee..2575b41f76 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx @@ -58,7 +58,7 @@ export const dropdownMenuButton = tv({ ], ], actionListItemButton: [ - 'shr-justify-start shr-border-none shr-py-0.5 shr-font-normal', + 'shr-justify-start shr-rounded-none shr-border-none shr-py-0.5 shr-font-normal', 'focus-visible:shr-focus-indicator--inner', ], }, From bee1fd33105227c4a9d77c45d7dcc3619aeaa2a4 Mon Sep 17 00:00:00 2001 From: uknmr Date: Fri, 13 Dec 2024 20:43:29 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat(AppNaviDropdownMenuButton):=20?= =?UTF-8?q?=E9=81=B8=E6=8A=9E=E4=B8=AD=E3=81=AE=E9=A0=85=E7=9B=AE=E3=81=8C?= =?UTF-8?q?=E8=A6=96=E8=A6=9A=E7=9A=84=E3=81=AB=E3=82=82=E4=BC=9D=E3=82=8F?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E8=A3=85=E9=A3=BE=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AppNavi/AppNaviDropdownMenuButton.tsx | 77 +++++++++++++------ 1 file changed, 53 insertions(+), 24 deletions(-) diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdownMenuButton.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdownMenuButton.tsx index b79fbbf5a9..a9f5262e47 100644 --- a/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdownMenuButton.tsx +++ b/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdownMenuButton.tsx @@ -1,6 +1,7 @@ -import React, { type FC, type PropsWithChildren, type ReactNode } from 'react' +import React, { type FC, type PropsWithChildren, ReactElement, type ReactNode } from 'react' import { tv } from 'tailwind-variants' +import { DropdownMenuGroup } from '../Dropdown' import { DropdownMenuButton } from '../Dropdown/DropdownMenuButton/DropdownMenuButton' type AppNaviDropdownMenuButtonProps = PropsWithChildren<{ @@ -8,29 +9,57 @@ type AppNaviDropdownMenuButtonProps = PropsWithChildren<{ label: ReactNode }> -const dropdownMenuButton = tv({ - base: [ - 'smarthr-ui-AppNavi-dropdownMenuButton', - [ - '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-border-none', - '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-px-0.5', - '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-text-grey', - '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-rounded-none', +const { trigger: triggerStyle, actionItem: actionItemStyle } = tv({ + slots: { + trigger: [ + 'smarthr-ui-AppNavi-dropdownMenuButton', + [ + '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-border-none', + '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-px-0.5', + '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-text-grey', + '[&_.smarthr-ui-DropdownMenuButton-trigger]:shr-rounded-none', + ], + [ + '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:shr-relative', + '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:shr-text-black', + ], + [ + '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-content-[""]', + '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-absolute', + '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-bottom-0', + '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-inset-x-0', + '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-h-0.25', + '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-bg-main', + ], ], - [ - '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:shr-relative', - '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:shr-text-black', + actionItem: [ + 'aria-current-page:shr-bg-grey-9 aria-current-page:shr-font-bold', + // aria-current-page より詳細度を確実に上げる + '[&&]:hover:shr-bg-head-darken', ], - [ - '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-content-[""]', - '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-absolute', - '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-bottom-0', - '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-inset-x-0', - '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-h-0.25', - '[&_.smarthr-ui-DropdownMenuButton-trigger:has([aria-current=page])]:after:shr-bg-main', - ], - ], -}) + }, +})() + +const renderItemList = (children: ReactNode) => + React.Children.map(children, (item): ReactNode => { + if (!React.isValidElement(item)) { + return null + } + + if (item.type === React.Fragment) { + return renderItemList(item.props.children) + } + + if (item.type === DropdownMenuGroup) { + return ( + {renderItemList(item.props.children)} + ) + } + + return React.cloneElement(item as ReactElement, { + className: actionItemStyle({ className: item.props.className }), + }) + }) export const AppNaviDropdownMenuButton: FC = ({ label, @@ -44,8 +73,8 @@ export const AppNaviDropdownMenuButton: FC = ({ } - className={dropdownMenuButton()} + className={triggerStyle()} > - {children} + {renderItemList(children)} ) From 4a19be72a20892517d83ae4559ec9520eef1dd29 Mon Sep 17 00:00:00 2001 From: uknmr Date: Fri, 13 Dec 2024 20:44:30 +0900 Subject: [PATCH 3/3] =?UTF-8?q?docs(VRTAppNavi):=20Story=20=E3=82=92?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/AppNavi/stories/AppNavi.stories.tsx | 4 ++-- .../src/components/AppNavi/stories/VRTAppNavi.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/smarthr-ui/src/components/AppNavi/stories/AppNavi.stories.tsx b/packages/smarthr-ui/src/components/AppNavi/stories/AppNavi.stories.tsx index 10b6549fbe..1ca0766b64 100644 --- a/packages/smarthr-ui/src/components/AppNavi/stories/AppNavi.stories.tsx +++ b/packages/smarthr-ui/src/components/AppNavi/stories/AppNavi.stories.tsx @@ -26,13 +26,13 @@ const Link: React.FC<{ export const Template: StoryFn = (args) => ( - ボタン + ボタン アンカーボタン アンカーボタン - + その他 diff --git a/packages/smarthr-ui/src/components/AppNavi/stories/VRTAppNavi.stories.tsx b/packages/smarthr-ui/src/components/AppNavi/stories/VRTAppNavi.stories.tsx index d0e776b84e..266da89c97 100644 --- a/packages/smarthr-ui/src/components/AppNavi/stories/VRTAppNavi.stories.tsx +++ b/packages/smarthr-ui/src/components/AppNavi/stories/VRTAppNavi.stories.tsx @@ -9,7 +9,7 @@ import { AppNavi } from '../AppNavi' import { Template } from './AppNavi.stories' -import type { Meta, StoryObj } from '@storybook/react' +import type { Meta } from '@storybook/react' export default { title: 'Navigation（ナビゲーション）/AppNavi/VRT',