Merge pull request #20783 from storybookjs/valentin/ui-improvements

Tab UI Improvements

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -141,7 +141,7 @@ export const VisionSimulator = () => {
           });
           return <TooltipLinkList links={colorList} />;
         }}
-        closeOnClick
+        closeOnOutsideClick
         onDoubleClick={() => setFilter(null)}
       >
         <IconButton key="filter" active={!!filter} title="Vision simulator">

code/addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -117,7 +117,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
       <WithTooltip
         placement="top"
         trigger="click"
-        closeOnClick
+        closeOnOutsideClick
         tooltip={({ onHide }) => {
           return (
             <TooltipLinkList

code/addons/toolbars/src/components/ToolbarMenuList.tsx

@@ -84,7 +84,7 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
             });
           return <TooltipLinkList links={links} />;
         }}
-        closeOnClick
+        closeOnOutsideClick
       >
         <ToolbarMenuButton
           active={hasGlobalValue}

code/addons/viewport/src/Tool.tsx

@@ -184,7 +184,7 @@ export const ViewportTool: FC = memo(
           tooltip={({ onHide }) => (
             <TooltipLinkList links={toLinks(list, item, setState, state, onHide)} />
           )}
-          closeOnClick
+          closeOnOutsideClick
         >
           <IconButtonWithLabel
             key="viewport"

code/e2e-tests/addon-backgrounds.spec.ts

@@ -14,7 +14,7 @@ test.describe('addon-backgrounds', () => {
     const sbPage = new SbPage(page);
 
     await sbPage.navigateToStory('example/button', 'primary');
-    await sbPage.selectToolbar('[title="Change the background of the preview"]', '#dark');
+    await sbPage.selectToolbar('[title="Change the background of the preview"]', '#list-item-dark');
 
     await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-color', 'rgb(51, 51, 51)');
   });

code/e2e-tests/addon-viewport.spec.ts

@@ -15,7 +15,7 @@ test.describe('addon-viewport', () => {
 
     // Click on viewport button and select small mobile
     await sbPage.navigateToStory('example/button', 'primary');
-    await sbPage.selectToolbar('[title="Change the size of the preview"]', '#mobile1');
+    await sbPage.selectToolbar('[title="Change the size of the preview"]', '#list-item-mobile1');
 
     // Check that Button story is still displayed
     await expect(sbPage.previewRoot()).toContainText('Button');

code/ui/blocks/src/components/ArgsTable/ArgValue.tsx

@@ -160,11 +160,11 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
 
   return (
     <WithTooltipPure
-      closeOnClick
+      closeOnOutsideClick
       trigger="click"
       placement="bottom"
-      tooltipShown={isOpen}
-      onVisibilityChange={(isVisible) => {
+      visible={isOpen}
+      onVisibleChange={(isVisible) => {
         setIsOpen(isVisible);
       }}
       tooltip={

code/ui/blocks/src/controls/Color.tsx

@@ -322,8 +322,8 @@ export const ColorControl: FC<ColorControlProps> = ({
       <PickerTooltip
         trigger="click"
         startOpen={startOpen}
-        closeOnClick
-        onVisibilityChange={() => addPreset(color)}
+        closeOnOutsideClick
+        onVisibleChange={() => addPreset(color)}
         tooltip={
           <TooltipContent>
             <Picker

code/ui/components/package.json

@@ -54,6 +54,7 @@
     "@storybook/theming": "7.0.0-beta.41",
     "@storybook/types": "7.0.0-beta.41",
     "memoizerific": "^1.11.3",
+    "use-resize-observer": "^9.1.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {

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;
 }
 
-const Side = styled.div<SideProps>(
+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 @@ 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>

code/ui/components/src/bar/button.tsx

@@ -7,20 +7,34 @@ import { auto } from '@popperjs/core';
 interface BarButtonProps
   extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   href?: void;
+  target?: void;
 }
 interface BarLinkProps
   extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+  disabled?: void;
   href: string;
 }
 
-const ButtonOrLink = ({ children, ...restProps }: BarButtonProps | BarLinkProps) =>
-  restProps.href != null ? (
-    <a {...(restProps as BarLinkProps)}>{children}</a>
+const ButtonOrLink = React.forwardRef<
+  HTMLAnchorElement | HTMLButtonElement,
+  BarLinkProps | BarButtonProps
+>(({ children, ...restProps }, ref) => {
+  return restProps.href != null ? (
+    <a ref={ref as React.ForwardedRef<HTMLAnchorElement>} {...(restProps as BarLinkProps)}>
+      {children}
+    </a>
   ) : (
-    <button type="button" {...(restProps as BarButtonProps)}>
+    <button
+      ref={ref as React.ForwardedRef<HTMLButtonElement>}
+      type="button"
+      {...(restProps as BarButtonProps)}
+    >
       {children}
     </button>
   );
+});
+
+ButtonOrLink.displayName = 'ButtonOrLink';
 
 export interface TabButtonProps {
   active?: boolean;

code/ui/components/src/tabs/tabs.helpers.tsx

@@ -0,0 +1,34 @@
+import { styled } from '@storybook/theming';
+import type { ReactElement } from 'react';
+import React, { Children } from 'react';
+
+export interface VisuallyHiddenProps {
+  active?: boolean;
+}
+
+export const VisuallyHidden = styled.div<VisuallyHiddenProps>(({ active }) =>
+  active ? { display: 'block' } : { display: 'none' }
+);
+
+export const childrenToList = (children: any, selected: string) =>
+  Children.toArray(children).map(
+    ({ props: { title, id, color, children: childrenOfChild } }: ReactElement, index) => {
+      const content = Array.isArray(childrenOfChild) ? childrenOfChild[0] : childrenOfChild;
+      return {
+        active: selected ? id === selected : index === 0,
+        title,
+        id,
+        color,
+        render:
+          typeof content === 'function'
+            ? content
+            : ({ active, key }: any) => (
+                <VisuallyHidden key={key} active={active} role="tabpanel">
+                  {content}
+                </VisuallyHidden>
+              ),
+      };
+    }
+  );
+
+export type ChildrenList = ReturnType<typeof childrenToList>;