Upgrade some deprecated uses of @storybook/components

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
+  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
 }

src/SidebarTop.tsx

@@ -1,3 +1,4 @@
+import { FailedIcon, PassedIcon } from "@storybook/icons";
 import { type API, useStorybookState } from "@storybook/manager-api";
 import { color } from "@storybook/theming";
 import pluralize from "pluralize";
@@ -84,10 +85,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           headline: "Build started",
           subHeadline: "Check the visual test addon to see the progress of your build.",
         },
-        icon: {
-          name: "passed",
-          color: color.positive,
-        },
+        icon: <PassedIcon color={color.positive} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
@@ -104,10 +102,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           headline: "Build canceled",
           subHeadline: "Aborted by user.",
         },
-        icon: {
-          name: "failed",
-          color: color.negative,
-        },
+        icon: <FailedIcon color={color.negative} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
@@ -132,10 +127,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
               )}`
             : "No visual changes detected",
         },
-        icon: {
-          name: "passed",
-          color: color.positive,
-        },
+        icon: <PassedIcon color={color.positive} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
@@ -152,10 +144,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           headline: "Build error",
           subHeadline: "Check the Storybook process on the command line for more details.",
         },
-        icon: {
-          name: "failed",
-          color: color.negative,
-        },
+        icon: <FailedIcon color={color.negative} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });
@@ -169,10 +158,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           subHeadline:
             "Your account has insufficient snapshots remaining to run this build. Visit your billing page to find out more.",
         },
-        icon: {
-          name: "failed",
-          color: color.negative,
-        },
+        icon: <FailedIcon color={color.negative} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });

src/components/ActionButton.tsx

@@ -4,8 +4,8 @@ import { ComponentProps } from "react";
 
 import { IconButton } from "./IconButton";
 
-const themeColors = ({ theme, secondary, status }: { theme: Theme } & ActionButtonProps) => {
-  if (secondary) {
+const themeColors = ({ theme, status, variant }: { theme: Theme } & ActionButtonProps) => {
+  if (variant === "outline") {
     return {
       color: theme.base === "light" ? theme.color.dark : theme.color.medium,
       backgroundColor: theme.background.app,
@@ -54,29 +54,29 @@ const themeColors = ({ theme, secondary, status }: { theme: Theme } & ActionButt
 };
 
 interface ActionButtonProps extends ComponentProps<typeof IconButton> {
-  containsIcon?: boolean;
+  square?: boolean;
   side?: "left" | "right";
 }
 
 export const ActionButton: React.FC<ActionButtonProps> = styled(IconButton)<ActionButtonProps>(
-  ({ containsIcon }) => ({
+  ({ square }) => ({
     border: `1px solid transparent`,
     boxShadow: "none",
     fontSize: 12,
     fontWeight: 700,
     height: 28,
-    padding: containsIcon ? "8px 6px" : 8,
+    padding: square ? "8px 6px" : 8,
     transition: "background-color 150ms ease-out",
     "@container (min-width: 300px)": {
       height: 32,
-      width: containsIcon ? 32 : "auto",
-      padding: containsIcon ? "9px 8px" : 9,
+      width: square ? 32 : "auto",
+      padding: square ? "9px 8px" : 9,
     },
     "@container (min-width: 800px)": {
       height: 28,
       fontSize: 12,
-      width: containsIcon ? 28 : "auto",
-      padding: containsIcon ? "8px 6px" : 8,
+      width: square ? 28 : "auto",
+      padding: square ? "8px 6px" : 8,
     },
   }),
   themeColors,

src/components/IconButton.tsx

@@ -13,18 +13,17 @@ const getStatusStyles = (theme: Theme, status?: IconButtonProps["status"]) =>
 interface IconButtonProps extends ComponentProps<typeof BaseIconButton> {
   active?: boolean;
   as?: string;
-  secondary?: boolean;
   status?: "positive" | "warning";
 }
 
 export const IconButton: React.FC<IconButtonProps> = styled(BaseIconButton)<IconButtonProps>(
-  ({ active, secondary, theme }) => ({
+  ({ active, variant, theme }) => ({
     display: "inline-flex",
     alignItems: "center",
     verticalAlign: "top",
     gap: 6,
     margin: 0,
-    color: active || secondary ? theme.color.secondary : theme.color.mediumdark,
+    color: active || variant === "outline" ? theme.color.secondary : theme.color.mediumdark,
     fontWeight: "normal",
     "& > svg": {
       width: "auto",

src/components/SidebarTopButton.tsx

@@ -1,5 +1,5 @@
 import { WithTooltip } from "@storybook/components";
-import { PlayIcon, StopAltIcon, SyncIcon } from "@storybook/icons";
+import { PlayIcon, StopAltIcon } from "@storybook/icons";
 import { keyframes, styled } from "@storybook/theming";
 import React, { ComponentProps } from "react";
 

src/components/design-system/Link.tsx

@@ -1,4 +1,4 @@
-import { css, styled } from "@storybook/theming";
+import { styled } from "@storybook/theming";
 import { darken } from "polished";
 import React, { ComponentProps, forwardRef } from "react";
 
@@ -20,7 +20,6 @@ const LinkInner = styled.span<{ withArrow: boolean }>(
 );
 
 export interface StyledLinkProps {
-  containsIcon?: boolean;
   secondary?: boolean;
   tertiary?: boolean;
   nochrome?: boolean;
@@ -56,17 +55,6 @@ const StyledLink = styled.a<StyledLinkProps>(
     },
   },
   (props) => ({
-    ...(props.containsIcon && {
-      svg: {
-        height: "1em",
-        width: "1em",
-        verticalAlign: "middle",
-        position: "relative",
-        bottom: 0,
-        marginRight: 0,
-      },
-    }),
-
     ...(props.secondary && {
       color: props.theme.base === "light" ? color.mediumdark : color.medium,
 
@@ -137,19 +125,7 @@ export type LinkProps = React.ComponentProps<typeof StyledLink> & {
 // down to the styled component, so that we don't end up passing them to a
 // tag which would throw warnings for non-standard props.
 const LinkComponentPicker = forwardRef<HTMLAnchorElement | HTMLButtonElement, LinkProps>(
-  (
-    {
-      containsIcon,
-      inverse,
-      isButton,
-      LinkWrapper,
-      nochrome,
-      secondary,
-      tertiary,
-      ...rest
-    }: LinkProps,
-    ref
-  ) => {
+  ({ inverse, isButton, LinkWrapper, nochrome, secondary, tertiary, ...rest }: LinkProps, ref) => {
     // Use the UnstyledLink here to avoid duplicating styles and creating
     // specificity conflicts by first rendering the StyledLink higher up the chain
     // and then re-rendering it through the 'as' prop.
@@ -194,7 +170,6 @@ Link.displayName = "Link";
 Link.defaultProps = {
   withArrow: false,
   isButton: false,
-  containsIcon: false,
   secondary: false,
   tertiary: false,
   nochrome: false,

src/components/design-system/Spinner.tsx

@@ -1,4 +1,4 @@
-import { css, styled } from "@storybook/theming";
+import { styled } from "@storybook/theming";
 import React, { ComponentProps, FunctionComponent } from "react";
 
 import { rotate360 } from "./shared/animation";

src/manager.tsx

@@ -1,3 +1,4 @@
+import { FailedIcon } from "@storybook/icons";
 import { addons, type API } from "@storybook/manager-api";
 import { color } from "@storybook/theming";
 import { Addon_TypesEnum } from "@storybook/types";
@@ -49,10 +50,7 @@ addons.register(ADDON_ID, (api) => {
           headline: "Connection lost",
           subHeadline: "Lost connection to the Storybook server. Try refreshing the page.",
         },
-        icon: {
-          name: "failed",
-          color: color.negative,
-        },
+        icon: <FailedIcon color={color.negative} />,
         // @ts-expect-error SB needs a proper API for no link
         link: undefined,
       });

src/screens/GuidedTour/Tooltip.tsx

@@ -75,7 +75,7 @@ export const Tooltip = ({ isLastStep, step, primaryProps, tooltipProps }: Toolti
                 ...primaryProps,
                 // @tmeasday - I'm not sure if we ever use this, but this makes the types work
                 onClick: primaryProps.onClick as (event: SyntheticEvent) => void,
-                primary: true,
+                variant: "solid",
                 ...(step.onNextButtonClick ? { onClick: step.onNextButtonClick } : {}),
               }}
             >

src/screens/VisualTests/BuildResults.tsx

@@ -153,7 +153,7 @@ export const BuildResults = ({
                 <Code>disableSnapshot = true</Code> from the CSF file.
               </Text>
             </div>
-            <Button asChild size="medium" tertiary>
+            <Button asChild size="medium" variant="outline">
               <a
                 href="https://www.chromatic.com/docs/ignoring-elements#ignore-stories"
                 target="_new"

src/screens/VisualTests/SnapshotControls.tsx

@@ -224,7 +224,7 @@ export const SnapshotControls = ({ isOutdated }: { isOutdated: boolean }) => {
                 >
                   {(active) => (
                     <ActionButton
-                      containsIcon
+                      square
                       active={active}
                       disabled={isReviewing}
                       aria-label="Batch accept options"
@@ -289,7 +289,7 @@ export const SnapshotControls = ({ isOutdated }: { isOutdated: boolean }) => {
                 >
                   {(active) => (
                     <ActionButton
-                      containsIcon
+                      square
                       active={active}
                       disabled={isReviewing}
                       aria-label="Batch unaccept options"
@@ -326,11 +326,11 @@ export const SnapshotControls = ({ isOutdated }: { isOutdated: boolean }) => {
             hasChrome={false}
           >
             <ActionButton
-              containsIcon
+              square
               aria-label={isOutdated ? "Run new tests" : "Rerun tests"}
               onClick={startBuild}
               disabled={isRunning}
-              secondary
+              variant="outline"
             >
               {isOutdated ? <PlayIcon /> : <SyncIcon />}
             </ActionButton>

src/screens/VisualTests/VisualTests.tsx

@@ -1,4 +1,6 @@
+import { FailedIcon } from "@storybook/icons";
 import { useStorybookApi, useStorybookState } from "@storybook/manager-api";
+import { color } from "@storybook/theming";
 import type { API_StatusState } from "@storybook/types";
 import React, { useCallback, useEffect } from "react";
 import { useMutation } from "urql";
@@ -243,10 +245,7 @@ export const VisualTestsWithoutSelectedBuildId = ({
             } changes`,
             subHeadline: err.message,
           },
-          icon: {
-            name: "cross",
-            color: "red",
-          },
+          icon: <FailedIcon color={color.negative} />,
           // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
           duration: 8_000,
           onClick: clickNotification,

src/utils/useErrorNotification.ts → src/utils/useErrorNotification.tsx

@@ -1,6 +1,7 @@
+import { FailedIcon } from "@storybook/icons";
 import { useStorybookApi } from "@storybook/manager-api";
 import { color } from "@storybook/theming";
-import { useCallback } from "react";
+import React, { useCallback } from "react";
 
 import { ADDON_ID, PANEL_ID } from "../constants";
 
@@ -25,10 +26,7 @@ export function useErrorNotification() {
           headline,
           subHeadline: err.toString(),
         },
-        icon: {
-          name: "failed",
-          color: color.negative,
-        },
+        icon: <FailedIcon color={color.negative} />,
         // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });