Skip to content

[Storybook] Refactor theme + prep for CSS vars #4175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 15 commits into from
Jan 25, 2024
Merged

[Storybook] Refactor theme + prep for CSS vars #4175

merged 15 commits into from
Jan 25, 2024

Conversation

@langermank
Copy link
Contributor

@langermank langermank commented Jan 23, 2024 •
edited
Loading

  • Moves theme into the standard preview.js file
  • Follows same convention as primer/primitives
  • Imports Primer CSS to access legacy CSS vars (match dotcom environment)
  • Update all theme view CSS

I ran a bunch of different test scenarios in this PR: #4172 don't be alarmed by the snapshot tests, I have resolved everything 🔥

@langermank langermank requested review from a team and mperrotti January 23, 2024 22:29
@changeset-bot
Copy link

changeset-bot bot commented Jan 23, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: ff3dda0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@langermank langermank added the skip changeset This change does not need a changelog label Jan 23, 2024
@langermank langermank requested a review from joshblack January 23, 2024 22:30
@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2024 •
edited
Loading

size-limit report 📦

Path Size
dist/browser.esm.js 104.47 KB (0%)
dist/browser.umd.js 105.11 KB (0%)

@langermank langermank added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jan 23, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 23, 2024 23:02 Inactive
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jan 23, 2024
@primer primer bot temporarily deployed to github-pages January 23, 2024 23:09 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 23, 2024 23:10 Inactive
@langermank langermank added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jan 24, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 24, 2024 21:32 Inactive
@langermank langermank added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Jan 24, 2024
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jan 24, 2024
@primer primer bot temporarily deployed to github-pages January 24, 2024 21:52 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 24, 2024 21:52 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 25, 2024 00:31 Inactive
@langermank langermank added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jan 25, 2024
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jan 25, 2024
joshblack
joshblack reviewed Jan 25, 2024
View reviewed changes
.storybook/primitives-v7.css Outdated
@@ -1,2 +1 @@
@import '@primer/css/dist/primitives.css';
@import '@primer/css/dist/color-modes.css';
@import 'https://unpkg.com/@primer/[email protected]/dist/color-modes.css';
Copy link
Member

@joshblack joshblack Jan 25, 2024

Choose a reason for hiding this comment

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

Do we need this import to unpkg because we're going to be using the newer version of primitives?

Copy link
Contributor Author

@langermank langermank Jan 25, 2024

Choose a reason for hiding this comment

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

I think its just easier to pull this from unpkg because its temporary and we rarely make releases in Primer CSS these days. I should probably make it @latest instead though..

joshblack
joshblack reviewed Jan 25, 2024
View reviewed changes
Copy link
Member

@joshblack joshblack left a comment

Choose a reason for hiding this comment

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

Just had a couple of comments!

langermank and others added 2 commits January 25, 2024 11:30
langermank
langermank commented Jan 25, 2024
View reviewed changes
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 25, 2024 19:35 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 25, 2024 19:50 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 25, 2024 21:04 Inactive
mperrotti
mperrotti approved these changes Jan 25, 2024
View reviewed changes
Copy link
Contributor

@mperrotti mperrotti left a comment

Choose a reason for hiding this comment

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

Looks good to me assuming that the higher contrast "toggle overlay" button is intentional.

.storybook/preview.js
// we'll sort alphabetically
const preview = {
parameters: {
actions: {argTypesRegex: '^on[A-Z].*'},
Copy link
Contributor

@mperrotti mperrotti Jan 25, 2024

Choose a reason for hiding this comment

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

Clever. Is this to filter out things like onClick?

@langermank langermank enabled auto-merge January 25, 2024 21:23
langermank
langermank commented Jan 25, 2024
View reviewed changes
@github-actions github-actions bot temporarily deployed to storybook-preview-4175 January 25, 2024 22:25 Inactive
@langermank langermank added this pull request to the merge queue Jan 25, 2024
Merged via the queue into main with commit 245d14a Jan 25, 2024
@langermank langermank deleted the prep-storybook-css-vars branch January 25, 2024 22:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@joshblack joshblack joshblack left review comments

@mperrotti mperrotti mperrotti approved these changes

Assignees

No one assigned

Labels

skip changeset This change does not need a changelog

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@langermank @mperrotti @joshblack