Merge pull request #2502 from hashicorp/alex-ju/super-select-custom-r…

…esult-count-message `SuperSelect::Multiple` - allow custom result count message
hashicorp · Oct 14, 2024 · 7142a93 · 7142a93
2 parents 4030b10 + f502329
commit 7142a93
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/.changeset/spotty-boxes-do.md b/.changeset/spotty-boxes-do.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`SuperSelect::Multiple` - Added `@resultCountMessage` argument to enable override
diff --git a/packages/components/src/components/hds/form/super-select/multiple/base.ts b/packages/components/src/components/hds/form/super-select/multiple/base.ts
@@ -55,7 +55,10 @@ export default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSup
   }
 
   get resultCountMessage(): string {
-    return `${this.selectedCount} selected of ${this.optionsCount} total`;
+    return (
+      this.args.resultCountMessage ||
+      `${this.selectedCount} selected of ${this.optionsCount} total`
+    );
   }
 
   @action calculatePosition(

diff --git a/showcase/app/templates/components/form/super-select.hbs b/showcase/app/templates/components/form/super-select.hbs
@@ -859,6 +859,25 @@
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Text::H4>Custom result count message</Shw::Text::H4>
+
+  <Shw::Flex {{style padding-bottom="15em"}} @direction="row" as |SF|>
+    <SF.Item>
+      <Hds::Form::SuperSelect::Multiple::Base
+        @resultCountMessage="{{@model.PLACES_OPTIONS.length}} total"
+        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
+        @options={{@model.PLACES_OPTIONS}}
+        @selected={{@model.SELECTED_PLACES_OPTIONS}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @ariaLabel="Label"
+        as |option|
+      >
+        {{option}}
+      </Hds::Form::SuperSelect::Multiple::Base>
+    </SF.Item>
+  </Shw::Flex>
+
   <Shw::Divider />
 
   <Shw::Text::H2>Form::SuperSelect::Multiple::Field</Shw::Text::H2>

diff --git a/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.js b/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.js
@@ -163,6 +163,25 @@ module(
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
     });
 
+    test('it should render the default after options block with custom result count message when `@resultCountMessage` exists', async function (assert) {
+      setOptionsData(this);
+      await render(
+        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @resultCountMessage="custom result count message" as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`
+      );
+      await click('.hds-form-super-select .ember-basic-dropdown-trigger');
+      assert
+        .dom(
+          '.hds-form-super-select__after-options .hds-form-super-select__result-count'
+        )
+        .hasText('custom result count message');
+      assert
+        .dom('.hds-form-super-select__after-options .hds-button')
+        .hasText('Show selected');
+      assert
+        .dom('.hds-form-super-select__after-options .hds-button')
+        .doesNotHaveTextContaining('Clear selected');
+    });
+
     // MATCH TRIGGER WIDTH
 
     test('`@matchTriggerWidth` should be true by default', async function (assert) {

diff --git a/website/docs/components/form/super-select/partials/code/component-api.md b/website/docs/components/form/super-select/partials/code/component-api.md
@@ -185,6 +185,9 @@ The default values of some [ember-power-select](https://ember-power-select.com/d
   <C.Property @name="afterOptionsContent" @type="string" @default="resultCountMessage">
     Sets the content of the default `afterOptions` component overriding the default content.
   </C.Property>
+  <C.Property @name="resultCountMessage" @type="string">
+    Overrides the default result count message. The default message follows this pattern: X selected of Y total.
+  </C.Property>
   <C.Property @name="closeOnSelect" @type="boolean" @default="false">
     Defaults to true instead for `SuperSelect::Single`.
   </C.Property>