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

Move Overlay styles to PVC #1651

Merged
merged 5 commits into from
Dec 2, 2022
Merged

Move Overlay styles to PVC #1651

merged 5 commits into from
Dec 2, 2022

Conversation

simurai
Copy link
Contributor

@simurai simurai commented Dec 1, 2022

Description

This is part of #1342 and an alternative to #1648. It adds the Overlay styles from PCSS. There should be no visual changes.

In #1401 we can eventually rename dialog.pcss -> overlay.pcss, but this PR is intended to be ready before, see #1648 (review).

Integration

Does this change require any updates to code in production?

Yes, the following lines can be removed on dotcom:

- @import '@primer/css/overlay/overlay.scss';

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews
  • Visual regression test
Before After
Screen Shot 2022-12-01 at 14 54 36 Screen Shot 2022-12-01 at 14 54 28

@changeset-bot
Copy link

changeset-bot bot commented Dec 1, 2022

🦋 Changeset detected

Latest commit: 970da65

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

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

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

@simurai simurai temporarily deployed to review-pr-1651 December 1, 2022 06:23 Inactive
@github-actions github-actions bot added the css Pull requests that update CSS code label Dec 1, 2022
@simurai simurai mentioned this pull request Dec 1, 2022
3 tasks
@simurai simurai temporarily deployed to github-pages December 1, 2022 06:28 Inactive
Comment on lines +290 to +293
/* Override .close-button's `border: 0` that triggers a border-color transition on hover */
&.close-button {
border: var(--primer-borderWidth-thin, 1px) solid transparent;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Without this override the border would transition:

  • border-color: initial (dark gray) -> border-color: transparent
Screen.Recording.2022-12-01.at.15.59.29.mov

Might not be needed once Primer::Beta::CloseButton is updated to IconButton.

@simurai simurai temporarily deployed to github-pages December 1, 2022 07:13 Inactive
@simurai simurai marked this pull request as ready for review December 1, 2022 07:22
@simurai simurai requested a review from a team as a code owner December 1, 2022 07:22
@simurai simurai requested review from a team, tobiasahlin and keithamus December 1, 2022 07:22
Copy link
Member

@keithamus keithamus left a comment

Choose a reason for hiding this comment

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

Nice work!

@simurai simurai merged commit 7e430ac into main Dec 2, 2022
@simurai simurai deleted the dialog-pcss branch December 2, 2022 01:56
@primer-css primer-css mentioned this pull request Dec 2, 2022
keithamus pushed a commit that referenced this pull request Dec 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css Pull requests that update CSS code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants