Merge pull request #230 from US-CBP/feature/combobox

Feature/combobox

packages/web-components/src/components/cbp-dropdown-item/cbp-dropdown-item.scss

@@ -32,6 +32,7 @@
   --cbp-dropdown-item-color: var(--cbp-dropdown-item-color-dark);
   --cbp-dropdown-item-color-bg: var(--cbp-dropdown-item-color-bg-dark);
   --cbp-dropdown-item-color-border: var(--cbp-dropdown-item-color-border-dark);
+  --cbp-checkbox-color-label: var(--cbp-checkbox-color-label-dark);
  }
 
 cbp-dropdown-item {
@@ -79,6 +80,7 @@ cbp-dropdown-item {
     --cbp-dropdown-item-color-border-dark: transparent;
   }
 
+  &[current],
   &:focus {
     --cbp-dropdown-item-color: var(--cbp-color-text-lightest);
     --cbp-dropdown-item-color-bg: var(--cbp-color-interactive-focus-dark);
@@ -111,6 +113,7 @@ cbp-dropdown-item {
     --cbp-checkbox-font-weight-label: var(--cbp-font-weight-regular);
   }
 
+  &[current],
   &:focus,
   &:hover {
     cbp-checkbox {
@@ -119,6 +122,7 @@ cbp-dropdown-item {
     }
   }
 
+  &[current],
   &:focus {
     cbp-checkbox {
       --cbp-checkbox-color: var(--cbp-color-text-lightest);

packages/web-components/src/components/cbp-dropdown-item/cbp-dropdown-item.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop, Element, Event, EventEmitter, Watch, Host, h } from '@stencil/core';
+import { createNamespaceKey } from '../../utils/utils';
 
 @Component({
   tag: 'cbp-dropdown-item',
@@ -7,7 +8,7 @@ import { Component, Prop, Element, Event, EventEmitter, Watch, Host, h } from '@
 export class CbpDropdownItem {
 
   private checkbox: HTMLInputElement;
-  private parent: HTMLCbpDropdownElement;
+  //private parent: HTMLCbpDropdownElement;
 
   @Element() host: HTMLElement;
 
@@ -17,6 +18,12 @@ export class CbpDropdownItem {
   /* Specifies that a dropdown item is disabled and cannot be selected */
   //@Prop({reflect:true}) disabled: boolean; // No disabled state designed, but keep this in case we revisit it, as native options can be disabled
 
+  /** For Internal Use: Specifies the current item (referenced by `aria-activedescendant`) while using keyboard navigation. */
+  @Prop({ reflect: true }) current: boolean;
+
+  /** Optionally specify the ID of each dropdown item, which is used by the parent dropdown to associate `aria-activedescendant`. If no `itemId` is specified, one will be automatically generated. */
+  @Prop() itemId: string = createNamespaceKey('cbp-dropdown-item');
+
   /** Specifies if an item is selected */
   @Prop({ reflect: true }) selected: boolean;
 
@@ -34,26 +41,16 @@ export class CbpDropdownItem {
       });
       //console.log('Dropdown Item Click: ', this.value, (!!this.value) ? this.value : label);
     }
-    //this.selected=true; delegate this to the parent level because we don't know if this is single or multiselect here
+    // Selection is delegated to the parent level because we don't know if this is single or multiselect at this level.
   }
 
   @Watch('selected')
   watchSelected(newValue) {
-    //console.log('Selected Watch fired in dropdown-item: ', this.host);
     if (this.checkbox) this.checkbox.checked=newValue; // sync a slotted checkbox (if any) with the selected state
-    if (newValue && this.parent?.open) this.host.focus(); // If the dropdown is open, send focus to the selected dropdown item (not its children)
-  }
-
-  handleKeyUp(e) {
-    if (e.key == 'Enter') {
-      this.handleClick(e);
-      return false;
-    }
   }
 
-
   componentWillLoad() {
-    this.parent=this.host.closest('cbp-dropdown');
+    //this.parent=this.host.closest('cbp-dropdown');
     this.checkbox = this.host.querySelector('input[type=checkbox]');
   }
 
@@ -65,9 +62,8 @@ export class CbpDropdownItem {
     return (
       <Host
         role="option"
-        tabindex={-1}
+        id={this.itemId}
         onClick={ (e) => this.handleClick(e)}
-        onKeyDown={ (e) => this.handleKeyUp(e)}
         aria-selected={this.selected ? "true" : "false"}
       >
         <div class="cbp-dropdown-item-content">

packages/web-components/src/components/cbp-dropdown/cbp-dropdown.scss

@@ -44,8 +44,12 @@
   // These are used by the component and are not intended to be used by consumers
   --cbp-dropdown-attached-button-start-width: 0;
   --cbp-dropdown-attached-button-end-width: 0;
+  // On dark "button" background
+  --cbp-dropdown-chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="%23fcfcfc"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
+  --cbp-dropdown-chevron-down-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="%231b1b1b"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
 }
 
+
 /* 
  * Dark Mode - display dark design based on mode or context
  */
@@ -59,19 +63,21 @@
   --cbp-dropdown-menu-color-bg-counter: var(--cbp-dropdown-menu-color-bg-counter-dark);
   --cbp-dropdown-menu-color-counter-outline-focus: var(--cbp-dropdown-menu-color-counter-outline-focus-dark);
 
-  --cbp-form-field-select-chevron: var(--cbp-form-field-select-chevron-dark);
+  --cbp-dropdown-chevron: var(--cbp-dropdown-chevron-dark);
+  --cbp-dropdown-chevron-down: var(--cbp-dropdown-chevron-down-dark);
  }
 
 cbp-dropdown {
   display: block;
 
   &:has([slot="cbp-dropdown-attached-button-start"]),
   &:has([slot="cbp-dropdown-attached-button-end"]) {
-    --cbp-form-field-select-chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 320 512" fill="%231b1b1b"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
-    --cbp-form-field-select-chevron-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 320 512" fill="%23fcfcfc"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
+    --cbp-dropdown-chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 320 512" fill="%231b1b1b"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
+    --cbp-dropdown-chevron-down-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 320 512" fill="%23fcfcfc"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
 
     .cbp-custom-form-control {
-      background: right calc(var(--cbp-dropdown-attached-button-end-width) + 1.125rem - 8px) top calc(1rem - 8px) no-repeat var(--cbp-form-field-select-chevron),
+      --cbp-dropdown-chevron: var(--cbp-dropdown-chevron-down);
+      background: right calc(var(--cbp-dropdown-attached-button-end-width) + 1.125rem - 8px) top calc(1rem - 8px) no-repeat var(--cbp-dropdown-chevron),
         var(--cbp-form-field-color-bg);
     }
   }
@@ -212,9 +218,5 @@ cbp-dropdown {
     --cbp-dropdown-item-padding-inline-start: 0;
     --cbp-dropdown-item-padding-block: var(--cbp-space-1x);
     --cbp-dropdown-item-font-style-selected: normal;
-
-    cbp-checkbox {
-    --cbp-checkbox-color-label: var(--cbp-color-text-darkest);
-    }
   }
 }