Decorator 🎄

[sstrubberg]

Brief

Why are we doing this? What is this for?

Closes #17303

Allow for flexibility within components using AILabel to allow for other components such as Tooltip to be added instead of just AILabel. Example: in DataTable adding a Tooltip where AILabel is currently but without the additional AILabel gradient styles

Acceptance Criteria for each effected component

• Change slug prop to decorator
  • This will accept any node, most commonly an AILabel, but also could be a tooltip/toggletip/etc.
• Deprecate slug prop
• Update classnames and add new duplicate classname selectors within components using AILabel to use the new #{$prefix}--decorator
• Update styles
  • If a consumer is still using the AILabel component, then we want retain the AILabel styles. (ex. Datatable)
  • Add new duplicate classname selectors to the each of the components styles

    - .#{$prefix}--tile .#{$prefix}--tile--slug {
    
    +.#{$prefix}--tile .#{$prefix}--tile--slug {,
    + .#{$prefix}--tile .#{$prefix}--tile--decorator {
      // will be broken out to ensure styles from AILabel stay, but if no AILabel then no additional gradient styles

• Create a new sub-issue/tasklist item on v12 #15803 for removing these classes as part of v12

Tasks

Preview Give feedback

1. Rename slug classes to ai-label #17714
   package: styles role: dev 🤖 +2
   

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[sstrubberg]

We need to follow up the dev Decorator work with design guidance on the do's and don't.

[wkeese]

Thanks for implementing this!