Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat(Motion): motion integration branch #2435

Merged
merged 15 commits into from
Dec 11, 2024
Merged

feat(Motion): motion integration branch #2435

merged 15 commits into from
Dec 11, 2024

Conversation

saurabhdaware
Copy link
Member

@saurabhdaware saurabhdaware commented Dec 2, 2024 •
edited
Loading

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Dec 2, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: c453fe1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@razorpay/blade Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 2, 2024 •
edited
Loading

✅ PR title follows Conventional Commits specification.

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Dec 2, 2024 •
edited
Loading

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 c453fe1:

Sandbox Source
razorpay/blade: basic Configuration

@rzpcibot
Copy link
Collaborator

rzpcibot commented Dec 2, 2024 •
edited
Loading

Bundle Size Report

Updated Components
Status Component Base Size (kb) Current Size (kb) Diff
⬆ Accordion, AccordionItemHeader, AccordionItemBody, AccordionItem 8.048 8.146 +0.098 KB
⬆ ActionList, ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection 16.499 16.634 +0.135 KB
⬇ Alert 11.622 11.537 -0.085 KB
⬆ Amount 1.310 1.344 +0.034 KB
⬆ Avatar, AvatarGroup, TrustedBadgeIcon 6.303 6.334 +0.031 KB
⬆ Badge 0.833 0.890 +0.057 KB
⬆ useBaseMenuItem -0.109 -0.042 +0.067 KB
⬆ MotionDiv 0.000 -0.046 +-0.046 KB
⬆ BladeProvider 1.647 1.716 +0.069 KB
⬆ BottomNav, BottomNavItem 1.021 1.096 +0.075 KB
⬆ BottomSheet 9.541 9.603 +0.062 KB
⬆ Box 0.805 0.861 +0.056 KB
⬆ Breadcrumb, BreadcrumbItem 2.602 2.645 +0.043 KB
⬆ ButtonGroup 1.156 1.210 +0.054 KB
⬇ Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing 9.414 9.367 -0.047 KB
⬇ Carousel, CarouselItem 7.306 7.139 -0.167 KB
⬆ Checkbox 6.267 6.382 +0.115 KB
⬇ Chip, ChipGroup 8.564 8.504 -0.060 KB
⬇ Collapsible, CollapsibleLink, CollapsibleButton, CollapsibleBody 9.806 9.756 -0.050 KB
⬆ Counter 0.782 0.842 +0.060 KB
⬆ DatePicker 86.510 86.656 +0.146 KB
⬆ Divider 0.549 0.550 +0.001 KB
⬆ Drawer, DrawerBody, DrawerHeader, drawerPadding 17.340 17.386 +0.046 KB
⬆ Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader 28.624 28.831 +0.207 KB
⬆ Fade 0.000 1.066 +1.066 KB
⬆ FileUpload 17.624 17.763 +0.139 KB
⬆ Indicator 1.029 1.084 +0.055 KB
⬆ List, ListItem, ListItemLink, ListItemCode, ListItemText 5.161 5.222 +0.061 KB
⬆ Menu, MenuItem, MenuOverlay, MenuDivider, MenuFooter, MenuHeader 29.480 29.518 +0.038 KB
⬆ Modal 13.217 13.267 +0.050 KB
⬆ Morph 0.000 0.234 +0.234 KB
⬆ Move 0.000 1.104 +1.104 KB
⬆ Popover, PopoverInteractiveWrapper 21.373 21.432 +0.059 KB
⬇ ProgressBar 3.142 3.050 -0.092 KB
⬆ Radio 5.000 5.114 +0.114 KB
⬆ Scale 0.000 0.916 +0.916 KB
⬆ SideNav, SideNavLink, SideNavLevel, SideNavSection, SideNavItem, SideNavFooter, SideNavBody, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL 33.088 33.189 +0.101 KB
⬆ Skeleton 0.764 0.773 +0.009 KB
⬆ Slide 0.000 1.276 +1.276 KB
⬆ SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep 29.752 29.830 +0.078 KB
⬆ StepGroup, StepItem, StepItemIcon, StepItemIndicator 6.448 6.524 +0.076 KB
⬆ Switch 4.726 4.857 +0.131 KB
⬆ Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions, TableEditableCell, TableEditableDropdownCell 66.644 66.847 +0.203 KB
⬆ Tabs, TabItem, TabList, TabPanel 7.264 7.309 +0.045 KB
⬆ Tag 3.788 3.864 +0.076 KB
⬆ ToastContainer, useToast 12.814 12.881 +0.067 KB
⬆ Tooltip, TooltipInteractiveWrapper 15.824 15.892 +0.068 KB
⬆ TopNav, TopNavActions, TopNavBrand, TopNavContent 1.234 1.328 +0.094 KB
⬆ Button 6.045 6.117 +0.072 KB
⬆ IconButton 1.044 1.110 +0.066 KB
⬆ CheckboxGroup 5.074 5.129 +0.055 KB
⬆ SelectInput, AutoComplete 36.379 36.533 +0.154 KB
⬆ OTPInput 30.188 30.336 +0.148 KB
⬆ PasswordInput 31.951 32.088 +0.137 KB
⬆ PhoneNumberInput 60.657 60.838 +0.181 KB
⬆ SearchInput 34.607 34.750 +0.143 KB
⬆ TextArea 32.450 32.610 +0.160 KB
⬆ TextInput 34.045 34.193 +0.148 KB
⬆ Link 2.137 2.191 +0.054 KB
⬆ RadioGroup 5.061 5.102 +0.041 KB
⬆ Spinner 1.824 1.909 +0.085 KB
⬆ TabNav, TabNavItems, TabNavItem 3.042 3.070 +0.028 KB
⬇ Code 0.609 0.603 -0.006 KB
⬇ Display 0.423 0.322 -0.101 KB
⬇ Heading, getHeadingProps 0.367 0.325 -0.042 KB
⬆ Text -0.060 0.003 +0.063 KB

Generated by 🚫 dangerJS against c453fe1

@saurabhdaware
docs(motion-presets): Motion Refresh / Presets RFC 2024 (#2336)
3b5d17e 
* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* docs: update animationInteractions docs

* feat: add view transitions API note

* feat: add view transitions API note

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat: add videos locally

* feat: revert to previous fade video

* feat: rename transition prop to type

* docs: update AnimateInteractions prop

* remove unrelated changes

* feat: add PR link

* fix: PR link

* feat: add breaking change note
@saurabhdaware
feat(motion.ts): add refreshed tokens and internal components migrati…
d432350 
…on (#2356)

* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* feat: update all token values

* feat: motion, migrate internal motion tokens

* fix: ts check

* fix: ts

* fix: switch delay

* fix: durations map

* docs: update animationInteractions docs

* feat: add view transitions API note

* feat: add view transitions API note

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading
@saurabhdaware
feat(motion): add initial presets code (#2360)
12e1c2f 
* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* feat: update all token values

* feat: motion, migrate internal motion tokens

* fix: ts check

* fix: ts

* fix: switch delay

* feat: add base entry exit presets

* fix: example card alignment

* feat: add stagger component

* feat: add animateInteractions

* refactor: use common BaseMotionBox

* refactor: move stagger and animateinteraction check

* fix: durations map

* feat: add morph and scale preset

* feat: add Slide

* refactor: remove unused code add todo

* docs: update animationInteractions docs

* feat: add css bezier function

* feat: add view transitions API note

* feat: add view transitions API note

* feat: add controled scale, enhancer animateinteraction

* feat: replace framer-motion imports with motion/react

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat: add fade token values

* fix(AnimateInteractions): a11y focus issues

* feat: add token valyes for move

* feat: add slide tokens

* fix: stories

* fix: typecheck

* feat: add refs to components till checkbox

* feat: add refs till radio

* feat: migration to ref till typography

* feat: add withRef story

* fix: scale box

* feat: add shouldUnmountWhenHidden

* feat: handle no unmount transitions in stagger

* feat: add slideFromOffset prop

* refactor: simplify basemotion

* feat: add memo for variants object

* fix: focus on animate interactions

* fix: resolve anurag's comments

* feat: add comments for getOuterMotionRef

* feat: add delay prop

* fix: stagger type

* feat: support framer-motion v4

* feat: add borderRadius and backgroundColor morph support

* feat: remove reduced motion handling
@saurabhdaware
docs(Motion Presets): add motion presets documentation (#2428)
fa0c45e 
* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* feat: update all token values

* feat: motion, migrate internal motion tokens

* fix: ts check

* fix: ts

* fix: switch delay

* feat: add base entry exit presets

* fix: example card alignment

* feat: add stagger component

* feat: add animateInteractions

* refactor: use common BaseMotionBox

* refactor: move stagger and animateinteraction check

* fix: durations map

* feat: add morph and scale preset

* feat: add Slide

* refactor: remove unused code add todo

* docs: update animationInteractions docs

* feat: add css bezier function

* feat: add view transitions API note

* feat: add view transitions API note

* feat: add controled scale, enhancer animateinteraction

* feat: replace framer-motion imports with motion/react

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat: add fade token values

* fix(AnimateInteractions): a11y focus issues

* feat: add token valyes for move

* feat: add slide tokens

* fix: stories

* fix: typecheck

* feat: add refs to components till checkbox

* feat: add refs till radio

* feat: migration to ref till typography

* feat: add withRef story

* fix: scale box

* feat: add basic stories

* refactor: docs

* feat: add shouldUnmountWhenHidden

* docs: add docs for other entry/exit presets

* feat: add stagger documentation

* feat: handle no unmount transitions in stagger

* feat: add dashboard example

* fix: workspace animation on dashboard recipe

* feat: add slideFromOffset prop

* feat: add loading screen to dashboard example

* refactor: simplify basemotion

* feat: add slide docs fix

* docs: minor docs changes

* feat: add memo for variants object

* feat: add installation docs, expose overlay colors

* fix: focus on animate interactions

* docs: remove docs page of recipes

* fix: scale performance

* fix: ts

* feat: add basic intro page for motion

* docs: finish motion intro docs

* feat: add basic upgrade guide info

* fix: resolve anurag's comments

* feat: add comments for getOuterMotionRef

* feat: add delay prop

* fix: types

* fix: stagger type

* feat: support framer-motion v4

* feat: add version upgrade guide

* feat: add jsdoc, pass down boxProps to stagger

* feat: reuse motion installation mdx

* feat: add borderRadius and backgroundColor morph support

* fix: button morph example

* fix: morph showcase

* feat: add lazy motion
@saurabhdaware
test(Motion): add tests and codemod (#2436)
f1d81cf 
* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* feat: update all token values

* feat: motion, migrate internal motion tokens

* fix: ts check

* fix: ts

* fix: switch delay

* feat: add base entry exit presets

* fix: example card alignment

* feat: add stagger component

* feat: add animateInteractions

* refactor: use common BaseMotionBox

* refactor: move stagger and animateinteraction check

* fix: durations map

* feat: add morph and scale preset

* feat: add Slide

* refactor: remove unused code add todo

* docs: update animationInteractions docs

* feat: add css bezier function

* feat: add view transitions API note

* feat: add view transitions API note

* feat: add controled scale, enhancer animateinteraction

* feat: replace framer-motion imports with motion/react

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat: add fade token values

* fix(AnimateInteractions): a11y focus issues

* feat: add token valyes for move

* feat: add slide tokens

* fix: stories

* fix: typecheck

* feat: add refs to components till checkbox

* feat: add refs till radio

* feat: migration to ref till typography

* feat: add withRef story

* fix: scale box

* feat: add basic stories

* refactor: docs

* feat: add shouldUnmountWhenHidden

* docs: add docs for other entry/exit presets

* feat: add stagger documentation

* feat: handle no unmount transitions in stagger

* feat: add dashboard example

* fix: workspace animation on dashboard recipe

* feat: add slideFromOffset prop

* feat: add loading screen to dashboard example

* refactor: simplify basemotion

* feat: add slide docs fix

* docs: minor docs changes

* feat: add memo for variants object

* feat: add installation docs, expose overlay colors

* fix: focus on animate interactions

* docs: remove docs page of recipes

* fix: scale performance

* fix: ts

* feat: add basic intro page for motion

* docs: finish motion intro docs

* feat: add tests for basic components

* tests: update snapshots

* feat: add interaction tests

* feat: add codemod

* feat: add basic upgrade guide info

* fix: resolve anurag's comments

* feat: add comments for getOuterMotionRef

* feat: add delay prop

* fix: types

* fix: stagger type

* feat: support framer-motion v4

* feat: add version upgrade guide

* feat: add jsdoc, pass down boxProps to stagger

* feat: reuse motion installation mdx

* fix: basemotion mock

* fix: motion/react instances

* fix: native test

* fix: transitions on card

* fix: snapshot for card

* fix: lint issues

* fix: typecheck

* fix: lint

* fix: regex lint

* fix: text lint

* feat: add borderRadius and backgroundColor morph support

* fix: slide test

* upgrade guide cleanup

* heading level cleanup in upgrade guide

* fix: button morph example

* fix: morph showcase

* feat: add lazy motion

* fix: typecheck

* fix: native snapshots
@saurabhdaware
Create fluffy-bikes-drop.md
cdad72f
@saurabhdaware
fix: merge conflicts
9e8da96
@saurabhdaware
fix: conflicts
fc12747
@saurabhdaware
fix: features.js extension in PR preview sandbox
2f6d38c
@saurabhdaware
fix: GlobalStyles undefined
f22599a
@saurabhdaware
feat: add motion to peerDependency as well like framer-motion
86213ad
anuraghazra
anuraghazra previously approved these changes Dec 10, 2024
View reviewed changes
@saurabhdaware
fix: recommend framer-motion name installation instead of `motion/r…
6a8497d 
…eact` (#2443)

* fix: mark motion as optional peer deps

* feat: mark motion external

* fix: check if its working without motion as external

* fix: mark motion/react as external

* feat: recommend framer-motion name instead
@saurabhdaware saurabhdaware merged commit 663da58 into master Dec 11, 2024
15 of 17 checks passed
@saurabhdaware saurabhdaware deleted the motion/integration branch December 11, 2024 05:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@anuraghazra anuraghazra anuraghazra approved these changes

@chaitanyadeorukhkar chaitanyadeorukhkar Awaiting requested review from chaitanyadeorukhkar chaitanyadeorukhkar is a code owner

@kamleshchandnani kamleshchandnani Awaiting requested review from kamleshchandnani kamleshchandnani is a code owner

@snitin315 snitin315 Awaiting requested review from snitin315 snitin315 is a code owner

@tewarig tewarig Awaiting requested review from tewarig tewarig is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@saurabhdaware @rzpcibot @anuraghazra