Skip to content

Commit

Permalink
Merge pull request #117 from chromaui/ghengeveld/ap-3691-addon-does-n…
Browse files Browse the repository at this point in the history 
…ot-fully-support-chromatic-modes

Support actual modes rather than just viewports
  • Loading branch information
@ghengeveld
ghengeveld authored Sep 20, 2023
2 parents 05670f0 + 0afb433 commit b24fc00
Show file tree
Hide file tree
Showing 12 changed files with 86 additions and 128 deletions.
1 change: 1 addition & 0 deletions src/components/BrowserSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export const BrowserSelector = ({
);
return (
<WithTooltip
key={selectedBrowser.key}
hasChrome={false}
placement="top"
trigger="hover"
Expand Down
22 changes: 10 additions & 12 deletions src/components/ModeSelector.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,9 @@ import { ComparisonResult } from "../gql/graphql";
import { ModeSelector } from "./ModeSelector";

const viewport800Px = {
id: "_800",
name: "800px",
};
const viewport1200Px = {
id: "_1200",
name: "1200px",
};

Expand All @@ -29,7 +27,7 @@ export const WithSingleViewportChanged: Story = {
selectedMode: viewport1200Px,
modeResults: [
{
viewport: viewport1200Px,
mode: viewport1200Px,
result: ComparisonResult.Changed,
},
],
Expand All @@ -42,7 +40,7 @@ export const WithSingleViewportAccepted: Story = {
selectedMode: viewport1200Px,
modeResults: [
{
viewport: viewport1200Px,
mode: viewport1200Px,
result: ComparisonResult.Changed,
},
],
Expand All @@ -54,7 +52,7 @@ export const WithSingleViewportEqual: Story = {
selectedMode: viewport1200Px,
modeResults: [
{
viewport: viewport1200Px,
mode: viewport1200Px,
result: ComparisonResult.Equal,
},
],
Expand All @@ -66,7 +64,7 @@ export const WithSingleViewportError: Story = {
selectedMode: viewport1200Px,
modeResults: [
{
viewport: viewport1200Px,
mode: viewport1200Px,
result: ComparisonResult.CaptureError,
},
],
Expand All @@ -78,11 +76,11 @@ export const WithManyViewportsEqual: Story = {
selectedMode: viewport800Px,
modeResults: [
{
viewport: viewport800Px,
mode: viewport800Px,
result: ComparisonResult.Equal,
},
{
viewport: viewport1200Px,
mode: viewport1200Px,
result: ComparisonResult.Equal,
},
],
Expand All @@ -94,11 +92,11 @@ export const WithManyViewportsSecondSelected: Story = {
selectedMode: viewport1200Px,
modeResults: [
{
viewport: viewport800Px,
mode: viewport800Px,
result: ComparisonResult.Equal,
},
{
viewport: viewport1200Px,
mode: viewport1200Px,
result: ComparisonResult.Changed,
},
],
Expand All @@ -110,11 +108,11 @@ export const WithManyViewportsVaried: Story = {
selectedMode: viewport800Px,
modeResults: [
{
viewport: viewport800Px,
mode: viewport800Px,
result: ComparisonResult.Equal,
},
{
viewport: viewport1200Px,
mode: viewport1200Px,
result: ComparisonResult.Changed,
},
],
Expand Down
23 changes: 11 additions & 12 deletions src/components/ModeSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Icon } from "@storybook/design-system";
import { styled } from "@storybook/theming";
import React from "react";

import { ComparisonResult, ViewportInfo } from "../gql/graphql";
import { ComparisonResult, TestMode } from "../gql/graphql";
import { aggregateResult } from "../utils/aggregateResult";
import { ArrowIcon } from "./icons/ArrowIcon";
import { StatusDot, StatusDotWrapper } from "./StatusDot";
Expand All @@ -18,13 +18,13 @@ const IconWrapper = styled.div(({ theme }) => ({
},
}));

type ModeData = Pick<ViewportInfo, "id" | "name">;
type ModeData = Pick<TestMode, "name">;

interface ModeSelectorProps {
isAccepted: boolean;
selectedMode: ModeData;
onSelectMode: (viewport: ModeData) => void;
modeResults: { viewport: ModeData; result?: ComparisonResult }[];
onSelectMode: (mode: ModeData) => void;
modeResults: { mode: ModeData; result?: ComparisonResult }[];
}

export const ModeSelector = ({
Expand All @@ -43,22 +43,21 @@ export const ModeSelector = ({

const links =
modeResults.length > 1 &&
modeResults.map(({ viewport, result }) => ({
id: viewport.id,
title: viewport.name,
modeResults.map(({ mode, result }) => ({
id: mode.name,
title: mode.name,
right: !isAccepted && result !== ComparisonResult.Equal && <StatusDot status={result} />,
onClick: () => onSelectMode(viewport),
active: selectedMode === viewport,
onClick: () => onSelectMode(mode),
active: selectedMode.name === mode.name,
}));

return (
<WithTooltip
key={selectedMode.name}
hasChrome={false}
placement="top"
trigger="hover"
tooltip={
<TooltipNote note={links ? "Switch mode" : `View mode: ${modeResults[0].viewport.name}`} />
}
tooltip={<TooltipNote note={links ? "Switch mode" : `View mode: ${modeResults[0].mode}`} />}
>
{links ? (
<TooltipMenu placement="bottom" links={links}>
Expand Down
4 changes: 2 additions & 2 deletions src/gql/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const documents = {
"\n fragment SelectedBuildFields on Build {\n __typename\n id\n number\n branch\n commit\n committedAt\n uncommittedHash\n status\n ... on StartedBuild {\n startedAt\n testsForStory: tests(storyId: $storyId) {\n nodes {\n ...StoryTestFields\n }\n }\n }\n ... on CompletedBuild {\n startedAt\n testsForStory: tests(storyId: $storyId) {\n nodes {\n ...StoryTestFields\n }\n }\n }\n }\n": types.SelectedBuildFieldsFragmentDoc,
"\n fragment StatusTestFields on Test {\n id\n status\n story {\n storyId\n }\n }\n": types.StatusTestFieldsFragmentDoc,
"\n fragment LastBuildOnBranchTestFields on Test {\n status\n }\n": types.LastBuildOnBranchTestFieldsFragmentDoc,
"\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n viewport {\n id\n name\n width\n isDefault\n }\n }\n parameters {\n viewport {\n id\n name\n width\n isDefault\n }\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n": types.StoryTestFieldsFragmentDoc,
"\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n }\n mode {\n name\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n": types.StoryTestFieldsFragmentDoc,
"\n mutation ReviewTest($input: ReviewTestInput!) {\n reviewTest(input: $input) {\n updatedTests {\n id\n status\n }\n userErrors {\n ... on UserError {\n __typename\n message\n }\n ... on BuildSupersededError {\n build {\n id\n }\n }\n ... on TestUnreviewableError {\n test {\n id\n }\n }\n }\n }\n }\n": types.ReviewTestDocument,
};

Expand Down Expand Up @@ -69,7 +69,7 @@ export function graphql(source: "\n fragment LastBuildOnBranchTestFields on Tes
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n viewport {\n id\n name\n width\n isDefault\n }\n }\n parameters {\n viewport {\n id\n name\n width\n isDefault\n }\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n"): (typeof documents)["\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n viewport {\n id\n name\n width\n isDefault\n }\n }\n parameters {\n viewport {\n id\n name\n width\n isDefault\n }\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n"];
export function graphql(source: "\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n }\n mode {\n name\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n"): (typeof documents)["\n fragment StoryTestFields on Test {\n id\n status\n result\n webUrl\n comparisons {\n id\n result\n browser {\n id\n key\n name\n version\n }\n captureDiff {\n diffImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n headCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n captureError {\n kind\n ... on CaptureErrorInteractionFailure {\n error\n }\n ... on CaptureErrorJSError {\n error\n }\n ... on CaptureErrorFailedJS {\n error\n }\n }\n }\n baseCapture {\n captureImage(signed: true) {\n imageUrl\n imageWidth\n }\n }\n }\n mode {\n name\n }\n story {\n storyId\n name\n component {\n name\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
Loading

0 comments on commit b24fc00

Please sign in to comment.