From c3f662ef27ee6824633d37883619b4224de7a46f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 23 Jan 2018 17:14:56 +0100 Subject: [PATCH] refactor(option): move styles out of mat-core and into styleUrls (#9115) Moves the styling for `MatOption` and `MatOptgroup` out of the `mat-core` mixin and into their components' respective `styleUrls`. This avoids the styles potentially being included multiple times if `mat-core` is used in different places and is consistent with all other components. --- src/lib/core/BUILD.bazel | 28 +++++++++++- src/lib/core/_core.scss | 4 -- src/lib/core/option/_optgroup.scss | 10 ----- src/lib/core/option/_option.scss | 72 ------------------------------ src/lib/core/option/optgroup.scss | 8 ++++ src/lib/core/option/optgroup.ts | 1 + src/lib/core/option/option.scss | 65 +++++++++++++++++++++++++++ src/lib/core/option/option.ts | 1 + 8 files changed, 102 insertions(+), 87 deletions(-) delete mode 100644 src/lib/core/option/_optgroup.scss delete mode 100644 src/lib/core/option/_option.scss create mode 100644 src/lib/core/option/optgroup.scss create mode 100644 src/lib/core/option/option.scss diff --git a/src/lib/core/BUILD.bazel b/src/lib/core/BUILD.bazel index 7610b8c12f9..2ef2e7ed820 100644 --- a/src/lib/core/BUILD.bazel +++ b/src/lib/core/BUILD.bazel @@ -7,7 +7,7 @@ ng_module( name = "core", srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]), module_name = "@angular/material/core", - assets = [":pseudo_checkbox_css"], + assets = [":pseudo_checkbox_css", ":option_css", ":optgroup_css"], deps = [ "//src/cdk/bidi", "//src/cdk/coercion", @@ -32,6 +32,18 @@ sass_binary( deps = [":core_scss_lib"], ) +sass_binary( + name = "option_scss", + src = "option/option.scss", + deps = [":core_scss_lib"], +) + +sass_binary( + name = "optgroup_scss", + src = "option/optgroup.scss", + deps = [":core_scss_lib"], +) + # TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir. # Copy the output of the sass_binary such that the filename and path match what we expect. genrule( @@ -40,3 +52,17 @@ genrule( outs = ["selection/pseudo-checkbox/pseudo-checkbox.css"], cmd = "cat $(locations :pseudo_checkbox_scss) > $@", ) + +genrule( + name = "option_css", + srcs = [":option_scss"], + outs = ["option/option.css"], + cmd = "cat $(locations :option_scss) > $@", +) + +genrule( + name = "optgroup_css", + srcs = [":optgroup_scss"], + outs = ["option/optgroup.css"], + cmd = "cat $(locations :optgroup_scss) > $@", +) diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss index a4aef3daca7..1162cfbe057 100644 --- a/src/lib/core/_core.scss +++ b/src/lib/core/_core.scss @@ -6,9 +6,7 @@ // Core styles that can be used to apply material design treatments to any element. @import 'style/elevation'; @import 'ripple/ripple'; -@import 'option/option'; @import 'option/option-theme'; -@import 'option/optgroup'; @import 'option/optgroup-theme'; @import 'selection/pseudo-checkbox/pseudo-checkbox-theme'; @import 'typography/all-typography'; @@ -26,8 +24,6 @@ @include angular-material-typography($typography-config); @include mat-ripple(); - @include mat-option(); - @include mat-optgroup(); @include cdk-a11y(); @include cdk-overlay(); } diff --git a/src/lib/core/option/_optgroup.scss b/src/lib/core/option/_optgroup.scss deleted file mode 100644 index 2ca79af39db..00000000000 --- a/src/lib/core/option/_optgroup.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '../style/menu-common'; -@import '../style/vendor-prefixes'; - -@mixin mat-optgroup() { - .mat-optgroup-label { - @include mat-menu-item-base(); - @include user-select(none); - cursor: default; - } -} diff --git a/src/lib/core/option/_option.scss b/src/lib/core/option/_option.scss deleted file mode 100644 index fdb4bf884dd..00000000000 --- a/src/lib/core/option/_option.scss +++ /dev/null @@ -1,72 +0,0 @@ -@import '../style/menu-common'; -@import '../style/vendor-prefixes'; -@import '../style/layout-common'; -@import '../../../cdk/a11y/a11y'; - -/** - * This mixin contains shared option styles between the select and - * autocomplete components. - */ -@mixin mat-option() { - .mat-option { - @include mat-menu-item-base(); - position: relative; - cursor: pointer; - outline: none; - display: flex; - flex-direction: row; - max-width: 100%; - box-sizing: border-box; - align-items: center; - - &[aria-disabled='true'] { - @include user-select(none); - cursor: default; - } - - .mat-optgroup &:not(.mat-option-multiple) { - padding-left: $mat-menu-side-padding * 2; - - [dir='rtl'] & { - padding-left: $mat-menu-side-padding; - padding-right: $mat-menu-side-padding * 2; - } - } - } - - // Collapses unwanted whitespace created by newlines in code like the following: - // - // {{value}} - // - .mat-option-text { - display: inline-block; - flex-grow: 1; - overflow: hidden; - text-overflow: ellipsis; - } - - .mat-option-ripple { - @include mat-fill; - - // Disable pointer events for the ripple container because the container will overlay the - // user content and we don't want to disable mouse events on the user content. - // Pointer events can be safely disabled because the ripple trigger element is the host element. - pointer-events: none; - - // Prevents the ripple from completely covering the option in high contrast mode. - @include cdk-high-contrast { - opacity: 0.5; - } - } - - .mat-option-pseudo-checkbox { - $margin: $mat-menu-side-padding / 2; - margin-right: $margin; - - [dir='rtl'] & { - margin-left: $margin; - margin-right: 0; - } - } -} - diff --git a/src/lib/core/option/optgroup.scss b/src/lib/core/option/optgroup.scss new file mode 100644 index 00000000000..ddea6ae3db5 --- /dev/null +++ b/src/lib/core/option/optgroup.scss @@ -0,0 +1,8 @@ +@import '../style/menu-common'; +@import '../style/vendor-prefixes'; + +.mat-optgroup-label { + @include mat-menu-item-base(); + @include user-select(none); + cursor: default; +} diff --git a/src/lib/core/option/optgroup.ts b/src/lib/core/option/optgroup.ts index 87cd4b35c2f..512177a99c6 100644 --- a/src/lib/core/option/optgroup.ts +++ b/src/lib/core/option/optgroup.ts @@ -29,6 +29,7 @@ let _uniqueOptgroupIdCounter = 0; preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], + styleUrls: ['optgroup.css'], host: { 'class': 'mat-optgroup', 'role': 'group', diff --git a/src/lib/core/option/option.scss b/src/lib/core/option/option.scss new file mode 100644 index 00000000000..7b522635bb8 --- /dev/null +++ b/src/lib/core/option/option.scss @@ -0,0 +1,65 @@ +@import '../style/menu-common'; +@import '../style/vendor-prefixes'; +@import '../style/layout-common'; +@import '../../../cdk/a11y/a11y'; + +.mat-option { + @include mat-menu-item-base(); + position: relative; + cursor: pointer; + outline: none; + display: flex; + flex-direction: row; + max-width: 100%; + box-sizing: border-box; + align-items: center; + + &[aria-disabled='true'] { + @include user-select(none); + cursor: default; + } + + .mat-optgroup &:not(.mat-option-multiple) { + padding-left: $mat-menu-side-padding * 2; + + [dir='rtl'] & { + padding-left: $mat-menu-side-padding; + padding-right: $mat-menu-side-padding * 2; + } + } +} + +// Collapses unwanted whitespace created by newlines in code like the following: +// +// {{value}} +// +.mat-option-text { + display: inline-block; + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; +} + +.mat-option-ripple { + @include mat-fill; + + // Disable pointer events for the ripple container because the container will overlay the + // user content and we don't want to disable mouse events on the user content. + // Pointer events can be safely disabled because the ripple trigger element is the host element. + pointer-events: none; + + // Prevents the ripple from completely covering the option in high contrast mode. + @include cdk-high-contrast { + opacity: 0.5; + } +} + +.mat-option-pseudo-checkbox { + $margin: $mat-menu-side-padding / 2; + margin-right: $margin; + + [dir='rtl'] & { + margin-left: $margin; + margin-right: 0; + } +} diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts index 64666edb966..40d1dfbca8f 100644 --- a/src/lib/core/option/option.ts +++ b/src/lib/core/option/option.ts @@ -76,6 +76,7 @@ export const MAT_OPTION_PARENT_COMPONENT = '(keydown)': '_handleKeydown($event)', 'class': 'mat-option', }, + styleUrls: ['option.css'], templateUrl: 'option.html', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false,