Skip to content

chore(gh): optimize GH actions ci workflow#21859

Merged
kennylam merged 21 commits into
carbon-design-system:mainfrom
kennylam:test/gh-workflow-ubuntu-latest-fixes
Mar 24, 2026
Merged

chore(gh): optimize GH actions ci workflow#21859
kennylam merged 21 commits into
carbon-design-system:mainfrom
kennylam:test/gh-workflow-ubuntu-latest-fixes

Conversation

@kennylam

@kennylam kennylam commented Mar 18, 2026

Copy link
Copy Markdown
Member

This introduces several optimizations to the CI GitHub workflow in an attempt to get back onto the ubuntu-latest runners rather than the customized larger ones.

The biggest change is removing examples/* from the workspace build pipeline. These example packages (custom-theme, class-prefix, id-prefix, etc) run full Vite builds, each bundling @carbon/react with all IBM Plex font variants, in parallel during lerna run build. Most importantly, they do not consume workspace packages, instead pulling the latest published version from NPM. Unless there is a historical workflow/pipeline I'm missing about these packages, they provide no value in determining local package health.

Additionally, an avt-build job was added, which extracts the build process from the avt-runner jobs. Each runner shard ran a build, duplicating it 4x.

I have another branch which refactors the icon build pipeline to write directly to disk during builds rather than storing them in memory (~11k icons and pictograms). That branch includes the changes here and all CI jobs pass on my fork using the default ubuntu-latest runner.

I don't want to introduce too many changes in one PR, so I'm going to test if these changes alone will allow CI to pass on the default runner. If not I'll create a draft and test with the other one (icons build refactor).

Changelog

New

  • add Yarn caches to format/lint jobs
  • cache restore-keys across all jobs
  • avt-build job to build Yarn + Storybook artifacts

Changed

  • web test runner --puppeteer flag removed and now defined in web-test-runner.config.mjs
  • set NODE_OPTIONS memory limit to avt-runner build steps
  • build steps removed from avt-runner job and placed in dedicated avt-build job (runs once)

Removed

  • unneeded fetch-depth in flag-agents-md-changes
  • examples/* removed from workspace build pipeline
  • all Percy packages
  • Percy mentions in documentation
  • Percy configs in Storybook stories

Testing / Reviewing

The project should build and all CI/CD workflows should pass.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

@netlify

netlify Bot commented Mar 18, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 0e16ff4
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69c2895b04d60e000801ab8c
😎 Deploy Preview https://deploy-preview-21859--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Mar 18, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 0e16ff4
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69c2895b63614e0008b61b0d
😎 Deploy Preview https://deploy-preview-21859--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented Mar 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.40%. Comparing base (12c190a) to head (0e16ff4).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #21859      +/-   ##
==========================================
- Coverage   94.42%   94.40%   -0.03%     
==========================================
  Files         536      536              
  Lines       43673    43673              
  Branches     6272     6248      -24     
==========================================
- Hits        41239    41228      -11     
- Misses       2295     2306      +11     
  Partials      139      139              
Flag Coverage Δ
main-packages 87.84% <ø> (ø)
web-components 97.80% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@maradwan26 maradwan26 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Tests are passing 🎊 Thanks for doing this

@heloiselui heloiselui left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!! 🚀

@kennylam kennylam added this pull request to the merge queue Mar 19, 2026
@kennylam kennylam removed this pull request from the merge queue due to a manual request Mar 19, 2026
Comment thread e2e/test-utils/snapshot.js Outdated
Comment thread .github/workflows/ci.yml
@tay1orjones tay1orjones added this pull request to the merge queue Mar 24, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to no response for status checks Mar 24, 2026
Comment on lines -82 to -233
test('set of buttons fluid 1 wide @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '0',
'Container width': '800px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

test('set of buttons fluid 1 wide ghost @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '3',
'Container width': '800px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

test('set of buttons fluid 1 narrow @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '0',
'Container width': '280px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

test('set of buttons fluid 2 wide @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '4',
'Container width': '800px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

test('set of buttons fluid 2 wide ghost @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '5',
'Container width': '800px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

test('set of buttons fluid 2 narrow @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '4',
'Container width': '320px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

test('set of buttons fluid 3 wide @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '6',
'Container width': '800px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

test('set of buttons fluid 3 wide ghost @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '7',
'Container width': '800px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

test('set of buttons fluid 3 narrow @vrt', async ({ page }) => {
await visitStory(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
args: {
'Fluid buttons': '6',
'Container width': '500px',
},
});
await snapshot(page, {
component: 'Button',
id: 'components-button-set-of-buttons--fluid',
theme,
});
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How are the non-default fluid ButtonSet layouts covered after removing the Playwright cases for narrow and wide container widths, as well as the alternate button count and button kind combinations? The remaining Storybook coverage appears limited to the default Fluid story state, so I don’t see an equivalent check for those arg driven layouts. Just want to ensure a regression isn't going to slip through, though I may be missing something.

@kennylam kennylam Mar 24, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They are all now handled in Chromatic. All the removed e2e Playwright tests were snapshot-only. They called snapsshotStory() for Percy snapshots. No assertions for behavior, DOM structure, etc. It was only to generate the visual pixel comparison that got updated to Percy. That is all handled on Chromatic's side now.

We'll need to add the missing Storybook stories for fluid ButtonSet variants. I'll create a separate issue, since that isn't the purpose of this PR.

Edit: tracked in #21889.

@kennylam kennylam merged commit a3248bc into carbon-design-system:main Mar 24, 2026
38 of 39 checks passed
@carbon-automation

Copy link
Copy Markdown
Contributor

Hey there! v11.104.0 was just released that references this issue/PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants