Conversation
🟡 Heimdall Review Status
🟡
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
🟡
0/1
|
Denominator calculation
|
| | `titleStackContainer` | Container wrapping titleStack | | ||
| | `topContent` | Top section content | | ||
| | `track` | Track/rail element (in progress bars, sliders) | | ||
| | `trigger` | Trigger element that opens a dropdown/popover | |
There was a problem hiding this comment.
I know we have discussed potential concern over having a wide range of style names for similar sub-elements so keeping a list should help with this
packages/mobile/src/chips/Chip.tsx
Outdated
| import { Text } from '../typography/Text'; | ||
|
|
||
| import type { ChipProps } from './ChipProps'; | ||
| export type { ChipProps } from './ChipProps'; |
There was a problem hiding this comment.
For docgen to pick this up we need to export it from the file. This will also allow us to be more consisent with other components.
| export type StylesAndClassNames<ComponentClassNamesMap extends Record<string, string>> = { | ||
| classNames?: { [key in keyof ComponentClassNamesMap]?: string }; | ||
| styles?: { [key in keyof ComponentClassNamesMap]?: React.CSSProperties }; | ||
| }; |
There was a problem hiding this comment.
Let me know what y'all think about this for web. It allows us to keep the keys consistent across classNames, styles, and static classNames. We still haven't decided if we want static classNames for everything but we could start applying to some components now.
I tested this with NavigationBar.
|
|
||
| ## Selectors | ||
|
|
||
| <ComponentStylesTable componentName="ContentCell" styles={mobileStylesData} /> |
| start: 'cds-NavigationBar-start', | ||
| /** Container for the main children content (e.g., title) */ | ||
| content: 'cds-NavigationBar-content', | ||
| } as const; |
There was a problem hiding this comment.
@hcopp todo add eslint rule if we styles or classNames and don't have static classNames
2 participants
What changed? Why?
This PR adds
Future tasks
Styles tab
Selectors
This table is generated by docgen by trying to select the styles prop from a component. It also looks for this new StylesAndClassNames
it uses these values to display one of two tables
Explorer (web only)
The code example is generated by AI and paired with the same selectors from above to let the user highlight
It also works with SVG components
UI
Carousel Web
Carousel Mobile
Other library implementations
Ant
Mantine
Testing
Tested all of these components manually
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false