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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user