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

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

11
COMPONENT_INDEX.md
View file

@ -3506,8 +3506,8 @@ import { Search } from "carbon-components-svelte";
| Prop name | Type | Default value | Description | | Prop name | Type | Default value | Description |
| :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- | | :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- |
| small | <code>boolean</code> | `false` | Set to `true` to use the small variant. | | small | <code>boolean</code> | `false` | . |
| size | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the search input. | | size | <code>"sm" &#124; "lg" &#124; "xl"</code> | `"xl"` | Specify the size of the search input. |
| skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. | | skeleton | <code>boolean</code> | `false` | Set to `true` to display the skeleton state. |
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. | | light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the search input. | | disabled | <code>boolean</code> | `false` | Set to `true` to disable the search input. |
@ -3550,9 +3550,10 @@ import { SearchSkeleton } from "carbon-components-svelte";
### Props ### Props
| Prop name | Type | Default value | Description | | Prop name | Type | Default value | Description |
| :-------- | :------------------- | :------------ | :-------------------------------------- | | :-------- | :---------------------------------------- | :------------ | :------------------------------------ |
| small | <code>boolean</code> | `false` | Set to `true` to use the small variant. | | small | <code>boolean</code> | `false` | . |
| size | <code>"sm" &#124; "lg" &#124; "xl"</code> | `"xl"` | Specify the size of the search input. |
### Slots ### Slots

56
docs/src/PUBLIC_API.json
View file

@ -10728,14 +10728,15 @@
"kind": "let", "kind": "let",
"value": "false", "value": "false",
"type": "boolean", "type": "boolean",
"description": "Set to `true` to use the small variant" "description": ""
} }
], ],
[ [
"size", "size",
{ {
"kind": "let", "kind": "let",
"type": "\"sm\" | \"lg\"", "value": "\"xl\"",
"type": "\"sm\" | \"lg\" | \"xl\"",
"description": "Specify the size of the search input" "description": "Specify the size of the search input"
} }
], ],
@ -10852,8 +10853,8 @@
[ [
"click", "click",
{ {
"start": 3204, "start": 3370,
"end": 3212, "end": 3378,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -10863,8 +10864,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 2197, "start": 2281,
"end": 2209, "end": 2293,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -10874,8 +10875,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 2214, "start": 2298,
"end": 2227, "end": 2311,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -10885,8 +10886,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 2232, "start": 2316,
"end": 2245, "end": 2329,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],
@ -10896,8 +10897,8 @@
[ [
"change", "change",
{ {
"start": 2897, "start": 3063,
"end": 2906, "end": 3072,
"type": "EventHandler", "type": "EventHandler",
"name": "change", "name": "change",
"modifiers": [], "modifiers": [],
@ -10907,8 +10908,8 @@
[ [
"input", "input",
{ {
"start": 2913, "start": 3079,
"end": 2921, "end": 3087,
"type": "EventHandler", "type": "EventHandler",
"name": "input", "name": "input",
"modifiers": [], "modifiers": [],
@ -10927,7 +10928,16 @@
"kind": "let", "kind": "let",
"value": "false", "value": "false",
"type": "boolean", "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", "click",
{ {
"start": 262, "start": 520,
"end": 270, "end": 528,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -10947,8 +10957,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 273, "start": 531,
"end": 285, "end": 543,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -10958,8 +10968,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 288, "start": 546,
"end": 301, "end": 559,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -10969,8 +10979,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 304, "start": 562,
"end": 317, "end": 575,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],

10
docs/src/pages/components/Search.svx
View file

@ -31,4 +31,12 @@ The `Search` component is extra-large by default. There are [large](#large-size)
### Skeleton ### Skeleton
<Search skeleton /> <Search skeleton />
### Skeleton (large)
<Search size="lg" skeleton />
### Skeleton (small)
<Search size="sm" skeleton />

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

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

10
src/Search/Search.svelte
View file

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

13
types/index.d.ts vendored
View file

@ -3496,15 +3496,16 @@ export class Row extends CarbonSvelteComponent {
export class Search extends CarbonSvelteComponent { export class Search extends CarbonSvelteComponent {
$$prop_def: { $$prop_def: {
/** /**
* Set to `true` to use the small variant *
* @default false * @default false
*/ */
small?: boolean; small?: boolean;
/** /**
* Specify the size of the search input * Specify the size of the search input
* @default "xl"
*/ */
size?: "sm" | "lg"; size?: "sm" | "lg" | "xl";
/** /**
* Set to `true` to display the skeleton state * Set to `true` to display the skeleton state
@ -3582,10 +3583,16 @@ export class Search extends CarbonSvelteComponent {
export class SearchSkeleton extends CarbonSvelteComponent { export class SearchSkeleton extends CarbonSvelteComponent {
$$prop_def: { $$prop_def: {
/** /**
* Set to `true` to use the small variant *
* @default false * @default false
*/ */
small?: boolean; small?: boolean;
/**
* Specify the size of the search input
* @default "xl"
*/
size?: "sm" | "lg" | "xl";
}; };
} }