diff --git a/packages/@react-spectrum/s2/stories/Menu.stories.tsx b/packages/@react-spectrum/s2/stories/Menu.stories.tsx index e347651a100..2eb98b16dca 100644 --- a/packages/@react-spectrum/s2/stories/Menu.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Menu.stories.tsx @@ -10,20 +10,29 @@ * governing permissions and limitations under the License. */ +import AlignLeft from '../s2wf-icons/S2_Icon_TextAlignLeft_20_N.svg'; +import AlignMiddle from '../s2wf-icons/S2_Icon_TextAlignCenter_20_N.svg'; +import AlignRight from '../s2wf-icons/S2_Icon_TextAlignRight_20_N.svg'; +import Bold from '../s2wf-icons/S2_Icon_TextBold_20_N.svg'; import {Button, Header, Heading, Image, Keyboard, Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger, Text} from '../src'; import {categorizeArgTypes} from './utils'; import ClockPendingIcon from '../s2wf-icons/S2_Icon_ClockPending_20_N.svg'; import {CombinedMenu} from '../src/Menu'; import CommentTextIcon from '../s2wf-icons/S2_Icon_CommentText_20_N.svg'; import CommunityIcon from '../s2wf-icons/S2_Icon_Community_20_N.svg'; -import CopyIcon from '../s2wf-icons/S2_Icon_Copy_20_N.svg'; +import Copy from '../s2wf-icons/S2_Icon_Copy_20_N.svg'; +import Cut from '../s2wf-icons/S2_Icon_Cut_20_N.svg'; import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg'; import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg'; import ImgIcon from '../s2wf-icons/S2_Icon_Image_20_N.svg'; +import Italic from '../s2wf-icons/S2_Icon_TextItalic_20_N.svg'; import type {Meta, StoryObj} from '@storybook/react'; import More from '../s2wf-icons/S2_Icon_More_20_N.svg'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; +import Paste from '../s2wf-icons/S2_Icon_Paste_20_N.svg'; import {Selection} from 'react-aria-components'; +import TextIcon from '../s2wf-icons/S2_Icon_Text_20_N.svg'; +import Underline from '../s2wf-icons/S2_Icon_TextUnderline_20_N.svg'; import {useState} from 'react'; const meta: Meta = { @@ -177,7 +186,7 @@ export const PublishAndExport: Story = { - + Open a copy Illustrator for iPad or desktop @@ -482,32 +491,64 @@ export const SelectionGroups = (args) => { let [group2, setGroup2] = useState(new Set()); return ( - +
- Actions + Clipboard
- Action 1 - Action 2 + + + Cut + + + + Copy + + + + Paste +
- Single-select + Text Alignment
- One - Two - Three + + + Left + + + + Center + + + + Right +
- Multi-select + Font Style
- Four - Five - Siz + + + Bold + + + + Italic + + + + Underline +
); }; + +SelectionGroups.parameters = { + layout: 'padded' +};