Skip to content

Preview popover fixes - #28976

Merged
crisbeto merged 2 commits into
angular:mainfrom
crisbeto:28974/drag-drop-popover
May 1, 2024
Merged

Preview popover fixes#28976
crisbeto merged 2 commits into
angular:mainfrom
crisbeto:28974/drag-drop-popover

Conversation

@crisbeto

@crisbetocrisbeto commented Apr 29, 2024

Copy link
Copy Markdown
Member

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.

@crisbetocrisbeto 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
@crisbeto
crisbetoforce-pushed the 28974/drag-drop-popover branch from 7b2b8bb to fd11606CompareApril 29, 2024 07:42
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.
Fixesangular#28974.
@crisbeto
crisbetoforce-pushed the 28974/drag-drop-popover branch from fd11606 to d99f9f9CompareApril 30, 2024 17:41
@crisbetocrisbeto added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Apr 30, 2024
@github-actions

github-actionsBot commented Apr 30, 2024

Copy link
Copy Markdown

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.

'position': 'fixed',
'top': '0',
'left': '0',
'z-index': this._zIndex + '',

Copy link
Copy Markdown
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?

@crisbetocrisbetoApr 30, 2024

Copy link
Copy Markdown
MemberAuthor

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
Copy Markdown
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

Comment threadsrc/cdk/drag-drop/resets.scss Outdated
@crisbeto
crisbetoforce-pushed the 28974/drag-drop-popover branch from d99f9f9 to c356f65CompareApril 30, 2024 18:22

@mmalerbammalerba left a comment

Copy link
Copy Markdown
Contributor

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.
@crisbetocrisbeto removed the dev-app preview When applied, previews of the dev-app are deployed to Firebase label May 1, 2024
@crisbeto
crisbetoforce-pushed the 28974/drag-drop-popover branch from c356f65 to 53fd236CompareMay 1, 2024 07:35
@crisbetocrisbeto added the action: merge The PR is ready for merge by the caretaker label May 1, 2024
@crisbeto
crisbeto merged commit 9729a53 into angular:mainMay 1, 2024
@angular-automatic-lock-bot

Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-botangular-automatic-lock-botBot locked and limited conversation to collaborators Jun 1, 2024
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: mergeThe PR is ready for merge by the caretakermerge: preserve commitsWhen the PR is merged, a rebase and merge should be performedtarget: patchThis 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

@crisbeto@mmalerba