Add max-height to Dropdown options list.

packages/components/src/components/Dropdown/Dropdown.style.ts

@@ -92,6 +92,9 @@ export let makeStyles = ({
       width: 100%;
       position: absolute;
       top: 50px;
+      max-height: 145px;
+      overflow-x: none;
+      overflow-y: auto;
     `,
     option: css`
       padding: ${spacing.s};

packages/components/stories/07-Dropdown.stories.tsx

@@ -21,26 +21,75 @@ const options = [
   }
 ]
 
-export const Primary = () => (
+const manyOptions = [
+  {
+    text: "Option 1",
+    value: "1"
+  },
+  {
+    text: "Option 2",
+    value: "2"
+  },
+  {
+    text: "Option 3",
+    value: "3"
+  },
+  {
+    text: "Option 4",
+    value: "4"
+  },
+  {
+    text: "Option 5",
+    value: "5"
+  },
+  {
+    text: "Option 6",
+    value: "6"
+  },
+  {
+    text: "Option 7",
+    value: "7"
+  },
+  {
+    text: "Option 8",
+    value: "8"
+  },
+  {
+    text: "Option 9",
+    value: "9"
+  },
+  {
+    text: "Option 10",
+    value: "10"
+  }
+]
+
+export const Default = () => (
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
     <Dropdown label="Label" options={options} />
   </div>
 )
 
-export const PrimaryWithValue = () => (
+export const DefaultWithValue = () => (
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
     <Dropdown label="Label" options={options} value={options[1].value} />
   </div>
 )
 
-export const PrimaryFocus = () => (
+export const DefaultFocus = () => (
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
     <Dropdown label="Label" options={options} focus={true} />
   </div>
 )
 
-export const PrimaryError = () => (
+export const DefaultError = () => (
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
     <Dropdown label="Label" options={options} error={true} />
   </div>
 )
+
+export const DefaultWithManyOptions = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <Dropdown label="Label" options={manyOptions} />
+  </div>
+)