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

feat(search): add searchClass prop

Browse source
This commit is contained in:
Eric Y Liu 2021-04-01 14:49:50 -07:00
commit 7df5bbe5d0
4 changed files with 21 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -3006,6 +3006,7 @@ None.
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |

10
docs/src/COMPONENT_API.json
View file

@ -7715,6 +7715,16 @@
"constant": false,
"reactive": false
},
{
"name": "searchClass",
"kind": "let",
"description": "Specify the class name passed to the outer div element",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "skeleton",
"kind": "let",

4
src/Search/Search.svelte
View file

@ -12,6 +12,9 @@
*/
export let size = "xl";
/** Specify the class name passed to the outer div element */
export let searchClass = "";
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
@ -98,6 +101,7 @@
class:bx--search--sm="{size === 'sm' || small}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
class="{searchClass}"
>
<Search16 class="bx--search-magnifier" />
<label id="{id}-search" for="{id}" class:bx--label="{true}"

6
types/Search/Search.d.ts vendored
View file

@ -13,6 +13,12 @@ export interface SearchProps {
*/
size?: "sm" | "lg" | "xl";
/**
* Specify the class name passed to the outer div element
* @default ""
*/
searchClass?: string;
/**
* Set to `true` to display the skeleton state
* @default false