rfellows commented on code in PR #11262:
URL: https://github.com/apache/nifi/pull/11262#discussion_r3357867082
##########
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:
With `ViewEncapsulation.None`, these rules are global the moment the class
is imported anywhere — but they're attached to one component's lifecycle.
"applied whenever MultiSelectOption is used" is misleading, because the
resulting CSS targets every `.mat-mdc-option` in the app, not just
`MultiSelectOption`.
Recommend: move the entire `.mat-mdc-option { ...
}`/`:hover`/`:focus`/`--selected` block from
`multi-select-option.component.scss` into either `_option.scss` or
`_select.scss` and let the partial own all global option styling. Leave
`multi-select-option.component.scss` with only the .`multi-select-option` and
`.mat-pseudo-checkbox-*` rules that are actually component-specific. That gives
a consistent rule: global Material overrides live in
`themes/components/*.scss;` component scss files are component-scoped.
##########
nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_option.scss:
##########
Review Comment:
The new file naming makes it hard to predict where a given rule lives.
`_option.scss` carries `mat.option-overrides()`, primary-text truncation,
and `.fa` icon sizing;
`_select.scss` carries cursor rules for
`.mat-mdc-option.mdc-list-item--selected`.
Both files are styling .`mat-mdc-option`. Recommend collapsing
`_option.scss` into `_select.scss` so it covers the select panel, options,
disabled-list-items, and active/selected state-layer rules in one place
##########
nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_status-variant.scss:
##########
@@ -0,0 +1,116 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ // NOTE: The following styles are for the status badge and status
banner components. The `.status-variant` class should only be applied to a div
or span element that should adhear to the variant color and background.
+ .status-variant {
+ &.neutral {
+ color: var(--mat-sys-on-surface);
+ background-color: var(--mat-sys-surface-dim);
+ }
+ &.critical {
+ color: var(--mat-sys-on-error);
+ background-color: var(--mat-sys-error);
+ }
+ &.caution {
+ color: var(--nf-caution-contrast);
+ background-color: var(--nf-caution-default);
+ }
+ &.success {
+ color: var(--nf-success-contrast);
+ background-color: var(--nf-success-default);
+ }
+ &.info {
+ color: var(--nf-success-contrast);
+ background-color: var(--nf-success-variant);
+ }
+
+ .fa {
+ &.neutral {
+ color: var(--mat-sys-on-surface);
+ }
+
+ &.critical {
+ color: var(--mat-sys-on-error);
+ }
+
+ &.caution {
+ color: var(--nf-caution-contrast);
+ }
+
+ &.success {
+ color: var(--nf-success-contrast);
+ }
+
+ &.info {
+ color: var(--nf-success-contrast);
+ }
+ }
+ }
+ }
+
+ .darkMode {
Review Comment:
While i didn't list this file in the bulleted list, the comment was here so
I assumed this one (`_status-variant.scss`) would also get rid of the
duplicative `darkMode` block.
--
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]
