Merge pull request #5268 from uswds/cm-multiple-select-overflow

thisisdano · web-flow · commit d5a7fb01e0c4 · 2023-07-28T10:10:25.000-07:00
USWDS - Select: Multiple select overflow
diff --git a/packages/usa-select/src/styles/_usa-select.scss b/packages/usa-select/src/styles/_usa-select.scss
@@ -28,6 +28,12 @@
   &[multiple] {
     height: auto;
     background-image: none;
+    padding-right: 0;
+  }
+
+  option {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &:disabled,
diff --git a/packages/usa-select/src/test/test-patterns/usa-select--multiple.twig b/packages/usa-select/src/test/test-patterns/usa-select--multiple.twig
@@ -0,0 +1,12 @@
+<form class="usa-form">
+  <label class="usa-label" for="options">Dropdown label</label>
+  <select class="usa-select" name="options" id="options" multiple size="{{ size }}" >
+    <option value>- Select -</option>
+    <option value="value1">Option A</option>
+    <option value="value2">Option B</option>
+    <option value="value3">Option C - A longer text option than the select box</option>
+    <option value="value1">Option E</option>
+    <option value="value2">Option F</option>
+    <option value="value3">Option G</option>
+  </select>
+</form>
diff --git a/packages/usa-select/src/usa-select.stories.js b/packages/usa-select/src/usa-select.stories.js
@@ -1,4 +1,5 @@
 import Component from "./usa-select.twig";
+import MultipleTest from "./test/test-patterns/usa-select--multiple.twig";
 
 export default {
   title: "Components/Form Inputs/Select",
@@ -12,6 +13,7 @@ export default {
 };
 
 const Template = (args) => Component(args);
+const MultipleTemplate = (args) => MultipleTest(args);
 
 export const Select = Template.bind({});
 
@@ -25,7 +27,7 @@ AriaDisabled.args = {
   disabled_state: "aria-disabled",
 };
 
-export const Multiple = Template.bind({});
+export const Multiple = MultipleTemplate.bind({});
 Multiple.args = {
   multiple: true,
   size: 0,
