ToggleSelect component (#362)

* Add ToggleSelect component

* Remove unused change

* Update tests and test selectors

* Update test, increase dropdown height

* Remove comment

web/app/components/document/sidebar.hbs

@@ -147,7 +147,7 @@
       <div class="space-y-2">
         <Document::Sidebar::SectionHeader @title="Product/Area" />
         {{#if (and this.isDraft this.isOwner)}}
-          <div class="relative w-full">
+          <div class="relative w-full" data-test-document-product-area-editable>
             <Inputs::ProductSelect
               data-test-document-product-area-editable
               @selected={{this.product}}

web/app/components/inputs/product-select/index.hbs → web/app/components/inputs/product-select.hbs

@@ -1,5 +1,5 @@
 {{! https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ }}
-<div data-test-product-select ...attributes>
+<div data-test-product-select>
   {{#if this.products}}
     {{#if @formatIsBadge}}
       <Inputs::BadgeDropdownList
@@ -38,26 +38,12 @@
         ...attributes
       >
         <:anchor as |dd|>
-          <dd.ToggleAction
-            class="x-dropdown-list-toggle-select product-select-default-toggle hds-button hds-button--color-secondary hds-button--size-medium"
-          >
-            <FlightIcon @name={{or (get-product-id @selected) "folder"}} />
-
-            <span
-              class="product-select-selected-value
-                {{unless @selected 'text-color-foreground-faint'}}"
-            >
-              {{or @selected "Select a product/area"}}
-            </span>
-
-            {{#if this.selectedProductAbbreviation}}
-              <span class="product-select-toggle-abbreviation">
-                {{this.selectedProductAbbreviation}}
-              </span>
-            {{/if}}
-
-            <FlightIcon @name="caret" class="product-select-toggle-caret" />
-          </dd.ToggleAction>
+          <dd.ToggleSelect class="gap-2">
+            <Inputs::ProductSelect::Item
+              @product={{dd.selected}}
+              @abbreviation={{this.selectedProductAbbreviation}}
+            />
+          </dd.ToggleSelect>
         </:anchor>
         <:item as |dd|>
           <dd.Action data-test-product-select-item-button class="pr-5">

web/app/components/inputs/product-select/index.ts → web/app/components/inputs/product-select.ts

@@ -15,7 +15,7 @@ interface InputsProductSelectSignature {
   Element: HTMLDivElement;
   Args: {
     selected?: string;
-    onChange: (value: string, attributes?: ProductArea) => void;
+    onChange: (value: string, attributes: ProductArea) => void;
     formatIsBadge?: boolean;
     placement?: Placement;
     isSaving?: boolean;
@@ -42,16 +42,16 @@ export default class InputsProductSelectComponent extends Component<InputsProduc
     return icon;
   }
 
-  get selectedProductAbbreviation(): string | null {
+  get selectedProductAbbreviation(): string | undefined {
     if (!this.selected) {
-      return null;
+      return;
     }
     const selectedProduct = this.products?.[this.selected];
     assert("selected product must exist", selectedProduct);
     return selectedProduct.abbreviation;
   }
 
-  @action onChange(newValue: any, attributes?: ProductArea) {
+  @action onChange(newValue: any, attributes: ProductArea) {
     this.selected = newValue;
     this.args.onChange(newValue, attributes);
   }

web/app/components/inputs/product-select/item.hbs

@@ -1,30 +1,34 @@
 <div
   data-test-product-select-item
-  class="product-select-item relative flex w-full"
+  class="product-select-item relative flex w-full gap-2"
   ...attributes
 >
   <FlightIcon
-    data-test-product-select-item-icon
+    data-test-product-icon
     data-test-icon={{or (get-product-id @product) "folder"}}
     @name={{or (get-product-id @product) "folder"}}
   />
 
-  <span data-test-product-select-item-value class="ml-2.5 flex leading-none">
-    {{@product}}
-  </span>
+  <div class="flex items-center gap-1.5">
 
-  {{#if @abbreviation}}
-    <span
-      data-test-product-select-item-abbreviation
-      class="ml-2 inline-flex text-body-100 leading-none opacity-50"
-    >
-      {{@abbreviation}}
-    </span>
-  {{/if}}
+    {{#if @product}}
+      <span data-test-selected-value>
+        {{@product}}
+      </span>
+    {{else}}
+      <EmptyStateText data-test-empty-state @value="Select a product/area" />
+    {{/if}}
+
+    {{#if @abbreviation}}
+      <span class="product-select-toggle-abbreviation">
+        {{@abbreviation}}
+      </span>
+    {{/if}}
+  </div>
 
   {{#if @isSelected}}
     <FlightIcon
-      data-test-product-select-item-selected
+      data-test-check
       @name="check"
       class="check absolute right-0 top-1/2 -translate-y-1/2"
     />

web/app/components/inputs/product-select/item.ts

@@ -3,7 +3,7 @@ import Component from "@glimmer/component";
 interface InputsProductSelectItemComponentSignature {
   Element: HTMLDivElement;
   Args: {
-    product: string;
+    product?: string;
     isSelected?: boolean;
     abbreviation?: string;
   };

web/app/components/new/doc-form.hbs

@@ -72,11 +72,13 @@
               Where your doc should be categorized.
             </span>
           </div>
-          <Inputs::ProductSelect
-            @selected={{this.productArea}}
-            @onChange={{this.onProductSelect}}
-            class="w-[300px]"
-          />
+          <div class="w-[300px]">
+            <Inputs::ProductSelect
+              @selected={{this.productArea}}
+              @onChange={{this.onProductSelect}}
+              class="max-h-[240px]"
+            />
+          </div>
         </div>
 
         <Hds::Form::Field @layout="vertical" as |F|>

web/app/components/x/dropdown-list/_shared.ts

@@ -21,7 +21,7 @@ export interface XDropdownListSharedArgs {
 }
 
 /**
- * Used by ToggleAction and ToggleButton
+ * Used by ToggleAction, ToggleSelect and ToggleButton
  */
 export interface XDropdownListToggleComponentArgs {
   registerAnchor: (e: HTMLElement) => void;

web/app/components/x/dropdown-list/index.hbs

@@ -53,6 +53,22 @@
             f.contentID
           )
         )
+        ToggleSelect=(component
+          "x/dropdown-list/toggle-select"
+          contentIsShown=f.contentIsShown
+          registerAnchor=f.registerAnchor
+          onTriggerKeydown=(fn
+            this.onTriggerKeydown f.contentIsShown f.showContent
+          )
+          toggleContent=f.toggleContent
+          disabled=@disabled
+          ariaControls=(concat
+            "x-dropdown-list-"
+            (if this.inputIsShown "container" "items")
+            "-"
+            f.contentID
+          )
+        )
         ariaControls=(concat
           "x-dropdown-list-"
           (if this.inputIsShown "container" "items")

web/app/components/x/dropdown-list/index.ts

@@ -18,6 +18,7 @@ import { XDropdownListItemAPI } from "./item";
 import { restartableTask, timeout } from "ember-concurrency";
 import maybeScrollIntoView from "hermes/utils/maybe-scroll-into-view";
 import { MatchAnchorWidthOptions } from "hermes/components/floating-u-i/content";
+import XDropdownListToggleSelectComponent from "./toggle-select";
 
 export type XDropdownListToggleComponentBoundArgs =
   | "contentIsShown"
@@ -37,7 +38,12 @@ export interface XDropdownListAnchorAPI
     typeof XDropdownListToggleButtonComponent,
     XDropdownListToggleComponentBoundArgs | "color" | "text"
   >;
+  ToggleSelect: WithBoundArgs<
+    typeof XDropdownListToggleSelectComponent,
+    XDropdownListToggleComponentBoundArgs
+  >;
   focusedItemIndex: number;
+  selected: any;
   resetFocusedItemIndex: () => void;
   scheduleAssignMenuItemIDs: () => void;
   hideContent: () => void;

web/app/components/x/dropdown-list/item.hbs

@@ -59,6 +59,7 @@
           contentID=@contentID
           value=@value
           attrs=@attributes
+          selected=@selected
           isSelected=@isSelected
         )
       }}

web/app/components/x/dropdown-list/item.ts

@@ -43,14 +43,15 @@ export interface XDropdownListItemComponentArgs {
   onItemClick?: (value: any, attributes: any) => void;
   setFocusedItemIndex: (
     focusDirection: FocusDirection | number,
-    maybeScrollIntoView?: boolean
+    maybeScrollIntoView?: boolean,
   ) => void;
   hideContent: () => void;
 }
 
 interface XDropdownListItemComponentSignature {
   Args: XDropdownListItemComponentArgs & {
     value: string;
+    selected?: any;
   };
   Blocks: {
     default: [dd: XDropdownListItemAPI];

web/app/components/x/dropdown-list/toggle-select.hbs

@@ -0,0 +1,19 @@
+<Action
+  data-test-x-dropdown-list-toggle-select
+  {{did-insert @registerAnchor}}
+  {{on "keydown" @onTriggerKeydown}}
+  {{on "click" @toggleContent}}
+  disabled={{@disabled}}
+  aria-controls={{@ariaControls}}
+  aria-expanded={{@contentIsShown}}
+  aria-haspopup="listbox"
+  class="x-dropdown-list-toggle-select"
+  ...attributes
+>
+  {{yield}}
+  <FlightIcon
+    data-test-caret
+    @name="caret"
+    class="absolute top-1/2 right-2 -translate-y-1/2 text-color-foreground-faint"
+  />
+</Action>

web/app/components/x/dropdown-list/toggle-select.ts

@@ -0,0 +1,18 @@
+import Component from "@glimmer/component";
+import { XDropdownListToggleComponentArgs } from "./_shared";
+
+interface XDropdownListToggleSelectComponentSignature {
+  Element: HTMLButtonElement;
+  Args: XDropdownListToggleComponentArgs;
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class XDropdownListToggleSelectComponent extends Component<XDropdownListToggleSelectComponentSignature> {}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    "x/dropdown-list/toggle-select": typeof XDropdownListToggleSelectComponent;
+  }
+}

web/app/styles/app.scss

@@ -26,7 +26,6 @@
 @use "components/header/active-filter-list";
 @use "components/header/active-filter-list-item";
 @use "components/header/search";
-@use "components/inputs/product-select/index.scss";
 @use "components/dashboard/docs-awaiting-review/doc";
 @use "components/doc/tile-list";
 @use "components/doc/thumbnail";

web/app/styles/components/x/dropdown/toggle-select.scss

@@ -1,5 +1,5 @@
 .x-dropdown-list-toggle-select {
-  @apply text-left border;
+  @apply relative flex min-h-[36px] w-full items-center justify-start gap-0 rounded-button-md border border-color-border-strong px-2.5 leading-none;
 
   .flight-icon {
     @apply shrink-0;
@@ -19,9 +19,5 @@
 
   &.hds-button--color-secondary:not(:hover) {
     @apply bg-color-surface-primary;
-
-    .caret {
-      @apply text-color-foreground-faint;
-    }
   }
 }

web/tests/acceptance/authenticated/new/doc-test.ts

@@ -12,7 +12,7 @@ import { DRAFT_CREATED_LOCAL_STORAGE_KEY } from "hermes/components/modals/draft-
 // Selectors
 const DOC_FORM = "[data-test-new-doc-form]";
 const PRODUCT_SELECT = `${DOC_FORM} [data-test-product-select]`;
-const PRODUCT_SELECT_TOGGLE = `${PRODUCT_SELECT} [data-test-x-dropdown-list-toggle-action]`;
+const PRODUCT_SELECT_TOGGLE = `${PRODUCT_SELECT} [data-test-x-dropdown-list-toggle-select]`;
 const CREATE_BUTTON = `${DOC_FORM} [data-test-create-button]`;
 const TITLE_INPUT = `${DOC_FORM} [data-test-title-input]`;
 const SUMMARY_INPUT = `${DOC_FORM} [data-test-summary-input]`;