From 6fc073c9325841159ea90f27e40b36ca25c4ce76 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 22 Oct 2020 18:55:57 -0700 Subject: [PATCH] fix(search): forward size prop to Search skeleton Add deprecation notice for the `small` prop. --- COMPONENT_INDEX.md | 11 +++--- docs/src/PUBLIC_API.json | 56 ++++++++++++++++------------ docs/src/pages/components/Search.svx | 10 ++++- src/Search/Search.Skeleton.svelte | 12 +++++- src/Search/Search.svelte | 10 +++-- types/index.d.ts | 13 +++++-- 6 files changed, 75 insertions(+), 37 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 2c06dca2..d11202e5 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3506,8 +3506,8 @@ import { Search } from "carbon-components-svelte"; | Prop name | Type | Default value | Description | | :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- | -| small | boolean | `false` | Set to `true` to use the small variant. | -| size | "sm" | "lg" | -- | Specify the size of the search input. | +| small | boolean | `false` | . | +| size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. | | skeleton | boolean | `false` | Set to `true` to display the skeleton state. | | light | boolean | `false` | Set to `true` to enable the light variant. | | disabled | boolean | `false` | Set to `true` to disable the search input. | @@ -3550,9 +3550,10 @@ import { SearchSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :-------------------------------------- | -| small | boolean | `false` | Set to `true` to use the small variant. | +| Prop name | Type | Default value | Description | +| :-------- | :---------------------------------------- | :------------ | :------------------------------------ | +| small | boolean | `false` | . | +| size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. | ### Slots diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json index f0e2e04d..06cf1028 100644 --- a/docs/src/PUBLIC_API.json +++ b/docs/src/PUBLIC_API.json @@ -10728,14 +10728,15 @@ "kind": "let", "value": "false", "type": "boolean", - "description": "Set to `true` to use the small variant" + "description": "" } ], [ "size", { "kind": "let", - "type": "\"sm\" | \"lg\"", + "value": "\"xl\"", + "type": "\"sm\" | \"lg\" | \"xl\"", "description": "Specify the size of the search input" } ], @@ -10852,8 +10853,8 @@ [ "click", { - "start": 3204, - "end": 3212, + "start": 3370, + "end": 3378, "type": "EventHandler", "name": "click", "modifiers": [], @@ -10863,8 +10864,8 @@ [ "mouseover", { - "start": 2197, - "end": 2209, + "start": 2281, + "end": 2293, "type": "EventHandler", "name": "mouseover", "modifiers": [], @@ -10874,8 +10875,8 @@ [ "mouseenter", { - "start": 2214, - "end": 2227, + "start": 2298, + "end": 2311, "type": "EventHandler", "name": "mouseenter", "modifiers": [], @@ -10885,8 +10886,8 @@ [ "mouseleave", { - "start": 2232, - "end": 2245, + "start": 2316, + "end": 2329, "type": "EventHandler", "name": "mouseleave", "modifiers": [], @@ -10896,8 +10897,8 @@ [ "change", { - "start": 2897, - "end": 2906, + "start": 3063, + "end": 3072, "type": "EventHandler", "name": "change", "modifiers": [], @@ -10907,8 +10908,8 @@ [ "input", { - "start": 2913, - "end": 2921, + "start": 3079, + "end": 3087, "type": "EventHandler", "name": "input", "modifiers": [], @@ -10927,7 +10928,16 @@ "kind": "let", "value": "false", "type": "boolean", - "description": "Set to `true` to use the small variant" + "description": "" + } + ], + [ + "size", + { + "kind": "let", + "value": "\"xl\"", + "type": "\"sm\" | \"lg\" | \"xl\"", + "description": "Specify the size of the search input" } ] ], @@ -10936,8 +10946,8 @@ [ "click", { - "start": 262, - "end": 270, + "start": 520, + "end": 528, "type": "EventHandler", "name": "click", "modifiers": [], @@ -10947,8 +10957,8 @@ [ "mouseover", { - "start": 273, - "end": 285, + "start": 531, + "end": 543, "type": "EventHandler", "name": "mouseover", "modifiers": [], @@ -10958,8 +10968,8 @@ [ "mouseenter", { - "start": 288, - "end": 301, + "start": 546, + "end": 559, "type": "EventHandler", "name": "mouseenter", "modifiers": [], @@ -10969,8 +10979,8 @@ [ "mouseleave", { - "start": 304, - "end": 317, + "start": 562, + "end": 575, "type": "EventHandler", "name": "mouseleave", "modifiers": [], diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx index b155abce..eb8a0e64 100644 --- a/docs/src/pages/components/Search.svx +++ b/docs/src/pages/components/Search.svx @@ -31,4 +31,12 @@ The `Search` component is extra-large by default. There are [large](#large-size) ### Skeleton - \ No newline at end of file + + +### Skeleton (large) + + + +### Skeleton (small) + + \ No newline at end of file diff --git a/src/Search/Search.Skeleton.svelte b/src/Search/Search.Skeleton.svelte index 31bffad1..8ca6a06c 100644 --- a/src/Search/Search.Skeleton.svelte +++ b/src/Search/Search.Skeleton.svelte @@ -1,15 +1,23 @@
/** + * @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} diff --git a/types/index.d.ts b/types/index.d.ts index 0f99a102..5f325be8 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -3496,15 +3496,16 @@ export class Row extends CarbonSvelteComponent { export class Search extends CarbonSvelteComponent { $$prop_def: { /** - * Set to `true` to use the small variant + * * @default false */ small?: boolean; /** * Specify the size of the search input + * @default "xl" */ - size?: "sm" | "lg"; + size?: "sm" | "lg" | "xl"; /** * Set to `true` to display the skeleton state @@ -3582,10 +3583,16 @@ export class Search extends CarbonSvelteComponent { export class SearchSkeleton extends CarbonSvelteComponent { $$prop_def: { /** - * Set to `true` to use the small variant + * * @default false */ small?: boolean; + + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; }; }