From 76e4f5991cafb001a85ca3e72e8439767b65da8e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sun, 28 Mar 2021 14:49:35 +0200 Subject: [PATCH] refactor(cdk/overlay): clean up variable names This is follow-up from the PR that introduced the theming API migration (https://github.com/angular/components/pull/22304#discussion_r598258575). It renames a few variables in the CDK to align them with the new API. --- src/cdk/_index.scss | 4 ++-- src/cdk/overlay/_overlay-deprecated.scss | 13 ++++++++++++ src/cdk/overlay/_overlay.import.scss | 13 +++++++----- src/cdk/overlay/_overlay.scss | 20 +++++++++---------- .../ng-generate/theming-api/index.spec.ts | 6 +++--- .../ng-generate/theming-api/migration.ts | 8 ++++---- 6 files changed, 40 insertions(+), 24 deletions(-) create mode 100644 src/cdk/overlay/_overlay-deprecated.scss diff --git a/src/cdk/_index.scss b/src/cdk/_index.scss index 2fcdcb75d4c3..deb63dcc1f3b 100644 --- a/src/cdk/_index.scss +++ b/src/cdk/_index.scss @@ -1,5 +1,5 @@ -@forward './overlay/overlay' show overlay, $z-index-overlay-container, $z-index-overlay, - $z-index-overlay-backdrop, $dark-backdrop-background; +@forward './overlay/overlay' show overlay, $overlay-container-z-index, $overlay-z-index, + $overlay-backdrop-z-index, $overlay-backdrop-color; @forward './a11y/a11y' show a11y-visually-hidden, high-contrast; @forward './text-field/text-field' show text-field-autosize, text-field-autofill, text-field-autofill-color, diff --git a/src/cdk/overlay/_overlay-deprecated.scss b/src/cdk/overlay/_overlay-deprecated.scss new file mode 100644 index 000000000000..0208d1f4842b --- /dev/null +++ b/src/cdk/overlay/_overlay-deprecated.scss @@ -0,0 +1,13 @@ +@use './overlay'; + +// @deprecated Use `$overlay-container-z-index`. +$z-index-overlay-container: overlay.$overlay-container-z-index; + +// @deprecated Use `$overlay-z-index`. +$z-index-overlay: overlay.$overlay-z-index; + +// @deprecated Use `$overlay-backdrop-color`. +$dark-backdrop-background: overlay.$overlay-backdrop-color; + +// @deprecated Use `$overlay-backdrop-z-index`. +$z-index-overlay-backdrop: overlay.$overlay-backdrop-z-index; diff --git a/src/cdk/overlay/_overlay.import.scss b/src/cdk/overlay/_overlay.import.scss index af15d33e5cce..92c67f9ccfc8 100644 --- a/src/cdk/overlay/_overlay.import.scss +++ b/src/cdk/overlay/_overlay.import.scss @@ -1,10 +1,13 @@ @forward '../a11y/a11y' as cdk-*; -@forward 'overlay' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop, -$z-index-overlay-container, overlay; +@forward 'overlay' hide $overlay-backdrop-color, $overlay-z-index, $overlay-backdrop-z-index, + $overlay-container-z-index, overlay; @forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration, -$cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background; + $cdk-backdrop-animation-timing-function, $cdk-overlay-backdrop-color; @forward 'overlay' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration, -$cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay, -$cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container, cdk-overlay-overlay; + $cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-overlay-z-index, + $cdk-overlay-overlay-backdrop-z-index, $cdk-overlay-overlay-container-z-index, + cdk-overlay-overlay; +@forward './overlay-deprecated' as cdk-*; +@forward './overlay-deprecated' as cdk-overlay-*; @import '../a11y/a11y'; diff --git a/src/cdk/overlay/_overlay.scss b/src/cdk/overlay/_overlay.scss index 1c8a38e964bc..1c7f56be9738 100644 --- a/src/cdk/overlay/_overlay.scss +++ b/src/cdk/overlay/_overlay.scss @@ -1,12 +1,12 @@ // We want overlays to always appear over user content, so set a baseline // very high z-index for the overlay container, which is where we create the new // stacking context for all overlays. -$z-index-overlay-container: 1000 !default; -$z-index-overlay: 1000 !default; -$z-index-overlay-backdrop: 1000 !default; +$overlay-container-z-index: 1000 !default; +$overlay-z-index: 1000 !default; +$overlay-backdrop-z-index: 1000 !default; // Background color for all of the backdrops -$dark-backdrop-background: rgba(0, 0, 0, 0.32) !default; +$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default; // Default backdrop animation is based on the Material Design swift-ease-out. $backdrop-animation-duration: 400ms !default; @@ -28,7 +28,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; // The overlay-container is an invisible element which contains all individual overlays. .cdk-overlay-container { position: fixed; - z-index: $z-index-overlay-container; + z-index: $overlay-container-z-index; &:empty { // Hide the element when it doesn't have any child nodes. This doesn't @@ -44,7 +44,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; .cdk-global-overlay-wrapper { display: flex; position: absolute; - z-index: $z-index-overlay; + z-index: $overlay-z-index; } // A single overlay pane. @@ -54,7 +54,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; position: absolute; pointer-events: auto; box-sizing: border-box; - z-index: $z-index-overlay; + z-index: $overlay-z-index; // For connected-position overlays, we set `display: flex` in // order to force `max-width` and `max-height` to take effect. @@ -71,7 +71,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; left: 0; right: 0; - z-index: $z-index-overlay-backdrop; + z-index: $overlay-backdrop-z-index; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function; @@ -92,7 +92,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; } .cdk-overlay-dark-backdrop { - background: $dark-backdrop-background; + background: $overlay-backdrop-color; } .cdk-overlay-transparent-backdrop { @@ -109,7 +109,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; // overlay element's size to fit within the viewport. .cdk-overlay-connected-position-bounding-box { position: absolute; - z-index: $z-index-overlay; + z-index: $overlay-z-index; // We use `display: flex` on this element exclusively for centering connected overlays. // When *not* centering, a top/left/bottom/right will be set which overrides the normal diff --git a/src/material/schematics/ng-generate/theming-api/index.spec.ts b/src/material/schematics/ng-generate/theming-api/index.spec.ts index bf9a23163215..a29891957985 100644 --- a/src/material/schematics/ng-generate/theming-api/index.spec.ts +++ b/src/material/schematics/ng-generate/theming-api/index.spec.ts @@ -104,7 +104,7 @@ describe('Material theming API schematic', () => { `@include cdk.overlay();`, ``, `.my-dialog {`, - `z-index: cdk.$z-index-overlay-container + 1;`, + `z-index: cdk.$overlay-container-z-index + 1;`, `}`, ``, `@include cdk.high-contrast(active, off) {`, @@ -161,7 +161,7 @@ describe('Material theming API schematic', () => { `@include mat.all-component-themes($candy-app-theme);`, `.my-dialog {`, - `z-index: cdk.$z-index-overlay-container + 1;`, + `z-index: cdk.$overlay-container-z-index + 1;`, `}` ]); }); @@ -284,7 +284,7 @@ describe('Material theming API schematic', () => { expect(getFileContent(tree, '/components/dialog.scss').split('\n')).toEqual([ `@use '~@angular/cdk' as cdk;`, `.my-dialog {`, - `z-index: cdk.$z-index-overlay-container + 1;`, + `z-index: cdk.$overlay-container-z-index + 1;`, `}`, ]); }); diff --git a/src/material/schematics/ng-generate/theming-api/migration.ts b/src/material/schematics/ng-generate/theming-api/migration.ts index ece933d871d5..9e0acdc408ba 100644 --- a/src/material/schematics/ng-generate/theming-api/migration.ts +++ b/src/material/schematics/ng-generate/theming-api/migration.ts @@ -78,10 +78,10 @@ const materialVariables: Record = { /** Mapping of CDK variables that should be renamed. */ const cdkVariables: Record = { - 'cdk-z-index-overlay-container': 'z-index-overlay-container', - 'cdk-z-index-overlay': 'z-index-overlay', - 'cdk-z-index-overlay-backdrop': 'z-index-overlay-backdrop', - 'cdk-overlay-dark-backdrop-background': 'overlay-dark-backdrop-background', + 'cdk-z-index-overlay-container': 'overlay-container-z-index', + 'cdk-z-index-overlay': 'overlay-z-index', + 'cdk-z-index-overlay-backdrop': 'overlay-backdrop-z-index', + 'cdk-overlay-dark-backdrop-background': 'overlay-backdrop-color', }; /** Mapping of CDK mixins that should be renamed. */