Merge pull request #185 from web3ui/feat/addrowWidth

Feat/addrow width
web3ui · Mar 3, 2022 · dd3f2f3 · dd3f2f3
2 parents 635ecba + f8909ef
commit dd3f2f3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/src/components/Row/Row.styles.ts b/src/components/Row/Row.styles.ts
@@ -7,6 +7,7 @@ export const RowDiv = styled.div<IRowProps>`
     ${fonts.text}
     display: flex;
     flex-wrap: wrap;
+    width: ${(props) => `${props.width && `${props.width}px`} `};
     gap: ${(props) =>
         props.rowGap ? `${props.rowGap}px ${props.colGap}px` : '15px 15px'};
     align-items: ${(props) => props.alignItems && props.alignItems};

diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx
@@ -48,6 +48,7 @@ function Row({
     sm = 16,
     md = 24,
     lg = 24,
+    width,
 }: IRowProps): JSX.Element {
     return (
         <Context.Provider value={{ xs, md, sm, lg, rowGap, colGap }}>
@@ -57,6 +58,7 @@ function Row({
                 colGap={colGap}
                 rowGap={rowGap}
                 data-testid="row"
+                width={width}
             >
                 {children}
             </RowDiv>

diff --git a/src/components/Row/types.tsx b/src/components/Row/types.tsx
@@ -15,6 +15,10 @@ export interface IRowProps {
      * To Align items Horozontially
      */
     justifyItems?: justifyStyles;
+    /**
+     * Width Of Row by default 100% of parent container size
+     */
+    width?: number;
     /**
      * To specify the gap between each row element
      */