fix: responsiveness, token-input and card (#73)

interlay · Mar 13, 2024 · 5b87388 · 5b87388
1 parent ec7af71
commit 5b87388
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 15 deletions.
diff --git a/.changeset/wet-cats-speak.md b/.changeset/wet-cats-speak.md
@@ -0,0 +1,6 @@
+---
+"@interlay/ui": patch
+"@interlay/theme": patch
+---
+
+fix: responsiveness, token-input and card
diff --git a/packages/components/src/Card/Card.style.tsx b/packages/components/src/Card/Card.style.tsx
@@ -1,12 +1,11 @@
 import styled, { css } from 'styled-components';
-import { Color, Rounded, Spacing } from '@interlay/theme';
+import { Color, Rounded } from '@interlay/theme';
 
 import { Flex } from '../Flex';
 
 type StyledCardProps = {
   $bordered: boolean | Color;
   $rounded: Rounded;
-  $padding: Spacing;
   $shadowed: boolean;
   $background?: Color;
   $isHoverable?: boolean;
@@ -15,7 +14,6 @@ type StyledCardProps = {
 
 const StyledCard = styled(Flex)<StyledCardProps>`
   border-radius: ${({ $rounded, theme }) => theme.rounded($rounded)};
-  padding: ${({ $padding, theme }) => theme.spacing($padding)};
   cursor: ${({ $isPressable }) => $isPressable && 'pointer'};
   outline: none;
 

diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx
@@ -3,7 +3,7 @@ import { mergeProps } from '@react-aria/utils';
 import { PressEvent } from '@react-types/shared';
 import { forwardRef } from 'react';
 import { useDOMRef } from '@interlay/hooks';
-import { Color, Rounded, Spacing } from '@interlay/theme';
+import { Color, Rounded } from '@interlay/theme';
 
 import { FlexProps } from '../Flex';
 
@@ -16,7 +16,6 @@ type Props = {
   background?: Color;
   bordered?: boolean | Color;
   rounded?: Rounded;
-  padding?: Spacing;
   shadowed?: boolean;
   onPress?: (e: PressEvent) => void;
 };
@@ -56,11 +55,11 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
         $bordered={bordered}
         $isHoverable={isHoverable}
         $isPressable={isPressable}
-        $padding={padding}
         $rounded={rounded}
         $shadowed={shadowed}
         direction={direction}
         elementType={elementType}
+        padding={padding}
         {...mergeProps(props, isPressable ? buttonProps : {})}
       >
         {children}

diff --git a/packages/components/src/Field/Field.tsx b/packages/components/src/Field/Field.tsx
@@ -99,6 +99,7 @@ const useFieldProps = ({
   alignItems,
   justifyContent,
   gap,
+  fullWidth,
   ...props
 }: FieldProps): { fieldProps: FieldProps; elementProps: any } => {
   return {
@@ -116,7 +117,8 @@ const useFieldProps = ({
       maxWidth,
       alignItems,
       justifyContent,
-      gap
+      gap,
+      fullWidth
     },
     elementProps: props
   };

diff --git a/packages/components/src/TokenInput/BaseTokenInput.style.tsx b/packages/components/src/TokenInput/BaseTokenInput.style.tsx
@@ -108,6 +108,7 @@ const StyledGroupInputWrapper = styled(Flex)`
 
 const StyledNumberInputWrapper = styled.div`
   position: relative;
+  width: 100%;
 `;
 
 export { StyledBaseInput, StyledAdornment, StyledUSDAdornment, StyledNumberInputWrapper, StyledGroupInputWrapper };
diff --git a/packages/components/src/TokenInput/BaseTokenInput.tsx b/packages/components/src/TokenInput/BaseTokenInput.tsx
@@ -43,7 +43,10 @@ type Props = {
 
 type InheritAttrs = Omit<
   HelperTextProps &
-    Pick<FieldProps, 'label' | 'labelPosition' | 'labelProps' | 'maxWidth' | 'justifyContent' | 'alignItems'>,
+    Pick<
+      FieldProps,
+      'label' | 'labelPosition' | 'labelProps' | 'maxWidth' | 'justifyContent' | 'alignItems' | 'fullWidth'
+    >,
   keyof Props
 >;
 
@@ -126,7 +129,7 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
 
     return (
       <Field {...styleFieldProps}>
-        <Flex direction='column'>
+        <Flex direction='column' flex={1}>
           {hasLabel && (
             <TokenInputLabel {...labelProps} balance={balance}>
               {label}

diff --git a/packages/components/src/utils/responsive.ts b/packages/components/src/utils/responsive.ts
@@ -4,7 +4,7 @@ import { DefaultTheme, css } from 'styled-components';
 const getSpacingResponsiveCSS = (theme: DefaultTheme, attribute: string, prop?: ResponsiveProp<Spacing>) =>
   typeof prop === 'object'
     ? css`
-        ${prop.xs && theme.breakpoints.media.xs`${attribute}: ${theme.spacing(prop.xs)};`}
+        ${prop.base && theme.breakpoints.media.base`${attribute}: ${theme.spacing(prop.base)};`}
         ${prop.s && theme.breakpoints.media.s`${attribute}: ${theme.spacing(prop.s)};`}
     ${prop.md && theme.breakpoints.media.md`${attribute}: ${theme.spacing(prop.md)};`}
     ${prop.lg && theme.breakpoints.media.lg`${attribute}: ${theme.spacing(prop.lg)};`}
@@ -20,7 +20,7 @@ const getResponsiveCSS = (
 ) =>
   typeof prop === 'object'
     ? css`
-        ${prop.xs && theme.breakpoints.media.xs`${attribute}: ${condition ? condition(prop.xs) : prop.xs};`}
+        ${prop.base && theme.breakpoints.media.base`${attribute}: ${condition ? condition(prop.base) : prop.base};`}
         ${prop.s && theme.breakpoints.media.s`${attribute}: ${condition ? condition(prop.s) : prop.s};`}
     ${prop.md && theme.breakpoints.media.md`${attribute}: ${condition ? condition(prop.md) : prop.md};`}
     ${prop.lg && theme.breakpoints.media.lg`${attribute}: ${condition ? condition(prop.lg) : prop.lg};`}

diff --git a/packages/core/theme/src/core/breakpoints.ts b/packages/core/theme/src/core/breakpoints.ts
@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { css } from 'styled-components';
 
-type BreakPoints = 'xs' | 's' | 'md' | 'lg' | 'xl';
+type BreakPoints = 'base' | 's' | 'md' | 'lg' | 'xl';
 
 type ResponsiveProp<T extends number | string | boolean> = T | Partial<{ [K in BreakPoints]: T }>;
 
 const values: Record<BreakPoints, number> = {
-  xs: 0, // phone
+  base: 0, // phone
   s: 600, // tablet
   md: 900, // small laptop
   lg: 1200, // desktop
@@ -18,8 +18,8 @@ const breakpoints = {
   up: (key: BreakPoints): string => `(min-width:${values[key]}px)`,
   down: (key: BreakPoints): string => `(max-width:${values[key]}px)`,
   media: {
-    xs: (...args) => css`
-      @media (min-width: ${values.xs}px) {
+    base: (...args) => css`
+      @media (min-width: ${values.base}px) {
         ${css(...args)};
       }
     `,