Add horizontal and vertical (x & y) spacing helpers

CP-2753 CP-2812 Co-authored-by: Matthieu Bué <[email protected]>
cmolina · Nov 22, 2021 · 27938a3 · 27938a3
1 parent 1b690fc
commit 27938a3
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/packages/components/components/modalTwo/ModalContent.tsx b/packages/components/components/modalTwo/ModalContent.tsx
@@ -6,9 +6,9 @@ import './ModalContent.scss';
 
 const ModalContent = ({ className, ...rest }: ComponentPropsWithoutRef<'div'>) => {
     return (
-      <Scroll className="overflow-hidden mt1 mb1">
-          <div className={classnames([className, 'modal-two-content'])} {...rest} />
-      </Scroll>
+        <Scroll className="overflow-hidden my1">
+            <div className={classnames([className, 'modal-two-content'])} {...rest} />
+        </Scroll>
     );
 };
 

diff --git a/packages/components/components/modalTwo/ModalHeader.tsx b/packages/components/components/modalTwo/ModalHeader.tsx
@@ -23,7 +23,7 @@ const ModalHeader = ({ title, subline, actions: actionsProp, onBack, ...rest }:
         <div
             className={classnames([
                 'modal-two-header flex flex-nowrap flex-item-noshrink flex-justify-space-between flex-align-items-start',
-                onBack && 'modal-two-header--with-back'
+                onBack && 'modal-two-header--with-back',
             ])}
             {...rest}
         >
@@ -45,7 +45,7 @@ const ModalHeader = ({ title, subline, actions: actionsProp, onBack, ...rest }:
             <div className="modal-two-header-actions flex flex-item-noshrink flex-nowrap flex-align-items-stretch">
                 {actions && (
                     <>
-                        {actions} <Vr className="mt0-25 mb0-25" />
+                        {actions} <Vr className="my0-25" />
                     </>
                 )}
 

diff --git a/packages/styles/scss/config/mixins/_margin-generator.scss b/packages/styles/scss/config/mixins/_margin-generator.scss
@@ -21,6 +21,10 @@
 				$property: margin-block-end;
 			} @else if $temp_t==l {
 				$property: margin-inline-start;
+			} @else if $temp_t==x {
+				$property: margin-inline;
+			} @else if $temp_t==y {
+				$property: margin-block;
 			}
 
 			$value: $margin + 0em;

diff --git a/packages/styles/scss/config/mixins/_padding-generator.scss b/packages/styles/scss/config/mixins/_padding-generator.scss
@@ -21,6 +21,10 @@
 				$property: padding-block-end;
 			} @else if $temp_t==l {
 				$property: padding-inline-start;
+			} @else if $temp_t==x {
+				$property: padding-inline;
+			} @else if $temp_t==y {
+				$property: padding-block;
 			}
 
 			$value: $padding + 0em;

diff --git a/packages/styles/scss/helpers/_spacing.scss b/packages/styles/scss/helpers/_spacing.scss
@@ -32,14 +32,14 @@
 
 @include margin-generator(
 	// coordinates
-	(m, mt, mr, mb, ml),
+	(m, mt, mr, mb, ml, mx, my),
 	// margin sizes
 	(0, 0.1, 0.25, 0.4, 0.5, 0.6, 0.75, 1, 1.25, 1.5, 1.75, 2, 4)
 );
 
 @include padding-generator(
 	// coordinates
-	(p, pt, pr, pb, pl),
+	(p, pt, pr, pb, pl, px, py),
 	// padding sizes
 	(0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 3, 4)
 );