fix(apollo-react): render stage task entry-condition icon at a consistent size#901
fix(apollo-react): render stage task entry-condition icon at a consistent size#901BenNormann wants to merge 1 commit into
Conversation
…tent size The entry-condition diamond rendered 20px for tasks without an execution status and 16px once the task had run, so diamonds in the same stage differed in size. Render it at a fixed 16px (matching the execution status icon) and drop the now-unused small prop. Also add the standard SpacingXs gap to the task first row so a truncated label (and its required asterisk) never sits flush against the status icon. MST-12000
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
This PR fixes inconsistent sizing of the entry-condition (diamond) icon in stage task rows within apollo-react’s canvas StageNode, ensuring it renders at a consistent 16×16 regardless of execution status. It also improves row layout by adding a standard minimum gap so truncated labels (and the required * marker) don’t sit flush against the right-side status/action group.
Changes:
- Render
EntryConditionIconat a fixed 16×16 inStageTaskEntryConditionIconand remove thesmallprop. - Remove
smallat theStageTaskEntryConditionIconcall sites inTaskContent. - Add
gap={Spacing.SpacingXs}to the first-rowRowcontainer to enforce a minimum separation between left and right groups.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/StageNode/TaskContent.tsx | Removes small prop usage and adds a standard row gap to prevent label/status crowding. |
| packages/apollo-react/src/canvas/components/StageNode/StageTaskEntryConditionIcon.tsx | Simplifies the component API and forces a consistent 16×16 entry-condition icon size. |
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Summary
Fixes MST-12000: in a stage node, the entry-condition diamond rendered 20px on tasks that had not run and 16px on tasks with an execution status, so diamonds in the same stage visibly differed in size. The icon now renders at a fixed 16px, matching the 16px
ExecutionStatusIconnext to it. Also adds the row's standardSpacingXsgap to the task's first row so a truncated label (and its required*marker) never sits flush against the status icon.Demo
Before
After
Changes
StageTaskEntryConditionIcon: renderEntryConditionIconat a fixed 16×16 and remove thesmallprop (the component is internal toStageNode; no other callers).TaskContent: drop thesmallprop at both call sites; addgap={Spacing.SpacingXs}to the first-row container so the left label group and the right status/action group always keep a minimum gap.Flow
flowchart TD TC[TaskContent row] -->|task not run| A[StageTaskEntryConditionIcon] TC -->|task executed| B[StageTaskEntryConditionIcon] A -->|before: 20px / after: 16px| D[EntryConditionIcon] B -->|before: 16px / after: 16px| DTesting
pnpm lintpassespnpm typecheckpassespnpm testpasses (apollo-react: 107 files, 1915 tests)pnpm test:visual— no local task; runs in CIStageNode→Ad hoc Tasksstory, "Mixed with Parallel" stage with Completed/Failed/not-run entry-condition tasks)as any/ type suppressions added)