From 8294b5fe42f9ef87f9425c86dc814a2f09a311fb Mon Sep 17 00:00:00 2001
From: Alex <alex-ju@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:35:51 +0100
Subject: [PATCH 1/3] `SuperSelect::Multiple` allow for a custom
 `@resultCountMessage`

---
 .../hds/form/super-select/multiple/base.ts    |  5 ++++-
 .../components/form/super-select.hbs          | 19 +++++++++++++++++++
 .../form/super-select/multiple/base-test.js   | 19 +++++++++++++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)

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
index 7cf49b15d4..af14647535 100644
--- 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
index e97bb51256..e6b793d979 100644
--- 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
index c7a35316b1..81f94458cc 100644
--- 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) {

From d20c7a75be4912ffc1d34e17facc8b5cc7a98d2f Mon Sep 17 00:00:00 2001
From: Alex <alex-ju@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:46:07 +0100
Subject: [PATCH 2/3] Add `@resultCountMessage` arg to docs

---
 .../form/super-select/partials/code/component-api.md           | 3 +++
 1 file changed, 3 insertions(+)

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
index f7f716f8c2..c1a2d5743f 100644
--- 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>

From f50232974fce1e87ea38421464d39d80f8c89d38 Mon Sep 17 00:00:00 2001
From: Alex <alex-ju@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:47:39 +0100
Subject: [PATCH 3/3] Add changelog entry

---
 .changeset/spotty-boxes-do.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/spotty-boxes-do.md

diff --git a/.changeset/spotty-boxes-do.md b/.changeset/spotty-boxes-do.md
new file mode 100644
index 0000000000..fe50aed9ef
--- /dev/null
+++ b/.changeset/spotty-boxes-do.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`SuperSelect::Multiple` - Added `@resultCountMessage` argument to enable override