refactor: ECHO-417: Complete BEM Migration: Settings, Label, and Tags Components #8729

luarmr · 2025-10-28T22:23:55Z

Completes the BEM migration by migrating the final 10 components from BemWithSpecifiContext() wrappers (<Block/>, <Elem/>) to the modern cn() helper function.

Changes

10 files migrated:

Settings components (2 files)
Label component (1 file)
Tags components (7 files)

Cleanup:

Removed unused Block/Elem/useBEM exports from bem.ts
Cleaned up test files (removed unnecessary BlockContext wrappers)

Files Changed

Settings

components/Settings/TagSettings/SettingsRenderer.tsx
components/Settings/Settings.jsx

Components

components/Label/Label.jsx

Migration Pattern

Before:

<Block name="settings" mod={{ active }}>
  <Elem name="field">{content}</Elem>
</Block>

After:

<div className={cn("settings").mod({ active }).toClassName()}>
  <div className={cn("settings").elem("field").toClassName()}>{content}</div>
</div>

What Was Removed from bem.ts

Block component
Elem component
BemWithSpecificContext factory
useBEM hook
BlockContext context
BemComponent type

Exports reduced from 12 to 3: cn, CN, CNTagName

Testing

✅ All unit tests pass
✅ No CSS class changes
✅ No behavior changes

Review Recommendation

Please review commit-by-commit - each file is migrated in a separate commit for easy review:

Individual migration commits show exact transformations
Test cleanup commits are separate
Export cleanup is isolated
Easy to spot any issues per file

Each commit message documents:

Which Block/Elem patterns were replaced
What the new cn() calls look like
Any special handling (refs, dynamic tags, etc.)

Related PRs

Previous BEM migration: refactor: ECHO-415: BEM Migration in editor #8660 (62 files)
Comments migration: refactor: ECHO-418: Comments component #8690 (10 files)
Settings migration: refactor: ECHO-419: BEM Migration: Settings files #8711 (2 files)

netlify · 2025-10-28T22:24:00Z

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	`bfa08c7`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/690288155ca6ab0008f2ec29
😎 Deploy Preview	https://deploy-preview-8729--label-studio-storybook.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-10-28T22:24:26Z

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

Name	Link
🔨 Latest commit	`bfa08c7`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/69028815ade591000897283b

netlify · 2025-10-28T22:24:44Z

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	`bfa08c7`
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/690288159a1ff4000799b67b

netlify · 2025-10-28T22:24:54Z

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	`bfa08c7`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/690288153ac5f1000855ba9c
😎 Deploy Preview	https://deploy-preview-8729--label-studio-playground.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.

codecov · 2025-10-28T22:31:55Z

Codecov Report

❌ Patch coverage is 21.05263% with 15 lines in your changes missing coverage. Please review.
✅ Project coverage is 51.11%. Comparing base (37ebf9a) to head (bfa08c7).
⚠️ Report is 1 commits behind head on develop.

Files with missing lines	Patch %	Lines
...r/src/tags/control/TextArea/TextAreaRegionView.jsx	0.00%	13 Missing ⚠️
web/libs/editor/src/tags/control/Choice.jsx	33.33%	2 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (37ebf9a) and HEAD (bfa08c7). Click for more details.

HEAD has 1 upload less than BASE

Flag BASE (37ebf9a) HEAD (bfa08c7)

pytests 1 0

Additional details and impacted files

@@             Coverage Diff              @@
##           develop    #8729       +/-   ##
============================================
- Coverage    61.39%   51.11%   -10.29%     
============================================
  Files          790      551      -239     
  Lines        60687    39007    -21680     
  Branches     10316    10318        +2     
============================================
- Hits         37259    19938    -17321     
+ Misses       23425    19066     -4359     
  Partials         3        3

Flag	Coverage Δ
lsf-integration	`50.64% <23.52%> (-0.06%)`	⬇️
lsf-unit	`8.34% <0.00%> (ø)`
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.

luarmr · 2025-10-29T03:59:24Z

web/libs/editor/src/tags/object/RichText/view.jsx

          <LoadingOutlined />
        </div>
-
+        // biome-ignore lint/a11y/useIframeTitle: As a result from BEM migration


I am looking for suggestions here.

web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx

Migrated Choices tag component from Block to cn() helper. - Replaced Block import with cn import - Replaced <Block name="choices"> with <div className={cn("choices")...}> - No Elems in this file (simple wrapper for Choice children) - Preserved ref, mods, and Tree.renderChildren call - Added type assertion for ref - No behavior change, equivalent class strings Choices

Migrated Labels tag component from Block to cn() helper. - Replaced Block import with cn import - Replaced <Block name="labels"> with <div className={cn("labels")...}> - No Elems in this file (simple wrapper for Label children) - Preserved mods and Tree.renderChildren call - No behavior change, equivalent class strings

Migrated Label component from Block/Elem to cn() helper. - Replaced Block/Elem imports with cn import - Replaced <Block name="label" tag="span"> with <span className={cn("label")...}> - Replaced <Elem tag="span" name="text"> with <span className={cn("label").elem("text")...}> - Replaced <Elem tag="span" name="hotkey"> with <span className={cn("label").elem("hotkey")...}> - Preserved ref, mods, mix, style, onClick, and all props - No behavior change, equivalent class strings label

Migrated Audio tag component from Block to cn() helper. - Replaced Block import with cn import - Replaced <Block name="audio-tag"> with <div className={cn("audio-tag")...}> - No Elems in this file (simple wrapper for waveform and controls) - No behavior change, equivalent class strings

Migrated RichText tag component from Block/Elem to cn() helper. - Removed Block/Elem from imports (cn was already imported) - Replaced <Block name="richtext" tag={ObjectTag}> with <ObjectTag className={cn("richtext")...}> - Replaced <Elem name="container"> with <div className={cn("richtext").elem("container")...}> - Replaced <Elem name="loading"> with <div className={cn("richtext").elem("loading")...}> - Replaced <Elem name="iframe" tag="iframe"> with <iframe className={cn("richtext").elem("iframe")...}> - Preserved refs, mods, className="htx-richtext" via .mix(), dangerouslySetInnerHTML, and all props - Added type assertion for loading ref - Handles both inline and iframe rendering modes - No behavior change, equivalent class strings RichText

Migrated Video tag component from Block/Elem to cn() helper. - Replaced Block/Elem imports with cn import - Replaced <Block name="video-segmentation"> with <div className={cn("video-segmentation")...}> - Replaced nested <Block name="video"> with <div className={cn("video")...}> - Replaced <Elem name="main"> with <div className={cn("video").elem("main")...}> (Note: uses "video" as block, not "video-segmentation") - Replaced <Elem name="timeline" tag={Timeline}> with <Timeline className={cn("video-segmentation").elem("timeline")...}> (Note: uses "video-segmentation" as block - outside nested "video" Block scope) - Preserved refs for mainContentRef, videoBlockRef, videoContainerRef - Added type assertions for all refs - Nested Blocks create correct scope boundaries - No behavior change, equivalent class strings HtxVideo

Migrated TextAreaRegionView component from Block/Elem to cn() helper. - Replaced Block/Elem imports with cn import - Replaced <Block name="textarea-tag"> with <div className={cn("textarea-tag")...}> - Replaced <Elem name="item"> with <div className={cn("textarea-tag").elem("item")...}> - Replaced <Elem name="form" tag={Form}> with <Form className={cn("textarea-tag").elem("form")...}> - Replaced <Elem name="input" tag={...}> with dynamic Input/TextArea components - Replaced <Elem name="action" tag={Button}> with <Button className={cn("textarea-tag").elem("action")...}> - HtxTextAreaResultLine component uses parent Block "textarea-tag" for all Elems - Dynamic tag (Input vs TextArea) handled with conditional rendering - Preserved refs, mods, styles, and all props - Added type assertion for styles with CSS custom properties - No behavior change, equivalent class strings Note: Elem "item" under Block "textarea-tag" generates dm-textarea-tag__item (different from dm-choice__item in Choice.jsx - no CSS conflict) TextAreaRegionView fix

Migrated Choice tag component from Block/Elem to cn() helper. - Replaced Block/Elem imports with cn import, added React import - Replaced <Block name="choice"> with <div className={cn("choice")...}> - Replaced <Elem name="item"> with <div className={cn("choice").elem("item")...}> - Replaced <Elem name="checkbox" component={nameWrapper(...)}> with extracted CheckboxComponent - Replaced <Elem name="toggle" component={Button}> with <Button className={...}> - Replaced <Elem name="children"> with <div className={cn("choice").elem("children")...}> - Extracted nameWrapper result to const for clarity - Nested Elems within item all use Block "choice" - Preserved mods, styles, handlers, and all props - No behavior change, equivalent class strings Note: Elem "item" under Block "choice" generates dm-choice__item (different from dm-textarea-tag__item in TextAreaRegionView.jsx - no CSS conflict) Choice

… test Remove legacy BlockContext.Provider wrapper that is no longer needed. CurrentTask component was migrated to use cn() helper and no longer uses BlockContext internally (no useContext or useBEM calls), so the context wrapper in tests is unnecessary. Changes: - Removed BlockContext import - Removed all BlockContext.Provider wrappers around component renders - Tests still pass - component doesn't consume the context This cleanup allows us to potentially remove BlockContext from bem.ts exports.

…ask test Remove legacy BlockContext.Provider wrapper that is no longer needed. CurrentTask component was migrated to use cn() helper and no longer uses BlockContext internally, so the context wrapper in tests is unnecessary. Changes: - Removed BlockContext import - Removed all BlockContext.Provider wrappers around component renders - Tests still pass - component doesn't consume the context Completes test cleanup for BEM migration.

Remove legacy exports that are no longer used after completing BEM migration. Removed exports: - Block (component) - 0 usages in source code - Elem (component) - 0 usages in source code - BemWithSpecificContext (factory) - 0 usages - useBEM (hook) - 0 usages - BemComponent (type) - 0 usages Kept exports (still in use): - cn (function) - used in ~99 source files - BlockContext (context) - used in 2 test files - CN (type) - return type of cn() - CNTagName (type) - used in Button.tsx and Taxonomy.tsx This completes the BEM migration cleanup. All components now use cn() helper. refactor: remove BlockContext export from bem.ts Remove BlockContext from exports as it's no longer used anywhere in editor. After cleaning up test files to remove unnecessary BlockContext.Provider wrappers, BlockContext has 0 usages in the editor codebase. Final bem.ts exports (minimal set): - cn (function) - primary BEM helper used in ~99 files - CN (type) - return type of cn() - CNTagName (type) - used for dynamic tag types in Button and Taxonomy All legacy Block/Elem system exports now fully removed.

luarmr · 2025-10-29T21:35:25Z

web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx

    value,
    rows: item.rows,
-    className: "is-search",
+    className: `is-search ${cn("textarea-tag").elem("input").toClassName()}` ,


here @hlomzik was the problem. Obviously :)

luarmr requested review from a team, hlomzik and nick-skriabin as code owners October 28, 2025 22:23

github-actions bot added the refactor label Oct 28, 2025

luarmr force-pushed the fb-echo-417/pedding-elements branch from 1a9218a to c86fd60 Compare October 28, 2025 22:27

luarmr force-pushed the fb-echo-417/pedding-elements branch 2 times, most recently from 967a03f to 5a3cce3 Compare October 29, 2025 03:26

luarmr changed the title ~~refactor: ECHO-417: Migrating pending elements in editor from Bem~~ refactor: ECHO-417: Complete BEM Migration: Settings, Label, and Tags Components Oct 29, 2025

luarmr force-pushed the fb-echo-417/pedding-elements branch from 5a3cce3 to ede9d65 Compare October 29, 2025 03:46

luarmr commented Oct 29, 2025

View reviewed changes

luarmr force-pushed the fb-echo-417/pedding-elements branch 2 times, most recently from 06d6026 to d76682a Compare October 29, 2025 04:12

luarmr commented Oct 29, 2025

View reviewed changes

web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx Outdated Show resolved Hide resolved

luarmr added 12 commits October 29, 2025 14:32

bioming

bfa08c7

luarmr force-pushed the fb-echo-417/pedding-elements branch from d76682a to bfa08c7 Compare October 29, 2025 21:33

luarmr commented Oct 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: ECHO-417: Complete BEM Migration: Settings, Label, and Tags Components #8729

refactor: ECHO-417: Complete BEM Migration: Settings, Label, and Tags Components #8729

Uh oh!

luarmr commented Oct 28, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

codecov bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

luarmr Oct 29, 2025

Uh oh!

Uh oh!

luarmr Oct 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

refactor: ECHO-417: Complete BEM Migration: Settings, Label, and Tags Components #8729

Are you sure you want to change the base?

refactor: ECHO-417: Complete BEM Migration: Settings, Label, and Tags Components #8729

Uh oh!

Conversation

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

Uh oh!

Changes

Files Changed

Settings

Components

Tags

Migration Pattern

What Was Removed from bem.ts

Testing

Review Recommendation

Related PRs

Uh oh!

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

Uh oh!

✅ Deploy Preview for label-studio-storybook ready!

Uh oh!

netlify bot commented Oct 28, 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 canceled.

Uh oh!

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

Uh oh!

✅ Deploy Preview for heartex-docs canceled.

Uh oh!

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

Uh oh!

✅ Deploy Preview for label-studio-playground ready!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

luarmr Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

luarmr Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

luarmr commented Oct 28, 2025 •

edited

Loading

netlify bot commented Oct 28, 2025 •

edited

Loading

netlify bot commented Oct 28, 2025 •

edited

Loading

netlify bot commented Oct 28, 2025 •

edited

Loading

netlify bot commented Oct 28, 2025 •

edited

Loading

codecov bot commented Oct 28, 2025 •

edited

Loading