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

Preview popover fixes #28976

Merged
merged 2 commits into from May 1, 2024
Merged

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Apr 29, 2024

Includes the following fixes related the preview popovers:

fix(cdk/drag-drop): reset user agent color on preview popover

After #28945 the preview is inserted into a popover element which has a user agent styling of color: canvastext. These changes reset it to inherit to match the old behavior.

fix(cdk/drag-drop): remove preview wrapper

Switches back to positioning the preview directly instead of using a wrapper which can be breaking for existing apps. Instead we load a stylesheet dynamically with the necessary resets.

Fixes #28974.

@crisbeto crisbeto added target: patch This PR is targeted for the next patch release merge: preserve commits When the PR is merged, a rebase and merge should be performed labels Apr 29, 2024
After angular#28945 the preview is inserted into a `popover` element which has a user agent styling of `color: canvastext`. These changes reset it to `inherit` to match the old behavior.

Fixes angular#28974.
@crisbeto crisbeto added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Apr 30, 2024
Copy link

github-actions bot commented Apr 30, 2024

Deployed dev-app for c356f65 to: https://ng-dev-previews-comp--pr-angular-components-28976-dev-t3fgnong.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

'top': '0',
'left': '0',
'z-index': this._zIndex + '',
Copy link
Contributor

Choose a reason for hiding this comment

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

do we need z-index if its in a popover?

Copy link
Member Author

@crisbeto crisbeto Apr 30, 2024

Choose a reason for hiding this comment

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

We still have it, because there's a public API to set it and in case we're running on a browser that doesn't support popovers.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think all the browsers we support also support popover, but I guess we can leave it until we deprecate the zindex API

src/cdk/drag-drop/resets.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

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

LGTM

Switches back to positioning the preview directly instead of using a wrapper which can be breaking for existing apps. Instead we load a stylesheet dynamically with the necessary resets.
@crisbeto crisbeto removed the dev-app preview When applied, previews of the dev-app are deployed to Firebase label May 1, 2024
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label May 1, 2024
@crisbeto crisbeto merged commit 9729a53 into angular:main May 1, 2024
23 of 26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker merge: preserve commits When the PR is merged, a rebase and merge should be performed target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(cdk/drag-drop): new preview container breaks styling
2 participants