Form::SuperSelect::Multiple: Implement updated designs

.changeset/rude-plants-provide.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Form::SuperSelect::Multiple` - Updated the design to improve the experience when many items are selected.

packages/components/src/components/hds/form/super-select/multiple/base.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 {{! Important: if an argument is added in base.hbs, it must also be added/processed in the Base component used in field.hbs }}
-<div class={{this.classNames}} {{style this.dropdownMaxWidthStyle}}>
+<div class={{this.classNames}} {{style this.styles}}>
   <PowerSelectMultiple
     @afterOptionsComponent={{if
       this.showAfterOptions

packages/components/src/components/hds/form/super-select/multiple/base.ts

@@ -56,10 +56,7 @@ export default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSup
   }
 
   get resultCountMessage(): string {
-    return (
-      this.args.resultCountMessage ||
-      `${this.selectedCount} selected of ${this.optionsCount} total`
-    );
+    return this.args.resultCountMessage || `${this.optionsCount} total`;
   }
 
   @action calculatePosition(
@@ -117,47 +114,35 @@ export default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSup
     this._showOnlySelected = false;
   }
 
-  /**
-   * Determine if `@afterOptionsComponent` gets displayed
-   * @param showAfterOptions
-   * @type {boolean}
-   * @default true
-   */
   get showAfterOptions(): boolean {
     return this.args.showAfterOptions ?? true;
   }
 
   // NOTE: The searchPlaceholder doesn't currently work for the multiple select
-  /**
-   * Get the search placeholder text
-   * @param searchPlaceholder
-   * @type {string}
-   * @default 'Search'
-   */
   get searchPlaceholder(): string {
     return this.args.searchPlaceholder ?? 'Search';
   }
 
-  /**
-   * Get the maxWidth to apply to the dropdown
-   * @param dropdownMaxWidth
-   * @type {string}
-   * @default 'none'
-   */
-  get dropdownMaxWidthStyle(): Record<string, string> {
-    const maxWidthStyle: { [key: string]: string } = {};
+  get styles(): Record<string, string> {
+    const styles: { [key: string]: string } = {};
+
     if (this.args.dropdownMaxWidth) {
-      maxWidthStyle['--hds-form-super-select-dropdown-max-width'] =
+      styles['--hds-form-super-select-dropdown-max-width'] =
         this.args.dropdownMaxWidth;
     }
-    return maxWidthStyle;
+
+    if (this.selectedCount === '0') {
+      styles['--hds-form-super-select-selected-text-display'] = 'none';
+    } else {
+      styles['--hds-form-super-select-selected-text-display'] = 'flex';
+    }
+
+    styles['--hds-form-super-select-selected-text'] =
+      `'${this.selectedCount} selected'`;
+
+    return styles;
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-form-super-select', 'hds-form-super-select-multiple'];
 

packages/components/src/styles/components/form/super-select.scss

@@ -20,12 +20,13 @@ $hds-super-select-item-height: 36px;
   // TRIGGER
   .ember-basic-dropdown-trigger,
   .ember-power-select-trigger {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
     align-items: center;
     max-width: 100%;
     min-height: $hds-super-select-item-height;
     padding-top: 4px;
-    padding-right: calc(var(--token-form-control-padding) + 24px); // extra space for the icon
+    padding-right: calc(var(--token-form-control-padding) + 21px); // extra space for the icon
     padding-bottom: 4px;
     padding-left: 11px;
     color: var(--token-form-control-base-foreground-value-color);
@@ -94,6 +95,20 @@ $hds-super-select-item-height: 36px;
         opacity: inherit;
       }
     }
+
+    &::after {
+      display: var(--hds-form-super-select-selected-text-display);
+      flex-shrink: 0;
+      align-items: center;
+      align-self: stretch;
+      padding-left: 8px;
+      color: var(--token-color-foreground-faint);
+      font-size: var(--token-typography-body-100-font-size);
+      font-family: var(--token-typography-body-100-font-family);
+      line-height: var(--token-typography-body-100-line-height);
+      border-left: 1px solid var(--token-color-border-strong);
+      content: var(--hds-form-super-select-selected-text);
+    }
   }
 
   // DROPDOWN
@@ -278,17 +293,18 @@ $hds-super-select-item-height: 36px;
   .ember-power-select-multiple-options {
     display: flex;
     flex-grow: 1;
-    flex-wrap: wrap;
-    gap: 4px;
+    flex-wrap: nowrap;
     min-width: 0;
+    overflow: hidden;
     list-style: none;
   }
 
   // Tag item
   .ember-power-select-multiple-option {
+    flex-shrink: 0;
     float: none;
     min-width: 0;
-    margin: 0;
+    margin: 0 4px 0 0;
     padding: 3px 10px 5px 10px;
     font-size: var(--token-typography-body-100-font-size);
     font-family: var(--token-typography-body-100-font-family);

showcase/tests/integration/components/hds/form/super-select/multiple/base-test.js

@@ -58,7 +58,7 @@ module(
         .dom(
           '.hds-form-super-select__after-options .hds-form-super-select__result-count'
         )
-        .hasText('0 selected of 3 total');
+        .hasText('3 total');
       assert
         .dom('.hds-form-super-select__after-options .hds-button')
         .hasText('Show selected');
@@ -75,11 +75,7 @@ module(
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       await selectChoose('#test-super-select-multiple', 'Option 1');
       await selectChoose('#test-super-select-multiple', 'Option 2');
-      assert
-        .dom(
-          '.hds-form-super-select__after-options .hds-form-super-select__result-count'
-        )
-        .hasText('2 selected of 3 total');
+
       assert.dom('.ember-power-select-option').isVisible({ count: 3 });
 
       // click 'Show selected'
@@ -103,11 +99,6 @@ module(
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       await selectChoose('#test-super-select-multiple', 'Option 1');
       await selectChoose('#test-super-select-multiple', 'Option 2');
-      assert
-        .dom(
-          '.hds-form-super-select__after-options .hds-form-super-select__result-count'
-        )
-        .hasText('2 selected of 3 total');
       assert.dom('.ember-power-select-option').isVisible({ count: 3 });
       assert.dom('.hds-form-super-select__no-options-selected').doesNotExist();
 
@@ -118,11 +109,6 @@ module(
       assert
         .dom('.ember-power-select-option[aria-selected="true"]')
         .doesNotExist();
-      assert
-        .dom(
-          '.hds-form-super-select__after-options .hds-form-super-select__result-count'
-        )
-        .hasText('0 selected of 3 total');
 
       // click 'Show selected'
       await click(
@@ -217,7 +203,7 @@ module(
         .hasClass('hds-form-super-select--dropdown-content-auto-width')
         .hasAttribute(
           'style',
-          '--hds-form-super-select-dropdown-max-width: 40em;'
+          "--hds-form-super-select-dropdown-max-width: 40em; --hds-form-super-select-selected-text-display: none; --hds-form-super-select-selected-text: '0 selected';"
         );
     });