feat(PageHeader): Convert PageHeader to CSS modules behind feature flag #5332

hussam-i-am · 2024-11-25T20:00:47Z

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

Changelog

New

Changed

Adds CSS modules behind feature flag
Adds data attributes for when to hide on breakpoints

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-11-25T20:00:53Z

🦋 Changeset detected

Latest commit: d7b290e

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-11-25T20:01:19Z

👋 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 · 2024-11-25T20:04:07Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	103.42 KB (+0.38% 🔺)
packages/react/dist/browser.umd.js	103.8 KB (+0.32% 🔺)

primer-integration · 2024-12-02T15:35:38Z

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

primer-integration · 2024-12-02T15:51:25Z

🔴 golden-jobs completed with status failure.

jonrohan · 2024-12-02T17:19:19Z

packages/react/src/PageHeader/PageHeader.module.css

+  --context-area-region-order-parent-link: 0;
+  --context-area-region-order-context-bar: 1;
+  --context-area-region-order-context-area-actions: 2;
+}


Something that crossed my mind reviewing this, what are our feelings about putting these css variables in the :root? I don't believe the css modules conversion does anything about it and it ends up in :root in prod. @langermank

I agree, it might be better to tuck these into the .PageHeader class instead of :root

langermank · 2024-12-02T20:03:01Z

packages/react/src/PageHeader/PageHeader.tsx

+  isCssModules: boolean,
+  isHidden: boolean | ResponsiveValue<boolean>,
+): {
+  'data-is-hidden-all'?: boolean


Such a tiny nitpick and I can't tell if this is new or existed already, but I would just name these data-hidden-X and remove "is" 😄

…i-am/css-modules-page-header

…com/primer/react into hussam-i-am/css-modules-page-header

…ature flag (#5332)" This reverts commit 3fcfba8.

hussam-i-am added 3 commits November 25, 2024 18:58

feat(PageHeader): Convert PageHeader to CSS modules behind feature flag

fe495ed

revert default value

d272fba

use data attributes for hidden

35ee676

hussam-i-am self-assigned this Nov 25, 2024

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 Nov 25, 2024

hussam-i-am temporarily deployed to github-pages November 25, 2024 20:02 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5332 November 25, 2024 20:02 Inactive

hussam-i-am marked this pull request as ready for review November 25, 2024 21:06

hussam-i-am requested a review from a team as a code owner November 25, 2024 21:06

hussam-i-am requested a review from TylerJDev November 25, 2024 21:06

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Nov 25, 2024

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

302cc42

hussam-i-am temporarily deployed to github-pages November 26, 2024 16:10 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5332 November 26, 2024 16:11 Inactive

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

f646df3

hussam-i-am temporarily deployed to github-pages November 26, 2024 19:10 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5332 November 26, 2024 19:11 Inactive

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

21c8f96

hussam-i-am temporarily deployed to github-pages November 27, 2024 16:35 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5332 November 27, 2024 16:35 Inactive

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

223c6dc

hussam-i-am temporarily deployed to github-pages November 27, 2024 17:51 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5332 November 27, 2024 17:51 Inactive

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

d18832e

hussam-i-am temporarily deployed to github-pages November 27, 2024 21:49 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5332 November 27, 2024 21:50 Inactive

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

76cd831

hussam-i-am temporarily deployed to github-pages December 2, 2024 15:27 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5332 December 2, 2024 15:28 Inactive

jonrohan reviewed Dec 2, 2024

View reviewed changes

langermank reviewed Dec 2, 2024

View reviewed changes

hussam-i-am added 4 commits December 2, 2024 20:34

llMerge branch 'main' of https://github.com/primer/react into hussam-…

963138d

…i-am/css-modules-page-header

move css variable and update data attribute

838f5df

Merge branch 'hussam-i-am/css-modules-page-header' of https://github.…

add299b

…com/primer/react into hussam-i-am/css-modules-page-header

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

d7b290e

hussam-i-am requested review from jonrohan and langermank December 2, 2024 20:43

hussam-i-am deployed to github-pages December 2, 2024 20:45 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5332 December 2, 2024 20:45 View deployment

jonrohan approved these changes Dec 2, 2024

View reviewed changes

langermank approved these changes Dec 2, 2024

View reviewed changes

hussam-i-am added this pull request to the merge queue Dec 2, 2024

Merged via the queue into main with commit 3fcfba8 Dec 2, 2024
43 checks passed

hussam-i-am deleted the hussam-i-am/css-modules-page-header branch December 2, 2024 21:49

primer bot mentioned this pull request Dec 2, 2024

Release tracking (37.7.0) #5335

Merged

francinelucca added a commit that referenced this pull request Dec 5, 2024

Revert "feat(PageHeader): Convert PageHeader to CSS modules behind fe…

616102a

…ature flag (#5332)" This reverts commit 3fcfba8.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(PageHeader): Convert PageHeader to CSS modules behind feature flag #5332

feat(PageHeader): Convert PageHeader to CSS modules behind feature flag #5332

Uh oh!

hussam-i-am commented Nov 25, 2024

Uh oh!

changeset-bot bot commented Nov 25, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Nov 25, 2024

Uh oh!

github-actions bot commented Nov 25, 2024 •

edited

Loading

Uh oh!

primer-integration bot commented Dec 2, 2024

Uh oh!

primer-integration bot commented Dec 2, 2024

Uh oh!

jonrohan Dec 2, 2024

Uh oh!

langermank Dec 2, 2024

Uh oh!

langermank Dec 2, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(PageHeader): Convert PageHeader to CSS modules behind feature flag #5332

feat(PageHeader): Convert PageHeader to CSS modules behind feature flag #5332

Uh oh!

Conversation

hussam-i-am commented Nov 25, 2024

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Nov 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Nov 25, 2024

Uh oh!

github-actions bot commented Nov 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

primer-integration bot commented Dec 2, 2024

Uh oh!

primer-integration bot commented Dec 2, 2024

Uh oh!

jonrohan Dec 2, 2024

Choose a reason for hiding this comment

Uh oh!

langermank Dec 2, 2024

Choose a reason for hiding this comment

Uh oh!

langermank Dec 2, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot bot commented Nov 25, 2024 •

edited

Loading

github-actions bot commented Nov 25, 2024 •

edited

Loading