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.ts): add refreshed tokens and internal components migration #2356

Merged
merged 38 commits into from
Dec 6, 2024
Merged

feat(motion.ts): add refreshed tokens and internal components migration #2356

merged 38 commits into from
Dec 6, 2024

Conversation

saurabhdaware
Copy link
Member

Description

Changes

Additional Information

Component Checklist

  • Update Component Status Page
  • Perform Manual Testing in Other Browsers
  • Add KitchenSink Story
  • Add Interaction Tests (if applicable)
  • Add changeset

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Sep 10, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 05ca531

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Sep 10, 2024 •
edited
Loading

✅ PR title follows Conventional Commits specification.

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Sep 10, 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 6a9d293:

Sandbox Source
razorpay/blade: basic Configuration

@rzpcibot
Copy link
Collaborator

rzpcibot commented Sep 10, 2024 •
edited
Loading

Bundle Size Report

Updated Components
Status Component Base Size (kb) Current Size (kb) Diff
⬇ Accordion, AccordionItemHeader, AccordionItemBody, AccordionItem 7.472 7.453 -0.019 KB
⬆ ActionList, ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection 0.000 13.109 +13.109 KB
⬇ Alert 11.330 11.319 -0.011 KB
⬇ Amount 1.133 1.122 -0.011 KB
⬇ Avatar, AvatarGroup, TrustedBadgeIcon 6.291 6.273 -0.018 KB
⬇ Badge 0.797 0.786 -0.011 KB
⬇ useBaseMenuItem -0.037 -0.046 -0.009 KB
⬇ BladeProvider 1.714 1.710 -0.004 KB
⬇ BottomSheet 9.418 9.404 -0.014 KB
⬇ Box 0.782 0.771 -0.011 KB
⬇ Breadcrumb, BreadcrumbItem 2.505 2.491 -0.014 KB
⬇ ButtonGroup 1.121 1.109 -0.012 KB
⬇ Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing 9.209 9.193 -0.016 KB
⬇ Carousel, CarouselItem 6.825 6.805 -0.020 KB
⬇ Checkbox 5.977 5.937 -0.040 KB
⬇ Chip, ChipGroup 8.295 7.584 -0.711 KB
⬇ Collapsible, CollapsibleLink, CollapsibleButton, CollapsibleBody 9.673 9.660 -0.013 KB
⬇ Counter 0.762 0.751 -0.011 KB
⬇ DatePicker 85.370 85.231 -0.139 KB
⬇ Divider 0.530 0.521 -0.009 KB
⬇ Drawer, DrawerBody, DrawerHeader, drawerPadding 16.747 16.718 -0.029 KB
⬇ Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader 28.010 27.991 -0.019 KB
⬇ FileUpload 17.069 17.044 -0.025 KB
⬇ Indicator 1.010 0.999 -0.011 KB
⬇ List, ListItem, ListItemLink, ListItemCode, ListItemText 5.106 5.088 -0.018 KB
⬇ Menu, MenuItem, MenuOverlay, MenuDivider, MenuFooter, MenuHeader 28.827 28.806 -0.021 KB
⬇ Modal 13.121 13.096 -0.025 KB
⬇ Popover, PopoverInteractiveWrapper 20.859 20.842 -0.017 KB
⬇ ProgressBar 3.119 3.106 -0.013 KB
⬇ Radio 4.765 4.716 -0.049 KB
⬇ SideNav, SideNavLink, SideNavLevel, SideNavSection, SideNavItem, SideNavFooter, SideNavBody, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL 32.322 32.286 -0.036 KB
⬇ Skeleton 0.753 0.742 -0.011 KB
⬇ SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep 29.330 29.306 -0.024 KB
⬇ StepGroup, StepItem, StepItemIcon, StepItemIndicator 6.799 6.736 -0.063 KB
⬇ Switch 4.498 4.475 -0.023 KB
⬇ Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions, TableEditableCell, TableEditableDropdownCell 64.817 64.690 -0.127 KB
⬇ Tabs, TabItem, TabList, TabPanel 7.011 6.995 -0.016 KB
⬇ Tag 3.455 3.440 -0.015 KB
⬇ ToastContainer, useToast 12.515 12.496 -0.019 KB
⬆ Tooltip, TooltipInteractiveWrapper 15.771 15.775 +0.004 KB
⬇ TopNav, TopNavActions, TopNavBrand, TopNavContent 4.100 4.092 -0.008 KB
⬇ Button 5.993 5.967 -0.026 KB
⬇ IconButton 0.782 0.767 -0.015 KB
⬇ CheckboxGroup 4.839 4.122 -0.717 KB
⬇ SelectInput, AutoComplete 35.799 35.756 -0.043 KB
⬇ OTPInput 29.946 29.911 -0.035 KB
⬇ PasswordInput 31.501 31.458 -0.043 KB
⬇ PhoneNumberInput 59.566 59.521 -0.045 KB
⬇ SearchInput 34.146 34.118 -0.028 KB
⬇ TextArea 31.864 31.822 -0.042 KB
⬇ TextInput 33.451 33.413 -0.038 KB
⬇ Link 2.123 2.109 -0.014 KB
⬇ RadioGroup 4.827 4.080 -0.747 KB
⬇ Spinner 1.803 1.789 -0.014 KB
⬇ TabNav, TabNavItem 9.138 9.114 -0.024 KB
⬇ Code 0.599 0.589 -0.010 KB
⬇ Display 0.494 0.484 -0.010 KB
⬇ Heading, getHeadingProps 0.438 0.426 -0.012 KB
⬇ Text 0.011 0.001 -0.010 KB

Generated by 🚫 dangerJS against 6a9d293

@saurabhdaware saurabhdaware marked this pull request as ready for review September 16, 2024 05:38
@saurabhdaware saurabhdaware changed the base branch from rfc/motion-presets to master November 6, 2024 12:13
@saurabhdaware saurabhdaware changed the base branch from master to rfc/motion-presets November 6, 2024 12:13
@anuraghazra
Copy link
Member

2 queries:

  1. Did we sync up with RK about the animations being slow?
  2. Did we check the blast radius of changing token names?

@saurabhdaware saurabhdaware mentioned this pull request Dec 2, 2024
Merged
8 tasks
Base automatically changed from rfc/motion-presets to motion/integration December 6, 2024 10:13
@saurabhdaware saurabhdaware merged commit d432350 into motion/integration Dec 6, 2024
2 of 10 checks passed
@saurabhdaware saurabhdaware deleted the motion/token-refresh branch December 6, 2024 10:16
@saurabhdaware
Copy link
Member Author

Did we sync up with RK about the animations being slow?

Yup we changed durations for some components

Did we check the blast radius of changing token names?

Yes there are few (~40 files) in razorpay which use these. we've written codemod

saurabhdaware added a commit that referenced this pull request Dec 11, 2024
@saurabhdaware
feat(Motion): motion integration branch (#2435)
663da58 
* start integration branch

* docs(motion-presets): Motion Refresh / Presets RFC 2024 (#2336)

* 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

* feat(motion.ts): add refreshed tokens and internal components migration (#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

* feat(motion): add initial presets code (#2360)

* 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

* docs(Motion Presets): add motion presets documentation (#2428)

* 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

* test(Motion): add tests and codemod (#2436)

* 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

* Create fluffy-bikes-drop.md

* fix: conflicts

* fix: features.js extension in PR preview sandbox

* fix: GlobalStyles undefined

* feat: add motion to peerDependency as well like framer-motion

* fix: recommend `framer-motion` name installation instead of `motion/react` (#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

* fix: stackblitz examples minor cleanup
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

@kamleshchandnani kamleshchandnani Awaiting requested review from kamleshchandnani

@snitin315 snitin315 Awaiting requested review from snitin315

@tewarig tewarig Awaiting requested review from tewarig

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