Carbon for AI (C4AI)

[tay1orjones]

This issue tracks the ongoing effort to define and implement new requirements relating to the "Carbon for AI" work stream.

Tasks

Preview Give feedback

1. C4AI: Explore dev feasibility of initial AI gradient requirements #14929
   area: AI role: dev 🤖 +2
   
2. Slug styles and React component #14931
   4 of 4
   area: AI planning: umbrella role: design ✏️ role: dev 🤖 +4
3. C4AI: Implement new requirements for existing components in @carbon/react #15087
   +0
4. C4AI: Implement new requirements for existing components in @carbon/web-components
5. C4AI: Work with Carbon for IBM Products to coordinate additional follow-on tasks (TBD)
6. ...

Click to expand notes from refinement meeting on 10/17/2023

This work stream spans three major areas

1. New elements (gradients, component styles, AI Slug static icon)
2. Updates to @carbon/react and @carbon/web-components (Interactive AI Slug, updates to DataTableRow, other components etc)
3. Net-new components

As outlined in the release schedule, v10 Carbon packages are in mainteance mode. These new features and styling will only be available in Carbon v11 and later.

Elements

• These changes will be made to existing carbon elements packages: @carbon/colors, @carbon/layout, etc.
• These changes may also be delivered in component styles or global styles available through @carbon/styles
• Gradients
  • Directionality isn't finalized
    • R -> L, L -> R, but unsure of top -> bottom and bottom -> top
    • right-to-left support is needed though, to flip gradients in rtl environments
    • Do we need a mixin so the direction is configurable?
    • Is the gradient always the same, or does it change per layer? A: Always the same
  • Scalability
    • Is it a fixed value or percentage?
    • There will be different spans - the intensity changes based on the width of the gradients
    • We need to get really prescriptive per-component to figure out how the scale works
      • Similarly, does every component need an AI variant?
      • Ideas for first explorations: Tile, TextInput, Dropdown
      • Tile - would be easy, and probably will have multiple directionalities in the gradients
      • TextInput - the gradient only comes from one side, but there's significant variance in width of the textinput
      • Dropdown - very complex, has states within it (selected, etc)
  • All gradient work needs to eventually be tokenized into the elements packages and root token definitions in js and scss
• The animated "Aura" (deferred for now)
  • This is tabled for phase 1, don't need to work on this for now
  • This includes the "dot grid" which and has an active animation
    • This may also be shelved, though it can be done in css and doesn't present any significant perf concerns

Updates to @carbon/react and @carbon/web-components

• AI Slug
  • Is the icon an svg or actual text?
  • Does this need to be translatable? We'll defer this for now
  • Before we can build the interactive slug, we may need to add it as an icon to @carbon/icons
  • <Slug kind={ai}> API design could work in @carbon/react
  • It has interactive/states and always gets a tooltip on hover
  • To make it functional, we'll need to support composing <Slug> into popover/tooltip/etc.
• Updates to existing components
  • DataTableRow, for instance
  • What are the others? We need to define a list of impacted components that need an AI variant
    • These may be functional changes, or just styles, we're unsure right now

Net-new components

• These will be housed elsewhere, not in any existing @carbon packages
• These components may not be owned or authored by the Carbon team

[tay1orjones]

I've marked this Needs refined because while we have the initial set of issues, we're going to need to revisit this and continue to nail down exactly what our deliverables are and what we're aiming for sprint-by-sprint as we work through Q4.

[mattrosno]

@tay1orjones can I archive this issue as we use this project going forward to draft and track C4AI issues?

https://github.com/orgs/carbon-design-system/projects/73

[sstrubberg]

Closing in favor of the project listed above.