FN-6147: polish simple editor mobile button states

Polish simple workflow editor controls for clearer mobile interaction.

- add hover, focus, and active states to simple editor graph buttons and mobile tab/add controls
- replace hard-coded simple editor spacing with shared spacing tokens for node labels and edge chips
- add CSS contract tests covering the new button state and spacing rules

Files changed:
 .../app/components/MobileWorkflowGraphView.css     |  57 +++++++++++-
 .../app/components/WorkflowNodeEditor.css          |  37 ++++++++
 .../__tests__/MobileWorkflowGraphView.css.test.ts  | 100 +++++++++++++++++++++
 3 files changed, 191 insertions(+), 3 deletions(-)

Fusion-Task-Id: FN-6147

Fusion-Task-Lineage: 5ef4baeb-ccad-4811-aada-a195ecf8d754
This commit is contained in:
gsxdsm
2026-06-09 17:56:24 -07:00
parent f26cfe0cb0
commit 1b68107eea
3 changed files with 191 additions and 3 deletions

View File

@@ -1484,6 +1484,10 @@
background: var(--bg-secondary);
color: var(--text);
cursor: pointer;
transition:
background var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.wf-mobile-tab--active {
@@ -1491,6 +1495,19 @@
background: var(--bg-tertiary);
}
.wf-mobile-tab:hover {
background: var(--bg-tertiary);
}
.wf-mobile-tab:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
.wf-mobile-tab:active {
transform: scale(0.97);
}
.wf-mobile-panel {
flex: 1 1 auto;
min-height: 0;
@@ -1541,6 +1558,26 @@
cursor: pointer;
text-align: left;
overflow-wrap: anywhere;
transition:
background var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.wf-mobile-add-option:hover,
.wf-mobile-template-option:hover {
background: var(--bg-tertiary);
}
.wf-mobile-add-option:focus-visible,
.wf-mobile-template-option:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
.wf-mobile-add-option:active,
.wf-mobile-template-option:active {
transform: scale(0.97);
}
.wf-mobile-template-filter {