Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: move Multiselect.Filterable from knobs to it's own story #5294

Merged
merged 2 commits into from
Feb 7, 2020
Merged

docs: move Multiselect.Filterable from knobs to it's own story #5294

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c596b1d
docs: move Multiselect.Filterable from knobs to it's own story
vpicone Feb 6, 2020
0868a98
Merge branch 'master' into add-filterable-multiselect-story
vpicone Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 32 additions & 14 deletions packages/react/src/components/MultiSelect/MultiSelect-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,6 @@ const props = () => ({
id: text('MultiSelect ID (id)', 'carbon-multiselect-example'),
titleText: text('Title (titleText)', 'Multiselect title'),
helperText: text('Helper text (helperText)', 'This is not helper text'),
filterable: boolean(
'Filterable (`<MultiSelect.Filterable>` instead of `<MultiSelect>`)',
false
),
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
useTitleInItem: boolean('Show tooltip on hover', false),
Expand Down Expand Up @@ -99,20 +95,16 @@ storiesOf('MultiSelect', module)
'default',
withReadme(readme, () => {
const {
filterable,
listBoxMenuIconTranslationIds,
selectionFeedback,
...multiSelectProps
} = props();
const ComponentToUse = !filterable ? MultiSelect : MultiSelect.Filterable;
const placeholder = !filterable ? undefined : defaultPlaceholder;
return (
<div style={{ width: 300 }}>
<ComponentToUse
<MultiSelect
{...multiSelectProps}
items={items}
itemToString={item => (item ? item.text : '')}
placeholder={placeholder}
translateWithId={id => listBoxMenuIconTranslationIds[id]}
selectionFeedback={selectionFeedback}
/>
Expand All @@ -131,22 +123,18 @@ storiesOf('MultiSelect', module)
'with initial selected items',
withReadme(readme, () => {
const {
filterable,
listBoxMenuIconTranslationIds,
selectionFeedback,
...multiSelectProps
} = props();
const ComponentToUse = !filterable ? MultiSelect : MultiSelect.Filterable;
const placeholder = !filterable ? undefined : defaultPlaceholder;

return (
<div style={{ width: 300 }}>
<ComponentToUse
<MultiSelect
{...multiSelectProps}
items={items}
itemToString={item => (item ? item.text : '')}
initialSelectedItems={[items[0], items[1]]}
placeholder={placeholder}
translateWithId={id => listBoxMenuIconTranslationIds[id]}
selectionFeedback={selectionFeedback}
/>
Expand All @@ -160,4 +148,34 @@ storiesOf('MultiSelect', module)
`,
},
}
)
.add(
'filterable',
withReadme(readme, () => {
const {
listBoxMenuIconTranslationIds,
selectionFeedback,
...multiSelectProps
} = props();

return (
<div style={{ width: 300 }}>
<MultiSelect.Filterable
{...multiSelectProps}
items={items}
itemToString={item => (item ? item.text : '')}
placeholder={defaultPlaceholder}
translateWithId={id => listBoxMenuIconTranslationIds[id]}
selectionFeedback={selectionFeedback}
/>
</div>
);
}),
{
info: {
text: `
When a list contains more than 25 items, use \`MultiSelect.Filterable\` to help find options from the list.
`,
},
}
);