Merge pull request #330 from IBM/search-disabled

feat(search): support disabled state

COMPONENT_INDEX.md

@@ -3464,6 +3464,7 @@ import { Search } from "carbon-components-svelte";
 | size                 | <code>"sm" &#124; "lg"</code>             | --                   |
 | skeleton             | <code>boolean</code>                      | false                |
 | light                | <code>boolean</code>                      | false                |
+| disabled             | <code>boolean</code>                      | false                |
 | value                | <code>string</code>                       | ""                   |
 | type                 | <code>string</code>                       | "text"               |
 | placeholder          | <code>string</code>                       | "Search..."          |

docs/src/pages/components/Search.svx

@@ -23,6 +23,10 @@
 
 <Search size="sm" />
 
+### Disabled
+
+<Search disabled />
+
 ### Skeleton
 
 <Search skeleton />

src/Search/Search.svelte

@@ -23,6 +23,12 @@
    */
   export let light = false;
 
+  /**
+   * Set to `true` to disable the search input
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
   /**
    * Specify the value of the search input
    * @type {string} [value="text"]
@@ -96,6 +102,7 @@
   <div
     class:bx--search="{true}"
     class:bx--search--light="{light}"
+    class:bx--search--disabled="{disabled}"
     {...$$restProps}
     class="bx--search--{size} {$$restProps.class}"
   >
@@ -108,6 +115,7 @@
       class:bx--search-input="{true}"
       autofocus="{autofocus}"
       autocomplete="{autocomplete}"
+      disabled="{disabled}"
       id="{id}"
       placeholder="{placeholder}"
       type="{type}"
@@ -121,6 +129,7 @@
     <button
       type="button"
       aria-label="{closeButtonLabelText}"
+      disabled="{disabled}"
       class:bx--search-close="{true}"
       class:bx--search-close--hidden="{value === ''}"
       on:click

types/index.d.ts

@@ -3408,6 +3408,12 @@ export class Search extends CarbonSvelteComponent {
      */
     light?: boolean;
 
+    /**
+     * Set to `true` to disable the search input
+     * @default false
+     */
+    disabled?: boolean;
+
     /**
      * Specify the value of the search input
      * @default ""