Replace inline styling with a css rule in storybook

radix-ui · Nov 28, 2024 · 7ea9248 · 7ea9248
1 parent 447c15d
commit 7ea9248
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/react/menu/src/Menu.stories.tsx b/packages/react/menu/src/Menu.stories.tsx
@@ -74,7 +74,7 @@ export const Submenus = () => {
           Scrollable
         </label>
       </div>
-      <MenuWithAnchor style={scrollable ? { overflow: 'scroll', height: 100 } : undefined}>
+      <MenuWithAnchor className={scrollable ? scrollableMenuClass() : undefined}>
         <Menu.Item className={itemClass()} onSelect={() => window.alert('undo')}>
           Undo
         </Menu.Item>
@@ -520,6 +520,11 @@ const animatedItemIndicatorClass = css({
   },
 });
 
+const scrollableMenuClass = css({
+  overflow: 'scroll',
+  height: 100,
+});
+
 export const TickIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -542,4 +547,5 @@ export const classes = {
   itemClass,
   separatorClass,
   subTriggerClass,
+  scrollableMenuClass,
 };