fix: separator styles missing from action group menu (#32213)
This PR adds styles for separator in the action group menu <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced menu items in the design system to support separators and icons, improving visual organization and interaction. - **Style** - Updated styling for menu items with separators to improve visual clarity. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
This commit is contained in:
Pawan Kumar
GitHub
parent
d7e6584d47
commit
2dbe72068a
|
|
@ -17,6 +17,7 @@ export const MenuItem = <T extends object>(props: MenuItemProps<T>) => {
|
|||
data-focused={isFocused ? "" : undefined}
|
||||
data-hovered={isFocused ? "" : undefined}
|
||||
data-selected={isSelected ? "" : undefined}
|
||||
data-separator={Boolean(item.props.isSeparator) ? "" : undefined}
|
||||
ref={ref}
|
||||
>
|
||||
<div data-text>{item.rendered}</div>
|
||||
|
|
|
|||
|
|
@ -73,14 +73,29 @@ const _ActionGroup = <T extends object>(
|
|||
);
|
||||
})}
|
||||
{menuChildren?.length > 0 && (
|
||||
<Menu onAction={onAction}>
|
||||
<Menu
|
||||
disabledKeys={[
|
||||
...state.disabledKeys,
|
||||
...menuChildren
|
||||
// filtering out separators so that they can't be clicked or navigated
|
||||
.filter((item) => item.props.isSeparator)
|
||||
.map((item) => item.key),
|
||||
]}
|
||||
onAction={onAction}
|
||||
>
|
||||
<IconButton color={color} icon="dots" variant={variant} />
|
||||
<MenuList>
|
||||
{menuChildren.map((item) => (
|
||||
<Item isSeparator={item.props.isSeparator} key={item.key}>
|
||||
{item.rendered}
|
||||
</Item>
|
||||
))}
|
||||
{menuChildren.map((item) => {
|
||||
return (
|
||||
<Item
|
||||
icon={item.props.icon}
|
||||
isSeparator={item.props.isSeparator}
|
||||
key={item.key}
|
||||
>
|
||||
{item.rendered}
|
||||
</Item>
|
||||
);
|
||||
})}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -113,9 +113,11 @@ The `ActionGroup` can be `collapse`. By default it is not collapsed. When collpa
|
|||
<Story name="OverflowMode">
|
||||
<div style={{ maxWidth: 150 }}>
|
||||
<ActionGroup overflowMode="collapse" variant="outlined">
|
||||
<Item key="option-1">Option 1</Item>
|
||||
<Item isSeparator />
|
||||
<Item key="option-1" icon="file">
|
||||
Option 1
|
||||
</Item>
|
||||
<Item key="option-2">Option 2</Item>
|
||||
<Item isSeparator />
|
||||
<Item key="option-3" icon="file">
|
||||
{"Option 3"}
|
||||
</Item>
|
||||
|
|
|
|||
|
|
@ -75,3 +75,13 @@
|
|||
0 0 0 2px var(--color-bg),
|
||||
0 0 0 4px var(--color-bd-focus);
|
||||
}
|
||||
|
||||
.menuList li[data-separator] {
|
||||
border-top: var(--border-width-1) solid var(--color-bd);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* making sure the first and last child are not displayed when they have the data-separator attribute */
|
||||
.menuList li:is(:first-child, :last-child):is([data-separator]) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="19" height="16" x="5.5" y="30.5" fill="#FFEEE5" rx="2.5"/><rect width="19" height="16" x="5.5" y="30.5" stroke="#CC3D00" rx="2.5"/><path fill="#CC3D00" d="M19.5 43.5v.5h.5v-.5h-.5Zm-9 0H10v.5h.5v-.5Zm4.5-10 .332-.374a.5.5 0 0 0-.664 0L15 33.5Zm-1.5 10v.5h.5v-.5h-.5Zm0-4V39H13v.5h.5Zm3 0h.5V39h-.5v.5Zm0 4H16v.5h.5v-.5Zm2.664-6.298.332-.374-.332.373Zm-8.328 0-.332-.374.332.373ZM11 43.5v-5.551h-1v5.55h1Zm8-5.551V43.499h1V37.948h-1Zm-7.832-.374 4.164-3.701-.664-.748-4.164 3.702.664.747Zm3.5-3.701 4.164 3.701.665-.747-4.165-3.702-.664.748ZM13.5 43h-3v1h3v-1Zm.5.5v-4h-1v4h1Zm-.5-3.5H16.5v-1H13.5v1Zm6 3h-3v1h3v-1ZM16 39.5v4h1v-4h-1Zm4-1.551a1.5 1.5 0 0 0-.503-1.121l-.665.747a.5.5 0 0 1 .168.374h1Zm-9 0a.5.5 0 0 1 .168-.374l-.664-.747a1.5 1.5 0 0 0-.504 1.12h1Z"/><rect width="18" height="16" x="27.5" y="30.5" fill="#E3E8EF" rx="2.5"/><rect width="18" height="16" x="27.5" y="30.5" stroke="#6A7585" rx="2.5"/><circle cx="36.5" cy="38.5" r="5" stroke="#6A7585"/><path stroke="#6A7585" stroke-linecap="round" d="M34.5 38.5h4M36.5 40.5v-4"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" rx="2.5"/><rect width="19" height="16" x="48.5" y="30.5" stroke="#6A7585" rx="2.5"/><circle cx="58" cy="38" r=".5" stroke="#6A7585" stroke-linejoin="round"/><circle cx="62" cy="38" r=".5" stroke="#6A7585" stroke-linejoin="round"/><circle cx="54" cy="38" r=".5" stroke="#6A7585" stroke-linejoin="round"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" rx="4.5"/><rect width="59" height="23" x="6.5" y="26.5" stroke="#CDD5DF" rx="4.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#FFEEE5" rx="2.5"/><rect width="24" height="15" x="10.5" y="30.5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18.5 37.5 3 3 5-5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" rx="2.5"/><rect width="24" height="15" x="37.5" y="30.5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m46.5 35 6 6m0-6-6 6"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 680 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" rx="4.5"/><rect width="59" height="23" x="6.5" y="26.5" stroke="#CDD5DF" rx="4.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#FFEEE5" rx="2.5"/><rect width="24" height="15" x="10.5" y="30.5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18.5 37.5 3 3 5-5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" rx="2.5"/><rect width="24" height="15" x="37.5" y="30.5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m46.5 35 6 6m0-6-6 6"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="19" height="16" x="5.5" y="30.5" fill="#FFEEE5" rx="2.5"/><rect width="19" height="16" x="5.5" y="30.5" stroke="#CC3D00" rx="2.5"/><path fill="#CC3D00" d="M19.5 43.5v.5h.5v-.5h-.5Zm-9 0H10v.5h.5v-.5Zm4.5-10 .332-.374a.5.5 0 0 0-.664 0L15 33.5Zm-1.5 10v.5h.5v-.5h-.5Zm0-4V39H13v.5h.5Zm3 0h.5V39h-.5v.5Zm0 4H16v.5h.5v-.5Zm2.664-6.298.332-.374-.332.373Zm-8.328 0-.332-.374.332.373ZM11 43.5v-5.551h-1v5.55h1Zm8-5.551V43.499h1V37.948h-1Zm-7.832-.374 4.164-3.701-.664-.748-4.164 3.702.664.747Zm3.5-3.701 4.164 3.701.665-.747-4.165-3.702-.664.748ZM13.5 43h-3v1h3v-1Zm.5.5v-4h-1v4h1Zm-.5-3.5H16.5v-1H13.5v1Zm6 3h-3v1h3v-1ZM16 39.5v4h1v-4h-1Zm4-1.551a1.5 1.5 0 0 0-.503-1.121l-.665.747a.5.5 0 0 1 .168.374h1Zm-9 0a.5.5 0 0 1 .168-.374l-.664-.747a1.5 1.5 0 0 0-.504 1.12h1Z"/><rect width="18" height="16" x="27.5" y="30.5" fill="#E3E8EF" rx="2.5"/><rect width="18" height="16" x="27.5" y="30.5" stroke="#6A7585" rx="2.5"/><circle cx="36.5" cy="38.5" r="5" stroke="#6A7585"/><path stroke="#6A7585" stroke-linecap="round" d="M34.5 38.5h4M36.5 40.5v-4"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" rx="2.5"/><rect width="19" height="16" x="48.5" y="30.5" stroke="#6A7585" rx="2.5"/><circle cx="58" cy="38" r=".5" stroke="#6A7585" stroke-linejoin="round"/><circle cx="62" cy="38" r=".5" stroke="#6A7585" stroke-linejoin="round"/><circle cx="54" cy="38" r=".5" stroke="#6A7585" stroke-linejoin="round"/></svg>
|
||||
|
Before Width: | Height: | Size: 680 B After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in New Issue
Block a user