Skip to content

Global Elements: Add umb-entity-frame component for entity references - #22821

Closed
leekelleher wants to merge 4 commits into
v18/feature/reusable-block-contentfrom
v18/feature/component-entity-frame
Closed

Global Elements: Add umb-entity-frame component for entity references#22821
leekelleher wants to merge 4 commits into
v18/feature/reusable-block-contentfrom
v18/feature/component-entity-frame

Conversation

@leekelleher

@leekelleher leekelleher commented May 12, 2026

Copy link
Copy Markdown
Member

Description

As part of the Global Elements phase 2 work (Reusable Content of Blocks, see #22448), we need UI to distinguish a referenced global element from a local block. Introducing an <umb-entity-frame> component brings us a step closer towards this.

Summary (AI/Claude generated 🤖)

  • Adds a new umb-entity-frame component under src/packages/core/components/ — a passive overlay that frames its parent with a rounded border and label tab.
  • Visibility is controlled by the consumer via the --umb-entity-frame-opacity CSS custom property (defaults to 1); typical pattern is for the parent container to set it to 0 and toggle to 1 on :hover and/or :focus-within.
  • Exposes three CSS custom properties: --umb-entity-frame-opacity, --umb-entity-frame-color, and --umb-entity-frame-border-width.
  • Includes Storybook stories (8 variants) and unit tests following established core component conventions.

Test Plan

  • Storybook: navigate to Generic Components/Entity Frame and verify all 8 stories render correctly
  • Verify hover-based stories (OnHover, OnHoverOrFocus, WrappingButton, Nested) toggle visibility as expected
  • Verify WithCustomColor story renders with the purple theming (#7532c8)
  • Verify WithSlot story shows the slotted icon + text instead of the label fallback
  • Run unit tests: npm test -- --files "**/entity-frame.test.ts"
  • No new TypeScript errors: npx tsc --noEmit

@claude

claude Bot commented May 12, 2026

Copy link
Copy Markdown

Claude finished @leekelleher's task in 3m 56s —— View job


PR Review Complete

  • Gather context and understand request
  • Verify GH CLI and resolve target branch
  • Load review standards and area documentation
  • Gather changed files and diff
  • Raw code review
  • Impact analysis
  • Breaking changes check
  • Post review findings and apply labels (area/frontend, category/ui, category/ux)

Review posted. 3 suggestions filed; no critical or important issues found. Approved with Suggestions for improvement.

@leekelleher leekelleher changed the title Components: Add umb-entity-frame component Global Elements: Add umb-entity-frame component for entity references May 12, 2026
@claude

This comment was marked as resolved.

@claude claude Bot added area/frontend category/ui User interface category/ux User experience labels May 12, 2026
@leekelleher leekelleher added preview/storybook Pull requests that can be previewed through Storybook type/feature labels May 12, 2026
@leekelleher
leekelleher requested a review from nielslyngsoe May 12, 2026 15:22
@leekelleher

Copy link
Copy Markdown
Member Author

Closing this PR, superseded by #22844 for v17.6

@leekelleher
leekelleher deleted the v18/feature/component-entity-frame branch May 14, 2026 10:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/frontend category/ui User interface category/ux User experience preview/storybook Pull requests that can be previewed through Storybook type/feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant