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(components): add Dropdown

Browse source 
Closes #22

- Revise ListBox ancillary components
- Pass item id to ListBoxMenuItem in MultiSelect, ComboBox
This commit is contained in:
Eric Liu 2020-01-08 10:21:20 -08:00
commit eb70437dc3
22 changed files with 279 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/iframe.html
View file

@ -70,4 +70,4 @@
}</script><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.28a3b49ddfb7322290f8.bundle.js"></script><script src="vendors~main.28a3b49ddfb7322290f8.bundle.js"></script><script src="main.28a3b49ddfb7322290f8.bundle.js"></script></body></html>
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.627d5f000ff75700853f.bundle.js"></script><script src="vendors~main.627d5f000ff75700853f.bundle.js"></script><script src="main.627d5f000ff75700853f.bundle.js"></script></body></html>

2
docs/main.28a3b49ddfb7322290f8.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/main.28a3b49ddfb7322290f8.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/main.627d5f000ff75700853f.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/main.627d5f000ff75700853f.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"main.627d5f000ff75700853f.bundle.js","sources":["webpack:///main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA","sourceRoot":""}

1
docs/runtime~main.28a3b49ddfb7322290f8.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"runtime~main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///runtime~main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/runtime~main.28a3b49ddfb7322290f8.bundle.js → docs/runtime~main.627d5f000ff75700853f.bundle.js
View file

@ -1,2 +1,2 @@
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
//# sourceMappingURL=runtime~main.28a3b49ddfb7322290f8.bundle.js.map
//# sourceMappingURL=runtime~main.627d5f000ff75700853f.bundle.js.map

1
docs/runtime~main.627d5f000ff75700853f.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"runtime~main.627d5f000ff75700853f.bundle.js","sources":["webpack:///runtime~main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA","sourceRoot":""}

1
docs/vendors~main.28a3b49ddfb7322290f8.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"vendors~main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///vendors~main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAu4PA;;;;;AAq/XA;;AA48BA;;;;;;;;;;;;;;AAmBA;;;;;AA0iQA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAqdA;;;;;;;AAfA","sourceRoot":""}

20
docs/vendors~main.28a3b49ddfb7322290f8.bundle.js → docs/vendors~main.627d5f000ff75700853f.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/vendors~main.627d5f000ff75700853f.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"vendors~main.627d5f000ff75700853f.bundle.js","sources":["webpack:///vendors~main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAiqNA;;;;;AA2taA;;AA48BA;;;;;;;;;;;;;;AAmBA;;;;;AA0iQA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAsdA;;;;;;;AAfA","sourceRoot":""}

1
src/components/ComboBox/ComboBox.svelte
View file

@ -168,6 +168,7 @@
<ListBoxMenu aria-label={ariaLabel} {id}>
{#each filteredItems as item, i (item.id || i)}
<ListBoxMenuItem
id={item.id}
active={selectedIndex === i || selectedId === item.id}
highlighted={highlightedIndex === i || selectedIndex === i}
on:click={() => {

20
src/components/Dropdown/Dropdown.Skeleton.svelte Normal file
View file

@ -0,0 +1,20 @@
<script>
let className = undefined;
export { className as class };
export let inline = false;
export let style = undefined;
import { cx } from '../../lib';
</script>
<div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--skeleton', '--dropdown-v2', '--list-box', '--form-item', inline && '--list-box--inline', className)}
{style}>
<div role="button" class={cx('--list-box__field')}>
<span class={cx('--list-box__label')} />
</div>
</div>

49
src/components/Dropdown/Dropdown.Story.svelte Normal file
View file

@ -0,0 +1,49 @@
<script>
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import Button from '../Button';
import Dropdown from './Dropdown.svelte';
import DropdownSkeleton from './Dropdown.Skeleton.svelte';
let items = [
{ id: 'option-0', text: 'Option 1' },
{ id: 'option-1', text: 'Option 2' },
{ id: 'option-2', text: 'Option 3' },
{ id: 'option-3', text: 'Option 4' }
];
let selectedIndex = -1;
</script>
<Layout>
{#if story === 'skeleton'}
<div style="width: 300px">
<DropdownSkeleton />
&nbsp;
<DropdownSkeleton inline />
</div>
{:else}
<p>Currently, this component does not support items as slots.</p>
<p>
<code>items</code>
must be an array of objects; mandatory fields are `id` and `text`.
</p>
<pre style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem; margin-bottom: 2rem;">
<Button
size="small"
on:click={() => {
selectedIndex = selectedIndex > -1 ? -1 : 1;
}}>
{selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
</Button>
</div>
<div style="width: 300px">
<Dropdown {...$$props} bind:selectedIndex {items} />
</div>
{/if}
</Layout>

34
src/components/Dropdown/Dropdown.stories.js Normal file
View file

@ -0,0 +1,34 @@
import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
import Component from './Dropdown.Story.svelte';
export default { title: 'Dropdown', decorators: [withKnobs] };
const types = {
'Default (default)': 'default',
'Inline (inline)': 'inline'
};
const sizes = {
'Extra large size (xl)': 'xl',
'Regular size (lg)': '',
'Small size (sm)': 'sm'
};
export const Default = () => ({
Component,
props: {
id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
type: select('Dropdown type (type)', types, 'default'),
size: select('Field size (size)', sizes, '') || undefined,
label: text('Label (label)', 'Dropdown menu options'),
'aria-label': text('Aria Label (aria-label)', 'Dropdown'),
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
titleText: text('Title (titleText)', 'This is not a dropdown title.'),
helperText: text('Helper text (helperText)', 'This is not some helper text.'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Form validation UI content (invalidText)', 'A valid value is required')
}
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

144
src/components/Dropdown/Dropdown.svelte Normal file
View file

@ -0,0 +1,144 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let helperText = '';
export let id = Math.random();
export let inline = false;
export let invalid = false;
export let invalidText = '';
export let items = [];
export let itemToString = item => item.text || item.id;
export let label = undefined;
export let light = false;
export let open = false;
export let selectedIndex = -1;
export let size = undefined;
export let style = undefined;
export let titleText = '';
export let translateWithId = undefined;
export let type = 'default';
import { setContext } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';
import ListBox, { ListBoxField, ListBoxMenu, ListBoxMenuIcon, ListBoxMenuItem } from '../ListBox';
let selectedId = undefined;
let fieldRef = undefined;
let highlightedIndex = -1;
setContext('Dropdown', {
declareRef: ({ ref }) => {
fieldRef = ref;
}
});
function change(direction) {
let index = highlightedIndex + direction;
if (index < 0) {
index = items.length - 1;
} else if (index >= items.length) {
index = 0;
}
highlightedIndex = index;
}
$: inline = type === 'inline';
$: selectedItem = items[selectedIndex];
$: if (!open) {
highlightedIndex = -1;
}
</script>
<svelte:body
on:click={({ target }) => {
if (open && fieldRef && !fieldRef.contains(target)) {
open = false;
}
}} />
<div
class={cx('--dropdown__wrapper', '--list-box__wrapper', inline && '--dropdown__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--dropdown__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
{style}>
{#if titleText}
<label for={id} class={cx('--label', disabled && '--label--disabled')}>{titleText}</label>
{/if}
{#if !inline && helperText}
<div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
{helperText}
</div>
{/if}
<ListBox
{type}
{size}
{id}
aria-label={$$props['aria-label']}
class={cx('--dropdown', invalid && '--dropdown--invalid', open && '--dropdown--open', inline && '--dropdown--inline', disabled && '--dropdown--disabled', light && '--dropdown--light')}
on:click={({ target }) => {
open = fieldRef.contains(target) ? !open : false;
}}
{disabled}
{open}
{invalid}
{invalidText}
{light}>
{#if invalid}
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
{/if}
<ListBoxField
tabindex="0"
role="button"
aria-expanded={open}
on:keydown={({ key }) => {
if (key === 'Enter') {
open = !open;
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
selectedIndex = highlightedIndex;
open = false;
}
} else if (key === 'Tab') {
open = false;
fieldRef.blur();
} else if (key === 'ArrowDown') {
change(1);
} else if (key === 'ArrowUp') {
change(-1);
}
}}
on:blur={({ relatedTarget }) => {
if (relatedTarget) {
fieldRef.focus();
}
}}
{disabled}
{translateWithId}
{id}>
<span class={cx('--list-box__label')}>
{#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
</span>
<ListBoxMenuIcon {open} {translateWithId} />
</ListBoxField>
{#if open}
<ListBoxMenu aria-labelledby={id} {id}>
{#each items as item, i (item.id || i)}
<ListBoxMenuItem
id={item.id}
active={selectedIndex === i || selectedId === item.id}
highlighted={highlightedIndex === i || selectedIndex === i}
on:click={() => {
selectedId = item.id;
selectedIndex = i;
}}
on:mouseenter={() => {
highlightedIndex = i;
}}>
{itemToString(item)}
</ListBoxMenuItem>
{/each}
</ListBoxMenu>
{/if}
</ListBox>
</div>

4
src/components/Dropdown/index.js Normal file
View file

@ -0,0 +1,4 @@
import Dropdown from './Dropdown.svelte';
export default Dropdown;
export { default as DropdownSkeleton } from './Dropdown.Skeleton.svelte';

3
src/components/ListBox/ListBoxField.svelte
View file

@ -16,7 +16,7 @@
[translationIds.close]: 'Close menu',
[translationIds.open]: 'Open menu'
};
const ctx = getContext('MultiSelect');
const ctx = getContext('MultiSelect') || getContext('Dropdown');
let fieldRef = undefined;
@ -34,6 +34,7 @@
aria-expanded={ariaExpanded}
aria-owns={(ariaExpanded && menuId) || undefined}
aria-controls={(ariaExpanded && menuId) || undefined}
aria-disabled={disabled}
aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
tabindex={disabled ? '-1' : tabindex}
class={cx('--list-box__field', className)}

1
src/components/ListBox/ListBoxMenu.svelte
View file

@ -12,6 +12,7 @@
<div
role="listbox"
id={menuId}
aria-labelledby={$$props['aria-labelledby']}
aria-label={$$props['aria-label']}
class={cx('--list-box__menu', className)}
{style}>

4
src/components/ListBox/ListBoxMenuItem.svelte
View file

@ -1,4 +1,5 @@
<script>
export let id = undefined;
export let active = false;
export let highlighted = false;
@ -9,7 +10,8 @@
on:click
on:mouseenter
on:mouseleave
class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted')}>
class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted')}
{id}>
<div class={cx('--list-box__menu-item__option')}>
<slot />
</div>

1
src/components/MultiSelect/MultiSelect.svelte
View file

@ -266,6 +266,7 @@
<ListBoxMenu aria-label={ariaLabel} {id}>
{#each filterable ? filteredItems : sortedItems as item, i (item.id || i)}
<ListBoxMenuItem
id={item.id}
active={item.checked}
highlighted={highlightedIndex === i}
on:click={() => {

3
src/index.js
View file

@ -11,6 +11,7 @@ import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
import DataTable from './components/DataTable';
import DataTableSkeleton from './components/DataTableSkeleton';
import DatePicker, { DatePickerInput } from './components/DatePicker';
import Dropdown, { DropdownSkeleton } from './components/Dropdown';
import FileUploader, {
FileUploaderButton,
FileUploaderItem,
@ -105,6 +106,8 @@ export {
DataTableSkeleton,
DatePicker,
DatePickerInput,
Dropdown,
DropdownSkeleton,
FileUploader,
FileUploaderButton,
FileUploaderItem,