From eeee10fd6050684e2daa3c4df24f1dea71c2eb8b Mon Sep 17 00:00:00 2001
From: saurabhdaware <saurabh.daware@razorpay.com>
Date: Mon, 15 Jul 2024 17:26:30 +0530
Subject: [PATCH] docs: add rowDensity control

---
 .../BottomSheet.web.test.tsx.snap             |   8 +-
 .../Dropdown.native.test.tsx.snap             |   8 +-
 .../BaseInput.native.test.tsx.snap            | 213 ++++++++++++++++++
 .../AutoComplete.native.test.tsx.snap         |  12 +-
 .../AutoComplete.web.test.tsx.snap            |   8 +-
 .../__snapshots__/Menu.web.test.tsx.snap      |   8 +-
 .../TableEditableCellAPI.stories.tsx          |  50 ++--
 7 files changed, 272 insertions(+), 35 deletions(-)

diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
index 501bd58c13b..572f5bc33d9 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
+++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
@@ -110,10 +110,10 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
   width: 100%;
 }
 
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
index 76d56b674c0..04f81871f73 100644
--- a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
+++ b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
@@ -1126,13 +1126,13 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         alignItems="flex-start"
                         data-blade-component="box"
                         display="flex"
-                        justifyContent="center"
+                        justifyContent="left"
                         style={
                           [
                             {
                               "alignItems": "flex-start",
                               "display": "flex",
-                              "justifyContent": "center",
+                              "justifyContent": "left",
                               "width": "100%",
                             },
                           ]
@@ -1305,13 +1305,13 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         alignItems="flex-start"
                         data-blade-component="box"
                         display="flex"
-                        justifyContent="center"
+                        justifyContent="left"
                         style={
                           [
                             {
                               "alignItems": "flex-start",
                               "display": "flex",
-                              "justifyContent": "center",
+                              "justifyContent": "left",
                               "width": "100%",
                             },
                           ]
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
index fced27d621b..99b1423c3e3 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
@@ -606,6 +606,32 @@ exports[`<BaseInput /> should render input with no borders 1`] = `
         </View>
       </View>
     </View>
+    <View
+      data-blade-component="base-box"
+      style={
+        [
+          {
+            "marginLeft": 0,
+          },
+        ]
+      }
+    >
+      <View
+        data-blade-component="base-box"
+        display="flex"
+        flexDirection="row"
+        justifyContent="flex-end"
+        style={
+          [
+            {
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "flex-end",
+            },
+          ]
+        }
+      />
+    </View>
   </View>
 </View>
 `;
@@ -900,6 +926,193 @@ exports[`<BaseInput /> should render input with no borders in error state 1`] =
         </View>
       </View>
     </View>
+    <View
+      data-blade-component="base-box"
+      style={
+        [
+          {
+            "marginLeft": 0,
+          },
+        ]
+      }
+    >
+      <View
+        data-blade-component="base-box"
+        display="flex"
+        flexDirection="row"
+        justifyContent="space-between"
+        style={
+          [
+            {
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+            },
+          ]
+        }
+      >
+        <View
+          data-blade-component="base-box"
+          id="name-61-errortext-63"
+          style={
+            [
+              {
+                "marginTop": 4,
+              },
+            ]
+          }
+        >
+          <View
+            alignItems="center"
+            data-blade-component="base-box"
+            display="flex"
+            flexDirection="row"
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                },
+              ]
+            }
+          >
+            <RNSVGSvgView
+              accessibilityElementsHidden={true}
+              align="xMidYMid"
+              bbHeight="12px"
+              bbWidth="12px"
+              data-blade-component="icon"
+              fill="none"
+              focusable={false}
+              height="12px"
+              importantForAccessibility="no-hide-descendants"
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  [
+                    {},
+                  ],
+                  {
+                    "flex": 0,
+                    "height": 12,
+                    "width": 12,
+                  },
+                ]
+              }
+              vbHeight={24}
+              vbWidth={24}
+              width="12px"
+            >
+              <RNSVGGroup
+                fill={null}
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+              >
+                <RNSVGPath
+                  d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
+                  fill={
+                    {
+                      "payload": 4292422944,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+                <RNSVGPath
+                  d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
+                  fill={
+                    {
+                      "payload": 4292422944,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+                <RNSVGPath
+                  clipRule={0}
+                  d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
+                  fill={
+                    {
+                      "payload": 4292422944,
+                      "type": 0,
+                    }
+                  }
+                  fillRule={0}
+                  propList={
+                    [
+                      "fill",
+                      "fillRule",
+                    ]
+                  }
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+            <View
+              data-blade-component="base-box"
+              style={
+                [
+                  {
+                    "marginRight": 4,
+                  },
+                ]
+              }
+            />
+            <Text
+              accessible={true}
+              color="feedback.text.negative.intense"
+              data-blade-component="text"
+              fontFamily="text"
+              fontSize={50}
+              fontStyle="italic"
+              fontWeight="regular"
+              lineHeight={50}
+              style={
+                [
+                  {
+                    "color": "hsla(4, 74%, 49%, 1)",
+                    "fontFamily": "Inter",
+                    "fontSize": 11,
+                    "fontStyle": "italic",
+                    "fontWeight": "400",
+                    "letterSpacing": 0,
+                    "lineHeight": 16,
+                    "marginBottom": 0,
+                    "marginLeft": 0,
+                    "marginRight": 0,
+                    "marginTop": 0,
+                    "paddingBottom": 0,
+                    "paddingLeft": 0,
+                    "paddingRight": 0,
+                    "paddingTop": 0,
+                    "textDecorationLine": "none",
+                  },
+                ]
+              }
+            >
+              Something went wrong
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
   </View>
 </View>
 `;
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap
index a5a1a571bc4..363c3bc465e 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap
@@ -922,13 +922,13 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         alignItems="flex-start"
                         data-blade-component="box"
                         display="flex"
-                        justifyContent="center"
+                        justifyContent="left"
                         style={
                           [
                             {
                               "alignItems": "flex-start",
                               "display": "flex",
-                              "justifyContent": "center",
+                              "justifyContent": "left",
                               "width": "100%",
                             },
                           ]
@@ -1226,13 +1226,13 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         alignItems="flex-start"
                         data-blade-component="box"
                         display="flex"
-                        justifyContent="center"
+                        justifyContent="left"
                         style={
                           [
                             {
                               "alignItems": "flex-start",
                               "display": "flex",
-                              "justifyContent": "center",
+                              "justifyContent": "left",
                               "width": "100%",
                             },
                           ]
@@ -1530,13 +1530,13 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                         alignItems="flex-start"
                         data-blade-component="box"
                         display="flex"
-                        justifyContent="center"
+                        justifyContent="left"
                         style={
                           [
                             {
                               "alignItems": "flex-start",
                               "display": "flex",
-                              "justifyContent": "center",
+                              "justifyContent": "left",
                               "width": "100%",
                             },
                           ]
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
index dfd7e663989..a6a965c2746 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap
@@ -290,10 +290,10 @@ exports[`<BottomSheet /> & <Dropdown /> with <AutoComplete /> should render Bott
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
   width: 100%;
 }
 
diff --git a/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap b/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap
index 033905ca7ef..d565363185a 100644
--- a/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap
+++ b/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap
@@ -138,10 +138,10 @@ exports[`Menu renders a Menu 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
   width: 100%;
 }
 
diff --git a/packages/blade/src/components/Table/docs/APIStories/TableEditableCellAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableEditableCellAPI.stories.tsx
index 751882c0d82..1190b2eced0 100644
--- a/packages/blade/src/components/Table/docs/APIStories/TableEditableCellAPI.stories.tsx
+++ b/packages/blade/src/components/Table/docs/APIStories/TableEditableCellAPI.stories.tsx
@@ -1,9 +1,17 @@
 import type { StoryFn, Meta } from '@storybook/react';
-import type { TableData } from '../../types';
-import { Table as TableComponent } from '../../Table';
-import { TableHeader, TableHeaderRow, TableHeaderCell } from '../../TableHeader';
-import { TableBody, TableRow, TableCell } from '../../TableBody';
-import { TableFooter, TableFooterRow, TableFooterCell } from '../../TableFooter';
+import type { TableProps, TableData, TableEditableCellProps } from '../../index';
+import {
+  Table as TableComponent,
+  TableHeader,
+  TableHeaderRow,
+  TableHeaderCell,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableFooter,
+  TableFooterRow,
+  TableFooterCell,
+} from '../../index';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Box } from '~components/Box';
 import { Code } from '~components/Typography';
@@ -27,6 +35,15 @@ export default {
         disable: true,
       },
     },
+    rowDensity: {
+      options: ['comfortable', 'normal', 'compact'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        category: 'TableProps',
+      },
+    },
   },
   parameters: {
     docs: {
@@ -81,7 +98,9 @@ const data: TableData<Item> = {
   nodes,
 };
 
-const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
+type TableTemplateProps = TableEditableCellProps & { rowDensity: TableProps<any>['rowDensity'] };
+
+const TableTemplate: StoryFn<TableTemplateProps> = ({ rowDensity, ...args }) => {
   return (
     <Box
       backgroundColor="surface.background.gray.intense"
@@ -89,7 +108,7 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
       overflow="auto"
       minHeight="400px"
     >
-      <TableComponent showBorderedCells data={data}>
+      <TableComponent showBorderedCells data={data} rowDensity={rowDensity}>
         {(tableData) => (
           <>
             <TableHeader>
@@ -109,9 +128,9 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
                     <Code size="medium">{tableItem.paymentId}</Code>
                   </TableCell>
                   <TableEditableCell
+                    {...args}
                     accessibilityLabel="Amount"
                     defaultValue={`${tableItem.amount}`}
-                    {...args}
                   />
                   <TableEditableCell
                     accessibilityLabel="Amount"
@@ -122,10 +141,7 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
                   <TableEditableDropdownCell selectionType="multiple">
                     <AutoComplete
                       accessibilityLabel="Method"
-                      validationState={
-                        (['none', 'error', 'success'] as const).at(Math.floor(Math.random() * 3)) ??
-                        'none'
-                      }
+                      validationState={args.validationState}
                       errorText="Invalid Method"
                       successText="Valid Method"
                     />
@@ -145,7 +161,12 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
                     })}
                   </TableCell>
                   <TableEditableDropdownCell>
-                    <SelectInput accessibilityLabel="Status" />
+                    <SelectInput
+                      validationState={args.validationState}
+                      accessibilityLabel="Status"
+                      errorText="Invalid Status"
+                      successText="Valid Status"
+                    />
                     <DropdownOverlay>
                       <ActionList>
                         <ActionListItem title="Pending" value="pending" />
@@ -175,5 +196,8 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
 };
 
 export const TableEditableCellStory = TableTemplate.bind({});
+TableEditableCellStory.args = {
+  rowDensity: 'normal',
+};
 // Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting
 TableEditableCellStory.storyName = 'TableEditableCell';