-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Components: update <Card />
implementation to g2 version
#32243
Conversation
6f400b7
to
bdb3aed
Compare
27d6113
to
312e7aa
Compare
Size Change: +212 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
<Card />
and replace current implementation
cb08d29
to
39495c2
Compare
<Card />
and replace current implementation<Card />
implementation to g2 version
- Update import paths - Keep old implementation temporarily in `src/card-old`
- Add `size` and `isShady` - Add deprecated `isElevated` - Rework padding system - ...and more
983923a
to
eabc0ef
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems to be quite a large PR 😅 I wonder what you think about splitting it into multiple ones.
I'll try my best. I'm closing this PR for now, I will post updates once the split PRs are ready |
Split PRs (will be updated as they are created):
|
Description
<Card />
component with the new g2 implementation (which, prior to this PR, sits inpackages/components/src/ui/card
.isElevated
prop on the<Card />
component is being soft-deprecated in favour of a newelevation
prop (which enables fine-grain control on the card's elevation)<CardMedia />
component didn't exist in the g2 implementation and was created directly in this PR (pretty much a 1:1 with the current version)<CardDivider />
component didn't exist in the g2 implementation and was created directly in this PR. Although its APIs are the same as the old version, internally it now extends the<Divider />
componentsize
property:none
padding
associated to thesize
property has slightly changed to match the spacing system used by other g2 components (used by<Card />
,<CardBody />
,<CardHeader />
and<CardFooter />
)Detailed action plan (used to track the PR's progress)
Replace the old implementation with the new from✅ui/
folderMake project compile (fix imports, etc)✅Reconciliate APIs:✅Match new implementation with OLD APIs✅Add and deprecate✅isElevated
Add✅size
and propagate it to the sub componentsPropagate✅isBorderless
to sub componentsRemove the✅size
property on CardHeaderRemove the✅CardInnerBody
componentRefactor folder structure like Flex (one folder per component)✅Add missing subcomponents✅✅CardMedia
✅CardDivider
Replace Storybook story with a single story which includes✅<Card />
and all of its subcomponents in one placeUpdate tests✅Update READMEs✅Update the CHANGELOG:✅Internal: "rewrote component's internals"✅External:✅isElevated
deprecation, addednone
as a value forsize
, changed border color for header/footer/dividerSearch and update any component's usages across the codebase✅Remove dependencies from the✅/ui/
folderPromote✅<Surface />
component Components: promoteSurface
#32439Promote✅<Scrollable />
component Components: promoteScrollable
#32446Make sure there's no other references to✅ui/
apart from contextTesting instructions
Card
StorybookCard
Storybook:npm run storybook:dev
http://localhost:50240/?path=/story/components-card--default
<Card />
in the repo keep working as beforeScreenshots
Types of changes
New feature
Checklist:
*.native.js
files for terms that need renaming or removal).