From 301e3e4cb91521180b81ecada53d6cb443cc0e75 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sat, 9 Aug 2025 09:09:15 +0200 Subject: [PATCH] docs(cdk/drag-drop): ensure that examples look good on adev 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. --- .../cdk-drag-drop-axis-lock-example.css | 1 + .../cdk-drag-drop-boundary-example.css | 1 + .../cdk-drag-drop-connected-sorting-group-example.css | 2 ++ .../cdk-drag-drop-connected-sorting-example.css | 2 ++ .../cdk-drag-drop-copy-list-example.css | 2 ++ .../cdk-drag-drop-custom-placeholder-example.css | 2 ++ .../cdk-drag-drop-custom-preview-example.css | 2 ++ .../cdk-drag-drop-delay/cdk-drag-drop-delay-example.css | 1 + .../cdk-drag-drop-disabled-sorting-example.css | 2 ++ .../cdk-drag-drop-disabled-example.css | 2 ++ .../cdk-drag-drop-enter-predicate-example.css | 2 ++ .../cdk-drag-drop-free-drag-position-example.css | 1 + .../cdk-drag-drop-handle/cdk-drag-drop-handle-example.css | 6 +++++- .../cdk-drag-drop-handle/cdk-drag-drop-handle-example.html | 2 +- .../cdk-drag-drop-horizontal-sorting-example.css | 2 ++ .../cdk-drag-drop-mixed-sorting-example.css | 2 ++ .../cdk-drag-drop-overview-example.css | 1 + .../cdk-drag-drop-root-element-example.css | 1 + .../cdk-drag-drop-scrollable-example.css | 2 ++ .../cdk-drag-drop-sort-predicate-example.css | 2 ++ .../cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css | 2 ++ .../cdk-drag-drop-table/cdk-drag-drop-table-example.css | 1 + 22 files changed, 39 insertions(+), 2 deletions(-) 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 index 7123ff1f8681..2fff94ff117b 100644 --- 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 index aa7b8cb7a090..0489d9d0ec48 100644 --- 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 index 81ffa9305f01..af4470456b4a 100644 --- 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 index 81ffa9305f01..af4470456b4a 100644 --- 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 index 831122b5e934..69c23ec04896 100644 --- 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 index ff2e445b8ccc..c8ae685d5f09 100644 --- 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 index 8e55bdbb9a65..62cc39f5cc89 100644 --- 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 index 1e725e0ee13c..bc7616b91eb7 100644 --- 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 index 81ffa9305f01..af4470456b4a 100644 --- 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 index ba8046b9093e..aa61e07b1e13 100644 --- 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 index 81ffa9305f01..af4470456b4a 100644 --- 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 index 1e725e0ee13c..bc7616b91eb7 100644 --- 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 index a11481e2585f..f99e4c193e4b 100644 --- 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 index 368f748ea396..2d1798df80d1 100644 --- 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
- + 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 index d093c86edf43..a26a6ea87cfb 100644 --- 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 index eec65dd76c5c..b1bf6ae2644f 100644 --- 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 index 1e725e0ee13c..65c3220c3cfe 100644 --- 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 index b54b269f0564..30d7e2d45c1f 100644 --- 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 index 1288a030736c..f429431be37b 100644 --- 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 index 46153339de4c..2adc2bddddbd 100644 --- 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 index 56f580a8e8d6..7d15c22d18d9 100644 --- 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 index d1c7b844f677..d11a28880ac1 100644 --- 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 {