8ef9750064
Align the optional workflow steps menu with dashboard theme tokens. - Replace hardcoded fallback styling with shared surface, border, radius, shadow, hover, and accent tokens. - Add dropdown CSS regression coverage for canonical tokens and no hardcoded fallback colors. - Cover open-panel option states with multiple selections and missing descriptions. - Add a patch changeset for the published Fusion package. Files changed: .changeset/fn-7157-steps-dropdown-theme.md | 7 +++ .../components/WorkflowOptionalStepsDropdown.css | 15 +++--- .../WorkflowOptionalStepsDropdown.test.tsx | 57 ++++++++++++++++++++++ 3 files changed, 71 insertions(+), 8 deletions(-) Fusion-Task-Id: FN-7157 Fusion-Task-Lineage: 2b68c021-416c-403d-b137-1afc91870d3f Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
68 lines
1.6 KiB
CSS
68 lines
1.6 KiB
CSS
/* WorkflowOptionalStepsDropdown — shared optional-step multi-select. The panel
|
|
* renders through a portal (position: fixed) so it is not clipped inside a modal's
|
|
* overflow boundary. */
|
|
|
|
.wf-optional-steps-dropdown {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.wf-optional-steps-dropdown-trigger:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
.wf-optional-steps-dropdown-panel {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
padding: 4px;
|
|
/* FNXC:DashboardThemeTokens 2026-06-27-00:00: Optional-step panels share the canonical dropdown surface tokens so Quick Entry, Task Form, and Inline Create render correctly across dark, light, and shadcn color themes without hardcoded hex or px fallbacks. */
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.wf-optional-steps-dropdown-option {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wf-optional-steps-dropdown-option:hover,
|
|
.wf-optional-steps-dropdown-option.is-active {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.wf-optional-steps-dropdown-option:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.wf-optional-steps-dropdown-option-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wf-optional-steps-dropdown-option-name {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wf-optional-steps-dropdown-option-desc {
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
}
|