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

Author: KristinLBradley

.changeset/empty-animals-warn.md

@@ -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 -->

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

@@ -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);
@@ -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
@@ -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

showcase/app/components/page-components/form/super-select/sub-sections/multiple-base-element.gts

@@ -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';
 
@@ -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>

showcase/app/components/page-components/form/super-select/sub-sections/single-base-element.gts

@@ -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';
 
@@ -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>