You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
[Studio UI] Document editables: switch and colour picker options, design tokens for editmode CSS - #4202
Two new options for document editables, and Studio's design tokens for a template's own editmode CSS. Nothing changes for templates that don't use them.
pimcore_checkbox as a switch
{display: 'switch'} draws Studio's Switch (small, label on the right) instead of a checkbox.
The stored value is the same boolean. Inheritance works as before: the switch is disabled while the value is inherited.
The label is a <label> for the control, in both displays: it gives the switch or checkbox its accessible name, and a click on it toggles the control. Before, the checkbox label was an unconnected sibling.
pimcore_input as a colour picker
{color: true} draws Studio's ColorPicker (hex, no alpha, clearable) with the colour's hex code next to the swatch.
The editable still stores the hex text; clearing stores an empty string.
When the field is empty, its placeholder is shown as the swatch and as greyed hex text, so an editor sees which colour applies by default.
Inherited values get the usual overlay with "overwrite".
Studio design tokens in the document editor iframe
The iframe now publishes a set of Studio's theme tokens on :root as CSS variables, so a template's editmode stylesheet can follow the theme instead of copying values.
Covered: type, text colours, primary, borders, controls, the spacing scale, motion, and Studio's field widths (small, medium, large).
Names follow the antd token, kebab-cased with a --studio- prefix: marginSM → --studio-margin-sm, colorTextDescription → --studio-color-text-description.
The list is deliberate (design-token-variables.ts) and can be extended when a template needs another token.
Additional info
First user: the portal configuration page, pimcore/portal-engine#1102.
…ur picker
Two opt-in display options for document editables, set from the template config:
- pimcore_checkbox(..., {display: 'switch'}) draws Studio's Switch (small, label on its right)
instead of a checkbox.
- pimcore_input(..., {color: true}) draws Studio's ColorPicker trigger: a swatch with the
upper-case hex code, clearable. The stored value is unchanged: the hex text, or an empty string
once cleared. An empty field shows its placeholder, the colour that applies while it is empty,
in the swatch and as its hex code in the placeholder colour.
Without the options both editables render exactly as before.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
… the iframe
A template's editmode stylesheet cannot read the theme, so it had to copy values and drift from
it. The editor iframe now publishes a deliberate set of tokens on :root as --studio-* variables:
type, text, primary, borders, controls, the spacing scale, motion and Studio's field widths.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
… and toggles it
The label was a sibling of the control, so a screen reader announced an unnamed switch and a
click on the label did nothing. It is now a <label> for the control, in both displays.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The persistence branch for this new editable is not exercised: the added tests only check rendered text and component selection, so a regression where selecting or clearing a colour emits the wrong stored string would still pass. Please invoke the picker’s onChange path and assert that a selected colour emits its hex text and a cleared colour emits ''; this is the smallest seam for the new storage contract.
A picked colour is stored as its hex text, a cleared one as an empty string. The test drives the
picker's onChange the way a pick and a clear do.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Copilot's second review listed a "previously missed" finding: no test covered what the colour picker stores. Fixed in 9c032f6. The test drives the picker's onChange the way a pick and a clear do, and asserts that a pick stores the hex text and a clear stores an empty string.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes in this pull request
Part of https://github.com/pimcore/product-management/issues/1458 (portal configuration in Studio)
Two new options for document editables, and Studio's design tokens for a template's own editmode CSS. Nothing changes for templates that don't use them.
pimcore_checkboxas a switch{display: 'switch'}draws Studio'sSwitch(small, label on the right) instead of a checkbox.<label>for the control, in both displays: it gives the switch or checkbox its accessible name, and a click on it toggles the control. Before, the checkbox label was an unconnected sibling.pimcore_inputas a colour picker{color: true}draws Studio'sColorPicker(hex, no alpha, clearable) with the colour's hex code next to the swatch.placeholderis shown as the swatch and as greyed hex text, so an editor sees which colour applies by default.Studio design tokens in the document editor iframe
:rootas CSS variables, so a template's editmode stylesheet can follow the theme instead of copying values.--studio-prefix:marginSM→--studio-margin-sm,colorTextDescription→--studio-color-text-description.design-token-variables.ts) and can be extended when a template needs another token.Additional info
checkbox-editable.test.tsx,color-input-editable.test.tsx,design-token-variables.test.ts(14 tests).🤖 Generated with Claude Code