UI: Update sidebar status indicators and tooltips

code/addons/a11y/package.json

@@ -61,7 +61,7 @@
  },
  "devDependencies": {
  "@storybook/global": "^5.0.0",
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "@testing-library/react": "^14.0.0",
  "lodash": "^4.17.21",
  "react": "^18.2.0",

code/addons/backgrounds/package.json

@@ -61,7 +61,7 @@
  "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "typescript": "^5.3.2"

code/addons/controls/package.json

@@ -57,7 +57,7 @@
  },
  "devDependencies": {
  "@storybook/blocks": "workspace:*",
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
  },

code/addons/interactions/package.json

@@ -61,7 +61,7 @@
  },
  "devDependencies": {
  "@devtools-ds/object-inspector": "^1.1.2",
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "@types/node": "^18.0.0",
  "formik": "^2.2.9",
  "react": "^18.2.0",

code/addons/jest/package.json

@@ -59,7 +59,7 @@
  "upath": "^2.0.1"
  },
  "devDependencies": {
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-resize-detector": "^7.1.2",

code/addons/measure/package.json

@@ -72,7 +72,7 @@
  "tiny-invariant": "^1.3.1"
  },
  "devDependencies": {
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "typescript": "^5.3.2"

code/addons/onboarding/package.json

@@ -50,7 +50,7 @@
  },
  "devDependencies": {
  "@radix-ui/react-dialog": "^1.0.5",
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "@storybook/react": "workspace:*",
  "framer-motion": "^11.0.3",
  "react": "^18.2.0",

code/addons/outline/package.json

@@ -62,7 +62,7 @@
  "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "typescript": "^5.3.2"

code/addons/themes/package.json

@@ -60,7 +60,7 @@
  "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "typescript": "^5.3.2"
  },
  "peerDependencies": {

code/addons/viewport/package.json

@@ -56,7 +56,7 @@
  },
  "devDependencies": {
  "@storybook/global": "^5.0.0",
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "typescript": "^5.3.2"

code/core/package.json

@@ -287,7 +287,7 @@
  "@radix-ui/react-slot": "^1.0.2",
  "@storybook/docs-mdx": "4.0.0-next.1",
  "@storybook/global": "^5.0.0",
- "@storybook/icons": "^1.2.5",
+ "@storybook/icons": "^1.2.10",
  "@tanstack/react-virtual": "^3.3.0",
  "@testing-library/react": "^14.0.0",
  "@types/compression": "^1.7.0",

code/core/src/components/components/tooltip/ListItem.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, ComponentProps } from 'react';
+import type { ReactNode, ComponentProps, SyntheticEvent } from 'react';
 import React from 'react';
 import { styled } from '@storybook/core/theming';
 import memoize from 'memoizerific';
@@ -113,15 +113,19 @@ const Left = styled.span<LeftProps>(
 
 export interface ItemProps {
  disabled?: boolean;
+ href?: string;
+ onClick?: (event: SyntheticEvent, ...args: any[]) => any;
 }
 
-const Item = styled.a<ItemProps>(
+const Item = styled.div<ItemProps>(
  ({ theme }) => ({
+ width: '100%',
+ border: 'none',
+ background: 'none',
  fontSize: theme.typography.size.s1,
  transition: 'all 150ms ease-out',
  color: theme.color.dark,
  textDecoration: 'none',
- cursor: 'pointer',
  justifyContent: 'space-between',
 
  lineHeight: '18px',
@@ -132,43 +136,34 @@ const Item = styled.a<ItemProps>(
  '& > * + *': {
  paddingLeft: 10,
  },
-
- '&:hover': {
- background: theme.background.hoverable,
- },
- '&:hover svg': {
- opacity: 1,
- },
  }),
- ({ disabled }) =>
- disabled
- ? {
- cursor: 'not-allowed',
- }
- : {}
+ ({ theme, href, onClick }) =>
+ (href || onClick) && {
+ cursor: 'pointer',
+ '&:hover': {
+ background: theme.background.hoverable,
+ },
+ '&:hover svg': {
+ opacity: 1,
+ },
+ },
+ ({ disabled }) => disabled && { cursor: 'not-allowed' }
 );
 
-const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
- const result = {};
-
- if (onClick) {
- Object.assign(result, {
- onClick,
- });
- }
- if (href) {
- Object.assign(result, {
- href,
- });
- }
- if (LinkWrapper && href) {
- Object.assign(result, {
- to: href,
+const getItemProps = memoize(100)((onClick, href, LinkWrapper) => ({
+ ...(onClick && {
+ as: 'button',
+ onClick,
+ }),
+ ...(href && {
+ as: 'a',
+ href,
+ ...(LinkWrapper && {
  as: LinkWrapper,
- });
- }
- return result;
-});
+  to: href,
+  }),
+ }),
+}));
 
 export type LinkWrapperType = (props: any) => ReactNode;
 
@@ -200,23 +195,25 @@ const ListItem = ({
  LinkWrapper = undefined,
  ...rest
 }: ListItemProps) => {
- const itemProps = getItemProps(onClick, href, LinkWrapper);
  const commonProps = { active, disabled };
+ const itemProps = getItemProps(onClick, href, LinkWrapper);
 
  return (
- <Item {...commonProps} {...rest} {...itemProps}>
- {icon && <Left {...commonProps}>{icon}</Left>}
- {title || center ? (
- <Center isIndented={!!(!icon && isIndented)}>
- {title && (
- <Title {...commonProps} loading={loading}>
- {title}
- </Title>
- )}
- {center && <CenterText {...commonProps}>{center}</CenterText>}
- </Center>
- ) : null}
- {right && <Right {...commonProps}>{right}</Right>}
+ <Item {...rest} {...commonProps} {...itemProps}>
+ <>
+ {icon && <Left {...commonProps}>{icon}</Left>}
+ {title || center ? (
+ <Center isIndented={!!(!icon && isIndented)}>
+ {title && (
+ <Title {...commonProps} loading={loading}>
+ {title}
+ </Title>
+ )}
+ {center && <CenterText {...commonProps}>{center}</CenterText>}
+ </Center>
+ ) : null}
+ {right && <Right {...commonProps}>{right}</Right>}
+ </>
  </Item>
  );
 };

code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx

@@ -1,5 +1,4 @@
-import type { FunctionComponent, MouseEvent, PropsWithChildren, ReactElement } from 'react';
-import React, { Children, cloneElement } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { LinkIcon, LinuxIcon } from '@storybook/icons';
@@ -9,26 +8,6 @@ import ellipseUrl from './assets/ellipse.png';
 
 const onLinkClick = action('onLinkClick');
 
-interface StoryLinkWrapperProps {
- href: string;
- passHref?: boolean;
-}
-
-const StoryLinkWrapper: FunctionComponent<PropsWithChildren<StoryLinkWrapperProps>> = ({
- href,
- passHref = false,
- children,
-}) => {
- const child = Children.only(children) as ReactElement;
- return cloneElement(child, {
- href: passHref && href,
- onClick: (e: MouseEvent) => {
- e.preventDefault();
- onLinkClick(href);
- },
- });
-};
-
 export default {
  component: TooltipLinkList,
  decorators: [
@@ -57,15 +36,16 @@ export const WithoutIcons = {
  title: 'Link 1',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -78,15 +58,16 @@ export const WithOneIcon = {
  center: 'This is an addition description',
  icon: <LinkIcon />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -99,15 +80,16 @@ export const ActiveWithoutAnyIcons = {
  active: true,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -120,16 +102,17 @@ export const ActiveWithSeparateIcon = {
  icon: <LinkIcon />,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  active: true,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -143,15 +126,16 @@ export const ActiveAndIcon = {
  icon: <LinkIcon />,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -166,16 +150,17 @@ export const WithIllustration = {
  right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -190,15 +175,16 @@ export const WithCustomIcon = {
  right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;