Skip to content

Commit

Permalink
feat(search)!: integrate Search with v11 (#1970)
Browse files Browse the repository at this point in the history
  • Loading branch information
@metonym
metonym committed May 5, 2024
1 parent a27a2fc commit cf41756
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 188 deletions.
13 changes: 2 additions & 11 deletions COMPONENT_INDEX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3140,7 +3140,6 @@ None.
| 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; "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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
Expand All @@ -3164,17 +3163,14 @@ None.
| :--------- | :--------- | :---------------- |
| expand | dispatched | <code>null</code> |
| collapse | dispatched | <code>null</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| paste | forwarded | -- |
| click | forwarded | -- |
| clear | dispatched | <code>null</code> |

## `SearchSkeleton`
Expand All @@ -3191,12 +3187,7 @@ None.

### Events

| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.

## `Section`

Expand Down
39 changes: 3 additions & 36 deletions docs/src/COMPONENT_API.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9966,18 +9966,6 @@
"constant": false,
"reactive": false
},
{
"name": "skeleton",
"kind": "let",
"description": "Set to `true` to display the skeleton state",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
Expand Down Expand Up @@ -10134,29 +10122,14 @@
"events": [
{ "type": "dispatched", "name": "expand", "detail": "null" },
{ "type": "dispatched", "name": "collapse", "detail": "null" },
{ "type": "forwarded", "name": "click", "element": "SearchSkeleton" },
{
"type": "forwarded",
"name": "mouseover",
"element": "SearchSkeleton"
},
{
"type": "forwarded",
"name": "mouseenter",
"element": "SearchSkeleton"
},
{
"type": "forwarded",
"name": "mouseleave",
"element": "SearchSkeleton"
},
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" },
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "dispatched", "name": "clear", "detail": "null" }
],
"typedefs": [],
Expand All @@ -10181,14 +10154,8 @@
],
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
"events": [],
"typedefs": []
},
{
"moduleName": "Section",
Expand Down
171 changes: 77 additions & 94 deletions src/Search/Search.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script>
// @ts-check
/**
* @event {null} expand
* @event {null} collapse
Expand All @@ -20,9 +22,6 @@
/** Specify the class name passed to the outer div element */
export let searchClass = "";
/** Set to `true` to display the skeleton state */
export let skeleton = false;
/** Set to `true` to enable the light variant */
export let light = false;
Expand Down Expand Up @@ -69,104 +68,88 @@
import { createEventDispatcher } from "svelte";
import Close from "../icons/Close.svelte";
import IconSearch from "../icons/IconSearch.svelte";
import SearchSkeleton from "./SearchSkeleton.svelte";
/** @type {import("svelte").EventDispatcher<{ clear: null; expand: null; collapse: null; }>} */
const dispatch = createEventDispatcher();
let searchRef = null;
$: expandSearch = expandable
? () => {
expanded = true;
}
: undefined;
$: if (expanded && ref) ref.focus();
$: dispatch(expanded ? "expand" : "collapse");
</script>

{#if skeleton}
<SearchSkeleton
size="{size}"
<div
role="search"
aria-labelledby="{id}-search"
class:bx--search="{true}"
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--expandable="{expandable}"
class:bx--search--expanded="{expanded}"
class="{searchClass}"
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class:bx--search-magnifier="{true}" on:click="{expandSearch}">
<svelte:component this="{icon}" class="bx--search-magnifier-icon" />
</div>
<label id="{id}-search" for="{id}" class:bx--label="{true}">
<slot name="labelText">
{labelText}
</slot>
</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this="{ref}"
bind:value="{value}"
type="text"
role="searchbox"
class:bx--search-input="{true}"
autofocus="{autofocus === true ? true : undefined}"
autocomplete="{autocomplete}"
disabled="{disabled}"
id="{id}"
placeholder="{placeholder}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
/>
{:else}
<div
role="search"
aria-labelledby="{id}-search"
class:bx--search="{true}"
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--expandable="{expandable}"
class:bx--search--expanded="{expanded}"
class="{searchClass}"
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this="{searchRef}"
class:bx--search-magnifier="{true}"
on:click="{() => {
if (expandable) expanded = true;
}}"
>
<svelte:component this="{icon}" class="bx--search-magnifier-icon" />
</div>
<label id="{id}-search" for="{id}" class:bx--label="{true}">
<slot name="labelText">
{labelText}
</slot>
</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this="{ref}"
bind:value
type="text"
role="searchbox"
class:bx--search-input="{true}"
autofocus="{autofocus === true ? true : undefined}"
autocomplete="{autocomplete}"
disabled="{disabled}"
id="{id}"
placeholder="{placeholder}"
{...$$restProps}
on:change
on:input
on:focus
on:focus="{() => {
if (expandable) expanded = true;
}}"
on:blur
on:blur="{() => {
if (expanded && value.trim().length === 0) {
expanded = false;
}
}}"
on:keydown
on:keydown="{({ key }) => {
if (key === 'Escape') {
value = '';
dispatch('clear');
}
}}"
on:keyup
on:paste
/>
<button
type="button"
aria-label="{closeButtonLabelText}"
disabled="{disabled}"
class:bx--search-close="{true}"
class:bx--search-close--hidden="{value === ''}"
on:click
on:click="{() => {
on:change
on:input
on:focus
on:focus="{expandSearch}"
on:blur
on:blur="{() => {
if (expanded && value.trim().length === 0) {
expanded = false;
}
}}"
on:keydown
on:keydown="{({ key }) => {
if (key === 'Escape') {
value = '';
ref.focus();
dispatch('clear');
}}"
>
<Close />
</button>
</div>
{/if}
}
}}"
on:keyup
on:paste
/>
<button
type="button"
aria-label="{closeButtonLabelText}"
disabled="{disabled}"
class:bx--search-close="{true}"
class:bx--search-close--hidden="{value === ''}"
on:click
on:click="{() => {
value = '';
ref.focus();
dispatch('clear');
}}"
>
<Close />
</button>
</div>
9 changes: 2 additions & 7 deletions src/Search/SearchSkeleton.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
<script>
// @ts-check
/**
* Specify the size of the search input
* @type {"sm" | "md" | "lg"}
*/
export let size = "md";
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--skeleton="{true}"
class:bx--search--sm="{size === 'sm'}"
class:bx--search--md="{size === 'md'}"
class:bx--search--lg="{size === 'lg'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<span class:bx--label="{true}"></span>
<div class:bx--search-input="{true}"></div>
Expand Down
35 changes: 17 additions & 18 deletions tests/Search.test.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
<script lang="ts">
import { Search } from "../types";
import { Search, SearchSkeleton } from "../types";
</script>

<Search on:paste />

<Search placeholder="Search catalog..." value="Cloud functions" />

<Search light name="search" />

<Search size="lg" />

<Search size="sm" />

<Search disabled />

<Search skeleton />

<Search size="lg" skeleton />

<Search size="sm" skeleton />
<Search
spellcheck="false"
expandable
disabled
light
size="sm"
placeholder="Search catalog..."
value="Cloud functions"
on:input
on:paste
on:clear
on:expand
on:collapse
/>

<SearchSkeleton size="lg" />
Loading

0 comments on commit cf41756

Please sign in to comment.