From 456a0893d8fc4e1ebebb36e3708920f3ade04aff Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 7 Feb 2019 20:54:43 +0100
Subject: [PATCH] fix(drag-drop): set class when item or list is disabled
 (#14769)

Sets a class on disabled `CdkDrag` and `CdkDropList` to make it easier to style the elements while they're disabled.

Fixes #14760.
---
 src/cdk/drag-drop/directives/drag.spec.ts             | 11 ++++++++++-
 src/cdk/drag-drop/directives/drag.ts                  |  1 +
 src/cdk/drag-drop/directives/drop-list.ts             |  1 +
 src/cdk/drag-drop/drag-drop.md                        |  6 ++++--
 .../cdk-drag-drop-disabled-example.css                |  5 +++++
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index 0f7504b5830..e68f577a95e 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -536,8 +536,12 @@ describe('CdkDrag', () => {
       fixture.detectChanges();
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
-      fixture.componentInstance.dragInstance.disabled = true;
+      expect(dragElement.classList).not.toContain('cdk-drag-disabled');
 
+      fixture.componentInstance.dragInstance.disabled = true;
+      fixture.detectChanges();
+
+      expect(dragElement.classList).toContain('cdk-drag-disabled');
       expect(dragElement.style.transform).toBeFalsy();
       dragElementViaMouse(fixture, dragElement, 50, 100);
       expect(dragElement.style.transform).toBeFalsy();
@@ -2115,9 +2119,14 @@ describe('CdkDrag', () => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();
       const dragItems = fixture.componentInstance.dragItems;
+      const dropElement = fixture.componentInstance.dropInstance.element.nativeElement;
+
+      expect(dropElement.classList).not.toContain('cdk-drop-list-disabled');
 
       fixture.componentInstance.dropInstance.disabled = true;
+      fixture.detectChanges();
 
+      expect(dropElement.classList).toContain('cdk-drop-list-disabled');
       expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
           .toEqual(['Zero', 'One', 'Two', 'Three']);
 
diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts
index 2fcaf11a82a..ea8eb7d61e8 100644
--- a/src/cdk/drag-drop/directives/drag.ts
+++ b/src/cdk/drag-drop/directives/drag.ts
@@ -69,6 +69,7 @@ export function CDK_DRAG_CONFIG_FACTORY(): DragRefConfig {
   exportAs: 'cdkDrag',
   host: {
     'class': 'cdk-drag',
+    '[class.cdk-drag-disabled]': 'disabled',
     '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
   },
   providers: [{provide: CDK_DRAG_PARENT, useExisting: CdkDrag}]
diff --git a/src/cdk/drag-drop/directives/drop-list.ts b/src/cdk/drag-drop/directives/drop-list.ts
index 36769f83242..40111a221aa 100644
--- a/src/cdk/drag-drop/directives/drop-list.ts
+++ b/src/cdk/drag-drop/directives/drop-list.ts
@@ -62,6 +62,7 @@ export interface CdkDropListInternal extends CdkDropList {}
   host: {
     'class': 'cdk-drop-list',
     '[id]': 'id',
+    '[class.cdk-drop-list-disabled]': 'disabled',
     '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
     '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
   }
diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md
index c41078b300e..671864f47a3 100644
--- a/src/cdk/drag-drop/drag-drop.md
+++ b/src/cdk/drag-drop/drag-drop.md
@@ -70,12 +70,14 @@ by the directives:
 
 | Selector            | Description                                                              |
 |---------------------|--------------------------------------------------------------------------|
-| `.cdk-drop-list`    | Corresponds to the `cdkDropList` container.                                  |
+| `.cdk-drop-list`    | Corresponds to the `cdkDropList` container.                              |
 | `.cdk-drag`         | Corresponds to a `cdkDrag` instance.                                     |
+| `.cdk-drag-disabled`| Class that is added to a disabled `cdkDrag`.                             |
 | `.cdk-drag-preview` | This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list. By default the element looks exactly like the element that is being dragged. |
 | `.cdk-drag-placeholder` | This is element that will be shown instead of the real element as it's being dragged inside a `cdkDropList`. By default this will look exactly like the element that is being sorted. |
 | `.cdk-drop-list-dragging` | A class that is added to `cdkDropList` while the user is dragging an item.  |
-| `.cdk-drop-list-receiving` | A class that is added to `cdkDropList` when it can receive an item that is being dragged inside a connected drop list.  |
+| `.cdk-drop-list-disabled` | A class that is added to `cdkDropList` when it is disabled.  |
+| `.cdk-drop-list-receiving`| A class that is added to `cdkDropList` when it can receive an item that is being dragged inside a connected drop list.  |
 
 ### Animations
 The drag-and-drop module supports animations both while sorting an element inside a list, as well as
diff --git a/src/material-examples/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css b/src/material-examples/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css
index 8e55bdbb9a6..f82bdaa3ad2 100644
--- a/src/material-examples/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css
+++ b/src/material-examples/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css
@@ -23,6 +23,11 @@
   font-size: 14px;
 }
 
+.example-box.cdk-drag-disabled {
+  background: #ccc;
+  cursor: default;
+}
+
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;