Merge pull request #2473 from hashicorp/alex-ju/fix-power-select-placeholder

`SuperSelect::Multiple` - fix placeholder style and layout

Author: alex-ju

.changeset/nice-llamas-tap.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`SuperSelect::Multiple` - Fixed placeholder style and layout

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

@@ -72,8 +72,11 @@ $hds-super-select-item-height: 36px;
       margin-left: 0;
     }
 
-    .ember-power-select-placeholder {
+    .ember-power-select-placeholder {  
       color: var(--token-form-control-base-foreground-placeholder-color);
+      font-size: var(--token-typography-body-200-font-size);
+      font-family: var(--token-typography-body-200-font-family);
+      line-height: var(--token-typography-body-200-line-height);
     }
 
     // `BasicDropdown` uses `aria-disabled` on the trigger, see: https://ember-basic-dropdown.com/docs/disabled
@@ -272,6 +275,7 @@ $hds-super-select-item-height: 36px;
   // Tag List
   .ember-power-select-multiple-options {
     display: flex;
+    flex-grow: 1;
     flex-wrap: wrap;
     gap: 4px;
     min-width: 0;

showcase/app/templates/components/form/super-select.hbs

@@ -521,10 +521,10 @@
 
   <Shw::Text::H2>Form::SuperSelect::Multiple::Base</Shw::Text::H2>
 
-  <Shw::Text::H3>Interaction</Shw::Text::H3>
+  <Shw::Text::H3>Interaction status</Shw::Text::H3>
 
-  <Shw::Flex @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="Default">
+  <Shw::Grid @columns={{3}} as |SG|>
+    <SG.Item @label="Default">
       <Hds::Form::SuperSelect::Multiple::Base
         @onChange={{this.noop}}
         @options={{@model.OPTIONS}}
@@ -533,9 +533,19 @@
       >
         {{option}}
       </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-
-    <SF.Item {{style flex="1"}} @label="Selected">
+    </SG.Item>
+    <SG.Item @label="With placeholder">
+      <Hds::Form::SuperSelect::Multiple::Base
+        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
+        @options={{@model.OPTIONS}}
+        @placeholder="Placeholder text for multiple selection"
+        @ariaLabel="Label"
+        as |option|
+      >
+        {{option}}
+      </Hds::Form::SuperSelect::Multiple::Base>
+    </SG.Item>
+    <SG.Item @label="Selected">
       <Hds::Form::SuperSelect::Multiple::Base
         @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
         @options={{@model.OPTIONS}}
@@ -545,8 +555,8 @@
       >
         {{option}}
       </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-  </Shw::Flex>
+    </SG.Item>
+  </Shw::Grid>
 
   <Shw::Divider @level="2" />