docs(blade): Toast API decisions #1990

anuraghazra · 2024-01-23T11:21:38Z

Formatted Document

changeset-bot · 2024-01-23T11:21:41Z

⚠️ No Changeset found

Latest commit: e24adc6

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 · 2024-01-23T11:23:25Z

✅ PR title follows Conventional Commits specification.

codesandbox-ci · 2024-01-23T11:45:23Z

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

Sandbox	Source
razorpay/blade: basic	Configuration

packages/blade/src/components/Toast/_decisions/decisions.md

kamleshchandnani · 2024-01-30T05:25:46Z

packages/blade/src/components/Toast/_decisions/decisions.md

+  /**
+   * Can be used to render an icon
+   */
+  leading?: IconComponent;


since we don't have trailing counterpart and we know that icon will always be leading wouldn't it be better to name it just icon? so it will also be consistent with rest of the components?

+1. Lets just call it icon similar to how we do it for button

In promotional toast the leading can also become an asset, so leading maybe more flexible naming here.

What do we mean by asset? It can be an image or text or video? Any restrictions or is it a slot?

No restrictions, it's a slot. we should atleast keep the prop name generic to cater to future usecase.

Same thing we did for BottomSheetHeader too.

maybe we can have icon and asset as a naming then?

Two props? Will cause impossible states.

packages/blade/src/components/Toast/_decisions/decisions.md

kamleshchandnani · 2024-01-30T05:33:10Z

packages/blade/src/components/Toast/_decisions/decisions.md

+
+```ts
+type useToastReturnType = {
+  /**


we shall also give an option to know the current id of the toast that is opened?

"current" can also be multiple toasts, we can give an option like:

const { toasts } = useToasts();

but not sure about the usecase.

packages/blade/src/components/Toast/_decisions/decisions.md

kamleshchandnani · 2024-01-30T05:36:21Z

packages/blade/src/components/Toast/_decisions/decisions.md

+
+const Example = () => {
+  const toastId = React.useRef(null);
+  const { showToast, dismissToast } = useToast();


toast will have a context at the app level right? can't see that in the example?

Maybe, I'm not sure right now actually, so react-hot-toast works in a way that it doesn't need ReactContext.
In the current POC that I've done that also didn't need a toast context.

chaitanyadeorukhkar · 2024-01-30T07:33:59Z

packages/blade/src/components/Toast/_decisions/decisions.md

+const App = () => {
+  return (
+    <BladeProvider>
+      <ToastContainer position="bottom-left" />


Will there be multiple toast containers in an app?

Can there not be a single ToastProvider that is part of BladeProvider and useToast can decide the toast position?

There can only be 1.

Can there not be a single ToastProvider that is part of BladeProvider and useToast can decide the toast position?

That should be possible, we can keep the ToastContainer inside BladeProvider but the thing is we also may need to pass some props to ToastContainer, how should we handle that?

packages/blade/src/components/Toast/_decisions/decisions.md

parichay28 · 2024-02-01T05:30:51Z

packages/blade/src/components/Toast/_decisions/decisions.md

+  /**
+   * Called when the toast is dismissed or duration runs out
+   */
+  onDismissButtonClick?: () => void;


perhaps single onDismiss with type = 'auto' | 'onclick'?

packages/blade/src/components/Toast/_decisions/decisions.md

snitin315 · 2024-02-05T06:16:30Z

packages/blade/src/components/Toast/_decisions/decisions.md

+  /**
+   * Called when the toast is dismissed or duration runs out
+   */
+  onDismissButtonClick?: () => void;


onAutoDismiss & onManualDismiss

packages/blade/src/components/Toast/_decisions/decisions.md

snitin315 · 2024-02-05T06:40:57Z

packages/blade/src/components/Toast/_decisions/decisions.md

+- Q. What should be the default duration for auto dismissable toasts?
+  - A. 4s for informational toasts and 6s for promotional toasts
+
+- Q. Should we call it `onDismissButtonClick` or `onDismiss`? 


onManualDismiss

Going ahead with onDismissButtonClick, let's not have onManual, onAutoDismiss because there is no controlled state that users can manage for toasts so they don't really need to know if a toast is auto dismissed or not.

packages/blade/src/components/Toast/_decisions/decisions.md

saurabhdaware · 2024-02-12T06:10:23Z

Can you check these 2 comments? they are related to API decision

anuraghazra · 2024-02-12T07:18:00Z

Can you check these 2 comments? they are related to API decision

Responded.

kamleshchandnani · 2024-02-12T07:53:57Z

packages/blade/src/components/Toast/_decisions/decisions.md

+
+### Promotional Toast
+
+<img src="./example-promotional-toast.png" width="380" alt="Promotional toast example" />


add anatomy wala screenshot here? primarily because icon is asset in promotional

add anatomy wala screenshot here

Design hasn't created anatomy illustration for promo toast. // @saurav12

primarily because icon is asset in promotional

There is no difference of anatomy between info/promo toast. Both are 1:1

Leading: icon or assset

Content: JSX element (to put bold/italic text inside info)

Action Button

Dismiss Button

packages/blade/src/components/Toast/_decisions/decisions.md

kamleshchandnani · 2024-02-12T07:55:53Z

packages/blade/src/components/Toast/_decisions/decisions.md

+  /**
+   * @default `neutral`
+   */
+  color?: 'neutral' | 'positive' | 'negative' | 'warning' | 'information'


in case of promotional we omit this prop?

We just ignore this prop in case of promo.

kamleshchandnani · 2024-02-12T07:56:55Z

packages/blade/src/components/Toast/_decisions/decisions.md

+   * @default true - for informational toast
+   * @default false - for promotional toast
+   */
+  autoDismiss?: boolean;


is there a use case for promotional toast to be auto dismissed?

That would be a product decision. We do not have a defined usecase from design side.

kamleshchandnani · 2024-02-12T07:58:07Z

packages/blade/src/components/Toast/_decisions/decisions.md

+  /**
+   * @returns id of the toast
+   */
+  show: (toast: Toast) => string;


this will return id of which toast since there could be many?

Id of the toast just being created via this show function.

kamleshchandnani · 2024-02-12T08:01:49Z

packages/blade/src/components/Toast/_decisions/decisions.md

+- Q. Should we call it `onDismissButtonClick` or `onDismiss`? 
+
+- Q. Should the dismiss handler be called even when the toast is auto dismissed? Or should we have different handlers for auto dismiss and manual dismiss? (eg: `onAutoDismiss` `onDismissButtonClick`)
+  - A. We will call it `onDismissButtonClick` and it will only be called when the user clicks on the dismiss button.


if product needs to track the event on auto dismiss then how can consumer handle that??

Not sure if tracking auto dismiss makes sense.

if 2 toasts are opened with autoDismiss: true
then 2 toasts will be dismissed after 4s for sure.

They could just track if 2 toasts are opened or not.

onClick={() => { toast.show(); analytics.track(); }}

you can do multiple things like for eg: a user was shown a toast and they navigate to a different page then when the toast is dismissed you can track the URL of the page. this way you can identify a pattern that after performing some actions what are the pages a user navigates to and get some insights around user behavior

a user was shown a toast and they navigate to a different page then when the toast is dismissed you can track the URL of the page

That is possible.

onDismissButtonClick={() => naigateToPage()}

But don't think it will be a very good idea for toast to automatically navigate the page after dismiss. Navigation should happen after action.

FYI,

react-hot-toast doesn't have a callback that it calls when a toast gets auto dismissed, so it's not even possible to have an onAutoDismiss method.

There is a workaround but doing that means you need to keep track of each and every toast's timer manually, too messy.

anuraghazra added 2 commits January 23, 2024 15:31

chore: wip toast api

daf91a6

chore: toast api

b5bc7ac

chore: format

06cfd69

anuraghazra added 2 commits January 23, 2024 16:54

chore: add motion tbd

d1bda28

chore: add open question

69e8204

anuraghazra assigned kamleshchandnani Jan 24, 2024

anuraghazra added the Review - L1 First level of review label Jan 24, 2024

chore: update oq

f17adab

kamleshchandnani reviewed Jan 30, 2024

View reviewed changes

chaitanyadeorukhkar reviewed Jan 30, 2024

View reviewed changes

packages/blade/src/components/Toast/_decisions/decisions.md Show resolved Hide resolved

anuraghazra added 3 commits January 30, 2024 14:59

chore: update

ee20396

chore: update

0c441bb

chore: update

d01baef

anuraghazra marked this pull request as ready for review January 31, 2024 07:16

anuraghazra added 2 commits January 31, 2024 12:50

chore: update

7a08645

chore: update duration

f957687

parichay28 reviewed Feb 1, 2024

View reviewed changes

nashcheez reviewed Feb 1, 2024

View reviewed changes

snitin315 reviewed Feb 5, 2024

View reviewed changes

packages/blade/src/components/Toast/_decisions/decisions.md Outdated Show resolved Hide resolved

snitin315 reviewed Feb 5, 2024

View reviewed changes

packages/blade/src/components/Toast/_decisions/decisions.md Show resolved Hide resolved

anuraghazra added 4 commits February 8, 2024 13:20

chore: update api

ec2db65

chore: update oq

74a03f1

chore: update

80132a1

chore: update

34b29e8

chore: update

e24adc6

kamleshchandnani reviewed Feb 12, 2024

View reviewed changes

kamleshchandnani approved these changes Feb 14, 2024

View reviewed changes

kamleshchandnani merged commit 8f3d52f into master Feb 14, 2024
14 checks passed

kamleshchandnani deleted the anu/toast-api branch February 14, 2024 08:49

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

docs(blade): Toast API decisions (#1990)

9c4acbf


		### Promotional Toast

		<img src="./example-promotional-toast.png" width="380" alt="Promotional toast example" />

docs(blade): Toast API decisions #1990

docs(blade): Toast API decisions #1990

Conversation

anuraghazra commented Jan 23, 2024 • edited Loading

changeset-bot bot commented Jan 23, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Jan 23, 2024 • edited Loading

codesandbox-ci bot commented Jan 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

saurabhdaware commented Feb 12, 2024

anuraghazra commented Feb 12, 2024

Choose a reason for hiding this comment

anuraghazra Feb 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anuraghazra Feb 14, 2024 • edited Loading

Choose a reason for hiding this comment

anuraghazra commented Jan 23, 2024 •

edited

Loading

changeset-bot bot commented Jan 23, 2024 •

edited

Loading

github-actions bot commented Jan 23, 2024 •

edited

Loading

codesandbox-ci bot commented Jan 23, 2024 •

edited

Loading

anuraghazra Feb 12, 2024 •

edited

Loading

anuraghazra Feb 14, 2024 •

edited

Loading