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

Merge branch 'search-skeleton'

Browse source
This commit is contained in:
Eric Liu 2020-10-22 18:56:29 -07:00
commit baecbdbe9d
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 |
| :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- |
| small | <code>boolean</code> | `false` | Set to `true` to use the small variant. |
| size | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the search input. |
| small | <code>boolean</code> | `false` | . |
| 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. |
| 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. |
@ -3550,9 +3550,10 @@ import { SearchSkeleton } from "carbon-components-svelte";
### Props
| Prop name | Type | Default value | Description |
| :-------- | :------------------- | :------------ | :-------------------------------------- |
| small | <code>boolean</code> | `false` | Set to `true` to use the small variant. |
| Prop name | Type | Default value | Description |
| :-------- | :---------------------------------------- | :------------ | :------------------------------------ |
| small | <code>boolean</code> | `false` | . |
| size | <code>"sm" &#124; "lg" &#124; "xl"</code> | `"xl"` | Specify the size of the search input. |
### Slots

56
docs/src/PUBLIC_API.json
View file

@ -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": [],

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
<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>
/**
* @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>

13
types/index.d.ts vendored
View file

@ -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";
};
}