✨ more

getsentry · Nov 7, 2024 · 4d996c9 · 4d996c9
1 parent e2f5470
commit 4d996c9
Showing 1 changed file with 24 additions and 5 deletions.
diff --git a/static/app/components/compactSelect/composite.stories.tsx b/static/app/components/compactSelect/composite.stories.tsx
@@ -107,9 +107,7 @@ export default storyBook(CompositeSelect, story => {
             aria-label={'Cool'}
             multiple
             value={adjectives}
-            onChange={selection => {
-              setAdjectives(selection.map(s => s.value));
-            }}
+            onChange={selection => setAdjectives(selection.map(s => s.value))}
             options={ADJ_OPTIONS}
           />
         </CompositeSelect>
@@ -125,6 +123,7 @@ export default storyBook(CompositeSelect, story => {
     const [main, setMain] = useState<string>('pasta');
     const [side, setSide] = useState<string>('salad');
     const [drink, setDrink] = useState<string>('matcha');
+    const [drinks, setDrinks] = useState<string[]>(['matcha', 'tea']);
 
     return (
       <Fragment>
@@ -142,7 +141,7 @@ export default storyBook(CompositeSelect, story => {
                 size="sm"
                 icon={<IconSentry />}
               >
-                Composite Select Menu
+                Composite Select Single Select
               </Button>
             )}
           >
@@ -168,7 +167,7 @@ export default storyBook(CompositeSelect, story => {
                 size="sm"
                 icon={<IconStar />}
               >
-                Compact Select Menu
+                Compact Select Single Select
               </Button>
             )}
             value={drink}
@@ -178,6 +177,26 @@ export default storyBook(CompositeSelect, story => {
               {key: 'nondairy', label: 'Dairy Free Options', options: DAIRY_FREE_OPTIONS},
             ]}
           />
+
+          <CompactSelect
+            multiple
+            trigger={triggerProps => (
+              <Button
+                {...triggerProps}
+                aria-label={'Compact Select'}
+                size="sm"
+                icon={<IconStar />}
+              >
+                Compact Select Multiple Select
+              </Button>
+            )}
+            value={drinks}
+            onChange={selection => setDrinks(selection.map(s => s.value))}
+            options={[
+              {key: 'dairy', label: 'Dairy', options: DAIRY_OPTIONS},
+              {key: 'nondairy', label: 'Dairy Free Options', options: DAIRY_FREE_OPTIONS},
+            ]}
+          />
         </Flex>
       </Fragment>
     );