Merge branch 'main' into zoomcontainer

Author: ghengeveld

CHANGELOG.md

@@ -1,3 +1,41 @@
+# v1.2.15 (Mon Mar 11 2024)
+
+#### 🐛 Bug Fix
+
+- Show shorter label on very small viewports [#211](https://github.com/chromaui/addon-visual-tests/pull/211) ([@ghengeveld](https://github.com/ghengeveld))
+
+#### Authors: 1
+
+- Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
+
+---
+
+# v1.2.14 (Mon Mar 11 2024)
+
+#### 🐛 Bug Fix
+
+- Automatically clear notification when connection is restored [#210](https://github.com/chromaui/addon-visual-tests/pull/210) ([@ghengeveld](https://github.com/ghengeveld))
+- Wrap all screens with ControlsProvider and ignore config warnings on Authentication screens [#209](https://github.com/chromaui/addon-visual-tests/pull/209) ([@ghengeveld](https://github.com/ghengeveld))
+- Fix 'Rerun tests' button sizing [#208](https://github.com/chromaui/addon-visual-tests/pull/208) ([@ghengeveld](https://github.com/ghengeveld))
+
+#### Authors: 1
+
+- Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
+
+---
+
+# v1.2.13 (Mon Mar 11 2024)
+
+#### 🐛 Bug Fix
+
+- Fix inlineGlow animation [#207](https://github.com/chromaui/addon-visual-tests/pull/207) ([@ghengeveld](https://github.com/ghengeveld))
+
+#### Authors: 1
+
+- Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
+
+---
+
 # v1.2.12 (Fri Mar 08 2024)
 
 #### 🐛 Bug Fix

package.json

@@ -159,5 +159,5 @@
       "react-native"
     ]
   },
-  "version": "1.2.12"
+  "version": "1.2.15"
 }

src/Panel.tsx

@@ -80,11 +80,13 @@ export const Panel = ({ active, api }: PanelProps) => {
           addonUninstalled={addonUninstalled}
           setAddonUninstalled={setAddonUninstalled}
         >
-          <RunBuildProvider watchState={{ isRunning, startBuild, stopBuild }}>
-            <div hidden={!active} style={{ containerType: "size", height: "100%" }}>
-              {children}
-            </div>
-          </RunBuildProvider>
+          <ControlsProvider>
+            <RunBuildProvider watchState={{ isRunning, startBuild, stopBuild }}>
+              <div hidden={!active} style={{ containerType: "size", height: "100%" }}>
+                {children}
+              </div>
+            </RunBuildProvider>
+          </ControlsProvider>
         </UninstallProvider>
       </AuthProvider>
     </Provider>
@@ -151,17 +153,15 @@ export const Panel = ({ active, api }: PanelProps) => {
 
   const localBuildIsRightBranch = gitInfo.branch === localBuildProgress?.branch;
   return withProviders(
-    <ControlsProvider>
-      <VisualTests
-        dismissBuildError={() => setLocalBuildProgress(undefined)}
-        isOutdated={!!isOutdated}
-        localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
-        setOutdated={setOutdated}
-        updateBuildStatus={updateBuildStatus}
-        projectId={projectId}
-        gitInfo={gitInfo}
-        storyId={storyId}
-      />
-    </ControlsProvider>
+    <VisualTests
+      dismissBuildError={() => setLocalBuildProgress(undefined)}
+      isOutdated={!!isOutdated}
+      localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
+      setOutdated={setOutdated}
+      updateBuildStatus={updateBuildStatus}
+      projectId={projectId}
+      gitInfo={gitInfo}
+      storyId={storyId}
+    />
   );
 };

src/components/Screen.tsx

@@ -27,10 +27,17 @@ const InfoSection = styled(Section)(({ theme }) => ({
 
 interface ConfigSectionProps {
   hidden?: boolean;
+  ignoreConfig?: boolean;
+  ignoreSuggestions?: boolean;
   onOpen: (scrollTo?: keyof ConfigInfoPayload["configuration"]) => void;
 }
 
-export const ConfigSection = ({ hidden, onOpen }: ConfigSectionProps) => {
+export const ConfigSection = ({
+  hidden,
+  ignoreConfig,
+  ignoreSuggestions,
+  onOpen,
+}: ConfigSectionProps) => {
   const [configInfo] = useSharedState<ConfigInfoPayload>(CONFIG_INFO);
   const problems = Object.keys(configInfo?.problems || {});
   const suggestions = Object.keys(configInfo?.suggestions || {});
@@ -48,7 +55,7 @@ export const ConfigSection = ({ hidden, onOpen }: ConfigSectionProps) => {
     </Link>
   );
 
-  if (problems.length > 0)
+  if (problems.length > 0 && !ignoreConfig)
     return (
       <WarningSection hidden={hidden}>
         <Bar>
@@ -62,7 +69,7 @@ export const ConfigSection = ({ hidden, onOpen }: ConfigSectionProps) => {
       </WarningSection>
     );
 
-  if (suggestions.length > 0 && !dismissed)
+  if (suggestions.length > 0 && !dismissed && !ignoreConfig && !ignoreSuggestions)
     return (
       <InfoSection hidden={hidden}>
         <Bar>
@@ -84,6 +91,8 @@ export const ConfigSection = ({ hidden, onOpen }: ConfigSectionProps) => {
 interface ScreenProps {
   children: ReactNode;
   footer?: ReactNode;
+  ignoreConfig?: boolean;
+  ignoreSuggestions?: boolean;
 }
 
 const Container = styled.div({
@@ -122,6 +131,8 @@ export const Screen = ({
       </Col>
     </Footer>
   ),
+  ignoreConfig = false,
+  ignoreSuggestions = !footer,
 }: ScreenProps) => {
   const { configVisible } = useControlsState();
   const { toggleConfig } = useControlsDispatch();
@@ -140,7 +151,12 @@ export const Screen = ({
 
   return (
     <Container>
-      <ConfigSection onOpen={openConfig} hidden={configVisible} />
+      <ConfigSection
+        onOpen={openConfig}
+        hidden={configVisible}
+        ignoreConfig={ignoreConfig}
+        ignoreSuggestions={!footer}
+      />
       <Content hidden={configVisible}>{children}</Content>
       <Content hidden={!configVisible}>
         <Configuration onClose={() => toggleConfig(false)} />

src/components/SnapshotImageThumb.tsx

@@ -44,11 +44,10 @@ export const SnapshotImageThumb = ({
   backgroundColor,
   status,
   thumbnailUrl,
-  ...imgProps
 }: SnapshotImageThumbProps & React.ImgHTMLAttributes<HTMLImageElement>) => {
   return (
     <Wrapper status={status} style={backgroundColor ? { backgroundColor } : {}}>
-      <img alt="Snapshot thumbnail" src={thumbnailUrl} {...imgProps} />
+      <img alt="Snapshot thumbnail" src={thumbnailUrl} />
       {status === "positive" && <CheckIcon />}
     </Wrapper>
   );

src/components/design-system/tooltip/ListItem.tsx

@@ -2,6 +2,8 @@ import weakMemoize from "@emotion/weak-memoize";
 import { styled, type Theme, useTheme } from "@storybook/theming";
 import React, { ComponentProps, ReactNode } from "react";
 
+import { inlineGlow } from "../shared/animation";
+
 const Left = styled.span({});
 const Title = styled.span(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
@@ -116,10 +118,7 @@ const linkStyles = ({
 
   ...(isLoading && {
     ".sbds-list-item-title": {
-      animation: `${theme.animation.inlineGlow} 1.5s ease-in-out infinite`,
-      background: "rgba(0, 0, 0, 0.05)", // theme.color.tr5,
-      color: "transparent",
-      cursor: "progress",
+      ...inlineGlow,
       flex: "0 1 auto",
       display: "inline-block",
     },

src/manager.tsx

@@ -34,9 +34,15 @@ addons.register(ADDON_ID, (api) => {
   const channel = api.getChannel();
   if (!channel) return;
 
+  let notificationShown = false;
   channel.on(`${ADDON_ID}/heartbeat`, () => {
     clearTimeout(heartbeatTimeout);
+    if (notificationShown) {
+      notificationShown = false;
+      api.clearNotification(`${ADDON_ID}/connection-lost`);
+    }
     heartbeatTimeout = setTimeout(() => {
+      notificationShown = true;
       api.addNotification({
         id: `${ADDON_ID}/connection-lost`,
         content: {

src/screens/Authentication/SetSubdomain.tsx

@@ -56,7 +56,7 @@ export const SetSubdomain = ({ onBack, onSignIn }: SetSubdomainProps) => {
   );
 
   return (
-    <Screen footer={null}>
+    <Screen footer={null} ignoreConfig>
       <Container>
         <BackButton onClick={onBack}>
           <ChevronLeftIcon color={theme.base === "light" ? "currentColor" : theme.color.medium} />

src/screens/Authentication/SignIn.tsx

@@ -26,7 +26,7 @@ const Label = styled.span(({ theme }) => ({
 export const SignIn = ({ onBack, onSignIn, onSignInWithSSO }: SignInProps) => {
   const theme = useTheme();
   return (
-    <Screen footer={null}>
+    <Screen footer={null} ignoreConfig>
       <Container>
         {onBack && (
           <BackButton onClick={onBack}>

src/screens/Authentication/Verify.tsx

@@ -139,7 +139,7 @@ export const Verify = ({
   closeDialogRef.current = closeDialog;
 
   return (
-    <Screen footer={null}>
+    <Screen footer={null} ignoreConfig>
       <Container>
         <BackButton onClick={onBack}>
           <ChevronLeftIcon color={theme.base === "light" ? "currentColor" : theme.color.medium} />

src/screens/Authentication/Welcome.tsx

@@ -16,7 +16,7 @@ interface WelcomeProps {
 
 export const Welcome = ({ onNext, onUninstall }: WelcomeProps) => {
   return (
-    <Screen footer={null}>
+    <Screen footer={null} ignoreConfig>
       <Container>
         <Stack>
           <div>

src/screens/VisualTests/SnapshotControls.tsx

@@ -117,7 +117,8 @@ export const SnapshotControls = ({ isOutdated }: { isOutdated: boolean }) => {
         <Label>
           <Text>
             <b>
-              {baselineImageVisible ? <span>Baseline snapshot</span> : <span>Latest snapshot</span>}
+              {baselineImageVisible ? "Baseline" : "Latest"}
+              <span> snapshot</span>
             </b>
           </Text>
         </Label>

src/screens/VisualTests/StoryInfo.tsx

@@ -4,7 +4,7 @@ import { styled } from "@storybook/theming";
 import pluralize from "pluralize";
 import React from "react";
 
-import { Button } from "../../components/Button";
+import { ActionButton } from "../../components/ActionButton";
 import { AlertIcon } from "../../components/icons/AlertIcon";
 import { ProgressIcon } from "../../components/icons/ProgressIcon";
 import { StatusIcon } from "../../components/icons/StatusIcon";
@@ -200,10 +200,10 @@ export const StoryInfo = ({
 
       {showButton && (
         <Actions>
-          <Button size="medium" variant="solid" onClick={startBuild} disabled={isRunning}>
+          <ActionButton onClick={startBuild} disabled={isRunning}>
             {isRunning ? <ProgressIcon parentComponent="Button" /> : <PlayIcon />}
             {isErrored ? "Rerun tests" : "Run tests"}
-          </Button>
+          </ActionButton>
         </Actions>
       )}
     </>