Skip to content

Commit

Permalink
Merge pull request #26527 from storybookjs/valentin/fix-theming-for-b…
Browse files Browse the repository at this point in the history
…ar-areas

UI: Fix theming of elements inside bars
  • Loading branch information
valentinpalkovic authored Mar 18, 2024
2 parents b016a4f + a76f857 commit 3e0de54
Showing 10 changed files with 48 additions and 13 deletions.
2 changes: 1 addition & 1 deletion code/lib/theming/src/themes/dark.ts
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ const theme: ThemeVars = {
textMutedColor: '#798186',

// Toolbar default and active colors
barTextColor: '#798186',
barTextColor: color.mediumdark,
barHoverColor: color.secondary,
barSelectedColor: color.secondary,
barBg: '#292C2E',
1 change: 0 additions & 1 deletion code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
Original file line number Diff line number Diff line change
@@ -166,7 +166,6 @@ export const TableWrapper = styled.table<{
}));

const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
color: theme.barTextColor,
margin: '-4px -12px -4px 0',
}));

30 changes: 30 additions & 0 deletions code/ui/components/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -170,6 +170,36 @@ const StyledButton = styled('button', {
if (variant === 'ghost' && active) return theme.background.hoverable;
return 'transparent';
})(),
...(variant === 'ghost'
? {
// This is a hack to apply bar styles to the button as soon as it is part of a bar
// It is a temporary solution until we have implemented Theming 2.0.
'.sb-bar &': {
background: (() => {
if (active) return transparentize(0.9, theme.barTextColor);
return 'transparent';
})(),
color: (() => {
if (active) return theme.barSelectedColor;
return theme.barTextColor;
})(),
'&:hover': {
color: theme.barHoverColor,
background: transparentize(0.86, theme.barHoverColor),
},

'&:active': {
color: theme.barSelectedColor,
background: transparentize(0.9, theme.barSelectedColor),
},

'&:focus': {
boxShadow: `${rgba(theme.barHoverColor, 1)} 0 0 0 1px inset`,
outline: 'none',
},
},
}
: {}),
color: (() => {
if (variant === 'solid') return theme.color.lightest;
if (variant === 'outline') return theme.input.color;
4 changes: 2 additions & 2 deletions code/ui/components/src/components/bar/bar.tsx
Original file line number Diff line number Diff line change
@@ -93,10 +93,10 @@ export interface FlexBarProps extends ComponentProps<typeof Bar> {
backgroundColor?: string;
}

export const FlexBar = ({ children, backgroundColor, ...rest }: FlexBarProps) => {
export const FlexBar = ({ children, backgroundColor, className, ...rest }: FlexBarProps) => {
const [left, right] = Children.toArray(children);
return (
<Bar {...rest}>
<Bar className={`sb-bar ${className}`} {...rest}>
<BarInner bgColor={backgroundColor}>
<Side scrollable={rest.scrollable} left>
{left}
5 changes: 4 additions & 1 deletion code/ui/components/src/components/bar/button.tsx
Original file line number Diff line number Diff line change
@@ -108,7 +108,7 @@ export const TabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid }

'&:focus': {
outline: '0 none',
borderBottomColor: theme.color.secondary,
borderBottomColor: theme.barSelectedColor,
},
}),
({ active, textColor, theme }) =>
@@ -120,6 +120,9 @@ export const TabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid }
: {
color: textColor || theme.barTextColor,
borderBottomColor: 'transparent',
'&:hover': {
color: theme.barHoverColor,
},
}
);
TabButton.displayName = 'TabButton';
9 changes: 6 additions & 3 deletions code/ui/components/src/components/tabs/tabs.hooks.tsx
Original file line number Diff line number Diff line change
@@ -22,11 +22,14 @@ const CollapseIcon = styled.span<{ isActive: boolean }>(({ theme, isActive }) =>

const AddonButton = styled(TabButton)<{ preActive: boolean }>(({ active, theme, preActive }) => {
return `
color: ${preActive || active ? theme.color.secondary : theme.color.mediumdark};
color: ${preActive || active ? theme.barSelectedColor : theme.barTextColor};
.addon-collapsible-icon {
color: ${preActive || active ? theme.barSelectedColor : theme.barTextColor};
}
&:hover {
color: ${theme.color.secondary};
color: ${theme.barHoverColor};
.addon-collapsible-icon {
color: ${theme.color.secondary};
color: ${theme.barHoverColor};
}
}
`;
Original file line number Diff line number Diff line change
@@ -45,7 +45,7 @@ export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showP
{isMobilePanelOpen ? (
<MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
) : (
<Nav>
<Nav className="sb-bar">
<Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu">
<MenuIcon />
<Text>{fullStoryName}</Text>
@@ -84,7 +84,7 @@ const Button = styled.button(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: 10,
color: theme.color.mediumdark,
color: theme.barTextColor,
fontSize: `${theme.typography.size.s2 - 1}px`,
padding: '0 7px',
fontWeight: theme.typography.weight.bold,
2 changes: 1 addition & 1 deletion code/ui/manager/src/components/preview/Toolbar.tsx
Original file line number Diff line number Diff line change
@@ -135,7 +135,7 @@ export const ToolbarComp = React.memo<ToolData>(function ToolbarComp({
api,
}) {
return tabs || tools || toolsExtra ? (
<Toolbar key="toolbar" shown={isShown} data-test-id="sb-preview-toolbar">
<Toolbar className="sb-bar" key="toolbar" shown={isShown} data-test-id="sb-preview-toolbar">
<ToolbarInner>
<ToolbarLeft>
{tabs.length > 1 ? (
2 changes: 1 addition & 1 deletion code/ui/manager/src/components/sidebar/Sidebar.tsx
Original file line number Diff line number Diff line change
@@ -183,7 +183,7 @@ export const Sidebar = React.memo(function Sidebar({
</Top>
</ScrollArea>
{isLoading ? null : (
<Bottom>
<Bottom className="sb-bar">
{bottom.map(({ id, render: Render }) => (
<Render key={id} />
))}
2 changes: 1 addition & 1 deletion code/ui/manager/src/settings/index.tsx
Original file line number Diff line number Diff line change
@@ -80,7 +80,7 @@ const Pages: FC<{

return (
<Fragment>
<Header>
<Header className="sb-bar">
<TabBar role="tablist">
<TabBarButton id="about" title="About" changeTab={changeTab} />
{enableWhatsNew && (

0 comments on commit 3e0de54

Please sign in to comment.