Skip to content

SuperSelect - Fix styling of search results loading message (HDS-5727) #3439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KristinLBradley merged 5 commits into from
Dec 16, 2025
+87 −4
Merged

SuperSelect - Fix styling of search results loading message (HDS-5727) #3439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3dfccfc
HDS-5727 Modify styles of SuperSelect loading message to match the no…
KristinLBradley Dec 15, 2025
9a88dfb
HDS-5727 Add changeset
KristinLBradley Dec 15, 2025
9ad79ba
Update changelog
KristinLBradley Dec 15, 2025
44a5c66
HDS-5727 Remove roles from visual examples of SuperSelect search resu…
KristinLBradley Dec 15, 2025
f0857e5
Merge branch 'kristin/hds-5727-superselec-loading-message-style-bug' …
KristinLBradley Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/empty-animals-warn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hashicorp/design-system-components": patch
---

<!-- START components/form/super-select -->
`SuperSelect` - Removed styling incorrectly adding a checkbox next to the "Loading options..." message for search results
<!-- END -->
16 changes: 12 additions & 4 deletions packages/components/src/styles/components/form/super-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,7 +392,10 @@ $hds-super-select-item-height: 36px;
// SINGLE
.hds-form-super-select-single .ember-basic-dropdown {
// Options Item
.ember-power-select-option:not(.ember-power-select-option--no-matches-message) {
.ember-power-select-option:not(
.ember-power-select-option--no-matches-message,
.ember-power-select-option--loading-message
) {
background-repeat: no-repeat;
background-position: 15px 10px;
background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
Expand Down Expand Up @@ -434,7 +437,11 @@ $hds-super-select-item-height: 36px;
// MULTIPLE SELECT
.hds-form-super-select-multiple .ember-basic-dropdown {
// Options Item
.ember-power-select-option:not(.ember-power-select-option--no-matches-message) {
// We add a pesudo checkbox to each option except those that are for messages (no matches/loading)
.ember-power-select-option:not(
.ember-power-select-option--no-matches-message,
.ember-power-select-option--loading-message
) {
position: relative;

// pseudo checkbox
Expand Down Expand Up @@ -517,10 +524,11 @@ $hds-super-select-item-height: 36px;
}
}

// NO MATCHES MESSAGE
// NO MATCHES MESSAGE & LOADING MESSAGE

.hds-form-super-select .ember-basic-dropdown {
.ember-power-select-option--no-matches-message {
.ember-power-select-option--no-matches-message,
.ember-power-select-option--loading-message {
padding-left: 12px;
cursor: inherit;
// hide the hover indicator on messages
Expand Down
34 changes: 34 additions & 0 deletions ...e/app/components/page-components/form/super-select/sub-sections/multiple-base-element.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import ShwTextH4 from 'showcase/components/shw/text/h4';
import ShwFlex from 'showcase/components/shw/flex';
import ShwGrid from 'showcase/components/shw/grid';
import ShwDivider from 'showcase/components/shw/divider';
import ShwOutliner from 'showcase/components/shw/outliner';

import CodeFragmentWithMultipleBaseElement from 'showcase/components/page-components/form/super-select/code-fragments/with-multiple-base-element';

Expand Down Expand Up @@ -177,6 +178,39 @@ const SubSectionMultipleBaseElement: TemplateOnlyComponent = <template>
</SF.Item>
</ShwFlex>

<ShwTextH4>List search results messages</ShwTextH4>

<ShwFlex as |SF|>
<SF.Item {{style min-width="10em"}} @label="Loading options message">
<ShwOutliner>
<div class="hds-form-super-select hds-form-super-select-multiple">
<div class="ember-basic-dropdown">
<ul class="ember-power-select-options">
<li
class="ember-power-select-option ember-power-select-option--loading-message"
>Loading options...</li>
</ul>
</div>
</div>
</ShwOutliner>
</SF.Item>
<SF.Item {{style min-width="22em"}} @label="No results found message">
<ShwOutliner>
<div class="hds-form-super-select hds-form-super-select-multiple">
<div class="ember-basic-dropdown">
<ul class="ember-power-select-options">
<li
class="ember-power-select-option ember-power-select-option--no-matches-message"
>
No results found
</li>
</ul>
</div>
</div>
</ShwOutliner>
</SF.Item>
</ShwFlex>

<ShwDivider @level={{2}} />

<ShwTextH3>Before &amp; after options</ShwTextH3>
Expand Down
34 changes: 34 additions & 0 deletions ...ase/app/components/page-components/form/super-select/sub-sections/single-base-element.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import ShwTextH4 from 'showcase/components/shw/text/h4';
import ShwFlex from 'showcase/components/shw/flex';
import ShwGrid from 'showcase/components/shw/grid';
import ShwDivider from 'showcase/components/shw/divider';
import ShwOutliner from 'showcase/components/shw/outliner';

import CodeFragmentWithSingleBaseElement from 'showcase/components/page-components/form/super-select/code-fragments/with-single-base-element';

Expand Down Expand Up @@ -172,6 +173,39 @@ const SubSectionSingleBaseElement: TemplateOnlyComponent = <template>
</SF.Item>
</ShwFlex>

<ShwTextH4>List search results messages</ShwTextH4>

<ShwFlex as |SF|>
<SF.Item {{style min-width="10em"}} @label="Loading options message">
<ShwOutliner>
<div class="hds-form-super-select hds-form-super-select-single">
<div class="ember-basic-dropdown">
<ul class="ember-power-select-options">
<li
class="ember-power-select-option ember-power-select-option--loading-message"
>Loading options...</li>
</ul>
</div>
</div>
</ShwOutliner>
</SF.Item>
<SF.Item {{style min-width="22em"}} @label="No results found message">
<ShwOutliner>
<div class="hds-form-super-select hds-form-super-select-single">
<div class="ember-basic-dropdown">
<ul class="ember-power-select-options">
<li
class="ember-power-select-option ember-power-select-option--no-matches-message"
>
No results found
</li>
</ul>
</div>
</div>
</ShwOutliner>
</SF.Item>
</ShwFlex>

<ShwDivider @level={{2}} />

<ShwTextH3>Before &amp; after options</ShwTextH3>
Expand Down