Skip to content

fix(apollo-react): shrink NodeToolbar to fit a single action [MST-9559]#690

Merged
KodudulaAshishUiPath merged 1 commit into
mainfrom
fix/MST-9559
May 15, 2026
Merged

fix(apollo-react): shrink NodeToolbar to fit a single action [MST-9559]#690
KodudulaAshishUiPath merged 1 commit into
mainfrom
fix/MST-9559

Conversation

@KodudulaAshishUiPath
Copy link
Copy Markdown
Contributor

@KodudulaAshishUiPath KodudulaAshishUiPath commented May 13, 2026

Summary

  • NodeToolbar had a 40px floor on both axes, so a single-action toolbar (24px icon + 8px padding = 32px) was padded out to 40px wide, leaving empty space on the right (visible in canvas debug mode when only Breakpoint is shown).
  • Move the 40px minimum into the orientation-specific class so only the cross-axis is pinned; main-axis is content-driven.
  • Add a SingleAction Storybook story covering the scenario.

Demo

Screen.Recording.2026-05-13.at.12.40.39.mov

Ticket: MST-9559

Test plan

  • Storybook → Components/NodeToolbar/Single-action Toolbar — toolbar fits the icon with no trailing empty space across all 4 positions and 3 alignments.
  • Storybook → Components/NodeToolbar/Default Toolbar — multi-action toolbar unchanged.
  • Canvas debug mode on a basic node (e.g. Delay) — breakpoint icon centered in toolbar.

Copilot AI review requested due to automatic review settings May 13, 2026 07:45
@github-actions github-actions Bot added pkg:apollo-react size:L 100-499 changed lines. labels May 13, 2026
@github-actions
Copy link
Copy Markdown
Contributor

Dependency License Review

  • 2093 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 15 package(s) excluded (see details below)
License distribution
License Packages
MIT 1819
ISC 104
Apache-2.0 64
BSD-3-Clause 30
BSD-2-Clause 24
Copyright 2022, UiPath, all rights reserved 9
BlueOak-1.0.0 8
MPL-2.0 5
MIT OR Apache-2.0 3
MIT-0 3
Unknown 3
Unlicense 3
CC0-1.0 3
LGPL-3.0-or-later 2
(MIT OR Apache-2.0) 2
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
BSD 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
@img/sharp-libvips-linuxmusl-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
@uipath/apollo-angular-elements 5.89.0 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/apollo-core 4.35.1, 4.35.2 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/apollo-fonts 1.25.8 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/apollo-icons 1.33.7 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/apollo-mui5 2.31.26, 2.31.27 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/portal-shell 3.351.4 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/portal-shell-react 3.149.36 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/portal-shell-types 3.326.0 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/portal-shell-util 1.114.0 Copyright 2022, UiPath, all rights reserved UiPath first-party package
@uipath/apollo-lab 25.12.0 Unknown UiPath first-party package
@uipath/telemetry-client-web 5.1.0 Unknown UiPath first-party package
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json
hyperx 2.5.4 BSD BSD-2-Clause per LICENSE file, non-SPDX "BSD" in package.json

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adjusts the canvas NodeToolbar sizing behavior so a single-action toolbar can shrink on its main axis (removing trailing empty space), while still maintaining a consistent 40px minimum on the cross-axis for predictable positioning offsets. It also adds a dedicated Storybook story to validate the single-action layout across positions/alignments.

Changes:

  • Move the min-h-10 / min-w-10 constraints from the shared container class into orientation-specific classes (cross-axis only).
  • Update the NodeToolbar Storybook controls to use Row wrap="wrap" and Tailwind font classes instead of inline styles.
  • Add a “Single-action Toolbar” Storybook story that exercises the breakpoint-only scenario.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/apollo-react/src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx Makes toolbar main-axis size content-driven while keeping a 40px cross-axis minimum per orientation.
packages/apollo-react/src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.stories.tsx Adds a single-action coverage story and small Storybook control layout cleanup.

Comment thread packages/apollo-react/src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx Outdated
@KodudulaAshishUiPath KodudulaAshishUiPath force-pushed the fix/MST-9559 branch 2 times, most recently from 154729c to bbe14b1 Compare May 13, 2026 12:32
@KodudulaAshishUiPath KodudulaAshishUiPath changed the title [MST-9559] fix(apollo-react): shrink NodeToolbar to fit a single action fix(apollo-react): shrink NodeToolbar to fit a single action [MST-9559] May 13, 2026
@KodudulaAshishUiPath KodudulaAshishUiPath merged commit 911d746 into main May 15, 2026
27 checks passed
@KodudulaAshishUiPath KodudulaAshishUiPath deleted the fix/MST-9559 branch May 15, 2026 05:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg:apollo-react size:L 100-499 changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants