Skip to content

feat(SubNav): Convert SubNav to CSS modules behind team feature flag #5202

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 9 commits into from
Nov 4, 2024
Merged

feat(SubNav): Convert SubNav to CSS modules behind team feature flag #5202

merged 9 commits into from
Nov 4, 2024

Conversation

@hussam-i-am
Copy link
Contributor

@hussam-i-am hussam-i-am commented Oct 31, 2024

Closes https://github.com/github/primer/issues/4363

Changelog

New

Changed

Convert SubNav to CSS modules behind team feature flag

Removed

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@hussam-i-am hussam-i-am self-assigned this Oct 31, 2024
@hussam-i-am hussam-i-am requested a review from a team as a code owner October 31, 2024 17:50
@changeset-bot
Copy link

changeset-bot bot commented Oct 31, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 1ec2c06

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

Not sure what this means? Click here to learn what changesets are.

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

@github-actions
Copy link
Contributor

github-actions bot commented Oct 31, 2024

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 31, 2024
hussam-i-am
hussam-i-am commented Oct 31, 2024
View reviewed changes
packages/react/src/SubNav/SubNav.tsx
}
.SubNav-octicon {
color: ${get('colors.fg.muted')};
Copy link
Contributor Author

@hussam-i-am hussam-i-am Oct 31, 2024

Choose a reason for hiding this comment

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

Removed the SubNav-octicon stylings since it does not appear that we add this class anywhere, let me know if that is correct.

@github-actions github-actions bot temporarily deployed to storybook-preview-5202 October 31, 2024 17:52 Inactive
@github-actions
Copy link
Contributor

github-actions bot commented Oct 31, 2024 •
edited
Loading

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 98.55 KB (+0.16% 🔺)
packages/react/dist/browser.umd.js 98.82 KB (+0.07% 🔺)

langermank
langermank reviewed Oct 31, 2024
View reviewed changes
Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

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

I think this component might be missing VRT tests all together (I couldn't find any). You might want to open a separate PR to get that merged in first to check against your PR https://github.com/primer/react/blob/main/contributor-docs/testing.md#components

And then for the dev stories, you would want to add those to VRT as well 😄

packages/react/src/SubNav/SubNav.module.css
Comment on lines +65 to +66
/* stylelint-disable-next-line primer/colors */
border-color: var(--bgColor-accent-emphasis);
Copy link
Contributor

@langermank langermank Oct 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
/* stylelint-disable-next-line primer/colors */
border-color: var(--bgColor-accent-emphasis);
border-color: var(--borderColor-accent-emphasis);

Should actually be the same end result

Copy link
Contributor Author

@hussam-i-am hussam-i-am Nov 4, 2024

Choose a reason for hiding this comment

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

@langermank Reverted this change since VRT was failing due to the border having a different color with Dark Hight Contrast

Screenshot 2024-11-03 at 11 12 01 PM

packages/react/src/SubNav/SubNav.module.css
transition: background-color 0.2s ease;
}

&:is([data-selected]) {
Copy link
Contributor

@langermank langermank Oct 31, 2024

Choose a reason for hiding this comment

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

Should this one be :where?

Copy link
Contributor Author

@hussam-i-am hussam-i-am Oct 31, 2024

Choose a reason for hiding this comment

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

When I tried using :where, the hover/focus styling was overriding the selected styling, which is why I switched to :is. Open to alternative solutions.

@github-actions github-actions bot temporarily deployed to storybook-preview-5202 October 31, 2024 19:26 Inactive
@primer-integration
Copy link

primer-integration bot commented Oct 31, 2024 •
edited
Loading

🟢 golden-jobs completed with status success.

@github-actions github-actions bot temporarily deployed to storybook-preview-5202 November 1, 2024 18:47 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 03:34 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 03:54 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 04:13 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 04:30 Inactive
@hussam-i-am hussam-i-am added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 4, 2024
@primer primer bot requested a review from a team as a code owner November 4, 2024 04:48
@primer primer bot requested a review from emilybrick November 4, 2024 04:48
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 4, 2024
@primer primer bot temporarily deployed to github-pages November 4, 2024 04:50 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 04:50 Inactive
@primer-integration
Copy link

primer-integration bot commented Nov 4, 2024

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/349556

jonrohan
jonrohan approved these changes Nov 4, 2024
View reviewed changes
Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

Seems good to go ⚡

@hussam-i-am hussam-i-am added this pull request to the merge queue Nov 4, 2024
Merged via the queue into main with commit 293c574 Nov 4, 2024
43 checks passed
@hussam-i-am hussam-i-am deleted the hussam-i-am/css-modules-subnav branch November 4, 2024 18:33
@primer primer bot mentioned this pull request Nov 4, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@langermank langermank langermank left review comments

@jonrohan jonrohan jonrohan approved these changes

@emilybrick emilybrick Awaiting requested review from emilybrick emilybrick is a code owner automatically assigned from primer/design-reviewers

Assignees

@hussam-i-am hussam-i-am

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@hussam-i-am @jonrohan @langermank