# Change Log ## Release December 2025 Reference the upcoming CSS changes to the Preview Widgets in the following expandable section.
Font Size Accessibility Improvements #### 1. Sidebar Tabs – Tab button **UI Area:** Sidebar Tabs\ **Classnames Removed:**\ `Tabs_*`\ **New Classnames:**\ `TabLabel_*`\ **Description:**\ The tab button now uses a more descriptive naming convention to improve clarity and consistency across the sidebar components. This change helps developers identify tab-related labels more easily and aligns naming conventions with the updated tab structure. #### 2. Sidebar Tabs – Tab panel **UI Area:** Sidebar Tabs\ **Markup Variations:**\ Removed a wrapper `div`\ **Classnames Removed:**\ `Tabs_*`\ **Description:**\ The wrapper `div` inside the tab panel has been removed to simplify the DOM structure. This change improves rendering performance and makes it easier to style and manage tab content areas through cleaner markup. #### 3. Sidebar Rows Tab – Columns Structure / Tabs **UI Area:** Sidebar Rows Tab\ **Widget:** Columns Structure\ **Sub-element:** Tabs\ **Markup Variations:**\ Removed a wrapper `div`\ **Classnames Removed:**\ `tab-content`, `Tabs_*`\ **Description:**\ The markup for tabbed column structures has been simplified by removing an unnecessary wrapper. Developers should adjust any custom styles that previously relied on `tab-content` or `Tabs_*` to target the updated tab elements directly. #### 4. Sidebar – Toggle **UI Area:** Sidebar\ **Markup Variations:**\ Added a `div` to wrap the label\ **Description:**\ A new `div` wrapper has been introduced around toggle labels to ensure consistent spacing and alignment across different sidebar widgets. This change provides a more predictable layout and improves accessibility for label associations. #### 5. Sidebar – Slider **UI Area:** Sidebar\ **Markup Variations:**\ Added a `div` to wrap the input\ **Description:**\ Slider inputs are now enclosed in an additional `div` wrapper. This allows more flexible styling and positioning of sliders within the sidebar, supporting better alignment with other interactive controls. #### 6. Sidebar – Select **UI Area:** Sidebar\ **Markup Variations:**\ Added a `span` to wrap the label\ **Description:**\ A `span` element now wraps the select label to enable more precise styling control. This update enhances text alignment and improves compatibility with multi-theme layouts. #### 7. Sidebar – Image width **UI Area:** Sidebar\ **Markup Variations:**\ Changed wrapper `div`s\ **Description:**\ The wrapper structure around image width controls has been updated for consistency and better responsiveness. This change helps maintain uniform spacing and layout behavior across different sidebar widgets. #### 8. Sidebar – Button width **UI Area:** Sidebar\ **Markup Variations:**\ Changed wrapper `div`s\ **Description:**\ The button width control now uses updated wrapper `div`s for improved DOM consistency. This ensures buttons align properly with other sidebar elements and reduces the need for custom spacing adjustments.
## Release July 2025 Reference the upcoming CSS changes to the Preview Widgets in the following expandable section.
Preview Widgets #### 1. Wrapper **UI Area:** Preview / Wrapper **New Classnames**\ `.preview--cs` #### 2. Header **UI Area:** Preview / Preview header **Classnames Removed** * `.page-preview-titlebar--cs` * `.page-preview-choice--cs` **New Classnames** * `.preview-header--cs` #### 3. Title **UI Area:** Preview / Preview header **Markup variations:** `span -> h3` **New Classnames** * `.preview-title--cs` #### 4. Multi-Language **UI Area:** Preview / Preview header **Classnames Removed** * `.header-dropdown--cs` **New Classnames** * `.header-select--cs` * `.preview-language--cs` * `.dropdown-custom--cs` #### 5. Display Conditions **UI Area:** Preview / Preview header **Classname Removed** * `.top-bar-action-list--closed` * `.top-bar-action-list—open` * `.toggle-wrapper--cs` * `.toggle-input--cs` * `.toggle-slider—cs` **New Classnames** * `.preview-displayconditions--cs` * `.dropdown-menu--cs` * `.dropdown-menu-button--cs` * `.dropdown-menu-item--cs` * `.checkbox-wrapper--cs` * `.readonly-checkbox--cs` * `.dropdown-menu-scrollable--cs` * `.preview-displaycondition-label--cs` * `.preview-displaycondition-description--cs` #### 6. Dark mode **UI Area:** Preview / Preview header **Classnames Removed** * `.toggle-wrapper--cs` * `.preview-dark-mode-toggle--cs` * `.toggle-input--cs` * `.toggle-slider—cs` **New Classnames** * `.radiogroup--cs` * `.preview-dark-mode--cs` * `.radiogroup-options--cs` * `.radiogroup-options--button--cs` * `.radiogroup-button--cs` * `.radiogroup-light--cs` * `.active--cs` * `.radiogroup-dark--cs` #### 7. AMP **UI Area:** Preview / Preview header **Classnames Removed** * `.preview-amp-toggle--cs` **New Classnames** * `.radiogroup--cs` * `.preview-amp--cs` * `.radiogroup-options--cs` * `.radiogroup-options--button--cs` * `.radiogroup-button--cs` * `.radiogroup-amp--cs` * `.active--cs` * `.radiogroup-html--cs` #### 8. Device **UI Area:** Preview / Preview header **Classnames Removed** * `.preview-device-toggle--cs` * `.preview-laptop-item--cs` * `.preview-mobile-item--cs` * `.preview_choice--fullscreen` * `.preview_choice--computer` * `.preview_choice—tablet` * `.preview_choice—phone` **New Classnames** * `.radiogroup--cs` * `.preview-device--cs` * `.radiogroup-options--cs` * `.radiogroup-options--button--cs` * `.radiogroup-button--cs` * `.radiogroup-computer--cs` * `.active--cs` * `.radiogroup-tablet--cs` * `.radiogroup-phone--cs` #### 9. Viewport **UI Area:** Preview / Preview header **Classnames Removed** * `.number-selector--cs` **New Classnames** * `.preview-viewport-width--cs` * `.preview-viewport-height--cs` #### 10. Close box **UI Area:** Preview / Preview header **New Classnames** * `.preview-close-button--cs` #### 11. iframe **UI Area:** Preview / Preview body **Classnames Removed** * No classnames were removed **New Classnames** * No classnames were added #### 12. Resize Handles **UI Area:** Preview / Preview body **New Classnames** * `.preview-resize-handle--cs`
Reference the upcoming CSS changes to the Stage Placeholders in the following expandable section.
Stage Placeholders #### 1. Stage Module - Addon Placeholder * **UI Area**: Stage Module * **Widget:** Addon * **Sub-element:** Placeholder **Classnames Removed**: * `btn` * `btn-default` **New Classnames** * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 2. Stage Module - Carousel Placeholder * **UI Area**: Stage Module * **Widget:** Carousel * **Sub-element:** Placeholder **Classnames Removed**: * `image-placeholder` * `description` * `btn` * `btn-default` **New Classnames:** * `stage-module_carousel_placeholder--cs` * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 3. Stage Module - Dynamic Content Placeholder * **UI Area**: Stage Module * **Widget:** Dynamic Content * **Sub-widget:** Placeholder * **Markup Variations**: Removed a wrapper div **Classnames Removed**: * `merge-content-placeholder` * `description` **Classnames Added**: * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 4. Stage Module - Form Placeholder * **UI Area**: Stage Module * **Widget:** Form * **Sub-element:** Placeholder * **Markup Variations**: Removed a wrapper div **Classnames Removed**: * `description` * `btn` * `btn-default` **Classnames Added**: * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 5. Stage Module - Icons Placeholder * **UI Area**: Stage Module * **Widget:** Icons * **Sub-element:** Placeholder **Classnames Removed**: * `stage_module_icons--placeholder` * `stage_module_icons--placeholdericon` * `description` **Classnames Added**: * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 6. Stage Module - Image Placeholder * **UI Area**: Stage Module * **Widget:** Image * **Sub-element:** Placeholder * **Markup Variations**: Removed a wrapper div **Classnames Removed**: * `image-placeholder` * `description` * `btn` * `btn-default` **Classnames Added**: * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 7. Stage Module - Menu Placeholder * **UI Area**: Stage Module * **Widget:** Menu * **Sub-element:** Placeholder **Classnames Removed**: * `stage_module_menu--placeholder` * `stage_module_menu--placeholdericon` * `description` **Classnames Added**: * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 8. Stage Module - Social Placeholder * **UI Area**: Stage Module * **Widget:** Social * **Sub-element:** Placeholder * **Markup Variations**: Removed a wrapper div **Classnames Added**: * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 9. Stage Module - Video Placeholder * **UI Area**: Stage Module * **Widget:** Video * **Sub-element:** Placeholder * **Markup Variations**: Removed a wrapper div **Classnames Removed**: * `video-placeholder` * `stage_module_video` * `stage_module_video--placeholder` * `description` * `btn` * `btn-default` **Classnames Added**: * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs` #### 10. Stage Row - RowAddon Placeholder * **UI Area**: Stage Row * **Widget:** RowAddon * **Sub-element:** Placeholder **Classnames Removed**: * `description` * `btn` * `stage_empty_state--cs` **Classnames Added**: * `stage-row-addon-placeholder--cs` * `stage-placeholder--cs` * `stage-placeholder-icon--cs` * `stage-placeholder-text--cs` * `stage-placeholder-button--cs`
Reference the upcoming CSS changes to the Rows Tab in the following expandable section.
Sidebar Rows Tab **UI Area:** Sidebar Rows Tab **Markup variations:** Removed a wrapper div **Removed Classnames** * `rows-wrapper` **New Classes** * `rows-wrapper--cs`
## Release May 2025 Reference the CSS changes for May 2025 in the following expandable section.
Draggable Widgets, Mobile Stage Toggle, and History (Undo/Redo) CSS Classes ### 1. Draggable Widgets **UI Area:** Sidebar Content Tab / Tiles Panel\ 🔄 **What’s Changing** * A wrapper `
` has been removed. * Several class names have been updated for consistency. ❌ **Removed Classes** * `sidebar__draggablewrapper--cs` * `sidebar__draggablewrapper` * `sidebar__draggablewrapper--DraggableModule` * `sidebar__draggablewrapper--modules-***` (all the classes of this type where \*\*\* is the element type, e.g. heading,form, button... ) * `sidebar__draggablewrapper--rowAddon` * `panel--cs` * `panel` * `panel--default` * `panel--module` * `panel--locked` * `panel--***` (all the classes of this type where \*\*\* is the element type, e.g. heading, form., button.. ) * panel--body ✅ **New Classes** * `sidebar-draggable--cs` * `sidebar-draggable-fullwidth--cs` * `sidebar-draggable-locked--cs` * `sidebar-draggable-***--cs` (where \*\*\* is the element type, e.g. heading,form, button... ) * `sidebar-draggable-[addon-name]--cs` *** ### 2. Draggable Rows – Empty Rows **UI Area:** Sidebar Rows Tab / Empty Rows\ 🔄 **What’s Changing** * A wrapper `
` has been removed. * Class names updated for consistency. ❌ **Removed Classes** * `sidebar__draggablewrapper--cs` * `sidebar__draggablewrapper_fullwidth--cs` * `sidebar__draggablewrapper` * `sidebar__draggablewrapper--DraggableRow` * `sidebar__draggablewrapper--***` (all the classes of this type where \*\*\* is the element type, e.g. one-column-empty, two-columns-3-9-empty... ) * `fullWidth` * `panel--cs` * `panel` * `panel--default` * `panel--row` * `panel--customrow` * `panel--customrow--cs` * `panel--customrow--***` (all the classes of this type where \*\*\* is the element type, e.g. one-column-empty, two-columns-3-9-empty... ) * `panel--customrow--***` (all the classes of this type where \*\*\* is the element name ) ✅ **New Classes** * `sidebar-draggable--cs` * `sidebar-draggable-fullwidth--cs` * `sidebar-draggable-locked--cs` * `sidebar-draggable-***--cs` (where \*\*\* is the element type, e.g. one-column-empty, two-columns-3-9-empty... ) *** ### 3. Draggable Rows – Other Rows **UI Area:** Sidebar Rows Tab / Other Rows\ 🔄 **What’s Changing** * A wrapper `
` has been removed. ❌ **Removed Classes** * `fullWidth` * `panel--cs` * `panel` * `panel--default` * `panel--row` * `panel--customrow` * `panel--customrow--cs` * `panel--customrow--***` (all the classes of this type where \*\*\* is the element type, e.g. one-column-empty, two-columns-3-9-empty... ) * `panel--customrow--***` (all the classes of this type where \*\*\* is the element name ) ✅ **New Classes** * `sidebar-draggable-customrow--cs` * `sidebar-draggable-fullwidth--cs` * `sidebar-draggable-locked--cs` * `sidebar-draggable-***--cs` (where \*\*\* is the element type, e.g. one-column-empty, two-columns-3-9-empty... ) *** ### 4. Mobile Stage Toggle 🔄 **What’s Changing** * Updated class names for Desktop/Mobile toggle and Blur/Hide functionality for better clarity. #### **Desktop / Mobile RadioGroup** ❌ **Removed Classes** * `stagemode__button` * `stagemode__button--cs` * `stagemode__button__desktop` * `stagemode__button__desktop--cs` * `stagemode__button__mobile` * `stagemode__button__mobile--cs` * `stagemode__button--active` ✅ **New Classes** * `stagemode__radiogroup--cs` * `radiogroup-mobile--cs` * `radiogroup-desktop--cs` * `active--cs` #### Blur / Hide toggle ❌ **Removed Classes** * `stagemode__button__display` * `stagemode__button` ✅ **New Classes** * `button-icon--cs` * `button-small--cs` * `button-primary--cs` * `button--cs` * `button-active--cs` *** ### 5. History (Undo/Redo) 🔄 **What’s Changing** * Structural changes to wrappers and class names for undo/redo functionality. #### Undo/redo - wrapper Markup Variations * removed div History\_undoRedoHistoryWrapper\_\_\* #### Undo/redo - arrows container Markup Variations * removed span History\_undoRedoActionsArrowsContainer\_\_\* > span #### Undo/redo - toggle button ❌ **Removed Elements and Classes** * `undo-redo__toggleButton` ✅ **New Elements and Classes** * `button-active--cs` * `button-icon--cs` * `button-small--cs` * `button-primary--cs` * `button--cs` #### Undo/redo - undo button ❌ **Removed Elements and Classes** * `undo-redo__undoButton` ✅ **New Elements and Classes** * `button-icon--cs` * `button-small--cs` * `button-primary--cs` * `button--cs` #### Undo/redo - redo button ❌ **Removed Elements and Classes** * `undo-redo__redoButton` ✅ **New Elements and Classes** * `button-icon--cs` * `button-small--cs` * `button-primary--cs` * `button--cs` #### History menu ❌ **Removed Elements and Classes** * `undo-redo__history` * `undo-redo__history--open` * `#undo-redo__history` ✅ **New Elements and Classes** * `undo-redo__history--open--cs` #### History menu - menu item ❌ **Removed Elements and Classes** * `history__step` * `history__step--active` * `history__step__borderline` ✅ **New Elements and Classes** * `history__step--disabled--cs` * `history__step--active--cs`
## Release March 2025 This section includes a reference of the new classnames released in March 2025. The new classnames will be related to [Mobile Badge](#mobile-badge-or-scheduled-for-march-2025) and [Confirmation Dialogs](#confirmation-dialogs-or-scheduled-for-march-2025). For more details, click the **>** symbol to expand the expandable content sections containing additional information. ### Mobile Badge | Released March 2025 This section includes a reference for new classnames related to Mobile Badge. #### Content Reference the classname changes related to Content for Mobile Badge in the following expandable section.
Mobile Badge Content This section shows the classname updates for the Mobile Badge Content. The following Markup variations apply to each of the **Content types** outlined in this section. * Converted the badge into a button * Removed a `` * Moved it out of the widget's label tag #### Button **Affected Sub-element:** Width Slider **Classnames Removed:** Not applicable **Classnames Added** * `widget-mobile-badge-enabled--cs` #### Carousel, Text, Video **Affected Sub-element:** Block options - Padding **Classnames Removed:** Not applicable **Classnames Added** * `widget-mobile-badge-enabled--cs` #### Divider, Image, Social **Affected Sub-element:** Align, Block options - Padding **Classnames Removed:** Not applicable **Classnames Adde** * `widget-mobile-badge-enabled--cs` #### Form **Affected Sub-element:** Font size, Block options - Padding **CClassnames Removed:** Not applicable **Classnames Added** * `widget-mobile-badge-enabled--cs` #### Button, Title, Icons, Image, List, Menu, Paragraph **Affected Sub-element:** Font size, Align, Block options - Padding **Classnames Removed:** Not applicable **Classnames Added** * `widget-mobile-badge-enabled--cs` #### Spacer **Affected Sub-element:** Height **Classnames Removed:** Not applicable **Classnames Added** * `widget-mobile-badge-enabled--cs`
#### Rows Reference the classname changes related to Rows for Mobile Badge in the following expandable section.
Mobile Badge Row The following sections show the classname updates for the Mobile Badge Row. **Affected Sub-element:** Columns Structure - Padding **Markup Variations** The following Markup variations apply for Mobile badge row. * Converted the badge into a button * Removed a `` **Classnames Removed:** Not applicable **Classnames Added** * `widget-mobile-badge-enabled--cs`
### Confirmation Dialogs | Released March 2025 This section includes a reference for new classnames related to Confirmation Dialogs. #### Rows Reference the classname changes related to Rows for Confirmation Dialogs in the following expandable section.
Delete Row Confirmation Dialog **Affected Sub-element:** Delete Row Confirmation Dialog **Markup Variations:** * Removed SVG icon **Classnames Added** * `confirmation-title--cs`
Reference the corresponding [Custom Translations for Delete Row](https://docs.beefree.io/beefree-sdk/~/changes/480/advanced-options/custom-languages#sample-language-file-4). #### Column Reference the classname changes related to Columns for Confirmation Dialogs in the following expandable section.
Delete Column Confirmation Dialog **Affected Sub-element:** Delete Column Confirmation Dialog **Markup Variations:** * Removed SVG icon **Classnames Added** * `confirmation-title--cs`
Reference the corresponding [Custom Translations for Delete Column](https://docs.beefree.io/beefree-sdk/~/changes/480/advanced-options/custom-languages#sample-language-file-5). #### Module Reference the classname changes related to Modules for Confirmation Dialogs in the following expandable section.
Delete Module Confirmation Dialog **Affected Sub-element:** Delete Module Confirmation Dialog **Markup Variations:** * Removed SVG icon **Classnames Added** * `confirmation-title--cs`
Reference the corresponding [Custom Translations for Delete Module](https://docs.beefree.io/beefree-sdk/~/changes/480/advanced-options/custom-languages#sample-language-file-6). #### Rows Reference the classname changes related to Rows for Confirmation Dialogs in the following expandable section.
Hide Row on Mobile with Module Already Hidden on Desktop **Affected Sub-element:** Hide Row Confirmation Dialog **Markup Variations:** * Removed SVG icon **Classnames Added** * `confirmation-title--cs`
Reference the corresponding [Custom Translations for Hide Row on Mobile with Module Already Hidden on Desktop](https://docs.beefree.io/beefree-sdk/~/changes/480/advanced-options/custom-languages#hide-row-on-mobile-with-module-already-hidden-on-desktop). #### Rows Reference the classname changes related to Rows for Confirmation Dialogs in the following expandable section.
Remove Custom Display Condition **Affected Sub-element:** Remove Custom Display Condition Confirmation Dialog **Classnames Added** * `confirmation-title--cs`
Reference the corresponding [Custom Translations for Remove Custom Display Condition](https://docs.beefree.io/beefree-sdk/~/changes/480/advanced-options/custom-languages#sample-language-file-7). #### File manager Reference the classname changes related to File Manager for Confirmation Dialogs in the following expandable section.
Confirm Delete Single File **Affected Sub-element:** File Manager - Confirm Delete Single File **Classnames Added** * `confirmation-title--cs`
Reference the corresponding [Custom Translations for Confirm Delete Single File](https://docs.beefree.io/beefree-sdk/~/changes/480/advanced-options/custom-languages#sample-language-file-8). #### File manager Reference the classnames added in the following expandable section.
Confirm Delete Multiple Files **Affected Sub-element:** File Manager - Confirm Delete Multiple Files **Classnames Addded** * `confirmation-title--cs`
Reference the corresponding [Custom Translations for Confirm Delete Multiple Files](https://docs.beefree.io/beefree-sdk/~/changes/480/advanced-options/custom-languages#confirm-delete-multiple-files). #### File manager Reference the classnames added in the following expandable section.
Confirm Upload Existing File **Affected Sub-element:** File Manager - Confirm Upload Existing File (Custom FSP and ConfirmOverwriteModalEnabled) **Classnames Added** * `confirmation-title--cs`
Reference the corresponding [Custom Translations for Confirm Upload Existing File](https://docs.beefree.io/beefree-sdk/~/changes/480/advanced-options/custom-languages#sample-language-file-9). ## January 30, 2025 Releases ### Display Conditions Widget and Modal | Release on January 30, 2025 #### Display Conditions Widget
New Classnames Display Conditions Widget ### Display Condition Widget * **Display Conditions Widget**\ Affected Sub-element: Display Conditions Widgets **Changes:** * Markup Variations: * `contentDialog` button is now "secondary", not "primary". **Classnames Comparison:** | Classnames Removed | Classnames Added | | ------------------ | --------------------------------------- | | `item_1-2` | `display-condition-card--cs` | | `panel__actions` | `display-condition-card_custom--cs` | | | `display-condition-label--cs` | | | `display-condition-description--cs` | | | `display-condition-label_before--cs` | | | `display-condition-before--cs` | | | `display-condition-label_after--cs` | | | `display-condition-after--cs` | | | `display-condition-buttons--cs` | | | `row-display-condition-edit-button--cs` |
#### Select Display Condition Modal
New Classnames Select Display Condition Modal ### Select Display Condition Modal * **Select Display Condition Modal**\ Affected Sub-element: Select Display Condition Modal **Classnames Comparison:** | Classnames Removed | Classnames Added | | ------------------- | --------------------------------- | | `category-selected` | `selectable-modal-search--cs` | | `back-action` | `selectable-modal-breadcrumb--cs` | | | `selectable-modal-items-list--cs` |
## December 5, 2024 Releases ### Add New Social and Form | Released on December 5th #### Form
New Classnames Form ### Form * **Form**\ Affected Sub-element: Manage fields - Add new field **Changes:** * Markup Variations: * Removed some wrapper divs * Replaced all the list HTML **Classnames Comparison:** | Classnames Removed | Classnames Added | | ------------------------ | ------------------------------ | | `toggle-menu-button--cs` | `button-small--cs` | | `button-large--cs` | `button-solid--cs` | | `widget__textbox` | `button-primary--cs` | | `widget__searchbox` | `button--cs` | | `scrollable__panel--cs` | `add-form-field--cs` | | | `dropdown-menu--cs` | | | `dropdown-menu-button--cs` | | | `dropdown-menu-search--cs` | | | `input-search--cs` | | | `dropdown-menu-scrollable--cs` | | | `dropdown-menu-item--cs` |
#### Social
New Classnames Social ### Social * **Social**\ Affected Sub-element: Configure icon collection - Add social icon **Changes:** * Markup Variations: * Removed some wrapper divs * Replaced all the popover HTML **Classnames Comparison:** | Classnames Removed | Classnames Added | | --------------------------- | ------------------------------ | | `icons-manager__pop--cs` | `button-small--cs` | | `icons-manager__popcontent` | `button-solid--cs` | | `popver__tab` | `button-primary--cs` | | `social-add-icon--cs` | `button--cs` | | | `add-social-icon--cs` | | | `dropdown-menu--cs` | | | `dropdown-menu-button--cs` | | | `dropdown-menu-search--cs` | | | `input-search--cs` | | | `dropdown-menu-scrollable--cs` | | | `dropdown-menu-item--cs` |
### Add New Attributes and Title Bar | Release on December 5th #### 1. Button, Image, Video
New Classnames Button, Image, Video * **Button, Image, Video**\ Affected Sub-element: Configure attributes - Add new attribute **Changes:** * Markup Variations: * Removed some wrapper divs * Replaced all the list HTML **Classnames Comparison:** | Classnames Removed | Classnames Added | | ------------------------ | ------------------------------ | | `toggle-menu-button--cs` | `button-small--cs` | | `button-large--cs` | `button-solid--cs` | | `scrollable__panel--cs` | `button-primary--cs` | | | `button--cs` | | | `add-attribute--cs` | | | `dropdown-menu--cs` | | | `dropdown-menu-button--cs` | | | `dropdown-menu-search--cs` | | | `input-search--cs` | | | `dropdown-menu-scrollable--cs` | | | `dropdown-menu-item--cs` |
#### 2. Sidebar Title
New Classnames All ### Sidebar Title * Sidebar Title\ Affected Sub-element: Sidebar Title **Changes:** * Markup Variations: * Added `
` * `` elements are now `
#### 3. Rows
New Classnames Rows **Rows**\ Affected Sub-element: Sidebar Title **Changes:** Markup Variations: * Added `
` * `` elements are now `
## November 7, 2024 Releases ### Mobile Stage Mode, History, and Empty States | Released on November 7th
Mobile Stage Mode, History, and Empty States ### Mobile Stage Mode, History, and Empty States * **Mobile Stage Mode**\ Affected Sub-element: Wrapper **Classnames Added:** * `stagemode__buttonswrapper--cs` **Mobile Stage Mode Buttons:** * Desktop button: `stagemode__button__desktop--cs` * Mobile button: `stagemode__button__mobile--cs` * Display toggle button: `stagemode__button__display--cs` * **Undo/Redo**\ Affected Sub-elements: Undo/Redo Buttons and History Panel **Classnames Added:** * Toggle button: `undo-redo__toggleButton--cs` * Undo button: `undo-redo__undoButton--cs` * Redo button: `undo-redo__redoButton--cs` * History panel: `undo-redo__history--cs` * History panel item: `history__step--cs` * **Empty States (Various Modules)**\ Affected Modules: Image, Icons, Video, Menu, Social, Form, AddOn, Dynamic Content **Classnames Added:** * Image module: `stage-module_image_placeholder--cs` * Icons module: `stage-module_icons_placeholder--cs` * Video module: `stage-module_video_placeholder--cs` * Menu module: `stage-module_menu_placeholder--cs` * Social module: `stage-module_social_placeholder--cs` * Form module: `stage-module_form_placeholder--cs` * AddOn module: stage`-module_addon_placeholder--cs` * DynamicContent module: `stage-module_merge-content_placeholder--cs`
### Changes Font Stye and Drag-and-Drop Widgets | Released on November 7th #### **1. Form Components**
New Classnames for Form Components ### Form Components * **Affected Widgets**: Font style * **Changes**: * **Markup Variations**: Removed some wrapper `div` and `span` elements. * **Classnames Comparison**: | Classnames Removed | Classnames Added | | --------------------------------------------------------------- | ------------------------ | | `tgl-container` | `multi-toggle--cs` | | `tgl-container--cs` | `multi-toggle-btns--cs` | | `item_1-2` | `toggle-btn-pressed--cs` | | `widget__label` | | | `btn-group` | | | `number-selector` | | | `number-selector--cs` | | | `tgl_bgd` | | | `multiToggle_option_descriptor_form_style_labels_font-weight_0` | | | `multiToggle_option_descriptor_form_style_labels_font-weight_1` | | | `button-default--cs` | | | `button-medium--cs` | | | `button--cs` | | | `active` | |
#### **2. Social Widget**
New Classnames for Social Widget ### Social Widget * **Affected Widget**: Configure Icon Collection * **Changes**: * **Markup Variations**: * Removed wrapper `div`. * Replaced the drag handle `div` with a `button`. * **Classnames Comparison**: | Classnames Removed | Classnames Added | | ----------------------------- | ---------------------------- | | `item_1-2` | `social-collection-list--cs` | | `widget__label` | `panel__title--cs` | | `icons-manager__pop` | | | `title_icon` | | | `icon-organizer__panel` | | | `panel__icon-preview-wrapper` | | | `panel__title` | | | `comp-tree-placeholder` | |
#### **3. Icons Widget**
New Classnames for Icons Widget ### Icons Widget * **Affected Widget**: Configure Icon Collection * **Changes**: * **Markup Variations**: * Removed wrapper `div`. * Replaced the drag handle `div` with a `button`. * **Classnames Comparison**: | Classnames Removed | Classnames Added | | ----------------------------- | --------------------------- | | `item_1-2` | `icons-collection-list--cs` | | `widget__label` | `panel__title--cs` | | `icon-organizer__panel` | | | `panel__icon-preview-wrapper` | | | `panel__title` | | | `comp-tree-placeholder` | |
#### **4. Menu Widget**
New Classnames for Menu Widget ### Menu Widget * **Affected Widget**: Configure Menu Items * **Changes**: * **Markup Variations**: * Removed wrapper `div`. * Replaced the drag handle `div` with a `button`. * **Classnames Comparison**: | Classnames Removed | Classnames Added | | ----------------------------- | --------------------------- | | `item_1-2` | `items-collection-list--cs` | | `widget__label` | `item-organizer__panel--cs` | | `icon-organizer__panel` | `panel__title--cs` | | `icon-organizer__panel--cs` | | | `panel__icon-preview-wrapper` | | | `panel__title` | | | `title__icon` | | | `comp-tree-placeholder` | |
#### **5. Form Widget**
New Classnames for Form Widget ### Form Widget * **Affected Widget**: Manage Fields * **Changes**: * **Markup Variations**: * Removed wrapper `div` and `span` elements. * Replaced the drag handle `div` with a `button`. * **Classnames Comparison**: | Classnames Removed | Classnames Added | | ----------------------------- | ------------------------ | | `item_1-2` | `form-items-list--cs` | | `widget__label` | `form-item__panel--cs` | | `icon-organizer__panel` | `form-field-item-id--cs` | | `icon-organizer__panel--cs` | | | `panel__icon-preview-wrapper` | | | `panel__title` | | | `title__icon` | | | `comp-tree-placeholder` | |
#### **6. Carousel Widget**
New Classnames for Carousel Widget ### Carousel Widget * **Affected Widget**: Configure Carousel * **Changes**: * **Markup Variations**: * Removed wrapper `div` and `span` elements. * Added a `label` tag. * Replaced `div` elements with `ul` and `li` for better semantic structure. * Replaced the drag handle `div` with a `button`. * **Classnames Comparison**: | Classnames Removed | Classnames Added | | ---------------------------- | ---------------------------- | | `icon-manager__add-icon--cs` | `widget__label--cs` | | `icon-organizer__panel--cs` | `carousel-slides-list--cs` | | `comp-tree-placeholder` | `carousel-add-slide-btn--cs` | | | `slide-organizer__panel--cs` |
## October 10, 2024 Releases ### Form Edit Modal | Released on October 10th #### **1. Form Edit Modal - Text Inputs**
List of New Classnames for the Form Edit Modal Text Inputs ### Form Edit Modal - Text Inputs * **Affected Sub-element**: All text inputs * **Changes**: * **Markup Variations**: * Updated to the new input text component. * The label is now positioned on top instead of to the left. * **Classnames Comparison**: | Classnames Removed | Classnames Added | | ------------------------ | ---------------------- | | `number-selector--cs` | `input-text--cs` | | `item_1-2` | `input-text-boxed--cs` | | `widget__textbox` | | | `widget__label` | | | `widget__label--textbox` | | | `btn` | |
#### **2. Form Edit Modal - Required and Read Only Toggles**
List of New Classnames for the Form Edit Modal Required and Read Only Toggles ### **Form Edit Modal - Required and Read Only Toggles** * **Affected Sub-element**: Required and Read Only Toggles * **Changes**: * **Markup Variations**: * Changed from toggles to checkboxes for Required and Read Only fields. * **Classnames Comparison**: | Classnames Removed | Classnames Added | | -------------------- | ---------------------- | | `toggle-wrapper--cs` | `checkbox-wrapper--cs` | | `toggle-input--cs` | `widget__label--cs` | | `toggle-slider--cs` | |