fix(react-components): replace "shouldForwardProp" for Box and Typogr…

…aphy
PeculiarVentures · Feb 27, 2024 · 0093523 · 0093523
1 parent 48eeed4
commit 0093523
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/packages/react-components/src/Backdrop/backdrop.tsx b/packages/react-components/src/Backdrop/backdrop.tsx
@@ -33,10 +33,14 @@ export type BackdropProps = BackdropOwnProps
  *
  */
 
+const reactPropsRegex = /^(as|open|invisible|transitionDuration|variant)$/;
+
 /**
  * Styles.
  */
-const BackdropRoot = styled(Box)<Required<Pick<BackdropOwnProps, 'invisible'>>>((props) => ({
+const BackdropRoot = styled(Box, {
+  shouldForwardProp: (prop) => !reactPropsRegex.test(prop),
+})<Required<Pick<BackdropOwnProps, 'invisible'>>>((props) => ({
   zIndex: -1,
   position: 'fixed',
   right: 0,

diff --git a/packages/react-components/src/Box/box.tsx b/packages/react-components/src/Box/box.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ColorType } from '../styles';
 
@@ -34,11 +33,13 @@ export type BoxProps<
  *
  */
 
+const reactPropsRegex = /^(as|background|borderColor|borderWidth|borderStyle|borderPosition|borderRadius)$/;
+
 /**
  * Styles.
  */
 const BoxRoot = styled('div', {
-  shouldForwardProp: (prop) => isPropValid(prop),
+  shouldForwardProp: (prop) => !reactPropsRegex.test(prop),
 })<BoxOwnProps>(
   (props) => ({
     background: props.background && `var(--pv-color-${props.background})`,

diff --git a/packages/react-components/src/LinearProgress/linear_progress.tsx b/packages/react-components/src/LinearProgress/linear_progress.tsx
@@ -61,6 +61,7 @@ export const LinearProgress = React.forwardRef<HTMLDivElement, LinearProgressPro
   (props, ref) => {
     const {
       color,
+      variant,
       ...other
     } = props;
 

diff --git a/packages/react-components/src/Skeleton/skeleton.tsx b/packages/react-components/src/Skeleton/skeleton.tsx
@@ -42,6 +42,8 @@ export type SkeletonProps<
  *
  */
 
+const reactPropsRegex = /^(as|height|width|variant)$/;
+
 /**
  * Styles.
  */
@@ -58,7 +60,7 @@ const pulseKeyframe = keyframes`
 `;
 
 const SkeletonRoot = styled(Box, {
-  shouldForwardProp: (prop) => !['width', 'height'].includes(prop),
+  shouldForwardProp: (prop) => !reactPropsRegex.test(prop),
 })<SkeletonProps>((props) => ({
   display: 'block',
   height: '1.2em',

diff --git a/packages/react-components/src/Typography/typography.tsx b/packages/react-components/src/Typography/typography.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import {
   ColorType,
@@ -45,11 +44,13 @@ export type TypographyProps<
  *
  */
 
+const reactPropsRegex = /^(as|color|variant|noWrap)$/;
+
 /**
  * Styles.
  */
 const TypographyRoot = styled('p', {
-  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
+  shouldForwardProp: (prop) => !reactPropsRegex.test(prop),
 })<TypographyOwnProps>((props) => ({
   margin: 0,
   color: props.color === 'inherit' ? 'inherit' : `var(--pv-color-${props.color})`,