refactor: ECHO-421: remove bem from lso left overs #8814

luarmr · 2025-11-13T03:59:49Z

refactor(bem): complete BEM migration - remove remaining BemWithSpecificContext usage

Summary

Completes the Label Studio BEM migration by migrating 7 additional files that used BemWithSpecificContext() pattern, which were not included in PR #8765.

Total migrated: 7 files
Pattern: const { Block, Elem } = BemWithSpecificContext()
Result: 100% BEM migration complete for Label Studio

Background

PR #8765 migrated 24 files that used direct Block/Elem imports. This PR covers the remaining files that used the BemWithSpecificContext() pattern - a different import style that creates isolated BEM contexts.

Changes

Migration Pattern

Before:

import { BemWithSpecificContext } from "../../utils/bem";

const { Block, Elem } = BemWithSpecificContext();

<Block name="component" mod={{ variant }}>
  <Elem name="item">{children}</Elem>
</Block>

After:

import { cn } from "../../utils/bem";

<div className={cn("component").mod({ variant }).toClassName()}>
  <div className={cn("component").elem("item").toClassName()}>{children}</div>
</div>

Files Migrated

Components (6 files):

Space.jsx - Layout spacing component
RadioGroup.jsx - Form radio input group
Breadcrumbs.jsx - Navigation breadcrumbs with dropdown support
Menu.jsx - Main menu with Spacer, Divider, Group subcomponents
InviteLink.tsx - Organization invite modal
ExportPage.jsx - Data export modal with format selection

Cleanup (1 file):
7. MenuContext.js - Removed unused Block/Elem exports

Verification

✅ <Block> JSX usage: 0
✅ <Elem> JSX usage: 0
✅ Block/Elem imports: 0
✅ BemWithSpecificContext usage: 0
✅ bem.tsx exports: Only cn()
✅ Files using cn(): 51

bem.tsx (final):

export { cnb as cn } from "@humansignal/core/lib/utils/bem";

Safety Analysis

Why these migrations are safe:

BemWithSpecificContext creates isolated contexts
Each call creates a separate Block/Elem instance - children cannot inherit context from parents in different files.
No cross-repository dependencies
LSE has its own copies of these components (Space, Menu, etc.) and doesn't import from LSO.
Internal children migrated together
Components like RadioGroup.Button and Menu.Spacer are defined in the same file and migrated simultaneously.
No external Block/Elem children
Verified that no external code passes <Block> or <Elem> as children to these components.

Statistics

Commits: 7

6 component migrations
1 cleanup (MenuContext)

Lines changed: 67 insertions, 84 deletions
Files modified: 9

Combined with PR #8765:

Total files migrated: 31
Total commits: 32 (25 from refactor: ECHO-421: remove bem from lso #8765 + 7 additional)
Migration rate: 100% (0 files skipped)

netlify · 2025-11-13T03:59:54Z

✅ Deploy Preview for label-studio-docs-new-theme ready!

Name	Link
🔨 Latest commit	`1e1baf5`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/692f4c1f82f46b0009ef5a9c
😎 Deploy Preview	https://deploy-preview-8814--label-studio-docs-new-theme.netlify.app
📱 Preview on mobile	Toggle 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 · 2025-11-13T03:59:55Z

✅ Deploy Preview for heartex-docs ready!

Name	Link
🔨 Latest commit	`1e1baf5`
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/692f4c1fbeb88e00088dbfc4
😎 Deploy Preview	https://deploy-preview-8814--heartex-docs.netlify.app
📱 Preview on mobile	Toggle 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 · 2025-11-13T03:59:55Z

✅ Deploy Preview for label-studio-storybook canceled.

Name	Link
🔨 Latest commit	`1e1baf5`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/692f4c1fc870fe0008455da6

netlify · 2025-11-13T04:01:53Z

✅ Deploy Preview for label-studio-playground canceled.

Name	Link
🔨 Latest commit	`1e1baf5`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/692f4c1f596fef00084980cc

codecov · 2025-11-13T04:04:11Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 57.78%. Comparing base (ec7f225) to head (1e1baf5).
⚠️ Report is 10 commits behind head on develop.

❗ There is a different number of reports uploaded between BASE (ec7f225) and HEAD (1e1baf5). Click for more details.

HEAD has 1 upload less than BASE

Flag BASE (ec7f225) HEAD (1e1baf5)

pytests 1 0

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #8814      +/-   ##
===========================================
- Coverage    66.05%   57.78%   -8.28%     
===========================================
  Files          828      561     -267     
  Lines        64381    40439   -23942     
  Branches     10938    10938              
===========================================
- Hits         42530    23369   -19161     
+ Misses       21847    17066    -4781     
  Partials         4        4

Flag	Coverage Δ
lsf-e2e	`52.57% <ø> (+0.90%)`	⬆️
lsf-integration	`48.49% <ø> (+0.05%)`	⬆️
lsf-unit	`8.43% <ø> (ø)`
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.

web/apps/labelstudio/src/pages/Organization/PeoplePage/InviteLink.tsx

nass600

Looks good, only the modal to change

web/apps/labelstudio/src/pages/Organization/PeoplePage/InviteLink.tsx

Migrated Space component from BemWithSpecificContext() to cn() helper. - Replaced BemWithSpecificContext import with cn import - Removed const { Block } = BemWithSpecificContext() pattern - Converted Block name="space-ls" with mod and mix to div with cn().mod().mix() - Preserved all props, mods (direction, size, spread, stretch, align), and children - No behavior change, equivalent class strings Part of Label Studio BEM migration (Additional files)

Migrated RadioGroup and RadioButton components from BemWithSpecificContext() to cn() helper. - Replaced BemWithSpecificContext import with cn import - Removed const { Block, Elem } = BemWithSpecificContext() pattern - Converted Block name="radio-group-ls" with mod and mix to div with cn().mod().mix() - Converted Elem name="buttons" to div with cn().elem() - Converted Elem name="button" in RadioButton to div with cn().elem().mod() - Preserved all props, refs, context, handlers, and form integration - No behavior change, equivalent class strings Part of Label Studio BEM migration (Additional files)

Migrated Breadcrumbs component from BemWithSpecificContext() to cn() helper. - Replaced BemWithSpecificContext import with cn import - Removed const { Block, Elem } = BemWithSpecificContext() pattern - Converted Block name="breadcrumbs" to div with cn("breadcrumbs") - Converted Elem tag="ul" name="list" to ul with cn().elem() - Converted Elem tag="span" name="label" to span with cn().elem().mod() - Converted all Elem tag="li" name="item" variations to li with cn().elem().mod() - Converted Elem with component={Dropdown.Trigger} to Dropdown.Trigger with component="li" - Preserved all props, handlers, dropdown integration, and conditional rendering - No behavior change, equivalent class strings Part of Label Studio BEM migration (Additional files)

Migrated ExportPage and FormatInfo components from BemWithSpecificContext() to cn() helper. - Replaced BemWithSpecificContext import with cn import - Removed const { Block, Elem } = BemWithSpecificContext() pattern - Converted Block name="export-page" to div with cn("export-page") - Converted Block name="formats" to div with cn("formats") - Converted all Elem components (footer, recent, actions, info, list, item, name, tag, description, feedback) - Preserved all props, handlers, modal integration, and format selection logic - No behavior change, equivalent class strings Part of Label Studio BEM migration (Additional files - FINAL!)

Migrated InviteLink InvitationModal from Block to cn() helper. - Replaced Block import from MenuContext with cn import - Converted Block name="invite" to div with cn("invite") - Preserved all props and Input integration - No behavior change, equivalent class strings Part of Label Studio BEM migration (Additional files)

Migrated Menu, Menu.Spacer, Menu.Divider, and Menu.Group from Block/Elem to cn() helper. - Removed Block/Elem imports from MenuContext - Converted Block tag="ul" name="main-menu" with mod and mix to ul with cn().mod().mix() - Converted Menu.Spacer Elem to li with cn("main-menu").elem("spacer") - Converted Menu.Divider Elem to li with cn("main-menu").elem("divider") - Converted Menu.Group Block and Elems to div/ul structure with cn() - Preserved all props, refs, handlers, context, and dropdown integration - No behavior change, equivalent class strings Part of Label Studio BEM migration (Additional files)

Cleaned up MenuContext to remove unused Block/Elem exports. - Removed BemWithSpecificContext import - Removed Block/Elem exports (no longer used after Menu.jsx migration) - Only MenuContext remains (still needed for menu state) - No behavior change Part of Label Studio BEM migration (Additional files)

github-actions bot added the refactor label Nov 13, 2025

luarmr requested review from a team and yyassi-heartex November 13, 2025 04:00

luarmr requested a review from bmartel November 13, 2025 04:05

luarmr commented Nov 13, 2025

View reviewed changes

web/apps/labelstudio/src/pages/Organization/PeoplePage/InviteLink.tsx Show resolved Hide resolved

luarmr force-pushed the fb-echo-421/remove-bem-from-lso-left-overs branch from d633545 to 06de89d Compare November 18, 2025 16:36

nass600 approved these changes Nov 19, 2025

View reviewed changes

web/apps/labelstudio/src/pages/Organization/PeoplePage/InviteLink.tsx Show resolved Hide resolved

bmartel approved these changes Nov 19, 2025

View reviewed changes

luarmr force-pushed the fb-echo-421/remove-bem-from-lso-left-overs branch from 06de89d to 1ff0e5d Compare December 2, 2025 16:35

luarmr added 8 commits December 2, 2025 12:29

bioming

1e1baf5

luarmr force-pushed the fb-echo-421/remove-bem-from-lso-left-overs branch from 1ff0e5d to 1e1baf5 Compare December 2, 2025 20:29

robot-ci-heartex merged commit 6a8602f into develop Dec 3, 2025
63 of 66 checks passed

robot-ci-heartex deleted the fb-echo-421/remove-bem-from-lso-left-overs branch December 3, 2025 21:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: ECHO-421: remove bem from lso left overs #8814

refactor: ECHO-421: remove bem from lso left overs #8814

Uh oh!

luarmr commented Nov 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

codecov bot commented Nov 13, 2025 •

edited

Loading

Uh oh!

Uh oh!

nass600 left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

refactor: ECHO-421: remove bem from lso left overs #8814

refactor: ECHO-421: remove bem from lso left overs #8814

Uh oh!

Conversation

luarmr commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

refactor(bem): complete BEM migration - remove remaining BemWithSpecificContext usage

Summary

Background

Changes

Migration Pattern

Files Migrated

Verification

Safety Analysis

Statistics

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-docs-new-theme ready!

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for heartex-docs ready!

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-storybook canceled.

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-playground canceled.

Uh oh!

codecov bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

nass600 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

luarmr commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

codecov bot commented Nov 13, 2025 •

edited

Loading