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

hussam-i-am · 2024-10-31T17:50:16Z

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

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-10-31T17:50:20Z

🦋 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 · 2024-10-31T17:50:52Z

👋 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!

hussam-i-am · 2024-10-31T17:51:46Z

packages/react/src/SubNav/SubNav.tsx


-    .SubNav-octicon {
-      color: ${get('colors.fg.muted')};


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 · 2024-10-31T17:53:23Z

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

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 😄

langermank · 2024-10-31T18:41:39Z

packages/react/src/SubNav/SubNav.module.css

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


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

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

langermank · 2024-10-31T18:44:52Z

packages/react/src/SubNav/SubNav.module.css

+    transition: background-color 0.2s ease;
+  }
+
+  &:is([data-selected]) {


Should this one be :where?

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.

primer-integration · 2024-10-31T21:10:28Z

🟢 golden-jobs completed with status success.

primer-integration · 2024-11-04T15:17:23Z

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

jonrohan

Seems good to go ⚡

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

954b4bd

hussam-i-am self-assigned this Oct 31, 2024

hussam-i-am requested a review from a team as a code owner October 31, 2024 17:50

hussam-i-am requested a review from langermank October 31, 2024 17:50

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 commented Oct 31, 2024

View reviewed changes

hussam-i-am temporarily deployed to github-pages October 31, 2024 17:52 — with GitHub Actions Inactive

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

langermank reviewed Oct 31, 2024

View reviewed changes

update border color var

fa7ef83

hussam-i-am temporarily deployed to github-pages October 31, 2024 19:25 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5202 October 31, 2024 19:26 Inactive

Merge branch 'main' into hussam-i-am/css-modules-subnav

1277fa3

hussam-i-am temporarily deployed to github-pages November 1, 2024 18:47 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5202 November 1, 2024 18:47 Inactive

Merge branch 'main' into hussam-i-am/css-modules-subnav

667791d

hussam-i-am temporarily deployed to github-pages November 4, 2024 03:33 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 03:34 Inactive

update line height

5021911

hussam-i-am temporarily deployed to github-pages November 4, 2024 03:53 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 03:54 Inactive

revert border var change

b900a89

hussam-i-am temporarily deployed to github-pages November 4, 2024 04:13 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 04:13 Inactive

add vrt tests

ba2344c

hussam-i-am temporarily deployed to github-pages November 4, 2024 04:30 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 04:30 Inactive

hussam-i-am added the update snapshots label Nov 4, 2024

test(vrt): update snapshots

ad185bd

primer bot requested a review from a team as a code owner November 4, 2024 04:48

primer bot requested a review from emilybrick November 4, 2024 04:48

github-actions bot removed the update snapshots label Nov 4, 2024

primer bot temporarily deployed to github-pages November 4, 2024 04:50 Inactive

github-actions bot temporarily deployed to storybook-preview-5202 November 4, 2024 04:50 Inactive

Merge branch 'main' into hussam-i-am/css-modules-subnav

1ec2c06

hussam-i-am deployed to github-pages November 4, 2024 17:39 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5202 November 4, 2024 17:39 View deployment

jonrohan approved these changes Nov 4, 2024

View reviewed changes

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 deleted the hussam-i-am/css-modules-subnav branch November 4, 2024 18:33

primer bot mentioned this pull request Nov 4, 2024

Release tracking (37.2.0) #5219

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

hussam-i-am commented Oct 31, 2024

changeset-bot bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024

hussam-i-am Oct 31, 2024

github-actions bot commented Oct 31, 2024 •

edited

Loading

langermank left a comment

langermank Oct 31, 2024 •

edited

Loading

hussam-i-am Nov 4, 2024

langermank Oct 31, 2024

hussam-i-am Oct 31, 2024

primer-integration bot commented Oct 31, 2024 •

edited

Loading

primer-integration bot commented Nov 4, 2024

jonrohan left a comment

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

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

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

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

Conversation

hussam-i-am commented Oct 31, 2024

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

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

🦋 Changeset detected

github-actions bot commented Oct 31, 2024

hussam-i-am Oct 31, 2024

Choose a reason for hiding this comment

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

size-limit report 📦

langermank left a comment

Choose a reason for hiding this comment

langermank Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

hussam-i-am Nov 4, 2024

Choose a reason for hiding this comment

langermank Oct 31, 2024

Choose a reason for hiding this comment

hussam-i-am Oct 31, 2024

Choose a reason for hiding this comment

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

primer-integration bot commented Nov 4, 2024

jonrohan left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

langermank Oct 31, 2024 •

edited

Loading

primer-integration bot commented Oct 31, 2024 •

edited

Loading