HDS-3221 Style default tags for multi-select, adjust padding and spacing

hashicorp · Mar 28, 2024 · 2519bdb · 2519bdb
1 parent 257ccc9
commit 2519bdb
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/showcase/app/styles/showcase-pages/super-select/theme.scss b/showcase/app/styles/showcase-pages/super-select/theme.scss
@@ -197,8 +197,20 @@
   }
 
   // Multiple Select
-  // Tags
+  // Tag List (Note: May be replaced with HDS Tag component in the future)
   .ember-power-select-multiple-options {
+    display: flex;
+    gap: 4px;
     list-style: none;
   }
+
+  // tag items
+  .ember-power-select-multiple-option {
+    float: none;
+    margin: 0;
+    font-size: var(--token-typography-body-100-font-size);
+    line-height: var(--token-typography-body-100-line-height);
+    background-color: var(--token-form-control-base-surface-color-default);
+    border-radius: 500px;
+  }
 }
diff --git a/showcase/app/templates/components/super-select.hbs b/showcase/app/templates/components/super-select.hbs
@@ -43,6 +43,8 @@
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Text::H4>Dropdown</Shw::Text::H4>
+
   <Shw::Flex @direction="row" as |SF|>
     <SF.Item {{style flex="1" padding-bottom="12em"}} @label="No search">
       <Hds::SuperSelect::Single
@@ -93,8 +95,25 @@
         {{option}}
       </Hds::SuperSelect::Multiple>
     </SF.Item>
+  </Shw::Flex>
+
+  <Shw::Text::H4>Dropdown</Shw::Text::H4>
+  <Shw::Text::Body>Note: Tags will likely be replaced with HDS Tag (current ones are styled default tags)</Shw::Text::Body>
 
-    <SF.Item @label="Search enabled" {{style padding-bottom="12em"}}>
+  <Shw::Flex @direction="row" as |SF|>
+    <SF.Item {{style flex="1" padding-bottom="12em"}} @label="No search">
+      <Hds::SuperSelect::Multiple
+        @onChange={{this.noop}}
+        @options={{@model.OPTIONS}}
+        @selected={{@model.SELECTEDMULTIPLE}}
+        @initiallyOpened={{true}}
+        as |option|
+      >
+        {{option}}
+      </Hds::SuperSelect::Multiple>
+    </SF.Item>
+
+    <SF.Item {{style flex="1" padding-bottom="12em"}} @label="Search enabled">
       <Hds::SuperSelect::Multiple
         @onChange={{this.noop}}
         @options={{@model.OPTIONS}}