Skip to content

Commit

Permalink
feat(overflow-menu): add storybook controls (#12474)
Browse files Browse the repository at this point in the history 
* feat(overflow-menu): add storybook controls

* chore(snapshot): update snapshots

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@aledavila @tw15egan @kodiakhq
3 people committed Nov 10, 2022
1 parent 029e923 commit e389729
Show file tree
Hide file tree
Showing 6 changed files with 330 additions and 313 deletions.
226 changes: 130 additions & 96 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Expand Up @@ -2406,20 +2406,11 @@ exports[`DataTable should render 1`] = `
}
}
>
<OverflowMenu
<ClassWrapper(OverflowMenu)
ariaLabel="Settings"
className="cds--toolbar-action cds--overflow-menu"
direction="bottom"
flipped={true}
focusTrap={true}
iconDescription="Settings"
menuOffset={[Function]}
menuOffsetFlip={[Function]}
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
onOpen={[Function]}
open={false}
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -2429,62 +2420,88 @@ exports[`DataTable should render 1`] = `
"render": [Function],
}
}
selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
title="Settings"
>
<ClickListener
onClickOutside={[Function]}
<OverflowMenu
ariaLabel="Settings"
className="cds--toolbar-action cds--overflow-menu"
direction="bottom"
flipped={true}
focusTrap={true}
iconDescription="Settings"
menuOffset={[Function]}
menuOffsetFlip={[Function]}
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
onOpen={[Function]}
open={false}
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"size": [Function],
},
"render": [Function],
}
}
selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
title="Settings"
>
<button
aria-expanded={false}
aria-haspopup={true}
aria-label="Settings"
className="cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md"
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
open={false}
title="Settings"
type="button"
<ClickListener
onClickOutside={[Function]}
>
<ForwardRef(Settings)
<button
aria-expanded={false}
aria-haspopup={true}
aria-label="Settings"
className="cds--overflow-menu__icon"
className="cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md"
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
open={false}
title="Settings"
type="button"
>
<Icon
<ForwardRef(Settings)
aria-label="Settings"
className="cds--overflow-menu__icon"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
<Icon
aria-label="Settings"
className="cds--overflow-menu__icon"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3 c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1 C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4 c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4 c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4 c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8 L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6 C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
/>
<path
d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
/>
</svg>
</Icon>
</ForwardRef(Settings)>
</button>
</ClickListener>
</OverflowMenu>
<svg
aria-label="Settings"
className="cds--overflow-menu__icon"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3 c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1 C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4 c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4 c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4 c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8 L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6 C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
/>
<path
d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
/>
</svg>
</Icon>
</ForwardRef(Settings)>
</button>
</ClickListener>
</OverflowMenu>
</ClassWrapper(OverflowMenu)>
</TableToolbarMenu>
<Button
kind="primary"
Expand Down Expand Up @@ -3430,20 +3447,11 @@ exports[`DataTable sticky header should render 1`] = `
}
}
>
<OverflowMenu
<ClassWrapper(OverflowMenu)
ariaLabel="Settings"
className="cds--toolbar-action cds--overflow-menu"
direction="bottom"
flipped={true}
focusTrap={true}
iconDescription="Settings"
menuOffset={[Function]}
menuOffsetFlip={[Function]}
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
onOpen={[Function]}
open={false}
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -3453,62 +3461,88 @@ exports[`DataTable sticky header should render 1`] = `
"render": [Function],
}
}
selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
title="Settings"
>
<ClickListener
onClickOutside={[Function]}
<OverflowMenu
ariaLabel="Settings"
className="cds--toolbar-action cds--overflow-menu"
direction="bottom"
flipped={true}
focusTrap={true}
iconDescription="Settings"
menuOffset={[Function]}
menuOffsetFlip={[Function]}
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
onOpen={[Function]}
open={false}
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"size": [Function],
},
"render": [Function],
}
}
selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
title="Settings"
>
<button
aria-expanded={false}
aria-haspopup={true}
aria-label="Settings"
className="cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md"
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
open={false}
title="Settings"
type="button"
<ClickListener
onClickOutside={[Function]}
>
<ForwardRef(Settings)
<button
aria-expanded={false}
aria-haspopup={true}
aria-label="Settings"
className="cds--overflow-menu__icon"
className="cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md"
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
open={false}
title="Settings"
type="button"
>
<Icon
<ForwardRef(Settings)
aria-label="Settings"
className="cds--overflow-menu__icon"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
<Icon
aria-label="Settings"
className="cds--overflow-menu__icon"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3 c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1 C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4 c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4 c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4 c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8 L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6 C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
/>
<path
d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
/>
</svg>
</Icon>
</ForwardRef(Settings)>
</button>
</ClickListener>
</OverflowMenu>
<svg
aria-label="Settings"
className="cds--overflow-menu__icon"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3 c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1 C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4 c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4 c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4 c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8 L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6 C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
/>
<path
d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
/>
</svg>
</Icon>
</ForwardRef(Settings)>
</button>
</ClickListener>
</OverflowMenu>
</ClassWrapper(OverflowMenu)>
</TableToolbarMenu>
<Button
kind="primary"
Expand Down

0 comments on commit e389729

Please sign in to comment.