Fix #19221 #19254
Fix #19221 #19254
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a UI layering issue as documented in issue #19221 by adjusting CSS z-index values and ensuring consistent attribute usage for extension components.
- Adds the 'part' attribute to extension components in block entry elements
- Introduces a shared style block for extension component parts to manage z-index
- Updates the custom view component’s z-index to correctly layer the UI
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts | Adds setting of the 'part' attribute and inserts a style block for proper stacking |
| src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts | Adds setting of the 'part' attribute and inserts a style block for proper stacking |
| src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts | Adds setting of the 'part' attribute and inserts a style block for proper stacking |
| src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts | Adjusts custom view CSS and updates z-index values to fix UI overlap issues |
Comments suppressed due to low confidence (1)
src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts:34
- [nitpick] Verify that the new high z-index value is intentional and consistently fits within the overall stacking context to avoid potential overlap issues with other UI elements.
z-index: 10000;
| @@ -345,6 +346,12 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert | |||
| outline: 3px solid var(--uui-color-focus); | |||
| } | |||
| } | |||
|
|
|||
| umb-extension-slot::part(component) { | |||
There was a problem hiding this comment.
[nitpick] Consider centralizing the shared styling for 'umb-extension-slot::part(component)' across block components to reduce duplication and simplify future updates.
Copilot uses AI. Check for mistakes.
| @@ -511,6 +512,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper | |||
| border-color: var(--uui-color-invalid); | |||
| } | |||
|
|
|||
| umb-extension-slot::part(component) { | |||
There was a problem hiding this comment.
[nitpick] Consider centralizing the shared styling for 'umb-extension-slot::part(component)' across block components to reduce duplication and simplify future updates.
Copilot uses AI. Check for mistakes.
| position: relative; | ||
| z-index: 0; |
There was a problem hiding this comment.
[nitpick] Consider centralizing the shared styling for 'umb-extension-slot::part(component)' across block components to reduce duplication and simplify future updates.
| position: relative; | |
| z-index: 0; | |
| position: var(--umb-extension-slot-component-position, relative); | |
| z-index: var(--umb-extension-slot-component-z-index, 0); |
Copilot uses AI. Check for mistakes.
Fixes #19221
This screenshot is from the Custom View Example which has elements with z-index 1000, before this fix that was ruining the UI, now it stays behind.