mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(dropdown): support "sm", "xl" sizes

Browse source
This commit is contained in:
Eric Liu 2020-10-26 14:31:11 -07:00
commit 7e2ab46e6a
3 changed files with 16 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/src/pages/components/Dropdown.svx
View file

@ -25,6 +25,18 @@ components: ["Dropdown", "DropdownSkeleton"]
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" /> {id: "2", text: "Fax"}]}" />
### Extra-large size
<Dropdown size="xl" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Small size
<Dropdown size="sm" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Disabled state ### Disabled state
<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"}, <Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},

2
src/Dropdown/Dropdown.svelte
View file

@ -182,6 +182,8 @@
aria-label="{$$props['aria-label']}" aria-label="{$$props['aria-label']}"
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
{open && 'bx--dropdown--open'} {open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'}
{inline && 'bx--dropdown--inline'} {inline && 'bx--dropdown--inline'}
{disabled && 'bx--dropdown--disabled'} {disabled && 'bx--dropdown--disabled'}
{light && 'bx--dropdown--light'}" {light && 'bx--dropdown--light'}"

3
src/ListBox/ListBox.svelte
View file

@ -47,12 +47,13 @@
tabindex="-1" tabindex="-1"
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
class:bx--list-box="{true}" class:bx--list-box="{true}"
class:bx--list-box--sm="{size === 'sm'}"
class:bx--list-box--xl="{size === 'xl'}"
class:bx--list-box--inline="{type === 'inline'}" class:bx--list-box--inline="{type === 'inline'}"
class:bx--list-box--disabled="{disabled}" class:bx--list-box--disabled="{disabled}"
class:bx--list-box--expanded="{open}" class:bx--list-box--expanded="{open}"
class:bx--list-box--light="{light}" class:bx--list-box--light="{light}"
{...$$restProps} {...$$restProps}
class="{size && `bx--list-box--${size}`} {$$restProps.class}"
on:keydown on:keydown
on:keydown="{(e) => { on:keydown="{(e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {