docs(cdk/drag-drop): ensure that examples look good on adev (#31673)

crisbeto · web-flow · commit 5ffea29c3a20 · 2025-08-11T21:44:17.000+02:00
Fixes the following issues with how the drag-drop examples look on adev:
* They're using Times New Roman as the font because all the styles are reset.
* The handle isn't visible in one of the examples, because its color is reset.
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css
@@ -14,6 +14,7 @@
   position: relative;
   z-index: 1;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  font-family: sans-serif;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.css
@@ -16,6 +16,7 @@
   box-sizing: border-box;
   padding: 10px;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  font-family: sans-serif;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.css
@@ -7,6 +7,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css
@@ -7,6 +7,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.css
@@ -12,6 +12,7 @@
   border-radius: 4px;
   position: relative;
   z-index: 1;
+  font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.css
@@ -7,6 +7,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .example-box.cdk-drag-disabled {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.css
@@ -4,6 +4,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  font-family: sans-serif;
 }
 
 .example-list {
@@ -27,6 +28,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.css
@@ -12,6 +12,7 @@
   border-radius: 4px;
   position: relative;
   z-index: 1;
+  font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.css
@@ -13,6 +13,7 @@
   border-radius: 4px;
   position: relative;
   z-index: 1;
+  font-family: sans-serif;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
@@ -29,8 +30,11 @@
   position: absolute;
   top: 10px;
   right: 10px;
-  color: #ccc;
   cursor: move;
   width: 24px;
   height: 24px;
 }
+
+.example-handle svg {
+  color: #ccc;
+}
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.html
@@ -2,7 +2,7 @@
   I can only be dragged using the handle
 
   <div class="example-handle" cdkDragHandle>
-    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
+    <svg width="24px" viewBox="0 0 24 24">
       <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
       <path d="M0 0h24v24H0z" fill="none"></path>
     </svg>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css
@@ -8,6 +8,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -24,6 +25,7 @@
   font-size: 14px;
   flex-grow: 1;
   flex-basis: 0;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example.css
@@ -9,6 +9,7 @@
   min-height: 60px;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -23,6 +24,7 @@
   text-align: center;
   font-size: 14px;
   min-width: 115px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.css
@@ -13,6 +13,7 @@
   position: relative;
   z-index: 1;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  font-family: sans-serif;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.css
@@ -10,6 +10,7 @@
   background: #fff;
   border-radius: 4px;
   transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  font-family: sans-serif;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
               0 2px 2px 0 rgba(0, 0, 0, 0.14),
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.css
@@ -12,6 +12,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -26,6 +27,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.css
@@ -7,6 +7,7 @@
   display: block;
   width: 400px;
   max-width: 100%;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css
@@ -7,6 +7,7 @@
   background: white;
   border-radius: 4px;
   overflow: hidden;
+  font-family: sans-serif;
 }
 
 .example-box {
@@ -21,6 +22,7 @@
   cursor: move;
   background: white;
   font-size: 14px;
+  font-family: sans-serif;
 }
 
 .cdk-drag-preview {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css b/src/components-examples/cdk/drag-drop/cdk-drag-drop-table/cdk-drag-drop-table-example.css
@@ -1,5 +1,6 @@
 table {
   width: 100%;
+  font-family: sans-serif;
 }
 
 .example-drag-cursor {

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`margin: 0 25px 25px 0;`
`5`	`5`	`display: inline-block;`
`6`	`6`	`vertical-align: top;`
	`7`	`+ font-family: sans-serif;`
`7`	`8`	`}`
`8`	`9`
`9`	`10`	`.example-list {`
`@@ -27,6 +28,7 @@`
`27`	`28`	`cursor: move;`
`28`	`29`	`background: white;`
`29`	`30`	`font-size: 14px;`
	`31`	`+ font-family: sans-serif;`
`30`	`32`	`}`
`31`	`33`
`32`	`34`	`.cdk-drag-preview {`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`background: white;`
`8`	`8`	`border-radius: 4px;`
`9`	`9`	`overflow: hidden;`
	`10`	`+ font-family: sans-serif;`
`10`	`11`	`}`
`11`	`12`
`12`	`13`	`.example-box {`
`@@ -21,6 +22,7 @@`
`21`	`22`	`cursor: move;`
`22`	`23`	`background: white;`
`23`	`24`	`font-size: 14px;`
	`25`	`+ font-family: sans-serif;`
`24`	`26`	`}`
`25`	`27`
`26`	`28`	`.cdk-drag-preview {`