Try it outMCP ServerBook a demoCookbook

Change Log

A classnames change log where you can reference current and past changes to CSS classes.

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 divs 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 divs Description: The button width control now uses updated wrapper divs 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 <div> 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 <div> 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 <div> 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 and Confirmation Dialogs. 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 <span>

  • 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 <span>

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.

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.

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.

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.

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.

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.

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.

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.

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 <div role="toolbar">

      • <a> elements are now <button>

    Classnames Comparison:

    Classnames Removed
    Classnames Added

    widgets-section__heading

    widgets-section__heading--cs

    icon

    sidebar-panel-title-icon--cs

    icon-*

    sidebar-panel-title-icon-comment--cs

    sidebar-panel-title-icon-delete--cs

    sidebar-panel-title-icon-duplicate--cs

    sidebar-panel-title-icon-closepanel--cs

    sidebar-panel-title-icon-save--cs

    sidebar-panel-title-icon-editSyncedRow--cs

3. Rows

New Classnames Rows

Rows Affected Sub-element: Sidebar Title

Changes:

Markup Variations:

  • Added <div role="toolbar">

  • <a> elements are now <button>

Classnames Comparison:

  • Classnames Removed:

    • widgets-section__heading

    • icon

    • icon-*

  • Classnames Added:

    • widgets-section__heading--cs

    • sidebar-panel-title-icon--cs

    • sidebar-panel-title-icon-comment--cs

    • sidebar-panel-title-icon-delete--cs

    • sidebar-panel-title-icon-duplicate--cs

    • sidebar-panel-title-icon-closepanel--cs

    • sidebar-panel-title-icon-save--cs

    • sidebar-panel-title-icon-editSyncedRow--cs

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

PreviousCustom CSSNextAMP for Email

Last updated

Was this helpful?