This is an automated email from the ASF dual-hosted git repository.
mcgilman pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 68adc6f842e NIFI-15873 Theme mat-stepper (#11224)
68adc6f842e is described below
commit 68adc6f842e9099240b411f5c8d5eaf6f6a5d3e6
Author: Scott Aslan <[email protected]>
AuthorDate: Wed May 13 12:56:39 2026 -0400
NIFI-15873 Theme mat-stepper (#11224)
* NIFI-15873 Theme mat-stepper
* remove unused class from template
* address review feedback
---
.../connector-wizard.component.html | 8 +++--
.../src/components/wizard/wizard.component.html | 7 ++---
.../src/components/wizard/wizard.component.scss | 35 ++--------------------
3 files changed, 10 insertions(+), 40 deletions(-)
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/components/connector-wizard/connector-wizard.component.html
b/nifi-frontend/src/main/frontend/libs/shared/src/components/connector-wizard/connector-wizard.component.html
index 5fc28f4016b..89723da6622 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/components/connector-wizard/connector-wizard.component.html
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/components/connector-wizard/connector-wizard.component.html
@@ -95,13 +95,17 @@
<i class="fa fa-circle-o text-[24px] leading-none
align-middle" aria-hidden="true"></i>
</ng-template>
<ng-template matStepperIcon="edit">
- <i class="fa fa-circle-o text-[24px] leading-none
align-middle" aria-hidden="true"></i>
+ <i
+ class="fa fa-circle-o primary-contrast
text-[24px] leading-none align-middle"
+ aria-hidden="true"></i>
</ng-template>
<ng-template matStepperIcon="done">
<i class="fa fa-check-circle text-[24px]
leading-none align-middle" aria-hidden="true"></i>
</ng-template>
<ng-template matStepperIcon="error">
- <i class="fa fa-warning text-[24px] leading-none
align-middle" aria-hidden="true"></i>
+ <i
+ class="fa fa-warning error-color text-[24px]
leading-none align-middle"
+ aria-hidden="true"></i>
</ng-template>
</wizard>
} @else {
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/components/wizard/wizard.component.html
b/nifi-frontend/src/main/frontend/libs/shared/src/components/wizard/wizard.component.html
index 682c327ea2d..84e156eaf4b 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/components/wizard/wizard.component.html
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/components/wizard/wizard.component.html
@@ -16,12 +16,9 @@
-->
<div class="wizard-stepper flex flex-1">
- <div class="wizard-stepper-header-wrapper flex flex-col gap-y-2 shrink-0
px-4 py-4">
+ <div class="wizard-stepper-header-wrapper flex flex-col gap-y-2 shrink-0
px-4 py-4 border-r">
@for (step of steps; track step) {
- <div
- class="mat-step"
- [class.step-active]="selectedIndex === $index"
- [class.step-disabled]="stepIsDisabled(step)">
+ <div class="mat-step" [class.step-active]="selectedIndex ===
$index">
<ng-container [ngTemplateOutlet]="stepTemplate"
[ngTemplateOutletContext]="{ step, i: $index }" />
</div>
}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/components/wizard/wizard.component.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/components/wizard/wizard.component.scss
index 41b81c0ee0d..eccb0f11e16 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/components/wizard/wizard.component.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/components/wizard/wizard.component.scss
@@ -18,8 +18,6 @@
.wizard-stepper {
.wizard-stepper-header-wrapper {
width: 280px;
- background-color: var(--mat-sys-surface-container-low);
- border-right: 1px solid var(--mat-sys-outline-variant);
overflow-y: auto;
}
@@ -28,41 +26,12 @@
gap: 8px;
align-items: center;
padding: 8px 16px;
-
- .mat-icon.step-icon {
- color: var(--mat-sys-on-surface-variant);
- height: 20px;
- width: 20px;
- }
}
- // There are no available overrides in mat.stepper-overrides for the
selected step bg or radius.
- // As such, they are set here and rely on the wizard adding the
step-active class.
.step-active .mat-step-header {
- background-color: var(--mat-sys-secondary-container);
- border-radius: 8px;
- color: var(--mat-sys-on-secondary-container);
-
- .mat-icon.step-icon,
- .mat-step-label {
- color: var(--mat-sys-on-secondary-container);
- }
- }
-
- .step-disabled .mat-step-header {
- color: var(--mat-sys-outline);
-
- .mat-icon.step-icon,
.mat-step-label {
- color: var(--mat-sys-outline);
+ color: var(--mat-sys-tertiary);
+ font-weight: 700;
}
}
-
- .mat-step-icon-selected {
- background: unset;
- }
-
- .step-buttons {
- background-color: var(--mat-sys-surface-container-low);
- }
}
