docs: add rowDensity control

razorpay · Jul 15, 2024 · eeee10f · eeee10f
1 parent c168250
commit eeee10f
Show file tree

Hide file tree

Showing 7 changed files with 272 additions and 35 deletions.
diff --git a/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/...es/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
@@ -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/...ade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap b/...ade/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/...nts/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap b/...nts/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/...onents/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.web.test.tsx.snap b/...onents/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
@@ -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%;
 }