From 2d67eb527379d738d9334ef9de09123f11fd3f4c Mon Sep 17 00:00:00 2001 From: Rohit Malhotra Date: Thu, 11 Jul 2024 16:18:54 +0530 Subject: [PATCH] DApp-1708 added support for new css variables and semantics in blocks components (#1716) * update changes * add props type * update version and remove on dash * added support for new css variables * deleted curropted file * added gap type --------- Co-authored-by: corlard3y --- src/blocks/Blocks.constants.ts | 7 ++++++ src/blocks/Blocks.types.ts | 29 +++++++++++++++++++----- src/blocks/Blocks.utils.ts | 18 ++++++++++----- src/blocks/box/Box.types.ts | 13 ++++++----- src/blocks/hoverableSVG/HoverableSVG.tsx | 20 ++++++++-------- src/blocks/separator/Separator.types.ts | 4 ++-- src/blocks/skeleton/Skeleton.types.ts | 12 +++++++--- src/blocks/theme/Theme.types.ts | 6 +++++ 8 files changed, 77 insertions(+), 32 deletions(-) create mode 100644 src/blocks/Blocks.constants.ts diff --git a/src/blocks/Blocks.constants.ts b/src/blocks/Blocks.constants.ts new file mode 100644 index 0000000000..283264f2ce --- /dev/null +++ b/src/blocks/Blocks.constants.ts @@ -0,0 +1,7 @@ +export const newRadiusRegex = /\bradius-[a-z]+\b/g; + +export const oldRadiusRegex = /\br[0-9]+\b/g; + +export const newSpacingRegex = /\bspacing-[a-z]+\b/g; + +export const oldSpacingRegex = /\bs[0-9]+\b/g; diff --git a/src/blocks/Blocks.types.ts b/src/blocks/Blocks.types.ts index 07145040d5..e18b5a2177 100644 --- a/src/blocks/Blocks.types.ts +++ b/src/blocks/Blocks.types.ts @@ -1,7 +1,7 @@ import { HTMLAttributes } from 'react'; import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box'; import { blocksColorsLegacy } from './Blocks.colors'; -import { ThemeColors } from './theme/Theme.types'; +import { ThemeBorderRadius, ThemeBorderSize, ThemeColors, ThemeSpacing } from './theme/Theme.types'; import { SkeletonResponsiveCSSProperties, SkeletonResponsiveCSSPropertiesData, @@ -21,9 +21,25 @@ export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | ' export type ResponsiveProp = T | { [key in Breakpoint]?: T }; -export type RadiusType = `r${number}` | `r${number} r${number}` | `r${number} r${number} r${number} r${number}`; - -export type SpaceType = `s${number}` | `s${number} s${number}` | `s${number} s${number} s${number} s${number}`; +// Remove old RadiusType types +export type BlocksRadiusType = + | `r${number}` + | `r${number} r${number}` + | `r${number} r${number} r${number} r${number}` + | ThemeBorderRadius + | `${ThemeBorderRadius} ${ThemeBorderRadius}` + | `${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius}`; + +// Remove old SpaceType types +export type BlocksSpaceType = + | `s${number}` + | `s${number} s${number}` + | `s${number} s${number} s${number} s${number}` + | ThemeSpacing + | `${ThemeSpacing} ${ThemeSpacing}` + | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`; + +export type BlocksGapType = ThemeSpacing | `${ThemeSpacing} ${ThemeSpacing}`; export type PixelValue = `${number}px`; @@ -58,10 +74,11 @@ export type BlocksColors = keyof BlocksColorData; export type ThemeMode = 'light' | 'dark'; -// TODO: Remove BlocksColors +// TODO: Remove ThemeModeColors export type ThemeModeColors = Record; -export type BorderValue = `${number}px ${string} ${BlocksColors}` | 'none'; +// TODO: Remove the blocks colors border size +export type BorderValue = `${number}px ${string} ${BlocksColors}` | `${number}px ${string} ${ThemeBorderSize}` | 'none'; export type ThemeModeBorder = Record; diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts index 5797d0cfbe..b8a346160d 100644 --- a/src/blocks/Blocks.utils.ts +++ b/src/blocks/Blocks.utils.ts @@ -12,9 +12,10 @@ import { ThemeMode, ThemeModeBorder, BorderValue, - RadiusType, + BlocksRadiusType, } from './Blocks.types'; import { ThemeColors } from './theme/Theme.types'; +import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from './Blocks.constants'; /** * @param propName @@ -24,7 +25,10 @@ import { ThemeColors } from './theme/Theme.types'; const getCSSValue = (propName: CSSPropName, value: CSSPropValueType | undefined) => { if (propName === 'padding' || propName === 'margin') { if (typeof value === 'string') { - return value.replace(/\b(\w+)\b/g, 'var(--$1)'); + return value.replace( + newSpacingRegex.test(value) ? newSpacingRegex : oldSpacingRegex, + (match) => `var(--${match})` + ); } } else if (propName === 'gap' || propName === 'border-radius') { return `var(--${value})`; @@ -176,12 +180,14 @@ export const getBlocksBorder = (mode: ThemeMode, border?: BorderValue | ThemeMod * @param radius * @returns */ -export const getBlocksBorderRadius = (radius?: RadiusType) => { +export const getBlocksBorderRadius = (radius?: BlocksRadiusType) => { // If border-radius is not given return undefined, to avoid any breakages if (!radius) return radius; - return radius.replace(/\b(\w+)\b/g, 'var(--$1)'); + const result = radius.replace( + newRadiusRegex.test(radius) ? newRadiusRegex : oldRadiusRegex, + (match) => `var(--${match})` + ); - // If passed a design system border-radius then use radius as a variable - return `var(--${radius})`; + return result; }; diff --git a/src/blocks/box/Box.types.ts b/src/blocks/box/Box.types.ts index 722bf7ae3e..11f6288ffb 100644 --- a/src/blocks/box/Box.types.ts +++ b/src/blocks/box/Box.types.ts @@ -3,12 +3,13 @@ import { CSSProperties, ReactNode } from 'react'; import { BlocksColors, BorderValue, - RadiusType, + BlocksRadiusType, ResponsiveProp, - SpaceType, + BlocksSpaceType, ThemeModeBorder, ThemeModeColors, ValueOf, + BlocksGapType, } from '../Blocks.types'; import { FlattenSimpleInterpolation } from 'styled-components'; import { ThemeColors } from 'blocks/theme/Theme.types'; @@ -21,7 +22,7 @@ export type BoxResponsiveProps = { /* Sets flex-direction css property */ flexDirection?: ResponsiveProp; /* Sets gap between the elements */ - gap?: ResponsiveProp; + gap?: ResponsiveProp; /* Sets display css property */ display?: ResponsiveProp; /* Sets height css property */ @@ -29,7 +30,7 @@ export type BoxResponsiveProps = { /* Sets justify-content css property */ justifyContent?: ResponsiveProp; /* Sets margin css property */ - margin?: ResponsiveProp; + margin?: ResponsiveProp; /* Sets max-height css property */ maxHeight?: ResponsiveProp; /* Sets min-height css property */ @@ -39,7 +40,7 @@ export type BoxResponsiveProps = { /* Sets min-width css property */ minWidth?: ResponsiveProp; /* Sets padding css property */ - padding?: ResponsiveProp; + padding?: ResponsiveProp; /* Sets width css property */ width?: ResponsiveProp; }; @@ -48,7 +49,7 @@ export type BoxNonResponsiveProps = { /* Sets border css property */ border?: BorderValue | ThemeModeBorder; /* Sets border-radius css property */ - borderRadius?: RadiusType; + borderRadius?: BlocksRadiusType; /* Sets background-color css property */ backgroundColor?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets color css property */ diff --git a/src/blocks/hoverableSVG/HoverableSVG.tsx b/src/blocks/hoverableSVG/HoverableSVG.tsx index 97018530d3..6f1e5f74bc 100644 --- a/src/blocks/hoverableSVG/HoverableSVG.tsx +++ b/src/blocks/hoverableSVG/HoverableSVG.tsx @@ -4,31 +4,33 @@ import { useBlocksTheme } from '../Blocks.hooks'; import { BlocksColors, ThemeModeColors, - SpaceType, + BlocksSpaceType, ModeProp, TransformedHTMLAttributes, - RadiusType, + BlocksRadiusType, } from '../Blocks.types'; import { getBlocksColor, getBlocksBorderRadius } from '../Blocks.utils'; +import { ThemeColors } from '../theme/Theme.types'; + export type HoverableSVGProps = { /* Icon component */ icon: React.ReactNode; /* Sets the initial color for SVG */ - defaultColor?: BlocksColors | ThemeModeColors; + defaultColor?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets button as disabled */ disabled?: boolean; /* Sets the hover color for SVG */ - hoverColor?: BlocksColors | ThemeModeColors; + hoverColor?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets the initial background color for SVG */ - defaultBackground?: BlocksColors | ThemeModeColors; + defaultBackground?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets the initial background color for SVG */ - hoverBackground?: BlocksColors | ThemeModeColors; + hoverBackground?: BlocksColors | ThemeModeColors | ThemeColors; /* Sets the padding for SVG button container */ - padding?: SpaceType; + padding?: BlocksSpaceType; /* Sets the margin for SVG button container */ - margin?: SpaceType; + margin?: BlocksSpaceType; /* Sets the margin for SVG button container */ - borderRadius?: RadiusType; + borderRadius?: BlocksRadiusType; } & TransformedHTMLAttributes; const StyledButton = styled.button.withConfig({ diff --git a/src/blocks/separator/Separator.types.ts b/src/blocks/separator/Separator.types.ts index f8ad501ade..bdb498c743 100644 --- a/src/blocks/separator/Separator.types.ts +++ b/src/blocks/separator/Separator.types.ts @@ -1,11 +1,11 @@ -import { TransformedHTMLAttributes, ResponsiveProp, SpaceType, ValueOf } from '../Blocks.types'; +import { TransformedHTMLAttributes, ResponsiveProp, BlocksSpaceType, ValueOf } from '../Blocks.types'; import { FlattenSimpleInterpolation } from 'styled-components'; export type SeparatorResponsiveProps = { /* Sets height css property */ height?: ResponsiveProp; /* Sets margin css property */ - margin?: ResponsiveProp; + margin?: ResponsiveProp; /* Sets width css property */ width?: ResponsiveProp; }; diff --git a/src/blocks/skeleton/Skeleton.types.ts b/src/blocks/skeleton/Skeleton.types.ts index 3f0f88489d..a8aa57b5ca 100644 --- a/src/blocks/skeleton/Skeleton.types.ts +++ b/src/blocks/skeleton/Skeleton.types.ts @@ -1,17 +1,23 @@ import { ReactNode } from 'react'; -import type { TransformedHTMLAttributes, RadiusType, ResponsiveProp, SpaceType, ValueOf } from '../Blocks.types'; +import type { + TransformedHTMLAttributes, + BlocksRadiusType, + ResponsiveProp, + BlocksSpaceType, + ValueOf, +} from '../Blocks.types'; import type { FlattenSimpleInterpolation } from 'styled-components'; export type SkeletonResponsiveProps = { /* Sets height css property */ height?: ResponsiveProp; /* Sets margin css property */ - margin?: ResponsiveProp; + margin?: ResponsiveProp; /* Sets width css property */ width?: ResponsiveProp; /* Sets border radius css property */ - borderRadius?: ResponsiveProp; + borderRadius?: ResponsiveProp; }; export type SkeletonProps = SkeletonResponsiveProps & diff --git a/src/blocks/theme/Theme.types.ts b/src/blocks/theme/Theme.types.ts index 561efd63cb..ef1fc512c8 100644 --- a/src/blocks/theme/Theme.types.ts +++ b/src/blocks/theme/Theme.types.ts @@ -25,3 +25,9 @@ export type Theme = { opacity: typeof opacityVariables; spacing: typeof spacingVariables; }; + +export type ThemeBorderRadius = keyof Theme['borderRadius']; + +export type ThemeBorderSize = keyof Theme['borderSize']; + +export type ThemeSpacing = keyof Theme['spacing'];