Problem/Motivation

When I need to customize a component from my parent theme (ui_suite_bootstrap), I copy the component to my child theme and add `replaces: ui_suite_bootstrap` to my component.yml. This works great in Layout Builder, even though I see both the original component and my new component with a message appended warning the editor to use the parent component, I can live with that.

However, in some contexts, my new components are not available, such as field formatters (ui_patterns_field_formatters) , and Views (ui_patterns_views). Additionally, when I add the original component in these contexts, my customizations are not present.

For example, I created an alert.

name: Alert
description: "Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages."
replaces: ui_suite_bootstrap:alert
links:
  - "https://getbootstrap.com/docs/5.3/components/alerts/"
variants:
  primary:
    title: Primary
  secondary:
    title: Secondary
  success:
    title: Success
  danger:
    title: Danger
  warning:
    title: Warning
  info:
    title: Info
  light:
    title: Light
  dark:
    title: Dark
slots:
  heading:
    title: Heading
    description: "The alert heading. Optional."
  message:
    title: Message
    description: "The alert message."
props:
  type: object
  properties:
    dismissible:
      title: "Dismissible?"
      description: "It is possible to dismiss any alert inline."
      type: boolean
    display_icon:
      title: "Display icon?"
      description: "Include an icon in the alert."
      type: boolean
      default: true
    heading_level:
      title: "Heading level"
      type: integer
      enum:
        - 2
        - 3
        - 4
        - 5
        - 6
      "meta:enum":
        2: h2
        3: h3
        4: "h4 (Default)"
        5: h5
        6: h6
    heading_attributes:
      title: "Heading attributes"
      description: "The attributes to customize the heading tag if present."
      $ref: "ui-patterns://attributes"
    button_text:
      title: "Button text"
      description: "Button text."
      type: string
    button_url:
      title: "Button URL"
      description: "Button URL."
      type: string
      format: uri-reference
libraryOverrides:
  css:
    component:
      './styles/alert.css': { minified: true }

I am not sure if this is a bug or if I am just doing something wrong.

Steps to reproduce

  1. Create a new component by copying the original component to a child theme.
  2. In a View, change the format to Component (UI Patterns)
  3. In the format settings Component field, search for the new component (not there)
  4. Choose the original component, inspect the props / slots for any customizations (not there)

Proposed resolution

Somehow get my new component to appear in the list?

Remaining tasks

User interface changes

API changes

Data model changes

Comments

scottsawyer created an issue. See original summary.

scottsawyer’s picture

Status: Active » Postponed

Looks like grimreaper is already working on what looks to be a fix. I'll revisit this once that ticket is resolved. #3549491: ComponentNegociator::maybeNegotiateByTheme logic does not handle admin theme