Skip to content
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.

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

feat(Overlay): Convert Overlay to CSS modules behind team feature flag #5310

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

francinelucca
Copy link
Member

@francinelucca francinelucca commented Nov 18, 2024

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

Changelog

New

  • Overlay dev story to test sx and style props with VRT
  • Overlay module css
  • Snapshot testing for Overlay stories

Changed

  • Refactor Overlay to use CSS modules when team feature flag is turned on
  • Update SelectPanel import to new Overlay base component name (StyledOverlay -> BaseOverlay)

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

Copy link

changeset-bot bot commented Nov 18, 2024

🦋 Changeset detected

Latest commit: c61f977

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 github-actions bot added the staff Author is a staff member label Nov 18, 2024
@francinelucca francinelucca added update snapshots and removed staff Author is a staff member labels Nov 18, 2024
@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 Nov 18, 2024
Copy link
Contributor

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

Copy link
Contributor

github-actions bot commented Nov 19, 2024

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 100.75 KB (+0.07% 🔺)
packages/react/dist/browser.umd.js 101.1 KB (+0.1% 🔺)

box-shadow: var(--shadow-floating-small);
animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);

@keyframes overlay-appear {
Copy link
Contributor

Choose a reason for hiding this comment

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

@keframes need to be outside of a wrapper div (you can just throw them at the end)

packages/react/src/Overlay/Overlay.module.css Outdated Show resolved Hide resolved
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm status: wip update snapshots
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants