test(@dpc-sdp/ripple-ui-core): dropdown search poc

dpc-sdp · Nov 3, 2024 · f18daf9 · f18daf9
1 parent c0ca502
commit f18daf9
Show file tree

Hide file tree

Showing 6 changed files with 397 additions and 72 deletions.
diff --git a/packages/nuxt-ripple-analytics/lib/index.ts b/packages/nuxt-ripple-analytics/lib/index.ts
@@ -712,6 +712,20 @@ export default {
       })
     }
   },
+  'rpl-form-dropdown/clear': () => {
+    return (payload: any) => {
+      trackEvent({
+        event: `${payload.action}_form_field`,
+        label: payload?.label,
+        form_name: payload?.contextName,
+        form_id: payload?.contextId,
+        field_id: payload?.id,
+        type: 'select',
+        component: 'rpl-form-dropdown',
+        platform_event: 'clear'
+      })
+    }
+  },
   'rpl-form-input/update': () => {
     return (payload: any) => {
       trackEvent({

diff --git a/packages/ripple-tide-search/components/global/TideSearchFilterDropdown.vue b/packages/ripple-tide-search/components/global/TideSearchFilterDropdown.vue
@@ -7,6 +7,8 @@ interface Props {
   options?: any[]
   timestamp?: string | number
   variant: 'default' | 'reverse'
+  search?: boolean
+  searchPlaceholder?: string
 }
 defineProps<Props>()
 </script>
@@ -22,6 +24,8 @@ defineProps<Props>()
     :label="label"
     :placeholder="placeholder"
     :options="options"
+    :search="search"
+    :search-placeholder="searchPlaceholder"
     :pii="false"
   />
 </template>
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css
@@ -1,5 +1,7 @@
 .rpl-form-dropdown {
   --local-item-height: 48px;
+  --local-search-height: 54px;
+  --local-input-clear-width: 38px;
 
   position: relative;
 }
@@ -29,6 +31,9 @@
 }
 
 .rpl-form-dropdown-input {
+  --local-input-base-padding-right: calc(var(--rpl-sp-2) + var(--rpl-sp-4) + var(--rpl-sp-5));
+  --local-input-padding-right: var(--local-input-base-padding-right);
+
   background: var(--rpl-clr-neutral-100);
   border: 0;
   outline: 0;
@@ -38,7 +43,7 @@
   padding-top: var(--rpl-sp-3);
   padding-bottom: var(--rpl-sp-3);
   padding-left: var(--rpl-sp-5);
-  padding-right: calc(var(--rpl-sp-2) + var(--rpl-sp-4) + var(--rpl-sp-5));
+  padding-right: var(--local-input-padding-right);
   border: var(--rpl-border-1) solid var(--rpl-clr-neutral-600);
   border-radius: var(--rpl-border-radius-2);
   display: flex;
@@ -73,6 +78,10 @@
       color: var(--rpl-clr-neutral-300);
     }
   }
+
+  .rpl-form-dropdown-menu--clear & {
+    --local-input-padding-right: calc(var(--local-input-base-padding-right) + var(--local-input-clear-width));
+  }
 }
 
 .rpl-form-dropdown-input__placeholder {
@@ -95,14 +104,16 @@
 }
 
 .rpl-form-dropdown-menu {
+  --local-menu-base-height: calc((var(--local-max-items) * var(--local-item-height)) + (var(--rpl-border-2) * 2));
+  --local-menu-height: var(--local-menu-base-height);
+
   z-index: var(--rpl-layer-2);
   border: var(--rpl-border-2) solid var(--rpl-clr-dark);
   background: var(--rpl-clr-light);
-  max-height: calc(var(--local-max-items) * var(--local-item-height));
+  max-height: var(--local-menu-height);
   overflow-y: auto;
   scroll-behavior: auto;
   overscroll-behavior: contain;
-
   position: absolute;
   width: 100%;
   margin-top: -2px;
@@ -113,6 +124,83 @@
   }
 }
 
+.rpl-form-dropdown-menu--search {
+  --local-menu-height: calc(var(--local-menu-base-height) + var(--local-search-height));
+}
+
+.rpl-form-dropdown-search {
+  position: relative;
+  padding: var(--rpl-sp-2);
+}
+
+.rpl-form-dropdown__clear {
+  visibility: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: var(--rpl-sp-11);
+  margin-top: -9px;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: calc(var(--rpl-sp-2) * -1);
+    width: var(--rpl-border-1);
+    height: 100%;
+    background: var(--rpl-clr-neutral-200);
+    transform: translateY(-50%);
+  }
+}
+
+.rpl-form-dropdown__clear-button {
+  padding: var(--rpl-sp-1);
+  display: flex;
+  cursor: pointer;
+
+  .rpl-icon {
+    --rpl-icon-size: calc(var(--rpl-sp-3) - (var(--rpl-sp-1) / 2));
+
+    pointer-events: none;
+  }
+
+  &:is(:focus, :hover) .rpl-icon {
+    color: var(--rpl-clr-dark);
+  }
+}
+
+.rpl-form-dropdown__clear--visible {
+  pointer-events: initial;
+  visibility: visible;
+}
+
+.rpl-form-dropdown-search__input {
+  width: 100%;
+  padding-block: var(--rpl-sp-2);
+  padding-inline: var(--rpl-sp-2) var(--rpl-sp-10);
+  border: var(--rpl-border-1) solid var(--rpl-clr-neutral-200);
+  border-radius: var(--rpl-border-radius-1);
+
+  &:focus {
+    --rpl-border-3: var(--rpl-border-2);
+
+    border-radius: 0;
+  }
+}
+
+.rpl-form-dropdown-search__icon {
+  position: absolute;
+  right: var(--rpl-sp-4);
+  top: calc(50% - var(--rpl-sp-2));
+  pointer-events: none;
+  color: var(--rpl-clr-neutral-600);
+}
+
+.rpl-form-dropdown-search__no-results {
+  text-align: center;
+  padding: var(--rpl-sp-2) var(--rpl-sp-5) var(--rpl-sp-3);
+}
+
 .rpl-form-dropdown-option {
   display: flex;
   align-items: flex-start;

diff --git a/...ages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.stories.mdx b/...ages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.stories.mdx
@@ -202,3 +202,118 @@ export const SingleTemplate = (args) => ({
     {SingleTemplate.bind()}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name='Dropdown search single'
+    args={{
+      id: 'dropdown-search-single',
+      search: true,
+      multiple: false,
+      preventDeselect: false,
+      labelId: 'dropdown-search-single',
+      options: [
+        {
+          id: 'item-1',
+          value: 'item-1',
+          label: 'Red'
+        },
+        {
+          id: 'item-2',
+          value: 'item-2',
+          label: 'Blue'
+        },
+        {
+          id: 'item-3',
+          value: 'item-3',
+          label: 'Rebecca Purple'
+        },
+        {
+          id: 'item-4',
+          value: 'item-4',
+          label: 'Blue Violet'
+        },
+        {
+          id: 'item-5',
+          value: 'item-5',
+          label: 'Black Velvet'
+        },
+        {
+          id: 'item-6',
+          value: 'item-6',
+          label: 'Royal Blue'
+        },
+        {
+          id: 'item-7',
+          value: 'item-7',
+          label: 'Rosy Brown'
+        },
+        {
+          id: 'item-8',
+          value: 'item-8',
+          label: 'Green Yellow'
+        },
+      ]
+    }}
+  >
+    {SingleTemplate.bind()}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name='Dropdown search multi'
+    args={{
+      id: 'dropdown-search-multi',
+      search: true,
+      multiple: true,
+      preventDeselect: false,
+      labelId: 'dropdown-search-multi',
+      searchPlaceholder: 'Search colours...',
+      options: [
+        {
+          id: 'item-1',
+          value: 'item-1',
+          label: 'Red'
+        },
+        {
+          id: 'item-2',
+          value: 'item-2',
+          label: 'Blue'
+        },
+        {
+          id: 'item-3',
+          value: 'item-3',
+          label: 'Rebecca Purple'
+        },
+        {
+          id: 'item-4',
+          value: 'item-4',
+          label: 'Blue Violet'
+        },
+        {
+          id: 'item-5',
+          value: 'item-5',
+          label: 'Black Velvet'
+        },
+        {
+          id: 'item-6',
+          value: 'item-6',
+          label: 'Royal Blue'
+        },
+        {
+          id: 'item-7',
+          value: 'item-7',
+          label: 'Rosy Brown'
+        },
+        {
+          id: 'item-8',
+          value: 'item-8',
+          label: 'Green Yellow'
+        },
+      ]
+    }}
+  >
+    {SingleTemplate.bind()}
+  </Story>
+</Canvas>