fix(react-card): refactor CardHeader to use grid display#23449
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 9f0708b:
|
📊 Bundle size report
Unchanged fixtures
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: b4a1586d84a3f1480327d288b128eb102b44ba5a (build) |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1702 | 1670 | 5000 | |
| Button | mount | 1275 | 1238 | 5000 | |
| FluentProvider | mount | 2276 | 2318 | 5000 | |
| FluentProviderWithTheme | mount | 895 | 942 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 879 | 873 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 930 | 923 | 10 | |
| MakeStyles | mount | 2579 | 2447 | 50000 |
CardHeader to use grid displayCardHeader to use grid display
| export type CardHeaderSlots = { | ||
| root: Slot<'div'>; | ||
| image: Slot<'div'>; | ||
| content?: Slot<'div'>; |
There was a problem hiding this comment.
Slot no longer required as it existed strictly to make the flex layout work.
| {slots.image && <slots.image {...slotProps.image} />} | ||
| <slots.header {...slotProps.header} /> | ||
| {slots.description && <slots.description {...slotProps.description} />} |
There was a problem hiding this comment.
Slots now proper optional as designed.
| <Card> | ||
| <CardHeader | ||
| image={<img src={avatarElviaURL} alt="Face of a person" />} | ||
| image={{ as: 'img', src: avatarElviaURL, alt: 'Face of a person' }} |
There was a problem hiding this comment.
what the reason of this syntax?
There was a problem hiding this comment.
Avoiding the div wrapper and rendering the img element directly

Current Behavior
Initial implementation of
CardHeaderwas rushed, overlooked and brittle with style overwriting.New Behavior
display: gridAdd shorthands support for
grid-areagriffel#120contentslot has been deletedRelated Issue(s)
Fixes #21909
#19336
Reproduction of issue #21909 with this PRs fix