Adjust Tab component to match previous Stories

storybookjs · Jan 30, 2023 · dd4904d · dd4904d
1 parent b3b932a
commit dd4904d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 57 deletions.
diff --git a/code/ui/components/src/bar/bar.tsx b/code/ui/components/src/bar/bar.tsx
@@ -7,17 +7,18 @@ import { ScrollArea } from '../ScrollArea/ScrollArea';
 export interface SideProps {
   left?: boolean;
   right?: boolean;
+  scrollable?: boolean;
 }
 
 export const Side = styled.div<SideProps>(
   {
     display: 'flex',
     whiteSpace: 'nowrap',
     flexBasis: 'auto',
-    flexShrink: 0,
     marginLeft: 3,
     marginRight: 3,
   },
+  ({ scrollable }) => (scrollable ? { flexShrink: 0 } : {}),
   ({ left }) =>
     left
       ? {
@@ -38,18 +39,25 @@ export const Side = styled.div<SideProps>(
 );
 Side.displayName = 'Side';
 
-const UnstyledBar: FC<ComponentProps<typeof ScrollArea>> = ({ children, className }) => (
-  <ScrollArea horizontal vertical={false} className={className}>
-    {children}
-  </ScrollArea>
-);
-export const Bar = styled(UnstyledBar)<{ border?: boolean }>(
-  ({ theme }) => ({
+const UnstyledBar: FC<ComponentProps<typeof ScrollArea> & { scrollable?: boolean }> = ({
+  children,
+  className,
+  scrollable,
+}) =>
+  scrollable ? (
+    <ScrollArea vertical={false} className={className}>
+      {children}
+    </ScrollArea>
+  ) : (
+    <div className={className}>{children}</div>
+  );
+export const Bar = styled(UnstyledBar)<{ border?: boolean; scrollable?: boolean }>(
+  ({ theme, scrollable = true }) => ({
     color: theme.barTextColor,
     width: '100%',
     height: 40,
     flexShrink: 0,
-    overflow: 'auto',
+    overflow: scrollable ? 'auto' : 'hidden',
     overflowY: 'hidden',
   }),
   ({ theme, border = false }) =>
@@ -72,9 +80,8 @@ const BarInner = styled.div<{ bgColor: string }>(({ bgColor }) => ({
   backgroundColor: bgColor || '',
 }));
 
-export interface FlexBarProps {
+export interface FlexBarProps extends ComponentProps<typeof Bar> {
   border?: boolean;
-  children?: any;
   backgroundColor?: string;
 }
 
@@ -83,7 +90,9 @@ export const FlexBar: FC<FlexBarProps> = ({ children, backgroundColor, ...rest }
   return (
     <Bar {...rest}>
       <BarInner bgColor={backgroundColor}>
-        <Side left>{left}</Side>
+        <Side scrollable={rest.scrollable} left>
+          {left}
+        </Side>
         {right ? <Side right>{right}</Side> : null}
       </BarInner>
     </Bar>

diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx
@@ -5,7 +5,7 @@ import { sanitize } from '@storybook/csf';
 
 import { Placeholder } from '../placeholder/placeholder';
 import { TabButton } from '../bar/button';
-import { Side } from '../bar/bar';
+import { FlexBar, Side } from '../bar/bar';
 import type { ChildrenList } from './tabs.helpers';
 import { childrenToList, VisuallyHidden } from './tabs.helpers';
 import { useList } from './tabs.hooks';
@@ -40,15 +40,6 @@ const Wrapper = styled.div<WrapperProps>(
         }
 );
 
-const WrapperChildren = styled.div<{ backgroundColor: string }>(({ theme, backgroundColor }) => ({
-  color: theme.barTextColor,
-  display: 'flex',
-  width: '100%',
-  height: 40,
-  boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
-  background: backgroundColor ?? theme.barBg,
-}));
-
 export const TabBar = styled.div({
   overflow: 'hidden',
 
@@ -60,12 +51,6 @@ export const TabBar = styled.div({
   flexGrow: 1,
 });
 
-const TabBarSide = styled(Side)({
-  flexGrow: 1,
-  flexShrink: 1,
-  maxWidth: '100%',
-});
-
 TabBar.displayName = 'TabBar';
 
 export interface ContentProps {
@@ -159,36 +144,34 @@ export const Tabs: FC<TabsProps> = memo(
 
     return list.length ? (
       <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
-        <WrapperChildren backgroundColor={backgroundColor}>
-          <TabBarSide left>
-            <TabBar ref={tabBarRef} role="tablist">
-              {visibleList.map(({ title, id, active, color }) => {
-                return (
-                  <TabButton
-                    id={`tabbutton-${sanitize(title)}`}
-                    ref={(ref: HTMLButtonElement) => {
-                      tabRefs.current.set(id, ref);
-                    }}
-                    className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
-                    type="button"
-                    key={id}
-                    active={active}
-                    textColor={color}
-                    onClick={(e: MouseEvent) => {
-                      e.preventDefault();
-                      actions.onSelect(id);
-                    }}
-                    role="tab"
-                  >
-                    {title}
-                  </TabButton>
-                );
-              })}
-              <AddonTab menuName={menuName} actions={actions} />
-            </TabBar>
-          </TabBarSide>
+        <FlexBar scrollable={false} border backgroundColor={backgroundColor}>
+          <TabBar style={{ whiteSpace: 'normal' }} ref={tabBarRef} role="tablist">
+            {visibleList.map(({ title, id, active, color }) => {
+              return (
+                <TabButton
+                  id={`tabbutton-${sanitize(title)}`}
+                  ref={(ref: HTMLButtonElement) => {
+                    tabRefs.current.set(id, ref);
+                  }}
+                  className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
+                  type="button"
+                  key={id}
+                  active={active}
+                  textColor={color}
+                  onClick={(e: MouseEvent) => {
+                    e.preventDefault();
+                    actions.onSelect(id);
+                  }}
+                  role="tab"
+                >
+                  {title}
+                </TabButton>
+              );
+            })}
+            <AddonTab menuName={menuName} actions={actions} />
+          </TabBar>
           {tools ? <Side right>{tools}</Side> : null}
-        </WrapperChildren>
+        </FlexBar>
         <Content id="panel-tab-content" bordered={bordered} absolute={absolute}>
           {list.map(({ id, active, render }) => render({ key: id, active }))}
         </Content>