Add search component and update screen list panel

packages/bbui/package.json

@@ -55,6 +55,7 @@
     "@spectrum-css/progressbar": "^1.0.2",
     "@spectrum-css/progresscircle": "^1.0.2",
     "@spectrum-css/radio": "^3.0.2",
+    "@spectrum-css/search": "^3.0.2",
     "@spectrum-css/switch": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",

packages/bbui/src/Form/Core/Search.svelte

@@ -0,0 +1,82 @@
+<script>
+  import "@spectrum-css/search/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = ""
+  export let placeholder = null
+  export let disabled = false
+  export let id = null
+
+  const dispatch = createEventDispatcher()
+  let focus = false
+
+  const updateValue = value => {
+    dispatch("change", value)
+  }
+
+  const onFocus = () => {
+    focus = true
+  }
+
+  const onBlur = event => {
+    focus = false
+    updateValue(event.target.value)
+  }
+
+  const updateValueOnEnter = event => {
+    if (event.key === "Enter") {
+      updateValue(event.target.value)
+    }
+  }
+</script>
+
+<div class="spectrum-Search" class:is-disabled={disabled}>
+  <div
+    class="spectrum-Textfield"
+    class:is-focused={focus}
+    class:is-disabled={disabled}>
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-icon-18-Magnify" />
+    </svg>
+    <input
+      on:click
+      on:keyup={updateValueOnEnter}
+      {disabled}
+      {id}
+      value={value || ''}
+      placeholder={placeholder || ''}
+      on:blur={onBlur}
+      on:focus={onFocus}
+      on:input
+      type="search"
+      class="spectrum-Textfield-input spectrum-Search-input"
+      autocomplete="off" />
+  </div>
+  <button
+    on:click={() => updateValue('')}
+    type="reset"
+    class="spectrum-ClearButton spectrum-Search-clearButton">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Cross75"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Cross75" />
+    </svg>
+  </button>
+</div>
+
+<style>
+  .spectrum-Search,
+  .spectrum-Textfield {
+    width: 100%;
+  }
+  .spectrum-Search-input {
+    padding-right: 24px;
+  }
+  .is-disabled {
+    pointer-events: none;
+  }
+</style>

packages/bbui/src/Form/Core/index.js

@@ -6,3 +6,4 @@ export { default as CoreRadioGroup } from "./RadioGroup.svelte"
 export { default as CoreTextArea } from "./TextArea.svelte"
 export { default as CoreCombobox } from "./Combobox.svelte"
 export { default as CoreSwitch } from "./Switch.svelte"
+export { default as CoreSearch } from "./Search.svelte"

packages/bbui/src/Form/Search.svelte

@@ -1,25 +1,27 @@
-<form class="spectrum-Search">
+<script>
-  <div class="spectrum-Textfield">
+  import Field from "./Field.svelte"
-    <svg
+  import Search from "./Core/Search.svelte"
-      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon"
+  import { createEventDispatcher } from "svelte"
-      focusable="false"
+
-      aria-hidden="true">
+  export let value = null
-      <use xlink:href="#spectrum-icon-18-Magnify" />
+  export let label = null
-    </svg>
+  export let labelPosition = "above"
-    <input
+  export let placeholder = null
-      type="search"
+  export let disabled = false
-      placeholder="Search"
+
-      name="search"
+  const dispatch = createEventDispatcher()
-      value=""
+  const onChange = e => {
-      class="spectrum-Textfield-input spectrum-Search-input"
+    value = e.detail
-      autocomplete="off" />
+    dispatch("change", e.detail)
-  </div>
+  }
-  <button type="reset" class="spectrum-ClearButton spectrum-Search-clearButton">
+</script>
-    <svg
+
-      class="spectrum-Icon spectrum-UIIcon-Cross75"
+<Field {label} {labelPosition} {disabled}>
-      focusable="false"
+  <Search
-      aria-hidden="true">
+    {disabled}
-      <use xlink:href="#spectrum-css-icon-Cross75" />
+    {value}
-    </svg>
+    {placeholder}
-  </button>
+    on:change={onChange}
-</form>
+    on:click
+    on:input />
+</Field>

packages/bbui/yarn.lock

@@ -166,6 +166,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.2.tgz#9c1386894920bbed604e4e174fbbd45d9d762152"
   integrity sha512-0TDdzC9omNXnpKHEXNuuGeXdNh4x8jvTKVUqMRLb7vY4hY94hAdt6X01NBqka+jzK35HxGzpDdPADAz62yZLPQ==
 
+"@spectrum-css/search@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.2.tgz#70e93e321032d40b399498b2324e3b70e050551e"
+  integrity sha512-3UbT8yZmNOwrZxq+CUmumE+26ZySZ8OoKNM6U20SLMPLgdx6MrRugVE88r3Bl0sJ0RZX/5bU8nausdiHeX+Jlw==
+
 "@spectrum-css/switch@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -12,7 +12,7 @@
   import Layout from "components/design/NavigationPanel/Layout.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Modal, Select, Input, Tabs, Tab } from "@budibase/bbui"
+  import { Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -75,15 +75,10 @@
             getOptionLabel={role => role.name}
             getOptionValue={role => role._id}
             options={$roles} />
-          <div class="search-screens">
+          <Search
-            <Input
             placeholder="Enter a route to search"
             label="Search Screens"
             bind:value={$screenSearchString} />
-            <i
-              class="ri-close-line"
-              on:click={() => ($screenSearchString = null)} />
-          </div>
         </div>
         <div class="nav-items-container">
           <ComponentNavigationTree />