Skip to content

Hidden: Refactor the component to use the new getBreakpointsDeclarations util function and add missing stories and tests - #2729

Merged
broccolinisoup merged 16 commits into
mainfrom
Hidden-component-refactor
Jan 19, 2023
Merged

Hidden: Refactor the component to use the new getBreakpointsDeclarations util function and add missing stories and tests#2729
broccolinisoup merged 16 commits into
mainfrom
Hidden-component-refactor

Conversation

@broccolinisoup

@broccolinisoupbroccolinisoup commented Dec 30, 2022

Copy link
Copy Markdown
Member

Closeshttps://github.com/github/primer/issues/1664

Hidden component is being used in PageHeader and working as expected. After improving the way we manage the responsive visibility on PageHeader via getBreakpointDeclarations utility function to reduce the layout shift in SSR - I applied the same strategy to Hidden component. I refactored it to use the getBreakpointDeclarations function rather than useResponsiveHook as this is something can be achieved with CSS as well.

I also wrote unit tests, added docs and stories.

Screenshots

No visual changes. All examples are available on storybook and docs.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot

changeset-botBot commented Dec 30, 2022

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1f9bae0

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

This PR includes changesets to release 1 package
NameType
@primer/reactPatch

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

@broccolinisoup
broccolinisoup changed the base branch from main to bs/PageHeader-docsDecember 30, 2022 04:55
@github-actions

github-actionsBot commented Dec 30, 2022

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js88.93 KB (0%)
dist/browser.umd.js89.54 KB (0%)

@broccolinisoup
broccolinisoup temporarily deployed to github-pages December 30, 2022 05:03 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 December 30, 2022 05:03 Inactive
@broccolinisoupbroccolinisoup changed the title Hidden component refactorHidden: Refactor the component to use the new getBreakpointsDeclarations util function to make it SSR friendlyDec 30, 2022
Base automatically changed from bs/PageHeader-docs to mainJanuary 3, 2023 23:17
@broccolinisoup
broccolinisoupforce-pushed the Hidden-component-refactor branch from c40924b to 05da78fCompareJanuary 9, 2023 05:29
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 9, 2023 05:35 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 9, 2023 05:35 Inactive
@broccolinisoup
broccolinisoupforce-pushed the Hidden-component-refactor branch from 05da78f to 978af5aCompareJanuary 9, 2023 06:07
@broccolinisoupbroccolinisoup changed the title Hidden: Refactor the component to use the new getBreakpointsDeclarations util function to make it SSR friendlyHidden: Refactor the component to use the new getBreakpointsDeclarations util function and add missing stories and testsJan 9, 2023
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 9, 2023 06:15 Inactive
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 9, 2023 06:20 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 9, 2023 06:21 Inactive
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 9, 2023 06:49 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 9, 2023 06:50 Inactive
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 11, 2023 00:49 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 11, 2023 00:50 Inactive
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 11, 2023 01:22 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 11, 2023 01:23 Inactive
@broccolinisoup
broccolinisoup marked this pull request as ready for review January 11, 2023 01:54
@broccolinisoup
broccolinisoup requested a review from a teamJanuary 11, 2023 01:54
@broccolinisoup

broccolinisoup commented Jan 18, 2023

Copy link
Copy Markdown
MemberAuthor

Here you go @broccolinisoup. This is from the preview deployment.

@mperrotti Oh right!! This is on the new canvas! Sorry I missed that. Actually, this is a bug (more like an uncovered case) in UnderlineNav! (In that example, I used UnderlineNav for the navigation). It is a coincidence that I am synchronously working on it.

@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 18, 2023 06:52 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 18, 2023 06:53 Inactive
@broccolinisoup
broccolinisoupforce-pushed the Hidden-component-refactor branch from 37fd3b8 to 90786c4CompareJanuary 18, 2023 11:28
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 18, 2023 11:33 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 18, 2023 11:34 Inactive
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 19, 2023 03:49 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 19, 2023 03:49 Inactive
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 19, 2023 04:51 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 19, 2023 04:51 Inactive
@broccolinisoup
broccolinisoupforce-pushed the Hidden-component-refactor branch from 9c718cc to da4353bCompareJanuary 19, 2023 05:21
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 19, 2023 05:28 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 19, 2023 05:28 Inactive
@broccolinisoup

broccolinisoup commented Jan 19, 2023

Copy link
Copy Markdown
MemberAuthor

@joshblack just renamed a few things to reduce confusion around breakpoints/ranges and refactored PageHeader and getBreakpointsDeclarations function to use the media queries from a shared place (src/utils/layout.ts). (commit)

I'd like to merge this to move forward with the accessibility eng review for PageHeader - but please let me know if you have any concern - happy to address them in a following PR if they are not blocking here - thanks so much again for your suggestions 🙏🏻 PR still shows the feedback you left (requested changes) as blocking for merge. If all look good to you, could I please get ✅ as well? 🙌🏻 Thanks!!

@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 19, 2023 05:44 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-2729 January 19, 2023 05:44 Inactive
* Add visual ordering and pageLayout example
* Mock IntersectionObserver for <ThemeProvider> in story render
* remove unused components
* add TitleArea order
* add changeset
* update the snapshot
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 19, 2023 06:01 — with GitHub Actions Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-2729 January 19, 2023 06:01 Inactive

@joshblackjoshblack left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

🎉

@broccolinisoup
broccolinisoup enabled auto-merge (squash) January 19, 2023 22:09
@broccolinisoup
broccolinisoup temporarily deployed to github-pages January 19, 2023 22:11 — with GitHub Actions Inactive
@broccolinisoup
broccolinisoup merged commit 4dcf658 into mainJan 19, 2023
@broccolinisoup
broccolinisoup deleted the Hidden-component-refactor branch January 19, 2023 22:12
@primer-cssprimer-css mentioned this pull request Jan 19, 2023
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@broccolinisoup@mperrotti@joshblack