Merge pull request #25396 from storybookjs/charles-fix-pages-layout

UI: Fix about page layout

code/ui/manager/src/components/sidebar/Menu.stories.tsx

@@ -8,7 +8,7 @@ import { styled } from '@storybook/theming';
 import { screen, userEvent, within } from '@storybook/testing-library';
 import type { State } from '@storybook/manager-api';
 import { LinkIcon } from '@storybook/icons';
-import { SidebarMenu, ToolbarMenu } from './Menu';
+import { SidebarMenu } from './Menu';
 import { useMenu } from '../../container/Menu';
 import { LayoutProvider } from '../layout/LayoutProvider';
 
@@ -34,11 +34,10 @@ export const Items: Story = {
 };
 
 export const Real: Story = {
-  render: () => <SidebarMenu menu={fakemenu} isHighlighted />,
-};
-
-export const Toolbar = {
-  render: () => <ToolbarMenu menu={fakemenu} />,
+  args: {
+    isHighlighted: true,
+  },
+  render: (args) => <SidebarMenu menu={fakemenu} {...args} />,
 };
 
 const DoubleThemeRenderingHack = styled.div({

code/ui/manager/src/components/sidebar/Menu.tsx

@@ -5,7 +5,7 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import type { Button, TooltipLinkListLink } from '@storybook/components';
 import { WithTooltip, TooltipLinkList, Icons, IconButton } from '@storybook/components';
-import { CloseIcon, CogIcon, MenuIcon } from '@storybook/icons';
+import { CloseIcon, CogIcon } from '@storybook/icons';
 import { useLayout } from '../layout/LayoutProvider';
 
 export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
@@ -22,48 +22,42 @@ const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({
   color: theme.color.secondary,
 }));
 
-export const SidebarIconButton: FC<
-  ComponentProps<typeof Button> & { highlighted: boolean; active: boolean }
-> = styled(IconButton)<
-  ComponentProps<typeof Button> & {
-    highlighted: boolean;
-    active: boolean;
-  }
->(({ highlighted, active, theme }) => ({
-  position: 'relative',
-  overflow: 'visible',
-  color: theme.textMutedColor,
-  marginTop: 0,
-  zIndex: 1,
-
-  ...(highlighted && {
-    '&:before, &:after': {
-      content: '""',
-      position: 'absolute',
-      top: 6,
-      right: 6,
-      width: 5,
-      height: 5,
-      zIndex: 2,
-      borderRadius: '50%',
-      background: theme.background.app,
-      border: `1px solid ${theme.background.app}`,
-      boxShadow: `0 0 0 2px ${theme.background.app}`,
-    },
-    '&:after': {
-      background: theme.color.positive,
-      border: `1px solid rgba(0, 0, 0, 0.1)`,
-      boxShadow: `0 0 0 2px ${theme.background.app}`,
-    },
-
-    '&:hover:after, &:focus-visible:after': {
-      boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`,
-    },
-  }),
-  ...(active && {
-    color: theme.color.secondary,
-  }),
-}));
+export const SidebarIconButton: FC<ComponentProps<typeof Button> & { highlighted: boolean }> =
+  styled(IconButton)<
+    ComponentProps<typeof Button> & {
+      highlighted: boolean;
+    }
+  >(({ highlighted, theme }) => ({
+    position: 'relative',
+    overflow: 'visible',
+    marginTop: 0,
+    zIndex: 1,
+
+    ...(highlighted && {
+      '&:before, &:after': {
+        content: '""',
+        position: 'absolute',
+        top: 6,
+        right: 6,
+        width: 5,
+        height: 5,
+        zIndex: 2,
+        borderRadius: '50%',
+        background: theme.background.app,
+        border: `1px solid ${theme.background.app}`,
+        boxShadow: `0 0 0 2px ${theme.background.app}`,
+      },
+      '&:after': {
+        background: theme.color.positive,
+        border: `1px solid rgba(0, 0, 0, 0.1)`,
+        boxShadow: `0 0 0 2px ${theme.background.app}`,
+      },
+
+      '&:hover:after, &:focus-visible:after': {
+        boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`,
+      },
+    }),
+  }));
 
 const MenuButtonGroup = styled.div({
   display: 'flex',
@@ -134,13 +128,13 @@ export const SidebarMenu: FC<SidebarMenuProps> = ({ menu, isHighlighted, onClick
         >
           <CogIcon />
         </SidebarIconButton>
-        <CloseIconButton
+        <IconButton
           title="Close menu"
           aria-label="Close menu"
           onClick={() => setMobileMenuOpen(false)}
         >
           <CloseIcon />
-        </CloseIconButton>
+        </IconButton>
       </MenuButtonGroup>
     );
   }
@@ -163,33 +157,3 @@ export const SidebarMenu: FC<SidebarMenuProps> = ({ menu, isHighlighted, onClick
     </WithTooltip>
   );
 };
-
-export const ToolbarMenu: FC<{
-  menu: MenuList;
-}> = ({ menu }) => {
-  return (
-    <WithTooltip
-      placement="bottom"
-      closeOnOutsideClick
-      modifiers={[
-        {
-          name: 'flip',
-          options: {
-            allowedAutoPlacements: [],
-          },
-        },
-      ]}
-      tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
-    >
-      <IconButton title="Shortcuts" aria-label="Shortcuts">
-        <MenuIcon />
-      </IconButton>
-    </WithTooltip>
-  );
-};
-
-// We should not have to reset the margin-top here
-// TODO: remove this once we have a the new IconButton component
-const CloseIconButton = styled(IconButton)({
-  marginTop: 0,
-});

code/ui/manager/src/settings/About.tsx

@@ -2,15 +2,19 @@ import type { FC } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 
-import { Button as BaseButton, Link, StorybookIcon } from '@storybook/components';
+import { Button, Link, StorybookLogo } from '@storybook/components';
 import { DocumentIcon, GithubIcon } from '@storybook/icons';
 import { UpgradeBlock } from '../components/upgrade/UpgradeBlock';
 
-const Header = styled.header(({ theme }) => ({
+const Container = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  marginTop: 40,
+});
+
+const Header = styled.header({
   marginBottom: 32,
-  fontSize: theme.typography.size.l2,
-  color: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
-  fontWeight: theme.typography.weight.bold,
   alignItems: 'center',
   display: 'flex',
 
@@ -19,14 +23,6 @@ const Header = styled.header(({ theme }) => ({
     width: 'auto',
     marginRight: 8,
   },
-}));
-
-const Container = styled.div({
-  display: `flex`,
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: 'calc(100% - 40px)',
-  flexDirection: 'column',
 });
 
 const Footer = styled.div(({ theme }) => ({
@@ -39,18 +35,14 @@ const Footer = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2,
 }));
 
-const SquareButton = styled(BaseButton)(({ theme }) => ({
-  '&&': {
-    borderRadius: 4,
-    fontSize: '13px',
-    lineHeight: '14px',
-    color: theme.base === 'light' ? theme.color.darker : theme.color.lightest,
-    padding: '9px 12px',
-    svg: {
-      marginRight: 6,
-    },
-  },
-}));
+const Actions = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  marginBottom: 24,
+  marginTop: 24,
+  gap: 16,
+});
 
 const StyledLink = styled(Link as any)(({ theme }) => ({
   '&&': {
@@ -65,28 +57,25 @@ const StyledLink = styled(Link as any)(({ theme }) => ({
 const AboutScreen: FC<{ onNavigateToWhatsNew?: () => void }> = ({ onNavigateToWhatsNew }) => {
   return (
     <Container>
-      <div style={{ flex: '1' }} />
       <Header>
-        <StorybookIcon /> Storybook
+        <StorybookLogo alt="Storybook" />
       </Header>
       <UpgradeBlock onNavigateToWhatsNew={onNavigateToWhatsNew} />
-      <div style={{ flex: '1.2' }} />
       <Footer>
-        <div style={{ marginBottom: 12 }}>
-          <SquareButton asChild style={{ marginRight: 12 }}>
+        <Actions>
+          <Button asChild>
             <a href="https://github.com/storybookjs/storybook">
               <GithubIcon />
               GitHub
             </a>
-          </SquareButton>
-
-          <SquareButton asChild>
+          </Button>
+          <Button asChild>
             <a href="https://storybook.js.org/docs">
               <DocumentIcon style={{ display: 'inline', marginRight: 5 }} />
               Documentation
             </a>
-          </SquareButton>
-        </div>
+          </Button>
+        </Actions>
         <div>
           Open source software maintained by{' '}
           <StyledLink href="https://www.chromatic.com/">Chromatic</StyledLink> and the{' '}

code/ui/manager/src/settings/index.tsx

@@ -1,5 +1,5 @@
 import { useStorybookApi, useStorybookState, types } from '@storybook/manager-api';
-import { IconButton, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components';
+import { IconButton, TabBar, TabButton, ScrollArea } from '@storybook/components';
 import { Location, Route } from '@storybook/router';
 import { styled } from '@storybook/theming';
 import { global } from '@storybook/global';
@@ -15,6 +15,16 @@ import { matchesModifiers, matchesKeyCode } from '../keybinding';
 
 const { document } = global;
 
+const Header = styled.div(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: 40,
+  boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
+  background: theme.barBg,
+  paddingRight: 8,
+}));
+
 const TabBarButton = React.memo(function TabBarButton({
   changeTab,
   id,
@@ -70,7 +80,7 @@ const Pages: FC<{
 
   return (
     <Fragment>
-      <FlexBar border>
+      <Header>
         <TabBar role="tablist">
           <TabBarButton id="about" title="About" changeTab={changeTab} />
           {enableWhatsNew && (
@@ -87,7 +97,7 @@ const Pages: FC<{
         >
           <CloseIcon />
         </IconButton>
-      </FlexBar>
+      </Header>
       <Content vertical horizontal={false}>
         <Route path="about">
           <AboutPage key="about" />

code/ui/manager/src/settings/whats_new.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from 'react';
 import React, { Fragment, useEffect, useState } from 'react';
 import { styled, useTheme } from '@storybook/theming';
-import { Button, IconButton, Loader } from '@storybook/components';
+import { Button, Loader } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { global } from '@storybook/global';
 import { EyeCloseIcon, EyeIcon, HeartIcon, AlertIcon as AlertIconSvg } from '@storybook/icons';
@@ -42,22 +42,6 @@ const Container = styled.div(({ theme }) => ({
   justifyContent: 'space-between',
 }));
 
-const ToggleNotificationButton = styled(IconButton)(({ theme }) => ({
-  fontWeight: theme.typography.weight.regular,
-  color: theme.color.mediumdark,
-  margin: 0,
-}));
-
-const CopyButton = styled(Button)(({ theme }) => ({
-  '&&': {
-    fontSize: `13px`,
-    color: theme.color.defaultText,
-    margin: 0,
-    padding: 0,
-    borderRadius: 0,
-  },
-}));
-
 export const WhatsNewFooter = ({
   isNotificationsEnabled,
   onToggleNotifications,
@@ -80,23 +64,21 @@ export const WhatsNewFooter = ({
       <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
         <HeartIcon color={theme.color.mediumdark} />
         <div>Share this with your team.</div>
-        <CopyButton onClick={copyLink} small>
+        <Button onClick={copyLink} size="small" variant="ghost">
           {copyText}
-        </CopyButton>
+        </Button>
       </div>
-      <ToggleNotificationButton onClick={onToggleNotifications}>
-        {isNotificationsEnabled ? (
-          <>
-            <EyeCloseIcon />
-            &nbsp;Hide notifications
-          </>
-        ) : (
-          <>
-            <EyeIcon />
-            &nbsp;Show notifications
-          </>
-        )}
-      </ToggleNotificationButton>
+      {isNotificationsEnabled ? (
+        <Button size="small" variant="ghost" onClick={onToggleNotifications}>
+          <EyeCloseIcon />
+          Hide notifications
+        </Button>
+      ) : (
+        <Button size="small" variant="ghost" onClick={onToggleNotifications}>
+          <EyeIcon />
+          Show notifications
+        </Button>
+      )}
     </Container>
   );
 };