Skip to content

feat(drag-drop): allow for custom class to be set on preview - #17304

Merged
mmalerba merged 1 commit into
angular:masterfrom
crisbeto:17089/drag-drop-preview-class
Oct 18, 2019
Merged

feat(drag-drop): allow for custom class to be set on preview#17304
mmalerba merged 1 commit into
angular:masterfrom
crisbeto:17089/drag-drop-preview-class

Conversation

@crisbeto

@crisbeto crisbeto commented Oct 6, 2019

Copy link
Copy Markdown
Member

When we create a preview for a dragged element, we put it in the body in order to avoid issues with z-index and overflow, however this makes it harder to style the element. When the previews were implemented initially, the thinking was the users could customize it either by providing a custom preview, in which case they can set as many classes as they want, or by targeting something like .some-element.cdk-drag-preview if they're using the default one. The problem with the latter is that it doesn't allow for something like a theme to be propagated to the preview.

These changes add an extra input that allows users to set a class on the preview element for easier customization.

Fixes #17089.

When we create a preview for a dragged element, we put it in the `body` in order to avoid issues with `z-index` and `overflow`, however this makes it harder to style the element. When the previews were implemented initially, the thinking was the users could customize it either by providing a custom preview, in which case they can set as many classes as they want, or by targeting something like `.some-element.cdk-drag-preview` if they're using the default one. The problem with the latter is that it doesn't allow for something like a theme to be propagated to the preview.

These changes add an extra input that allows users to set a class on the preview element for easier customization.

Fixes angular#17089.
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: major This PR is targeted for the next major release labels Oct 6, 2019
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 6, 2019

@jelbourn jelbourn 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

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Oct 7, 2019
@mmalerba
mmalerba merged commit 34e848f into angular:master Oct 18, 2019
@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-bot angular-automatic-lock-bot Bot locked and limited conversation to collaborators Nov 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Drag and drop - missing styles after theme changing

4 participants