From 65bc0d3741a1051358956ae6f4dcbcc6dee44f61 Mon Sep 17 00:00:00 2001
From: NidhiKJha <menidhikjha@gmail.com>
Date: Mon, 14 Nov 2022 21:15:24 +0530
Subject: [PATCH 1/3] added 50% border radius support to the Box component

---
 ui/components/ui/box/README.mdx       | 1 +
 ui/components/ui/box/box.scss         | 4 ++++
 ui/components/ui/box/box.stories.js   | 9 +++++++++
 ui/components/ui/box/box.test.js      | 6 ++++++
 ui/helpers/constants/design-system.js | 1 +
 5 files changed, 21 insertions(+)

diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index ff443c1f6aee..23b1a76fc186 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -209,6 +209,7 @@ import Box from '../ui/box';
 <Box borderRadius={BORDER_RADIUS.LG}>BORDER_RADIUS.LG 8px</Box>
 <Box borderRadius={BORDER_RADIUS.XL}>BORDER_RADIUS.XL 12px</Box>
 <Box borderRadius={BORDER_RADIUS.PILL}>BORDER_RADIUS.PILL 9999px</Box>
+<Box borderRadius={BORDER_RADIUS.FULL}>BORDER_RADIUS.FULL 50%</Box>
 ```
 
 ### Responsive Props
diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss
index 63f9fb9fa9c2..132a8017f80d 100644
--- a/ui/components/ui/box/box.scss
+++ b/ui/components/ui/box/box.scss
@@ -157,6 +157,10 @@ $attributesToApplyExtraProperties: margin;
     border-radius: 9999px;
   }
 
+  &--rounded-full {
+  border-radius: 50%;
+}
+
   // breakpoint classes
   @each $breakpoint, $min-width in $screen-sizes-map {
     @media screen and (min-width: $min-width) {
diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index 6d63f186edec..8f17e7a9f734 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/ui/components/ui/box/box.stories.js
@@ -550,6 +550,15 @@ export const BorderRadius = () => {
       >
         BORDER_RADIUS.PILL 9999px
       </Box>
+      <Box
+        padding={3}
+        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+        borderColor={COLORS.BORDER_DEFAULT}
+        borderWidth={2}
+        borderRadius={BORDER_RADIUS.FULL}
+      >
+        BORDER_RADIUS.FULL 50%
+      </Box>
     </Box>
   );
 };
diff --git a/ui/components/ui/box/box.test.js b/ui/components/ui/box/box.test.js
index 8e8534589265..1f8a0beac79c 100644
--- a/ui/components/ui/box/box.test.js
+++ b/ui/components/ui/box/box.test.js
@@ -287,6 +287,7 @@ describe('Box', () => {
           <Box borderRadius={BORDER_RADIUS.LG}>border radius lg</Box>
           <Box borderRadius={BORDER_RADIUS.XL}>border radius xl</Box>
           <Box borderRadius={BORDER_RADIUS.PILL}>border radius pill</Box>
+          <Box borderRadius={BORDER_RADIUS.FULL}>border radius full</Box>
           <Box borderRadius={BORDER_RADIUS.NONE}>border radius none</Box>
         </>,
       );
@@ -297,6 +298,7 @@ describe('Box', () => {
       expect(getByText('border radius lg')).toHaveClass('box--rounded-lg');
       expect(getByText('border radius xl')).toHaveClass('box--rounded-xl');
       expect(getByText('border radius pill')).toHaveClass('box--rounded-pill');
+      expect(getByText('border radius full')).toHaveClass('box--rounded-full');
       expect(getByText('border radius none')).toHaveClass('box--rounded-none');
     });
     it('should render the Box with the responsive borderRadius classes', () => {
@@ -317,6 +319,7 @@ describe('Box', () => {
               BORDER_RADIUS.XL,
               BORDER_RADIUS.PILL,
               BORDER_RADIUS.NONE,
+              BORDER_RADIUS.FULL,
             ]}
           >
             Border radius set 2
@@ -341,6 +344,9 @@ describe('Box', () => {
       expect(getByText('Border radius set 2')).toHaveClass(
         'box--md:rounded-none',
       );
+      expect(getByText('Border radius set 2')).toHaveClass(
+        'box--lg:rounded-full',
+      );
     });
   });
   describe('display, gap, flexDirection, flexWrap, alignItems, justifyContent', () => {
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index 7c8ddb18e140..4bb1fd0de979 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -193,6 +193,7 @@ export const BORDER_RADIUS = {
   XL: SIZES.XL,
   NONE,
   PILL: 'pill',
+  FULL: 'full',
 };
 
 const FLEX_END = 'flex-end';

From 787a436b381d243998e3488a00fb106b8b5b3596 Mon Sep 17 00:00:00 2001
From: NidhiKJha <menidhikjha@gmail.com>
Date: Mon, 14 Nov 2022 21:34:05 +0530
Subject: [PATCH 2/3] added height and width

---
 ui/components/ui/box/box.stories.js | 138 +++++++++++++++-------------
 1 file changed, 72 insertions(+), 66 deletions(-)

diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index 8f17e7a9f734..cd97122696fc 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/ui/components/ui/box/box.stories.js
@@ -482,73 +482,75 @@ export const BorderColor = () => {
 
 export const BorderRadius = () => {
   return (
-    <Box
-      display={DISPLAY.GRID}
-      style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
-      gap={4}
-    >
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.NONE}
-      >
-        BORDER_RADIUS.NONE 0px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.XS}
-      >
-        BORDER_RADIUS.XS 2px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.SM}
-      >
-        BORDER_RADIUS.SM 4px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.MD}
-      >
-        BORDER_RADIUS.MD 6px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.LG}
-      >
-        BORDER_RADIUS.LG 8px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.XL}
-      >
-        BORDER_RADIUS.XL 12px
-      </Box>
+    <>
       <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.PILL}
+        display={DISPLAY.GRID}
+        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
+        gap={4}
       >
-        BORDER_RADIUS.PILL 9999px
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.NONE}
+        >
+          BORDER_RADIUS.NONE 0px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.XS}
+        >
+          BORDER_RADIUS.XS 2px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.SM}
+        >
+          BORDER_RADIUS.SM 4px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.MD}
+        >
+          BORDER_RADIUS.MD 6px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.LG}
+        >
+          BORDER_RADIUS.LG 8px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.XL}
+        >
+          BORDER_RADIUS.XL 12px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.PILL}
+        >
+          BORDER_RADIUS.PILL 9999px
+        </Box>
       </Box>
       <Box
         padding={3}
@@ -556,10 +558,14 @@ export const BorderRadius = () => {
         borderColor={COLORS.BORDER_DEFAULT}
         borderWidth={2}
         borderRadius={BORDER_RADIUS.FULL}
+        margin={4}
+        display={DISPLAY.FLEX}
+        alignItems={ALIGN_ITEMS.CENTER}
+        style={{ height: '250px', width: '250px' }}
       >
         BORDER_RADIUS.FULL 50%
       </Box>
-    </Box>
+    </>
   );
 };
 

From 5761e31ce1d4e0cf5ee032fc03900831ebc5d4d5 Mon Sep 17 00:00:00 2001
From: NidhiKJha <menidhikjha@gmail.com>
Date: Mon, 14 Nov 2022 22:55:23 +0530
Subject: [PATCH 3/3] fixed lint issue

---
 ui/components/ui/box/box.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss
index 132a8017f80d..b29da6bdbd04 100644
--- a/ui/components/ui/box/box.scss
+++ b/ui/components/ui/box/box.scss
@@ -158,8 +158,8 @@ $attributesToApplyExtraProperties: margin;
   }
 
   &--rounded-full {
-  border-radius: 50%;
-}
+    border-radius: 50%;
+  }
 
   // breakpoint classes
   @each $breakpoint, $min-width in $screen-sizes-map {