Skip to content

Label property-editor, adds UFM template support #19610

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

leekelleher
Copy link
Member

Description

Adds a "Label template configuration field to the Label property-editor UI, to add support for UFM syntax.

Under the hood, if a label template is set, the <umb-ufm-render> component is used to render the label's value, this can be used in conjunction with UFM filter syntax.

Note

To note, this pull request is only the client-side implementation. A follow-up pull request will be made with the server-side feature to add a new data-type (specifically for file-size and pixels), as well as any other required database creation amends.

How to test?

An initial example would be the file-size property on a media item. Navigate to the data-type called "Label (bigint)", in the label template field, add the following: {=value | bytes}. Then navigate to any media item, notice that the file-size is now displayed in the appropriate byte size unit.

@Copilot Copilot AI review requested due to automatic review settings June 25, 2025 16:06
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds support for Umbraco Flavored Markdown (UFM) in the Label property editor by introducing a label template field and a new bytes filter.

  • Registers and implements a bytes UFM filter using formatBytes
  • Updates the Label UI element to accept a labelTemplate setting and render via <umb-ufm-render>
  • Extends the Label property editor manifest to expose the new labelTemplate configuration

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
src/Umbraco.Web.UI.Client/src/packages/ufm/filters/manifests.ts Register new Umb.Filter.Bytes filter
src/Umbraco.Web.UI.Client/src/packages/ufm/filters/bytes.filter.ts Implement bytes filter calling formatBytes
src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts Add labelTemplate state, conditional UFM rendering
src/Umbraco.Web.UI.Client/src/packages/property-editors/label/manifests.ts Add labelTemplate to Label property-editor settings
Comments suppressed due to low confidence (1)

src/Umbraco.Web.UI.Client/src/packages/property-editors/label/property-editor-ui-label.element.ts:32

  • [nitpick] Removing the default UmbTextStyles may cause inconsistent typography across the backoffice. Consider re-adding or replacing these styles to maintain consistent label styling.
	}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant