Add gap property (#188)

Author: mlecoq

CHANGELOG.md

@@ -8,6 +8,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 ## Next
 
 - Upgrade React Native to 0.71 in [#207](https://github.com/Shopify/restyle/pull/207) by [mattfrances](https://github.com/mattfrances)
+- Add support of gap properties in [#188](https://github.com/Shopify/restyle/pull/188) by [mlecoq](https://github.com/mlecoq)
 
 ## 2.1.0 - 2022-04-11
 

README.md

@@ -372,7 +372,7 @@ The Restyle library comes with a number of predefined Restyle functions for your
 | color            | color                                                                                                                                                                                                                                                                                                                                  | colors      |
 | opacity          | opacity                                                                                                                                                                                                                                                                                                                                | _none_      |
 | visible          | display (maps `true` / `false` to `flex` / `none`)                                                                                                                                                                                                                                                                                     | _none_      |
-| spacing          | margin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py] | spacing     |
+| spacing          | margin [m], marginTop [mt], marginRight [mr], marginBottom [mb], marginLeft [ml], marginStart [ms], marginEnd[me], marginHorizontal [mx], marginVertical [my], padding [p], paddingTop [pt], paddingRight [pr], paddingBottom [pb], paddingLeft [pl], paddingStart [ps], paddingEnd [pe], paddingHorizontal [px], paddingVertical [py], gap [g], rowGap [rG], columnGap [cG] | spacing     |
 | layout           | width, height, minWidth, maxWidth, minHeight, maxHeight, overflow, aspectRatio, alignContent, alignItems, alignSelf, justifyContent, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap                                                                                                                                    | _none_      |
 | position         | position, top, right, bottom, left, start, end                                                                                                                                                                                                                                                                                         | _none_      |
 | position         | zIndex                                                                                                                                                                                                                                                                                                                                 | zIndices    |
@@ -539,11 +539,10 @@ const Button = ({
   const bgColor = textColorProp === 'purple' ? 'lightPurple' : 'lightBlue';
 
   return (
-    <BaseButton flexDirection="row" backgroundColor={bgColor} {...props}>
+    <BaseButton flexDirection="row" columnGap="s" backgroundColor={bgColor} {...props}>
       <Text
         variant="buttonLabel"
         color={color}
-        marginRight={isLoading ? 's' : undefined}
       >
         {label}
       </Text>

src/restyleFunctions.ts

@@ -23,6 +23,9 @@ const spacingProperties = {
   paddingVertical: true,
   paddingStart: true,
   paddingEnd: true,
+  columnGap: true,
+  rowGap: true,
+  gap: true,
 };
 
 const spacingPropertiesShorthand = {
@@ -44,6 +47,9 @@ const spacingPropertiesShorthand = {
   py: 'paddingVertical',
   ps: 'paddingStart',
   pe: 'paddingEnd',
+  g: 'gap',
+  rG: 'rowGap',
+  cG: 'columnGap',
 };
 
 const typographyProperties = {

src/test/createRestyleComponent.test.tsx

@@ -8,6 +8,8 @@ import {
   BackgroundColorProps,
   SpacingProps,
   spacing,
+  SpacingShorthandProps,
+  spacingShorthand,
   OpacityProps,
   opacity,
 } from '../restyleFunctions';
@@ -57,21 +59,23 @@ jest.mock('react-native/Libraries/Utilities/useWindowDimensions', () => ({
 const Component = createRestyleComponent<
   BackgroundColorProps<Theme> &
     SpacingProps<Theme> &
+    SpacingShorthandProps<Theme> &
     OpacityProps<Theme> &
     ViewProps,
   Theme
->([backgroundColor, spacing, opacity]);
+>([backgroundColor, spacing, spacingShorthand, opacity]);
 const cardVariant = createVariant<ThemeWithVariant, 'cardVariants'>({
   themeKey: 'cardVariants',
 });
 const ComponentWithVariant = createRestyleComponent<
   BackgroundColorProps<ThemeWithVariant> &
     SpacingProps<ThemeWithVariant> &
+    SpacingShorthandProps<Theme> &
     OpacityProps<ThemeWithVariant> &
     VariantProps<ThemeWithVariant, 'cardVariants'> &
     ViewProps,
   ThemeWithVariant
->([backgroundColor, spacing, opacity, cardVariant]);
+>([backgroundColor, spacing, spacingShorthand, opacity, cardVariant]);
 
 describe('createRestyleComponent', () => {
   describe('creates a component that', () => {
@@ -192,5 +196,27 @@ describe('createRestyleComponent', () => {
         },
       ]);
     });
+
+    it('uses gap values from the theme', () => {
+      const {root} = render(
+        <ThemeProvider theme={theme}>
+          <Component gap="s" columnGap="s" rowGap="s" />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props).toStrictEqual({
+        style: [{gap: 8, columnGap: 8, rowGap: 8}],
+      });
+    });
+
+    it('passes gap shorthands as gap values', () => {
+      const {root} = render(
+        <ThemeProvider theme={theme}>
+          <Component g="s" cG="s" rG="s" />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props).toStrictEqual({
+        style: [{gap: 8, columnGap: 8, rowGap: 8}],
+      });
+    });
   });
 });