File tree 5 files changed +50
-1
lines changed
packages/components/src/components/hds/form/super-select/multiple
app/templates/components/form
tests/integration/components/hds/form/super-select/multiple
website/docs/components/form/super-select/partials/code
5 files changed +50
-1
lines changed Original file line number Diff line number Diff line change
1
+ ---
2
+ " @hashicorp/design-system-components " : minor
3
+ ---
4
+
5
+ ` SuperSelect::Multiple ` - Added ` @resultCountMessage ` argument to enable override
Original file line number Diff line number Diff line change @@ -55,7 +55,10 @@ export default class HdsFormSuperSelectMultipleBase extends Component<HdsFormSup
55
55
}
56
56
57
57
get resultCountMessage ( ) : string {
58
- return `${ this . selectedCount } selected of ${ this . optionsCount } total` ;
58
+ return (
59
+ this . args . resultCountMessage ||
60
+ `${ this . selectedCount } selected of ${ this . optionsCount } total`
61
+ ) ;
59
62
}
60
63
61
64
@action calculatePosition (
Original file line number Diff line number Diff line change 859
859
</SF .Item>
860
860
</Shw::Flex >
861
861
862
+ <Shw::Text::H4 >Custom result count message</Shw::Text::H4 >
863
+
864
+ <Shw::Flex {{ style padding-bottom =" 15em" }} @direction =" row" as |SF|>
865
+ <SF .Item>
866
+ <Hds::Form::SuperSelect::Multiple::Base
867
+ @resultCountMessage =" {{ @model.PLACES_OPTIONS.length }} total"
868
+ @onChange ={{ fn (mut @model.SELECTED_PLACES_OPTIONS )}}
869
+ @options ={{ @model.PLACES_OPTIONS }}
870
+ @selected ={{ @model.SELECTED_PLACES_OPTIONS }}
871
+ @initiallyOpened ={{ true }}
872
+ @verticalPosition =" below"
873
+ @ariaLabel =" Label"
874
+ as |option|
875
+ >
876
+ {{ option }}
877
+ </Hds::Form::SuperSelect::Multiple::Base >
878
+ </SF .Item>
879
+ </Shw::Flex >
880
+
862
881
<Shw::Divider />
863
882
864
883
<Shw::Text::H2 >Form::SuperSelect::Multiple::Field</Shw::Text::H2 >
Original file line number Diff line number Diff line change @@ -163,6 +163,25 @@ module(
163
163
assert . dom ( '.hds-form-super-select__after-options' ) . doesNotExist ( ) ;
164
164
} ) ;
165
165
166
+ test ( 'it should render the default after options block with custom result count message when `@resultCountMessage` exists' , async function ( assert ) {
167
+ setOptionsData ( this ) ;
168
+ await render (
169
+ 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>`
170
+ ) ;
171
+ await click ( '.hds-form-super-select .ember-basic-dropdown-trigger' ) ;
172
+ assert
173
+ . dom (
174
+ '.hds-form-super-select__after-options .hds-form-super-select__result-count'
175
+ )
176
+ . hasText ( 'custom result count message' ) ;
177
+ assert
178
+ . dom ( '.hds-form-super-select__after-options .hds-button' )
179
+ . hasText ( 'Show selected' ) ;
180
+ assert
181
+ . dom ( '.hds-form-super-select__after-options .hds-button' )
182
+ . doesNotHaveTextContaining ( 'Clear selected' ) ;
183
+ } ) ;
184
+
166
185
// MATCH TRIGGER WIDTH
167
186
168
187
test ( '`@matchTriggerWidth` should be true by default' , async function ( assert ) {
Original file line number Diff line number Diff line change @@ -185,6 +185,9 @@ The default values of some [ember-power-select](https://ember-power-select.com/d
185
185
<C.Property @name ="afterOptionsContent" @type ="string" @default ="resultCountMessage">
186
186
Sets the content of the default ` afterOptions ` component overriding the default content.
187
187
</C.Property>
188
+ <C.Property @name ="resultCountMessage" @type ="string">
189
+ Overrides the default result count message. The default message follows this pattern: X selected of Y total.
190
+ </C.Property>
188
191
<C.Property @name ="closeOnSelect" @type ="boolean" @default ="false">
189
192
Defaults to true instead for ` SuperSelect::Single ` .
190
193
</C.Property>
You can’t perform that action at this time.
0 commit comments