fix: SpotlightPopoverTour bugs #1826

anuraghazra · 2023-11-20T09:45:28Z

Fixes 3 bugs:

Safari body-scroll-lock causing the page to get clipped because storybook doesn't set width/height on body - fixed by setting width/height
Initial delay of opening the mask - fixed by immediately updating the mask size on initial render
Delay of transitioning between steps which occurs because we need to wait for the animation to finish before scrolling otherwise the scroll gets interrupted - fixed by reduced this to 100ms

changeset-bot · 2023-11-20T09:45:31Z

🦋 Changeset detected

Latest commit: 3522f22

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	Patch

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

bundlemon · 2023-11-20T09:51:03Z

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	Web Components _{build/components/index.production.web.js}	330.31KB (+304B +0.09%)	-

Unchanged files (13)

Status	Path	Size	Limits
✅	React Native Components _{build/components/index.native.js}	186.97KB	-
✅	Web Tokens _{build/tokens/index.production.web.js}	42.24KB	-
✅	React Native Tokens _{build/tokens/index.native.js}	38.35KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeDarkDesktop.css}	4.55KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeDarkMobile.css}	4.54KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeLightDesktop.css}	4.53KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeLightMobile.css}	4.52KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeDarkDesktop.css}	4.52KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeLightDesktop.css}	4.52KB	-
✅	CSS Theme Tokens _{build/css/bankingThemeDarkMobile.css}	4.51KB	-
✅	CSS Theme Tokens _{build/css/paymentThemeLightMobile.css}	4.51KB	-
✅	Web Utils _{build/utils/index.production.web.js}	3.38KB	-
✅	React Native Utils _{build/utils/index.native.js}	2.27KB	-

Total files change +303B +0.05%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

codesandbox-ci · 2023-11-20T09:52:34Z

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 3522f22:

Sandbox	Source
razorpay/blade: basic	Configuration

github-actions · 2023-11-21T07:12:09Z

✅ PR title follows Conventional Commits specification.

kamleshchandnani · 2023-11-21T12:48:23Z

@anuraghazra when i close the tour say at 2/3 then it shall restart right from 1/3? Right now on storybook it resumes from 2/3

kamleshchandnani · 2023-11-21T12:51:13Z

also, when I click on a story and then click stories tab for the first time on iOS it shows blank after refreshing the story appears

kamleshchandnani · 2023-11-21T12:59:22Z

packages/blade/docs/guides/Usage.stories.mdx

@@ -45,6 +45,20 @@ function AppWrapper(): JSX.Element {
 export default AppWrapper;
 ```

+## iOS Safari Specific Setup


can you add this to Bottmsheet and Popover's docs as well in on top of the page something that is highlighted?

anuraghazra · 2023-11-23T08:18:50Z

@anuraghazra when i close the tour say at 2/3 then it shall restart right from 1/3? Right now on storybook it resumes from 2/3

Tour is a controlled component, so this behaviour is entirely upon the product usecase. We just give them the ability to change the activeStep, if consumer wants the can reset the activeStep when onFinish callback is fired.

anuraghazra · 2023-11-23T08:40:32Z

also, when I click on a story and then click stories tab for the first time on iOS it shows blank after refreshing the story appears

Not able to reproduce this with iOS simulator can you provide a video?

saurabhdaware

Looks good to me. Added the exit animation delay thing in slack thread

saurabhdaware · 2023-11-28T09:48:29Z

packages/blade/docs/guides/Usage.stories.mdx

+When using BottomSheet or SpotlightPopoverTour, 
+Make sure to set a width/height to the `body` otherwise when they open, the page will get clipped. 
+
+This happens due to a bug in iOS safari where it won't compute the height of the body correctly.


is there any link to this issue that we can add here?

I observed this weird bug on computed properties of safari dev tools, but don't have exact webkit bug reference.

There are multiple issues with safari's height calculations:

https://developer.apple.com/forums/thread/128949
https://stackoverflow.com/questions/68705153/height-100-stopped-working-when-run-in-safari
chakra-ui/chakra-ui#6027

saurabhdaware · 2023-11-28T09:49:11Z

packages/blade/.storybook/react/preview.js

@@ -28,7 +28,7 @@ export const parameters = {
  },
  // on development setting it to undefined so that on 'live reload' it won't switch
  // to docs panel while developing the component
-  viewMode: process.env.NODE_ENV === 'development' ? undefined : 'docs',
+  viewMode: process.env.NODE_ENV === 'development' ? 'docs' : 'docs',


condition ? docs : docs 😸 ?

saurabhdaware · 2023-11-28T09:55:01Z

packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx

+        {`
+          body {
+            width: 100%;
+            height: 100%;
+          }
+        `}


nit: This won't get highlighted since in SandboxHighlighter I had kept .ts file as default. Might have to add option to set .css file there

anuraghazra added 3 commits November 20, 2023 13:52

fix: prevent tour from closing on backdrop click

b04f5da

chore: reduce deplay between scroll transition

c1abd1e

fix: ios scroll lock

95f20ce

anuraghazra added 2 commits November 20, 2023 23:25

fix: storybook canvas

5dd06f4

fix: tour delay bugs

405c6f6

anuraghazra marked this pull request as ready for review November 21, 2023 07:18

anuraghazra requested review from chaitanyadeorukhkar, kamleshchandnani, dhruvdutt, nashcheez, divyanshu013, saurabhdaware and snitin315 as code owners November 21, 2023 07:18

chore: add docs

fc89e7b

kamleshchandnani reviewed Nov 21, 2023

View reviewed changes

chore: add docs in bottomsheet/tour

2a8e264

anuraghazra added 6 commits November 23, 2023 23:14

chore: hide docs examples

5b4652a

chore: rename kitchen sink

0b97d3f

chore: separate out tour api

6663e5e

Merge branch 'master' into anu/tour-fixes

4340512

chore: fix tour table props

65ae1ec

chore: fix stackblitz

ff2b4c0

anuraghazra added 3 commits November 27, 2023 16:37

chore: fix stackblitz

24ea008

refactor

3456fc3

chore: fix imports

5134e88

saurabhdaware reviewed Nov 28, 2023

View reviewed changes

anuraghazra added 2 commits November 28, 2023 16:17

chore: fix preview

1b648c7

Create three-glasses-complain.md

3522f22

kamleshchandnani approved these changes Nov 28, 2023

View reviewed changes

kamleshchandnani merged commit 0d0e72e into master Nov 28, 2023
8 of 9 checks passed

kamleshchandnani deleted the anu/tour-fixes branch November 28, 2023 11:34

anuraghazra added a commit that referenced this pull request Apr 9, 2024

fix: SpotlightPopoverTour bugs (#1826)

9a60264

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: SpotlightPopoverTour bugs #1826

fix: SpotlightPopoverTour bugs #1826

anuraghazra commented Nov 20, 2023 •

edited

Loading

changeset-bot bot commented Nov 20, 2023 •

edited

Loading

bundlemon bot commented Nov 20, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 20, 2023 •

edited

Loading

github-actions bot commented Nov 21, 2023 •

edited

Loading

kamleshchandnani commented Nov 21, 2023

kamleshchandnani commented Nov 21, 2023

kamleshchandnani Nov 21, 2023

anuraghazra commented Nov 23, 2023

anuraghazra commented Nov 23, 2023

saurabhdaware left a comment

saurabhdaware Nov 28, 2023

anuraghazra Nov 28, 2023 •

edited

Loading

saurabhdaware Nov 28, 2023

anuraghazra Nov 28, 2023

saurabhdaware Nov 28, 2023

fix: SpotlightPopoverTour bugs #1826

fix: SpotlightPopoverTour bugs #1826

Conversation

anuraghazra commented Nov 20, 2023 • edited Loading

changeset-bot bot commented Nov 20, 2023 • edited Loading

🦋 Changeset detected

bundlemon bot commented Nov 20, 2023 • edited Loading

BundleMon

codesandbox-ci bot commented Nov 20, 2023 • edited Loading

github-actions bot commented Nov 21, 2023 • edited Loading

kamleshchandnani commented Nov 21, 2023

kamleshchandnani commented Nov 21, 2023

kamleshchandnani Nov 21, 2023

Choose a reason for hiding this comment

anuraghazra commented Nov 23, 2023

anuraghazra commented Nov 23, 2023

saurabhdaware left a comment

Choose a reason for hiding this comment

saurabhdaware Nov 28, 2023

Choose a reason for hiding this comment

anuraghazra Nov 28, 2023 • edited Loading

Choose a reason for hiding this comment

saurabhdaware Nov 28, 2023

Choose a reason for hiding this comment

anuraghazra Nov 28, 2023

Choose a reason for hiding this comment

saurabhdaware Nov 28, 2023

Choose a reason for hiding this comment

anuraghazra commented Nov 20, 2023 •

edited

Loading

changeset-bot bot commented Nov 20, 2023 •

edited

Loading

bundlemon bot commented Nov 20, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 20, 2023 •

edited

Loading

github-actions bot commented Nov 21, 2023 •

edited

Loading

anuraghazra Nov 28, 2023 •

edited

Loading