GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 11:11:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adjust Tab component to match previous Stories

Browse Source
This commit is contained in:
Valentin Palkovic 2023-01-27 12:04:26 +01:00
parent b0f4a8fc0e
commit 12f7fedf77
2 changed files with 49 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
code/ui/components/src/bar/bar.tsx
View File

@ -7,6 +7,7 @@ import { ScrollArea } from '../ScrollArea/ScrollArea';
export interface SideProps { export interface SideProps {
left?: boolean; left?: boolean;
right?: boolean; right?: boolean;
scrollable?: boolean;
} }
export const Side = styled.div<SideProps>( export const Side = styled.div<SideProps>(
@ -14,10 +15,10 @@ export const Side = styled.div<SideProps>(
display: 'flex', display: 'flex',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
flexBasis: 'auto', flexBasis: 'auto',
flexShrink: 0,
marginLeft: 3, marginLeft: 3,
marginRight: 3, marginRight: 3,
}, },
({ scrollable }) => (scrollable ? { flexShrink: 0 } : {}),
({ left }) => ({ left }) =>
left left
? { ? {
@ -38,18 +39,25 @@ export const Side = styled.div<SideProps>(
); );
Side.displayName = 'Side'; Side.displayName = 'Side';
const UnstyledBar: FC<ComponentProps<typeof ScrollArea>> = ({ children, className }) => ( const UnstyledBar: FC<ComponentProps<typeof ScrollArea> & { scrollable?: boolean }> = ({
<ScrollArea horizontal vertical={false} className={className}> children,
className,
scrollable,
}) =>
scrollable ? (
<ScrollArea vertical={false} className={className}>
{children} {children}
</ScrollArea> </ScrollArea>
) : (
<div className={className}>{children}</div>
); );
export const Bar = styled(UnstyledBar)<{ border?: boolean }>( export const Bar = styled(UnstyledBar)<{ border?: boolean; scrollable?: boolean }>(
({ theme }) => ({ ({ theme, scrollable = true }) => ({
color: theme.barTextColor, color: theme.barTextColor,
width: '100%', width: '100%',
height: 40, height: 40,
flexShrink: 0, flexShrink: 0,
overflow: 'auto', overflow: scrollable ? 'auto' : 'hidden',
overflowY: 'hidden', overflowY: 'hidden',
}), }),
({ theme, border = false }) => ({ theme, border = false }) =>
@ -72,9 +80,8 @@ const BarInner = styled.div<{ bgColor: string }>(({ bgColor }) => ({
backgroundColor: bgColor || '', backgroundColor: bgColor || '',
})); }));
export interface FlexBarProps { export interface FlexBarProps extends ComponentProps<typeof Bar> {
border?: boolean; border?: boolean;
children?: any;
backgroundColor?: string; backgroundColor?: string;
} }
@ -83,7 +90,9 @@ export const FlexBar: FC<FlexBarProps> = ({ children, backgroundColor, ...rest }
return ( return (
<Bar {...rest}> <Bar {...rest}>
<BarInner bgColor={backgroundColor}> <BarInner bgColor={backgroundColor}>
<Side left>{left}</Side> <Side scrollable={rest.scrollable} left>
{left}
</Side>
{right ? <Side right>{right}</Side> : null} {right ? <Side right>{right}</Side> : null}
</BarInner> </BarInner>
</Bar> </Bar>

25
code/ui/components/src/tabs/tabs.tsx
View File

@ -5,7 +5,7 @@ import { sanitize } from '@storybook/csf';
import { Placeholder } from '../placeholder/placeholder'; import { Placeholder } from '../placeholder/placeholder';
import { TabButton } from '../bar/button'; import { TabButton } from '../bar/button';
import { Side } from '../bar/bar'; import { FlexBar, Side } from '../bar/bar';
import type { ChildrenList } from './tabs.helpers'; import type { ChildrenList } from './tabs.helpers';
import { childrenToList, VisuallyHidden } from './tabs.helpers'; import { childrenToList, VisuallyHidden } from './tabs.helpers';
import { useList } from './tabs.hooks'; 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({ export const TabBar = styled.div({
overflow: 'hidden', overflow: 'hidden',
@ -60,12 +51,6 @@ export const TabBar = styled.div({
flexGrow: 1, flexGrow: 1,
}); });
const TabBarSide = styled(Side)({
flexGrow: 1,
flexShrink: 1,
maxWidth: '100%',
});
TabBar.displayName = 'TabBar'; TabBar.displayName = 'TabBar';
export interface ContentProps { export interface ContentProps {
@ -159,9 +144,8 @@ export const Tabs: FC<TabsProps> = memo(
return list.length ? ( return list.length ? (
<Wrapper absolute={absolute} bordered={bordered} id={htmlId}> <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
<WrapperChildren backgroundColor={backgroundColor}> <FlexBar scrollable={false} border backgroundColor={backgroundColor}>
<TabBarSide left> <TabBar style={{ whiteSpace: 'normal' }} ref={tabBarRef} role="tablist">
<TabBar ref={tabBarRef} role="tablist">
{visibleList.map(({ title, id, active, color }) => { {visibleList.map(({ title, id, active, color }) => {
return ( return (
<TabButton <TabButton
@ -186,9 +170,8 @@ export const Tabs: FC<TabsProps> = memo(
})} })}
<AddonTab menuName={menuName} actions={actions} /> <AddonTab menuName={menuName} actions={actions} />
</TabBar> </TabBar>
</TabBarSide>
{tools ? <Side right>{tools}</Side> : null} {tools ? <Side right>{tools}</Side> : null}
</WrapperChildren> </FlexBar>
<Content id="panel-tab-content" bordered={bordered} absolute={absolute}> <Content id="panel-tab-content" bordered={bordered} absolute={absolute}>
{list.map(({ id, active, render }) => render({ key: id, active }))} {list.map(({ id, active, render }) => render({ key: id, active }))}
</Content> </Content>