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

fix(list-box): update styles for ListBoxSelection

Browse source
This commit is contained in:
Eric Y Liu 2021-03-12 16:47:38 -08:00
commit 448f3488d4
4 changed files with 62 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -1958,7 +1958,7 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| selectionCount | <code>let</code> | No | <code>any</code> | -- | Specify the number of selected items |
| selectionCount | <code>let</code> | No | <code>number</code> | -- | Specify the number of selected items |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box selection |
| translationIds | <code>const</code> | No | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | Default translation ids |
| translateWithId | <code>let</code> | No | <code>(id: ListBoxSelectionTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |

2
docs/src/COMPONENT_API.json
View file

@ -4595,7 +4595,7 @@
"name": "selectionCount",
"kind": "let",
"description": "Specify the number of selected items",
"type": "any",
"type": "number",
"isFunction": false,
"constant": false,
"reactive": false

84
src/ListBox/ListBoxSelection.svelte
View file

@ -5,7 +5,7 @@
/**
* Specify the number of selected items
* @type {any}
* @type {number}
*/
export let selectionCount = undefined;
@ -46,27 +46,61 @@
: translateWithId("clearSelection");
</script>
<div
bind:this="{ref}"
role="button"
aria-label="Clear Selection"
tabindex="{disabled ? '-1' : '0'}"
title="{description}"
class:bx--list-box__selection="{true}"
class:bx--tag--filter="{selectionCount}"
class:bx--list-box__selection--multi="{selectionCount}"
{...$$restProps}
on:click|preventDefault|stopPropagation="{(e) => {
if (!disabled) {
dispatch('clear', e);
}
}}"
on:keydown|stopPropagation="{(e) => {
if (!disabled && e.key === 'Enter') {
dispatch('clear', e);
}
}}"
>
{#if selectionCount}{selectionCount}{/if}
<Close16 />
</div>
{#if selectionCount !== undefined}
<div
class:bx--tag="{true}"
class:bx--tag--filter="{true}"
class:bx--tag--high-contrast="{true}"
class:bx--tag--disabled="{disabled}"
>
<span class:bx--tag__label="{true}" title="{selectionCount}">
{selectionCount}
</span>
<div
bind:this="{ref}"
role="button"
tabIndex="{disabled ? -1 : 0}"
class:bx--tag__close-icon="{true}"
on:click|preventDefault|stopPropagation="{(e) => {
if (!disabled) {
dispatch('clear', e);
}
}}"
on:keydown|stopPropagation="{(e) => {
if (!disabled && e.key === 'Enter') {
dispatch('clear', e);
}
}}"
disabled="{disabled}"
aria-label="{translationIds.clearAll}"
title="{description}"
>
<Close16 />
</div>
</div>
{:else}
<div
bind:this="{ref}"
role="button"
aria-label="{description}"
title="{description}"
tabindex="{disabled ? '-1' : '0'}"
class:bx--list-box__selection="{true}"
class:bx--tag--filter="{selectionCount}"
class:bx--list-box__selection--multi="{selectionCount}"
{...$$restProps}
on:click|preventDefault|stopPropagation="{(e) => {
if (!disabled) {
dispatch('clear', e);
}
}}"
on:keydown|stopPropagation="{(e) => {
if (!disabled && e.key === 'Enter') {
dispatch('clear', e);
}
}}"
>
{#if selectionCount !== undefined}{selectionCount}{/if}
<Close16 />
</div>
{/if}

2
types/ListBox/ListBoxSelection.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface ListBoxSelectionProps
/**
* Specify the number of selected items
*/
selectionCount?: any;
selectionCount?: number;
/**
* Set to `true` to disable the list box selection