Merge pull request #4549 from GeekyAnts/release/3.3.3-rc.0

release 3.3.3-rc.0

next-example/pages/index.tsx

@@ -7,8 +7,9 @@ const Home: NextPage = () => {
   return (
     <Stack
       // space={[10, 20, 32]}
-      space={10}
-      direction={['row', 'row-reverse', 'column']}
+      space={[10, 20, 24]}
+      // space={'10'}
+      direction={['row', 'column', 'row']}
       // direction={'column'}
       // flexWrap={'wrap'}
     >

package.json

@@ -37,7 +37,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.3.3-alpha.2",
+  "version": "3.3.3-rc.0",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

src/components/primitives/Box/types.ts

@@ -42,4 +42,5 @@ export interface IBoxProps<T = null>
   backgroundColor?: ResponsiveValue<
     ColorType | (string & {}) | ILinearGradientProps
   >;
+  // gap?: ResponsiveValue<number | string>;
 }

src/components/primitives/Stack/Stack.tsx

@@ -32,43 +32,45 @@ export interface IStackProps extends IBoxProps<IStackProps> {
   >;
 }
 
-const Stack = ({ space, ...props }: IStackProps, ref?: any) => {
+const Stack = (props: IStackProps, ref?: any) => {
+  const dir = props.direction;
   const {
     children,
     direction,
     reversed,
     divider,
-    size,
+    space,
     ...resolvedProps
   }: any = usePropsResolution(
     'Stack',
-    { ...props, size: space },
+    props,
     {},
-    { resolveResponsively: [] }
+    { resolveResponsively: ['direction', 'space'] }
   );
 
-  //TODO: refactor for responsive prop
-  if (useHasResponsiveProps(props)) {
-    return null;
-  }
-
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
   const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const resolvedGap = useToken('space', size);
+  const resolvedGap = useToken('space', space);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
 
   return (
     <Box
-      flexDirection={direction}
+      flexDirection={dir}
       {...resolvedProps}
       ref={ref}
-      style={disableCSSMediaQueries ? {} : { gap: resolvedGap }}
+      // @ts-ignore
+      gap={disableCSSMediaQueries ? undefined : resolvedGap}
     >
       {getSpacedChildren(
         children,
-        size,
+        space,
         direction === 'row' ? 'X' : 'Y',
         reversed ? 'reverse' : 'normal',
         divider

src/theme/styled-system.ts

@@ -521,6 +521,10 @@ export const space = {
     properties: ['paddingTop', 'paddingBottom'],
     scale: 'space',
   },
+  gap: {
+    property: 'gap',
+    scale: 'space',
+  },
 } as const;
 
 export const typography = {