mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
refactor: use $$restProps API
- add ref prop for applicable components (#196) - add slot to Content Switcher `Switch` component (#183) - remove fillArray, css utilities
This commit is contained in:
parent
4e2959080b
commit
e886d772c7
288 changed files with 4681 additions and 4498 deletions
|
@ -1,39 +1,42 @@
|
|||
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
|
||||
import Component from './MultiSelect.Story.svelte';
|
||||
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
|
||||
import Component from "./MultiSelect.Story.svelte";
|
||||
|
||||
export default { title: 'MultiSelect', decorators: [withKnobs] };
|
||||
export default { title: "MultiSelect", decorators: [withKnobs] };
|
||||
|
||||
const types = {
|
||||
'Default (default)': 'default',
|
||||
'Inline (inline)': 'inline'
|
||||
"Default (default)": "default",
|
||||
"Inline (inline)": "inline",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
'Extra large size (xl)': 'xl',
|
||||
'Regular size (lg)': '',
|
||||
'Small size (sm)': 'sm'
|
||||
"Extra large size (xl)": "xl",
|
||||
"Regular size (lg)": "",
|
||||
"Small size (sm)": "sm",
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
id: text('MultiSelect id', 'multi-select-id'),
|
||||
name: text('MultiSelect name', 'multi-select-name'),
|
||||
titleText: text('Title (titleText)', 'Multiselect Title'),
|
||||
helperText: text('Helper text (helperText)', 'This is not helper text'),
|
||||
filterable: boolean('Filterable (filterable)', false),
|
||||
id: text("MultiSelect id", "multi-select-id"),
|
||||
name: text("MultiSelect name", "multi-select-name"),
|
||||
titleText: text("Title (titleText)", "Multiselect Title"),
|
||||
helperText: text("Helper text (helperText)", "This is not helper text"),
|
||||
filterable: boolean("Filterable (filterable)", false),
|
||||
selectionFeedback: select(
|
||||
'Selection feedback (selectionFeedback)',
|
||||
['top', 'fixed', 'top-after-reopen'],
|
||||
'top-after-reopen'
|
||||
"Selection feedback (selectionFeedback)",
|
||||
["top", "fixed", "top-after-reopen"],
|
||||
"top-after-reopen"
|
||||
),
|
||||
disabled: boolean('Disabled (disabled)', false),
|
||||
light: boolean('Light variant (light)', false),
|
||||
useTitleInItem: boolean('Show tooltip on hover', false),
|
||||
type: select('UI type (Only for `<MultiSelect>`) (type)', types, 'default'),
|
||||
size: select('Field size (size)', sizes, '') || undefined,
|
||||
label: text('Label (label)', 'MultiSelect Label'),
|
||||
invalid: boolean('Show form validation UI (invalid)', false),
|
||||
invalidText: text('Form validation UI content (invalidText)', 'Invalid Selection')
|
||||
}
|
||||
disabled: boolean("Disabled (disabled)", false),
|
||||
light: boolean("Light variant (light)", false),
|
||||
useTitleInItem: boolean("Show tooltip on hover", false),
|
||||
type: select("UI type (Only for `<MultiSelect>`) (type)", types, "default"),
|
||||
size: select("Field size (size)", sizes, "") || undefined,
|
||||
label: text("Label (label)", "MultiSelect Label"),
|
||||
invalid: boolean("Show form validation UI (invalid)", false),
|
||||
invalidText: text(
|
||||
"Form validation UI content (invalidText)",
|
||||
"Invalid Selection"
|
||||
),
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue