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

fix(search): forward size prop to Search skeleton

Browse source 
Add deprecation notice for the `small` prop.
This commit is contained in:
Eric Liu 2020-10-22 18:55:57 -07:00
commit 6fc073c932
6 changed files with 75 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/Search/Search.Skeleton.svelte
View file

@ -1,15 +1,23 @@
<script>
/**
* @deprecated this prop will be removed in the next major release
* Set to `true` to use the small variant
* @type {boolean} [small=false]
*/
export let small = false;
/**
* Specify the size of the search input
* @type {"sm" | "lg" | "xl"} [size="xl"]
*/
export let size = "xl";
</script>
<div
class:bx--skeleton="{true}"
class:bx--search--xl="{!small}"
class:bx--search--sm="{small}"
class:bx--search--sm="{size === 'sm' || small}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:mouseover

10
src/Search/Search.svelte
View file

@ -1,5 +1,6 @@
<script>
/**
* @deprecated this prop will be removed in the next major release
* Set to `true` to use the small variant
* @type {boolean} [small=false]
*/
@ -7,9 +8,9 @@
/**
* Specify the size of the search input
* @type {"sm" | "lg"} [size]
* @type {"sm" | "lg" | "xl"} [size="xl"]
*/
export let size = small ? "sm" : "xl";
export let size = "xl";
/**
* Set to `true` to display the skeleton state
@ -92,6 +93,7 @@
{#if skeleton}
<SearchSkeleton
small="{small}"
size="{size}"
{...$$restProps}
on:click
on:mouseover
@ -103,8 +105,10 @@
class:bx--search="{true}"
class:bx--search--light="{light}"
class:bx--search--disabled="{disabled}"
class:bx--search--sm="{size === 'sm' || small}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
{...$$restProps}
class="bx--search--{size} {$$restProps.class}"
>
<Search16 class="bx--search-magnifier" />
<label for="{id}" class:bx--label="{true}">{labelText}</label>