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

3
COMPONENT_INDEX.md
View file

@ -3013,7 +3013,7 @@ None.
### Props
| 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 |
| 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 |
@ -3030,6 +3030,7 @@ None.
| 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 |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| 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

9
docs/src/COMPONENT_API.json
View file

@ -7939,6 +7939,15 @@
"constant": 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",
"kind": "let",

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

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

8
src/Search/Search.svelte
View file

@ -58,6 +58,12 @@
/** Specify the label text */
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 */
export let id = "ccs-" + Math.random().toString(36);
@ -109,7 +115,7 @@
if (expandable) expanded = true;
}}"
>
<Search16 class="bx--search-magnifier-icon" />
<svelte:component this="{icon}" class="bx--search-magnifier-icon" />
</div>
<label id="{id}-search" for="{id}" class:bx--label="{true}"
>{labelText}</label

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

@ -91,6 +91,11 @@ export interface SearchProps {
*/
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
* @default "ccs-" + Math.random().toString(36)