From 907edf53e921e68df6cbe38bef37b963e945826e Mon Sep 17 00:00:00 2001
From: saurabhdaware <saurabh.daware@razorpay.com>
Date: Fri, 16 Feb 2024 13:34:29 +0530
Subject: [PATCH] feat: update API decision with new API

---
 .../components/Drawer/_decisions/decisions.md | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/blade/src/components/Drawer/_decisions/decisions.md b/packages/blade/src/components/Drawer/_decisions/decisions.md
index 71244a1cacb..c908c23e0f7 100644
--- a/packages/blade/src/components/Drawer/_decisions/decisions.md
+++ b/packages/blade/src/components/Drawer/_decisions/decisions.md
@@ -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>
@@ -126,14 +123,14 @@ type DrawerHeaderProps = {
   /**
    * Leading element
    *
-   * DrawerHeaderIcon or DrawerHeaderAsset
+   * Icon or Asset
    */
   leading?: ReactNode;
 
   /**
    * Title suffix element
    *
-   * DrawerHeaderBadge
+   * Badge
    */
   titleSuffix?: ReactNode;
 
@@ -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
 
@@ -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