feat: full size modal #2620

tewarig · 2025-04-23T11:29:17Z

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 · 2025-04-23T11:29:21Z

🦋 Changeset detected

Latest commit: 3bc0e8c

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	Minor

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 · 2025-04-23T11:29:30Z

✅ PR title follows Conventional Commits specification.

codesandbox-ci · 2025-04-23T11:32:56Z

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 3bc0e8c:

Sandbox	Source
razorpay/blade: basic	Configuration

rzpcibot · 2025-04-23T11:47:38Z

Bundle Size Report

Updated Components

Status	Component	Base Size (kb)	Current Size (kb)	Diff
⬆	Modal	13.267	13.337	+0.070 KB

Generated by 🚫 dangerJS against 3bc0e8c

saurabhdaware · 2025-04-24T09:11:41Z

packages/blade/src/components/Modal/docs/FullScreenModal.stories.tsx

why separate story file?

saurabhdaware · 2025-04-24T09:13:03Z

packages/blade/src/components/Modal/docs/SimpleModal.stories.tsx

I think here you can just do

const FullScreenModal = ModalTemplate.bind({}) FullScreenModal.args = { size: 'full' }

This should do the job right?

We can have example with StepGroup in our CreationView documentation I think. Otherwise at multiple places we're end up keeping very similar examples and larger examples in stories can make the "show code" section a bit confusing

saurabhdaware · 2025-04-24T09:14:01Z

packages/blade/src/components/Modal/Modal.web.tsx

-`;
+const ModalContent = styled(BaseBox)<{ isVisible: boolean; size: NonNullable<ModalProps['size']> }>(
+  ({ isVisible, theme, size }) => {
+    const centerTransform = size === 'full' ? 'none' : 'translate(-50%, -50%)';


Is this animation defined from design?

nope. i have kept is same for normal and full size modal.

Screen.Recording.2025-04-25.at.12.45.15.PM.mov

but we don't need translate(-50%, -50%) .. in case of full page modal. since it will already at center.
also had a discussion with RK. will change it to just fadein and fadeout

saurabhdaware · 2025-04-24T09:16:01Z

packages/blade/src/components/Modal/Modal.web.tsx

+                    ? `calc(100vw - ${makeSize(modalMargin[size])} - ${makeSize(
+                        modalMargin[size],
+                      )})`


Suggested change

? `calc(100vw - ${makeSize(modalMargin[size])} - ${makeSize(

modalMargin[size],

)})`

? `calc(100vw - ${makeSize(modalMargin[size] * 2)},

)})`

Same thing?

saurabhdaware · 2025-04-24T09:17:13Z

packages/blade/src/components/Modal/Modal.web.tsx

+                top={size === 'full' ? makeSize(modalMargin[size]) : '50%'}
+                left={size === 'full' ? makeSize(modalMargin[size]) : '50%'}


Why do we have to define different value for full? wouldn't it still be center aligned just full width?

saurabhdaware · 2025-04-24T09:18:03Z

packages/blade/src/components/Modal/ModalBody.web.tsx

 } & DataAnalyticsAttribute;

 const _ModalBody = ({
  children,
  padding = 'spacing.6',
+  height,


should ModalBody have height prop or should Modal component have height prop?

The Modal body should have a height prop, as in the case of a full Modal, we need the Modal body to take up 100% of the available height inside the Modal.

Ohhh what happens if I do size="full" and not define height here?

Can we not define height="100%" for all ModalBody without taking it from consumers?

saurabhdaware · 2025-04-24T09:19:36Z

packages/blade/src/components/Modal/docs/SimpleModal.stories.tsx

We can have example with StepGroup in our CreationView documentation I think. Otherwise at multiple places we're end up keeping very similar examples and larger examples in stories can make the "show code" section a bit confusing

saurabhdaware · 2025-04-25T06:56:23Z

borderRadius on bottom left is not working 🤔

saurabhdaware · 2025-04-30T05:46:48Z

packages/blade/src/components/Modal/Modal.web.tsx

-const entry = keyframes`
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9) translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1) translateY(0px);
-  }
-`;
+const ModalContent = styled(BaseBox)<{ isVisible: boolean; size: NonNullable<ModalProps['size']> }>(
+  ({ isVisible, theme, size }) => {
+    const entry = keyframes`
+      from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.9) translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1) translateY(0px);
+      }
+    `;
+


This change is not needed anymore right? we can move keyframes outside and revert to previous state

saurabhdaware · 2025-04-30T05:54:26Z

Few comments. Rest looks good:

feat: full size modal #2620 (comment)
feat: full size modal #2620 (comment)
There is a strange flash when modal opens. Can you check the animations again? this is 0.5x video:

animation-flash.mov

tewarig · 2025-04-30T12:15:19Z

Few comments. Rest looks good:

feat: full size modal #2620 (comment)

feat: full size modal #2620 (comment)

There is a strange flash when modal opens. Can you check the animations again? this is 0.5x video:

animation-flash.mov

found the issue

Screen.Recording.2025-04-30.at.5.44.09.PM.mov

tewarig · 2025-04-30T15:14:24Z

chore: update css

seems like same issue exists in master in case of nomal modal

modal-issue-master.mov

tewarig · 2025-05-02T05:19:39Z

@saurabhdaware let me know if u can pick this animation bug in another pr ?

saurabhdaware · 2025-05-05T05:30:25Z

packages/blade/src/components/Modal/Modal.web.tsx

 import { FloatingFocusManager, FloatingPortal, useFloating } from '@floating-ui/react';
 import usePresence from 'use-presence';
+import { m } from 'framer-motion';


Our modal seems to lag a bit too much now with this though. Its a bit too visible 😭 . Lets go back to previous CSS animation and lets live with that flash of content instead?

Screen.Recording.2025-05-05.at.11.03.00.AM.mov

@saurabhdaware reverted changes

chore: full size modal

7faa0d1

tewarig added 6 commits April 23, 2025 18:06

chore: added animation

58fb235

fix: ts error

c069f7f

fix: ts error

d6841f5

chore: update examples

e1b5333

fix: maxHeight issue

6225f05

chore: update snaps

23ed0d6

tewarig marked this pull request as ready for review April 24, 2025 05:31

tewarig requested review from chaitanyadeorukhkar, kamleshchandnani, anuraghazra, snitin315 and saurabhdaware as code owners April 24, 2025 05:31

saurabhdaware reviewed Apr 24, 2025

View reviewed changes

tewarig added 10 commits April 25, 2025 13:22

fix: review change

28c0ccc

fix: bug

2b2c6e8

chore: change size

78b8a9b

fix: add overflow hidden

2e88f48

fix: change animation to just fade in and fade out

4ee1106

chore: update example

69f2589

chore: update snaps

957b635

chore: code refactor

40ee9b2

fix: types

aecd427

fix: modal tests

473d5a3

fix: linting

6aebe82

saurabhdaware reviewed Apr 30, 2025

View reviewed changes

chore: refactor

3af4f4d

chore: update css

89a8605

tewarig added 3 commits April 30, 2025 21:21

fix: bug in modal

c0be312

refactor: modal css

70646af

chore: update snaps

8cb550b

tewarig added 7 commits May 2, 2025 11:04

fix: update css

dfc5016

chore: update snaps

c5f1f04

refactor: animations

e9a90d2

fix: broken animatoin

41a5eba

fix: translate y

ca5488d

chore: update snaps

adca78e

refactor: unused css

2d1ac17

saurabhdaware reviewed May 5, 2025

View reviewed changes

tewarig added 5 commits May 5, 2025 12:36

revert: framer-motion

c966a44

chore: update snaps

8f432ce

refactor: css animation

226b4cb

fix: update tests

ecf1a53

chore: changeset

3bc0e8c

saurabhdaware approved these changes May 5, 2025

View reviewed changes

tewarig merged commit f7b868a into master May 5, 2025
13 of 15 checks passed

tewarig deleted the feat/full-size-modal branch May 5, 2025 11:58

		top={size === 'full' ? makeSize(modalMargin[size]) : '50%'}
		left={size === 'full' ? makeSize(modalMargin[size]) : '50%'}

feat: full size modal #2620

feat: full size modal #2620

Uh oh!

Conversation

tewarig commented Apr 23, 2025

Description

Changes

Additional Information

Component Checklist

Uh oh!

changeset-bot bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rzpcibot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tewarig Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

saurabhdaware Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

saurabhdaware commented Apr 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

saurabhdaware commented Apr 30, 2025

Uh oh!

tewarig commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tewarig commented Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tewarig commented May 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

changeset-bot bot commented Apr 23, 2025 •

edited

Loading

github-actions bot commented Apr 23, 2025 •

edited

Loading

codesandbox-ci bot commented Apr 23, 2025 •

edited

Loading

rzpcibot commented Apr 23, 2025 •

edited

Loading

tewarig Apr 25, 2025 •

edited

Loading

saurabhdaware Apr 30, 2025 •

edited

Loading

tewarig commented Apr 30, 2025 •

edited

Loading

tewarig commented Apr 30, 2025 •

edited

Loading