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

chore: v11 Search

Browse source
This commit is contained in:
Gregor Wassmann 2023-03-28 22:23:30 +02:00 • committed by Enrico Sacchetti
commit 019f9773a8
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
7 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
COMPONENT_INDEX.md
View file

@ -3102,7 +3102,7 @@ None.
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the search input |
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
@ -3147,7 +3147,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the search input |
### Slots

8
docs/src/COMPONENT_API.json
View file

@ -9926,8 +9926,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the search input",
"type": "\"sm\" | \"lg\" | \"xl\"",
"value": "\"xl\"",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -10150,8 +10150,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the search input",
"type": "\"sm\" | \"lg\" | \"xl\"",
"value": "\"xl\"",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,

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

@ -6,7 +6,7 @@
## Default
The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
The `Search` component size is medium by default. There are [large](#large-size) and [small](#small-size) size variants.
<Search />

8
src/Search/Search.svelte
View file

@ -13,9 +13,9 @@
/**
* Specify the size of the search input
* @type {"sm" | "lg" | "xl"}
* @type {"sm" | "md" | "lg"}
*/
export let size = "xl";
export let size = "md";
/** Specify the class name passed to the outer div element */
export let searchClass = "";
@ -96,8 +96,8 @@
class:bx--search--light="{light}"
class:bx--search--disabled="{disabled}"
class:bx--search--sm="{size === 'sm'}"
class:bx--search--md="{size === 'md'}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
class:bx--search--expandable="{expandable}"
class:bx--search--expanded="{expanded}"
class="{searchClass}"
@ -166,7 +166,7 @@
dispatch('clear');
}}"
>
<svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
<Close />
</button>
</div>
{/if}

6
src/Search/SearchSkeleton.svelte
View file

@ -1,9 +1,9 @@
<script>
/**
* Specify the size of the search input
* @type {"sm" | "lg" | "xl"}
* @type {"sm" | "md" | "lg"}
*/
export let size = "xl";
export let size = "md";
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -11,8 +11,8 @@
<div
class:bx--skeleton="{true}"
class:bx--search--sm="{size === 'sm'}"
class:bx--search--md="{size === 'md'}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:mouseover

4
types/Search/Search.svelte.d.ts vendored
View file

@ -12,9 +12,9 @@ export interface SearchProps extends RestProps {
/**
* Specify the size of the search input
* @default "xl"
* @default "md"
*/
size?: "sm" | "lg" | "xl";
size?: "sm" | "md" | "lg";
/**
* Specify the class name passed to the outer div element

4
types/Search/SearchSkeleton.svelte.d.ts vendored
View file

@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["div"];
export interface SearchSkeletonProps extends RestProps {
/**
* Specify the size of the search input
* @default "xl"
* @default "md"
*/
size?: "sm" | "lg" | "xl";
size?: "sm" | "md" | "lg";
[key: `data-${string}`]: any;
}