From 3542d04a17d89bc1f927b2912ceec26a5b560c2b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 6 Nov 2025 07:44:38 +0000 Subject: [PATCH 1/3] Initial plan From f8629a617243e04cff054cb27ad7a3b86bdc05ef Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 6 Nov 2025 08:10:08 +0000 Subject: [PATCH 2/3] Add Pull Request Checks story to Spinner examples Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com> --- .../src/Spinner/Spinner.examples.stories.tsx | 76 ++++++++++++++++++- .../src/Spinner/SpinnerStories.module.css | 33 ++++++++ 2 files changed, 108 insertions(+), 1 deletion(-) diff --git a/packages/react/src/Spinner/Spinner.examples.stories.tsx b/packages/react/src/Spinner/Spinner.examples.stories.tsx index eabcd4cdc1c..627146a433d 100644 --- a/packages/react/src/Spinner/Spinner.examples.stories.tsx +++ b/packages/react/src/Spinner/Spinner.examples.stories.tsx @@ -1,9 +1,10 @@ import React from 'react' import type {Meta} from '@storybook/react-vite' import Spinner from './Spinner' -import {Button} from '..' +import {Button, Text, Stack} from '..' import {VisuallyHidden} from '../VisuallyHidden' import {AriaStatus} from '../live-region' +import {CheckCircleFillIcon, XCircleFillIcon} from '@primer/octicons-react' import classes from './SpinnerStories.module.css' export default { @@ -95,3 +96,76 @@ export const FullLifecycleVisibleLoadingText = () => { ) } + +// Example showing a list of PR checks similar to GitHub's UI +export const PullRequestChecks = () => { + type CheckStatus = 'pending' | 'success' | 'failure' + + interface Check { + id: string + name: string + description: string + status: CheckStatus + } + + const [checks, setChecks] = React.useState([ + {id: '1', name: 'Build', description: 'Building and testing the application', status: 'pending'}, + {id: '2', name: 'Lint', description: 'Running ESLint checks', status: 'pending'}, + {id: '3', name: 'Type Check', description: 'Running TypeScript type checks', status: 'pending'}, + {id: '4', name: 'Tests', description: 'Running unit tests', status: 'pending'}, + ]) + + const runChecks = async () => { + // Simulate checks running one by one + for (let i = 0; i < checks.length; i++) { + await wait(1500) + setChecks(prevChecks => { + const newChecks = [...prevChecks] + // Randomly pass or fail each check (mostly pass) + newChecks[i] = {...newChecks[i], status: Math.random() > 0.2 ? 'success' : 'failure'} + return newChecks + }) + } + } + + const allComplete = checks.every(check => check.status !== 'pending') + const hasFailures = checks.some(check => check.status === 'failure') + + return ( + +
+ +
+ + + {checks.map(check => ( +
+
+ {check.status === 'pending' && } + {check.status === 'success' && ( + + )} + {check.status === 'failure' && ( + + )} +
+
+ {check.name} + + {check.description} + +
+
+ ))} + + + {allComplete && ( + + {hasFailures ? 'Some checks failed' : 'All checks passed successfully'} + + )} + + ) +} diff --git a/packages/react/src/Spinner/SpinnerStories.module.css b/packages/react/src/Spinner/SpinnerStories.module.css index 4168e67fb1e..d502c0ca91a 100644 --- a/packages/react/src/Spinner/SpinnerStories.module.css +++ b/packages/react/src/Spinner/SpinnerStories.module.css @@ -14,3 +14,36 @@ .LoadButton { margin-bottom: var(--base-size-16); } + +.ChecksList { + border: var(--borderWidth-thin) solid var(--borderColor-default); + border-radius: var(--borderRadius-medium); + padding: var(--base-size-8); + background-color: var(--bgColor-default); +} + +.CheckItem { + display: flex; + align-items: flex-start; + gap: var(--base-size-8); + padding: var(--base-size-8); +} + +.CheckIcon { + display: flex; + align-items: center; + justify-content: center; + min-width: 16px; + height: 16px; +} + +.CheckContent { + display: flex; + flex-direction: column; + gap: var(--base-size-4); + flex: 1; +} + +.CheckDescription { + color: var(--fgColor-muted); +} From 0749f4fc23dbabb8d7f12ab715febfc85b307915 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 10 Nov 2025 10:45:01 +0000 Subject: [PATCH 3/3] Rename SpinnerStories.module.css to Spinner.examples.stories.module.css Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com> --- ...erStories.module.css => Spinner.examples.stories.module.css} | 0 packages/react/src/Spinner/Spinner.examples.stories.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/react/src/Spinner/{SpinnerStories.module.css => Spinner.examples.stories.module.css} (100%) diff --git a/packages/react/src/Spinner/SpinnerStories.module.css b/packages/react/src/Spinner/Spinner.examples.stories.module.css similarity index 100% rename from packages/react/src/Spinner/SpinnerStories.module.css rename to packages/react/src/Spinner/Spinner.examples.stories.module.css diff --git a/packages/react/src/Spinner/Spinner.examples.stories.tsx b/packages/react/src/Spinner/Spinner.examples.stories.tsx index 627146a433d..ae0ee232264 100644 --- a/packages/react/src/Spinner/Spinner.examples.stories.tsx +++ b/packages/react/src/Spinner/Spinner.examples.stories.tsx @@ -5,7 +5,7 @@ import {Button, Text, Stack} from '..' import {VisuallyHidden} from '../VisuallyHidden' import {AriaStatus} from '../live-region' import {CheckCircleFillIcon, XCircleFillIcon} from '@primer/octicons-react' -import classes from './SpinnerStories.module.css' +import classes from './Spinner.examples.stories.module.css' export default { title: 'Components/Spinner/Examples',