Skip to content

Commit

Permalink
feat: update API decision with new API
Browse files Browse the repository at this point in the history
  • Loading branch information
saurabhdaware committed Feb 16, 2024
1 parent 96975bf commit 907edf5
Showing 1 changed file with 9 additions and 17 deletions.
26 changes: 9 additions & 17 deletions packages/blade/src/components/Drawer/_decisions/decisions.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,10 @@ A drawer is a panel that slides in mostly from the right side of the screen over
<DrawerHeader
title=""
subtitle=""
leading={<DrawerHeaderIcon />}
titleSuffix={<DrawerHeaderBadge />}
leading={<StarIcon />}
titleSuffix={<Badge></Badge>}
trailing={
<>
<Link />
<Button />
</>
<Button icon={DownloadIcon} />
}
/>
<DrawerBody>
Expand Down Expand Up @@ -126,14 +123,14 @@ type DrawerHeaderProps = {
/**
* Leading element
*
* DrawerHeaderIcon or DrawerHeaderAsset
* Icon or Asset
*/
leading?: ReactNode;

/**
* Title suffix element
*
* DrawerHeaderBadge
* Badge
*/
titleSuffix?: ReactNode;

Expand All @@ -146,21 +143,13 @@ type DrawerHeaderProps = {
};
```

Other supporting wrapper components for trailing and leading space-

- DrawerHeaderBadge
- DrawerHeaderIcon
- DrawerHeaderAsset

_No alternate APIs were considered because Drawer is closer to Modal on overall meaning and API perspective so made sense to go with API that is closer to Modal, also all DS Drawer components I referenced have similar API_

## Drawer Stacking

- Only 2 Drawers can be stacked on top of each other
- 2nd Drawer always has overlay independent of `showOverlay` prop
- 2nd Drawer always has back button instead of close button. Clicking on back button closes the 2nd drawer.

<img width="500px" src="./2024-02-12-11-01-32.png" />
- 1st Drawer peeks from behind with 16px gap when 2nd Drawer is opened

## Accessibility

Expand All @@ -178,5 +167,8 @@ Will work in a similar manner as [Ant Design - Drawer](https://ant.design/compon
## Open Questions

- **Design:** Should 2nd Drawer have back button or should it continue to have close button ([Context](https://github.com/razorpay/blade/pull/2009#discussion_r1487305755))
- We won't have back button anymore. We will have 1st Drawer peek from behind
- **Dev:** Should there be a prop for dismissing component on outside click. E.g. `shouldDismissOnOutsideClick` or should we handle it as part of controlled component (with the UX that confirmation modal is always shown irrespective of whether its outside click or close button click)
- We won't have new prop. This can be achieved with controlled component
- **Dev:** Should we build components like `DrawerHeaderIcon`, `DrawerHeaderAsset` (similar to `ActionListItemIcon`, `CardHeaderIcon`) or should rely on consumer to pass correct sizes and colors without building additional wrappers (similar to `DropdownHeader`, `ModalHeader`, `BottomSheetHeader`)? ([Discussion](https://razorpay.slack.com/archives/G01B3LQ9H0W/p1707822018408929))
- We won't build new components. We will follow what we follow on ModalHeader, BottomSheetHeader, etc

0 comments on commit 907edf5

Please sign in to comment.