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): allow custom search icon

Browse source 
Allows consumers to render a different Carbon icon instead of the default Search16 icon.
This commit is contained in:
Eric Y Liu 2021-06-26 06:07:23 -07:00
commit b4664507c5
5 changed files with 46 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

39
COMPONENT_INDEX.md
View file

@ -3012,25 +3012,26 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | | :------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input | | value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- | | 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 | | 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 | | 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 | | 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 | | 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 | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant | | expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input | | type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input | | placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute | | autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element | | autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text | | closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots ### Slots

9
docs/src/COMPONENT_API.json
View file

@ -7939,6 +7939,15 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "id", "name": "id",
"kind": "let", "kind": "let",

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

@ -1,4 +1,5 @@
<script> <script>
import Query16 from "carbon-icons-svelte/lib/Query16";
import { Search } from "carbon-components-svelte"; import { Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -43,6 +44,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search disabled /> <Search disabled />
### Custom search icon
<Search icon={Query16} />
### Skeleton ### Skeleton
<Search skeleton /> <Search skeleton />

8
src/Search/Search.svelte
View file

@ -58,6 +58,12 @@
/** Specify the label text */ /** Specify the label text */
export let labelText = ""; export let labelText = "";
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = Search16;
/** Set an id for the input element */ /** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -109,7 +115,7 @@
if (expandable) expanded = true; if (expandable) expanded = true;
}}" }}"
> >
<Search16 class="bx--search-magnifier-icon" /> <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
</div> </div>
<label id="{id}-search" for="{id}" class:bx--label="{true}" <label id="{id}-search" for="{id}" class:bx--label="{true}"
>{labelText}</label >{labelText}</label

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

@ -91,6 +91,11 @@ export interface SearchProps {
*/ */
labelText?: string; labelText?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Set an id for the input element * Set an id for the input element
* @default "ccs-" + Math.random().toString(36) * @default "ccs-" + Math.random().toString(36)