fix(@air/zephyr): allow baseStyles in specific areas

AirLabsTeam · Jan 26, 2022 · c109b5e · c109b5e
1 parent 2f7f3ea
commit c109b5e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/packages/zephyr/src/Box.tsx b/packages/zephyr/src/Box.tsx
@@ -20,6 +20,7 @@ export type BoxStylingProps = {
 
   /**
    * Used to apply predefined styles.
+   * TODO: Define merging behavior for tx and __baseStyles.
    */
   variant?: string | string[];
 };
@@ -31,6 +32,8 @@ export type BoxProps<TDefaultElement extends As = 'div'> = PropsWithAs<
 
 const inlineStyles = ({ tx, theme }: any) => css({ ...tx })(theme);
 
+const baseStyles = (props: any) => css(props.__baseStyles)(props.theme);
+
 const variants = ({
   theme,
   __themeKey = 'variants',
@@ -48,6 +51,7 @@ export const Box = styled('div')<BoxStylingProps>(
     margin: 0,
     boxSizing: 'border-box',
   },
+  baseStyles,
   variants,
   inlineStyles,
   compose(color, space),

diff --git a/packages/zephyr/src/Button.tsx b/packages/zephyr/src/Button.tsx
@@ -249,7 +249,6 @@ export const Button = forwardRefWithAs<NonSemanticButtonProps, 'button'>(
       ref: _ref, // eslint-disable-line @typescript-eslint/no-unused-vars
       children,
       className,
-      tx,
       ...restOfProps
     }: ButtonProps,
     ref: Ref<HTMLButtonElement>,
@@ -280,7 +279,8 @@ export const Button = forwardRefWithAs<NonSemanticButtonProps, 'button'>(
         type={type}
         variant={variant}
         className={classNames({ 'is-loading': isLoading }, className)}
-        tx={{
+        // @ts-ignore - Allowing it here
+        __baseStyles={{
           appearance: 'none',
           outline: 'none',
           display: 'inline-flex',
@@ -313,7 +313,6 @@ export const Button = forwardRefWithAs<NonSemanticButtonProps, 'button'>(
           '&.is-loading': {
             cursor: 'progress',
           },
-          ...tx,
         }}
         {...restOfProps}
         ref={ref}

diff --git a/packages/zephyr/src/Text.tsx b/packages/zephyr/src/Text.tsx
@@ -12,14 +12,21 @@ export interface TextProps extends PropsWithAs<'div', NonSemanticTextProps> {}
 export const Text = forwardRefWithAs<NonSemanticTextProps, 'div'>(
   (
     {
-      ref: _ref, // eslint-disable-line @typescript-eslint/no-unused-vars
-      tx,
       variant = 'text-ui-16',
+      ref: _ref, // eslint-disable-line @typescript-eslint/no-unused-vars
       ...restOfProps
     }: TextProps,
     ref: Ref<HTMLDivElement>,
   ) => {
-    return <Box variant={variant} ref={ref} {...restOfProps} tx={{ color: 'pigeon700', ...tx }} />;
+    return (
+      <Box
+        variant={variant}
+        ref={ref}
+        {...restOfProps}
+        // @ts-ignore - Allowing it here
+        __baseStyles={{ color: 'pigeon700' }}
+      />
+    );
   },
 );