scottyaslan commented on code in PR #11262:
URL: https://github.com/apache/nifi/pull/11262#discussion_r3364628158
##########
nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.scss:
##########
@@ -15,106 +15,59 @@
* limitations under the License.
*/
-@use '@angular/material' as mat;
-
-// Forward --mat-option-* CSS custom properties onto multi-select-option
elements.
-// mat.theme() only emits system-level --mat-sys-* tokens; component-specific
tokens
-// need to be set explicitly for custom elements that extend MatOption.
-multi-select-option {
- @include mat.option-overrides(
- (
- hover-state-layer-color: color-mix(
- in srgb,
- var(--mat-sys-on-surface)
calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
- transparent
- ),
- focus-state-layer-color: color-mix(
- in srgb,
- var(--mat-sys-on-surface)
calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
- transparent
- ),
- selected-state-layer-color: var(--mat-sys-secondary-container),
- selected-state-label-text-color:
var(--mat-sys-on-secondary-container),
- label-text-color: var(--mat-sys-on-surface)
- )
- );
-}
-
.multi-select-option {
display: flex;
flex-direction: row;
- .mat-pseudo-checkbox {
- height: 16px;
- width: 16px;
- margin-left: 4px;
- --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(
- --mat-option-selected-state-label-text-color,
- var(--mat-sys-on-secondary-container)
- );
- }
-
- .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
- height: 4px;
- width: 10px;
+ .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after,
+ .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate::after {
+ color: var(--mat-sys-on-secondary-container);
}
+}
- // State layer rules mirrored from
@angular/material/core/option/option.scss (Material 3, v20).
- // multi-select-option extends MatOption but has its own template/styles,
so MatOption's
- // compiled CSS is not automatically loaded. The mat.option-overrides()
above sets the
- // --mat-option-* tokens; these rules consume them (with color-mix
fallbacks).
- // On Angular Material upgrades, diff against:
@angular/material/core/option/option.scss
-
- &.mdc-list-item {
- background: transparent;
- }
+// Angular Material only injects MatOption's component styles when a real
<mat-option> is rendered.
+// Since this component replaces mat-option entirely, we replicate the
state-layer CSS here so that
+// hover, focus, active, and selected visuals are applied whenever
MultiSelectOption is used.
+.mat-mdc-option {
+ cursor: pointer;
+}
- &:hover:not(.mdc-list-item--disabled) {
- cursor: pointer;
- background-color: var(
- --mat-option-hover-state-layer-color,
- color-mix(
- in srgb,
- var(--mat-sys-on-surface)
calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
- transparent
- )
- );
- }
+.mat-mdc-option:hover:not(.mdc-list-item--disabled) {
+ background-color: var(
+ --mat-option-hover-state-layer-color,
+ color-mix(in srgb, var(--mat-sys-on-surface)
calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent)
+ );
+}
- &:focus.mdc-list-item,
- &.mat-mdc-option-active.mdc-list-item {
- background-color: var(
- --mat-option-focus-state-layer-color,
- color-mix(
- in srgb,
- var(--mat-sys-on-surface)
calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
- transparent
- )
- );
- outline: 0;
- }
+.mat-mdc-option:focus.mdc-list-item,
+.mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+ background-color: var(
+ --mat-option-focus-state-layer-color,
+ color-mix(in srgb, var(--mat-sys-on-surface)
calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent)
+ );
+ outline: 0;
+}
-
&.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,
:focus, :hover) {
- background-color: var(--mat-option-selected-state-layer-color,
var(--mat-sys-secondary-container));
+.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(
+ .mat-mdc-option-active,
+ .mat-mdc-option-multiple,
+ :focus,
+ :hover
+ ) {
+ background-color: var(--mat-option-selected-state-layer-color,
var(--mat-sys-secondary-container));
- .mdc-list-item__primary-text {
- color: var(--mat-option-selected-state-label-text-color,
var(--mat-sys-on-secondary-container));
- }
+ .mdc-list-item__primary-text {
+ color: var(--mat-option-selected-state-label-text-color,
var(--mat-sys-on-secondary-container));
}
+}
- &.mdc-list-item.mdc-list-item--disabled {
- cursor: default;
- color: var(--nf-disabled);
- }
+.mat-mdc-option.mdc-list-item {
+ min-height: 48px;
+ padding: 0 16px;
+ align-items: center;
+ background: transparent;
+}
- // When hover/focus/active overrides the selected background, revert the
checkmark
- // to the regular label color so it remains visible against the state
layer.
- &:hover .mat-pseudo-checkbox,
- &:focus .mat-pseudo-checkbox,
- &.mat-mdc-option-active .mat-pseudo-checkbox {
- --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(
- --mat-option-label-text-color,
- var(--mat-sys-on-surface)
- );
- }
+.mat-mdc-option-active .mat-focus-indicator::before {
+ content: '';
Review Comment:
This is a valid concern in principle, but multi-select-option.component.scss
no longer contains any .mat-mdc-option state-layer rules — they have been moved
to _option.scss in the latest commit. The current component SCSS contains only
two things: the .multi-select-option host layout (display: flex;
flex-direction: row) and the .mat-pseudo-checkbox-minimal checkmark color, both
of which are genuinely specific to MultiSelectOption's rendering.
The comment in _option.scss (lines 62–64) explains why those rules live in
the theme partial rather than the component file: Angular Material's lazy style
injection never fires for MultiSelectOption because it extends MatOption via DI
but renders a custom element — so the state-layer backgrounds would be missing
entirely unless declared in a partial that's always in the bundle. Your concern
about ViewEncapsulation.None making component styles globally scoped is
correct, but the solution here isn't to move rules back to the component file;
it's the opposite — get them out of the component file entirely and into the
theme partial.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
