From 4d7367400cbd0b2c1f8be28dd84e15763d89a545 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Sim=C3=A3o?= Date: Wed, 13 Mar 2024 13:40:05 +0000 Subject: [PATCH] fix: responsiveness, token-input and card --- packages/components/src/Card/Card.style.tsx | 4 +--- packages/components/src/Card/Card.tsx | 5 ++--- packages/components/src/Field/Field.tsx | 4 +++- .../components/src/TokenInput/BaseTokenInput.style.tsx | 1 + packages/components/src/TokenInput/BaseTokenInput.tsx | 7 +++++-- packages/components/src/utils/responsive.ts | 4 ++-- packages/core/theme/src/core/breakpoints.ts | 8 ++++---- 7 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/components/src/Card/Card.style.tsx b/packages/components/src/Card/Card.style.tsx index e87210862..f0b4617a0 100644 --- 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)` 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 index c971b9c04..028a386e9 100644 --- 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( $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 index 20a1a8b42..780323038 100644 --- 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 index 247c05c95..764962cd6 100644 --- 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 index 8709df9ff..cb05be868 100644 --- 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, + Pick< + FieldProps, + 'label' | 'labelPosition' | 'labelProps' | 'maxWidth' | 'justifyContent' | 'alignItems' | 'fullWidth' + >, keyof Props >; @@ -126,7 +129,7 @@ const BaseTokenInput = forwardRef( return ( - + {hasLabel && ( {label} diff --git a/packages/components/src/utils/responsive.ts b/packages/components/src/utils/responsive.ts index ef1d3494e..68b76ba0c 100644 --- 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) => 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 index 94dcfae5a..d054d70ba 100644 --- 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 | Partial<{ [K in BreakPoints]: T }>; const values: Record = { - 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)}; } `,