Update story

Author: TylerJDev

packages/react/src/ActionBar/ActionBar.examples.stories.tsx

@@ -43,12 +43,11 @@ export const Groups = () => (
       <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
       <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
     </ActionBar.Group>
-    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
     <ActionBar.Group label="Lists">
       <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
       <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
-      <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
     </ActionBar.Group>
+    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ReplyIcon} aria-label="Saved Replies"></ActionBar.IconButton>
   </ActionBar>
 )

packages/react/src/ActionBar/ActionBar.module.css

@@ -33,3 +33,7 @@
     background: var(--borderColor-muted);
   }
 }
+
+.Group {
+  display: flex;
+}

packages/react/src/ActionBar/ActionBar.tsx

@@ -413,7 +413,9 @@ export const ActionBarGroup = forwardRef(
 
     return (
       <ActionBarGroupContext.Provider value={{groupId: id, label}}>
-        <div ref={ref}>{children}</div>
+        <div className={styles.Group} ref={ref}>
+          {children}
+        </div>
       </ActionBarGroupContext.Provider>
     )
   },