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

Alignment with Carbon version 10.28 (#505)

Browse source 
* chore(deps-dev): remove @carbon/themes

* chore(deps-dev): bump devDependencies

* fix(tabs): forward click event to Tab

* feat(toggle): dispatch toggle event

* feat(tag): dispatch close event

* feat(tooltip-icon): make tooltipText slottable

* feat(dropdown): add hideLabel prop

* docs(select): add "Hidden label" example

* refactor(modal): use class directive

* feat(modal): dispatch transitionend event

* chore(deps-dev): upgrade carbon-components to 10.28.0-rc.0

* feat(date-picker): add warn state

* feat(tag): support small size variant

* fix(search): add semantic role

* feat(toolbar-search): add disabled state

* fix(composed-modal): add aria-label prop, update header semantic tags

* chore(deps-dev): upgrade carbon-components to v10.28

* docs(overflow-menu): add light variant example

* docs(link): document OutboundLink in Component API

* chore(tooltip-icon): rename slot to "tooltipText"

* docs(component-api): wrap code blocks to minimize width

* docs(aspect-ratio): remove inline outline style

* fix(tab): do not trigger focus when mounting

* docs(tabs): add reactive example

Closes #438
This commit is contained in:
Eric Liu 2021-02-05 05:59:10 -08:00 • committed by GitHub
commit 7cd3723960
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 549 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/DataTable/ToolbarSearch.svelte
View file

@ -11,6 +11,9 @@
/** Set to `true` to keep the search bar expanded */
export let persistent = false;
/** Set to `true` to disable the search bar */
export let disabled = false;
/** Specify the tabindex */
export let tabindex = "0";
@ -21,10 +24,10 @@
export let ref = null;
import { tick } from "svelte";
import { Search } from "../Search";
import Search from "../Search/Search.svelte";
async function expandSearch() {
if (persistent || expanded) return;
if (disabled || persistent || expanded) return;
expanded = true;
await tick();
ref.focus();
@ -32,17 +35,19 @@
</script>
<div
tabindex="{expanded ? '-1' : tabindex}"
tabindex="{expanded || disabled ? '-1' : tabindex}"
class:bx--toolbar-action="{true}"
class:bx--toolbar-search-container-active="{expanded}"
class:bx--toolbar-search-container-expandable="{!persistent}"
class:bx--toolbar-search-container-persistent="{persistent}"
class:bx--toolbar-search-container-disabled="{disabled}"
on:click="{expandSearch}"
on:focus="{expandSearch}"
>
<Search
size="sm"
tabindex="{expanded ? tabindex : '-1'}"
disabled="{disabled}"
{...$$restProps}
bind:ref
bind:value