import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs'; import SelectMenu, { SIZE as SELECT_SIZE, COLOR as SELECT_COLOR, } from './SelectMenu'; import PageHeader from 'blocks/PageHeader'; import Button from '../buttons/Button'; import Text from '../text/Text'; import Flex from '../flex/Flex'; import SelectMenuA11y from './stories/SelectMenu.a11y.mdx'; import Headline from '../text/Headline'; import {StoryVariant, StoryVariantTable} from '../../docs/utils'; const Container = (Story, options) => { const {args, parameters} = options; return (
); }; SelectMenu - [Stories](#stories) - [Accessibility](#accessibility) ## Overview {args => { const [selectedOptions, setSelectedOptions] = React.useState([]); return (
{ setSelectedOptions([option]); }} />
); }} Note: This component is a controlled component, so you have to handle selecting options. Example: ```jsx const [selectedOptions, setSelectedOptions] = React.useState([]); return ( { setSelectedOptions([option]); }} /> ); ``` ## Stories ### Controlled {args => { const [selectedOptions, setSelectedOptions] = React.useState([ args.options[1], ]); return (
{ setSelectedOptions([option]); }} />
); }} ### Default expanded {args => { return (
); }} ### With icons {args => { const [selectedOptions, setSelectedOptions] = React.useState({}); return ( With subject icons { setSelectedOptions({...selectedOptions, 0: [option]}); }} /> With icons { setSelectedOptions({...selectedOptions, 1: [option]}); }} /> ); }} ### With different select and popup lengths {args => { const [selectedOptions, setSelectedOptions] = React.useState({}); return (
Popup with wide content: { setSelectedOptions({...selectedOptions, 0: [option]}); }} />
Popup with short content that stretches to 70% of the input: { setSelectedOptions({...selectedOptions, 2: [option]}); }} />
Popup with short content and short input:
{ setSelectedOptions({...selectedOptions, 3: [option]}); }} />
); }} ### With multiple options select {args => { const [selectedOptions, setSelectedOptions] = React.useState([]); const handleOptionChange = option => { // If it was not present, add it if (!selectedOptions.find(item => item.value === option.value)) setSelectedOptions([...selectedOptions, option]); else { // else, remove from array of selected options setSelectedOptions( [...selectedOptions].filter(item => item.value !== option.value) ); } }; return (
{ handleOptionChange(option); }} multiSelect />
); }} ### With preselected multiple options {args => { const [selectedOptions, setSelectedOptions] = React.useState([ args.options[1], args.options[2], ]); const handleOptionChange = option => { // If it was not present, add it if (!selectedOptions.find(item => item.value === option.value)) setSelectedOptions([...selectedOptions, option]); else { // else, remove from array of selected options setSelectedOptions( [...selectedOptions].filter(item => item.value !== option.value) ); } }; return (
{ handleOptionChange(option); }} multiSelect />
); }} ### Positioning {args => { const [selectedOptions, setSelectedOptions] = React.useState([]); React.useEffect(() => { document.getElementById('selectId').scrollIntoView(); }, []); return (
Scroll the layout vertically and horizontally and see how the SelectMenu position affects the popup position. You can also resize the container.
{ setSelectedOptions([option]); }} />
); }} ### With long list {args => { const [selectedOptions, setSelectedOptions] = React.useState([]); return (
{ setSelectedOptions([option]); }} />
); }} ### Variants {args => (
default disabled valid invalid {Object.values(SELECT_SIZE).map(size => ( SIZE="{size}" ))} color="white"
)} ## Accessibility