Skip to content

Conversation

@ricardoantoniocm
Copy link
Contributor

@ricardoantoniocm ricardoantoniocm commented Nov 13, 2025

This pull request refactors and improves the BottomBar component in the editor UI, focusing on layout, style consistency, and user interaction. It moves the CurrentTask component to the Bottom Bar, enhances button usability and accessibility, and standardizes spacing and visual separation between controls. The changes also update styles to use theme variables and improve feature flag handling for conditional UI elements.

Recordings

Before (LSO)

https://www.loom.com/share/3a6f0e71075143568147b8b1fb55ef92

After (LSO)

https://www.loom.com/share/9626f00290bc4ce58da6dcbdbddbf272

Component and Layout Refactoring:

  • Introduced the new CurrentTask component to the BottomBar, which displays the current task ID, history controls, and task counter, with improved feature flag support and conditional rendering. [1] [2] [3] [4]
  • Refactored the Actions component to use semantic div containers instead of Space, grouping action buttons and model actions with clearer separation and updated markup. [1] [2] [3]

UI and Style Improvements:

  • Updated styles for BottomBar and its children to use theme spacing variables, improved padding, and added visual separators between sections and actions. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

Button and Interaction Enhancements:

  • Standardized button sizes, icon usage, and aspect ratios for all action and history buttons; replaced deprecated icons and added tooltips and accessibility labels for improved usability. [1] [2] [3] [4] [5]
  • Improved feature flag handling and conditional logic for enabling/disabling buttons and actions, including postponing tasks based on comments and session state.

Utility and Import Updates:

  • Updated imports to expose additional BEM utility (BemWithSpecificContext) for more flexible class name generation.

Icon and Color Consistency:

  • Updated icon color variables to use theme-based values for consistency across normal, disabled, and negative states. [1] [2] [3] [4]

@github-actions github-actions bot added the feat label Nov 13, 2025
@ricardoantoniocm ricardoantoniocm self-assigned this Nov 13, 2025
@netlify
Copy link

netlify bot commented Nov 13, 2025

Deploy Preview for label-studio-docs-new-theme canceled.

Name Link
🔨 Latest commit 7963ce1
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/69406dfe82bfc40008fa95f1

@netlify
Copy link

netlify bot commented Nov 13, 2025

Deploy Preview for heartex-docs canceled.

Name Link
🔨 Latest commit 7963ce1
🔍 Latest deploy log https://app.netlify.com/projects/heartex-docs/deploys/69406dfefd9a88000866c963

@netlify
Copy link

netlify bot commented Nov 13, 2025

Deploy Preview for label-studio-storybook ready!

Name Link
🔨 Latest commit 7963ce1
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-storybook/deploys/69406dfe0541fb000831b6e6
😎 Deploy Preview https://deploy-preview-8822--label-studio-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Nov 13, 2025

Deploy Preview for label-studio-playground ready!

Name Link
🔨 Latest commit 7963ce1
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-playground/deploys/69406dfe6a8c5b0007f96463
😎 Deploy Preview https://deploy-preview-8822--label-studio-playground.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov
Copy link

codecov bot commented Nov 13, 2025

Codecov Report

❌ Patch coverage is 82.14286% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 57.72%. Comparing base (f07f417) to head (7963ce1).
⚠️ Report is 10 commits behind head on develop.

Files with missing lines Patch % Lines
...b/libs/editor/src/components/BottomBar/Actions.jsx 60.00% 2 Missing ⚠️
...bs/editor/src/components/BottomBar/CurrentTask.jsx 88.88% 2 Missing ⚠️
.../libs/editor/src/components/BottomBar/Controls.tsx 0.00% 1 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (f07f417) and HEAD (7963ce1). Click for more details.

HEAD has 1 upload less than BASE
Flag BASE (f07f417) HEAD (7963ce1)
pytests 1 0
Additional details and impacted files
@@             Coverage Diff             @@
##           develop    #8822      +/-   ##
===========================================
- Coverage    66.65%   57.72%   -8.94%     
===========================================
  Files          829      561     -268     
  Lines        64782    40590   -24192     
  Branches     10990    10977      -13     
===========================================
- Hits         43183    23429   -19754     
+ Misses       21595    17157    -4438     
  Partials         4        4              
Flag Coverage Δ
lsf-e2e 52.48% <64.28%> (-0.07%) ⬇️
lsf-integration 48.39% <64.28%> (-0.08%) ⬇️
lsf-unit 8.67% <64.00%> (-0.14%) ⬇️
pytests ?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ricardoantoniocm ricardoantoniocm marked this pull request as ready for review November 13, 2025 20:46
@ricardoantoniocm ricardoantoniocm requested review from a team and yyassi-heartex November 13, 2025 20:46
@ricardoantoniocm
Copy link
Contributor Author

ricardoantoniocm commented Nov 13, 2025

/git merge

Workflow run
Successfully merged: create mode 100644 docs/themes/v2/source/images/admin/command-palette2.png

@bmartel
Copy link
Contributor

bmartel commented Nov 13, 2025

This looks fantastic 🔥 @ricardoantoniocm. One question, with the changes here, what happens with the annotation tabs? Do they remain the same as before but take up the whole row of spacing now?

@ricardoantoniocm
Copy link
Contributor Author

Thanks @bmartel ! The annotation tabs take up the whole row of spacing now on Quick View and the Review Stream. Minus the View All / Add Annotation buttons.

@ricardoantoniocm
Copy link
Contributor Author

ricardoantoniocm commented Nov 14, 2025

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/datamanager/src/components/Filters/types/TaskStateFilter.jsx

@ricardoantoniocm
Copy link
Contributor Author

ricardoantoniocm commented Nov 25, 2025

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/ui/src/shad/components/ui/sheet.tsx

@ricardoantoniocm
Copy link
Contributor Author

ricardoantoniocm commented Nov 28, 2025

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/ui/src/lib/dropdown/dropdown.stories.tsx

@ricardoantoniocm
Copy link
Contributor Author

ricardoantoniocm commented Nov 28, 2025

/git merge

Workflow run
Successfully merged: 6 files changed, 42 insertions(+), 44 deletions(-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants