From b4664507c5c982cdbfb63e5ce5884aacb0272f0e Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Sat, 26 Jun 2021 06:07:23 -0700 Subject: [PATCH] feat(search): allow custom search icon Allows consumers to render a different Carbon icon instead of the default Search16 icon. --- COMPONENT_INDEX.md | 39 ++++++++++++++-------------- docs/src/COMPONENT_API.json | 9 +++++++ docs/src/pages/components/Search.svx | 5 ++++ src/Search/Search.svelte | 8 +++++- types/Search/Search.d.ts | 5 ++++ 5 files changed, 46 insertions(+), 20 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 5837aded..99c4b048 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3012,25 +3012,26 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the value of the search input | -| expanded | let | Yes | boolean | false | Set to `true to expand the search input | -| small | let | No | boolean | false | -- | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | -| searchClass | let | No | string | "" | Specify the class name passed to the outer div element | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the search input | -| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | -| type | let | No | string | "text" | Specify the `type` attribute of the search input | -| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | -| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | -| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | -| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | string | "" | Specify the value of the search input | +| expanded | let | Yes | boolean | false | Set to `true to expand the search input | +| small | let | No | boolean | false | -- | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| searchClass | let | No | string | "" | Specify the class name passed to the outer div element | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the search input | +| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | +| type | let | No | string | "text" | Specify the `type` attribute of the search input | +| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | +| labelText | let | No | string | "" | Specify the label text | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index e723fbe7..5e2701ba 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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", diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx index af5315c4..3b398cc5 100644 --- a/docs/src/pages/components/Search.svx +++ b/docs/src/pages/components/Search.svx @@ -1,4 +1,5 @@ @@ -43,6 +44,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input +### Custom search icon + + + ### Skeleton diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index 17cc0024..ecd13f16 100644 --- a/src/Search/Search.svelte +++ b/src/Search/Search.svelte @@ -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; }}" > - +