From be227705d06e3bb8ae691650b0982ff4224a766b Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Fri, 6 Jan 2023 12:10:28 +0530
Subject: [PATCH] added padding/margin inline, inline-start and inline-end
 support to Box Component (#17085)

* added padding/margin inline-start and inline-end support

* updated story for margin
---
 ui/components/ui/box/box.js         | 28 +++++++++++++++++++++++++++
 ui/components/ui/box/box.stories.js | 30 +++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js
index 30b379ebe..ab101cde8 100644
--- a/ui/components/ui/box/box.js
+++ b/ui/components/ui/box/box.js
@@ -191,11 +191,17 @@ const Box = React.forwardRef(function Box(
     paddingRight,
     paddingBottom,
     paddingLeft,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
     margin,
     marginTop,
     marginRight,
     marginBottom,
     marginLeft,
+    marginInline,
+    marginInlineStart,
+    marginInlineEnd,
     borderColor,
     borderWidth,
     borderRadius,
@@ -228,6 +234,12 @@ const Box = React.forwardRef(function Box(
     marginBottom &&
       generateClassNames('margin-bottom', marginBottom, isValidSize),
     marginLeft && generateClassNames('margin-left', marginLeft, isValidSize),
+    marginInline &&
+      generateClassNames('margin-inline', marginInline, isValidSize),
+    marginInlineStart &&
+      generateClassNames('margin-inline-start', marginInlineStart, isValidSize),
+    marginInlineEnd &&
+      generateClassNames('margin-inline-end', marginInlineEnd, isValidSize),
     // Padding
     padding && generateClassNames('padding', padding, isValidSize),
     paddingTop && generateClassNames('padding-top', paddingTop, isValidSize),
@@ -236,6 +248,16 @@ const Box = React.forwardRef(function Box(
     paddingBottom &&
       generateClassNames('padding-bottom', paddingBottom, isValidSize),
     paddingLeft && generateClassNames('padding-left', paddingLeft, isValidSize),
+    paddingInline &&
+      generateClassNames('padding-inline', paddingInline, isValidSize),
+    paddingInlineStart &&
+      generateClassNames(
+        'padding-inline-start',
+        paddingInlineStart,
+        isValidSize,
+      ),
+    paddingInlineEnd &&
+      generateClassNames('padding-inline-end', paddingInlineEnd, isValidSize),
     display && generateClassNames('display', display, isValidString),
     gap && generateClassNames('gap', gap, isValidSize),
     flexDirection &&
@@ -298,11 +320,17 @@ Box.propTypes = {
   marginBottom: MultipleSizesAndAuto,
   marginRight: MultipleSizesAndAuto,
   marginLeft: MultipleSizesAndAuto,
+  marginInline: MultipleSizes,
+  marginInlineStart: MultipleSizes,
+  marginInlineEnd: MultipleSizes,
   padding: MultipleSizes,
   paddingTop: MultipleSizes,
   paddingBottom: MultipleSizes,
   paddingRight: MultipleSizes,
   paddingLeft: MultipleSizes,
+  paddingInline: MultipleSizes,
+  paddingInlineStart: MultipleSizes,
+  paddingInlineEnd: MultipleSizes,
   borderColor: MultipleBorderColors,
   borderWidth: PropTypes.oneOfType([
     PropTypes.number,
diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index 1da6384e8..06b015f33 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/ui/components/ui/box/box.stories.js
@@ -162,6 +162,21 @@ export default {
       control: 'select',
       table: { category: 'margin' },
     },
+    marginInline: {
+      options: sizeControlOptions,
+      control: 'select',
+      table: { category: 'margin' },
+    },
+    marginInlineStart: {
+      options: sizeControlOptions,
+      control: 'select',
+      table: { category: 'margin' },
+    },
+    marginInlineEnd: {
+      options: sizeControlOptions,
+      control: 'select',
+      table: { category: 'margin' },
+    },
     padding: {
       options: sizeControlOptions,
       control: 'select',
@@ -187,6 +202,21 @@ export default {
       control: 'select',
       table: { category: 'padding' },
     },
+    paddingInline: {
+      options: sizeControlOptions,
+      control: 'select',
+      table: { category: 'padding' },
+    },
+    paddingInlineStart: {
+      options: sizeControlOptions,
+      control: 'select',
+      table: { category: 'padding' },
+    },
+    paddingInlineEnd: {
+      options: sizeControlOptions,
+      control: 'select',
+      table: { category: 'padding' },
+    },
     as: {
       control: 'select',
       options: ['div', 'ul', 'li', 'span', 'a', 'button'],