diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetSectionContainer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetSectionContainer.tsx index 902329210c..66bf6038f4 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetSectionContainer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetSectionContainer.tsx @@ -1,4 +1,5 @@ import { useTheme } from '@emotion/react'; +import isPropValid from '@emotion/is-prop-valid'; import styled from '@emotion/styled'; import { useState } from 'react'; import { IconChevronDown } from 'twenty-ui/display'; @@ -17,7 +18,9 @@ const StyledTitleLabel = styled.div` font-weight: ${({ theme }) => theme.font.weight.medium}; `; -const StyledChevronIcon = styled(IconChevronDown)<{ isExpanded: boolean }>` +const StyledChevronIcon = styled(IconChevronDown, { + shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'isExpanded', +})<{ isExpanded: boolean }>` color: ${({ theme }) => theme.font.color.tertiary}; transform: ${({ isExpanded }) => isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'}; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx index c886e78068..fc81306021 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx @@ -1,16 +1,21 @@ import { useTheme } from '@emotion/react'; +import isPropValid from '@emotion/is-prop-valid'; import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared/utils'; import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui/display'; -const StyledBanner = styled(Banner)<{ allMatched: boolean }>` +const StyledBanner = styled(Banner, { + shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'allMatched', +})<{ allMatched: boolean }>` background: ${({ allMatched, theme }) => allMatched ? theme.accent.secondary : theme.background.transparent.light}; border-radius: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2.5)}; `; -const StyledText = styled.div<{ allMatched: boolean }>` +const StyledText = styled('div', { + shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'allMatched', +})<{ allMatched: boolean }>` color: ${({ allMatched, theme }) => allMatched ? theme.color.blue : theme.font.color.secondary}; flex: 1; @@ -19,7 +24,10 @@ const StyledText = styled.div<{ allMatched: boolean }>` white-space: nowrap; `; -const StyledTransitionedIconChevronDown = styled(IconChevronDown)<{ +const StyledTransitionedIconChevronDown = styled(IconChevronDown, { + shouldForwardProp: (prop) => + isPropValid(prop) && !['isExpanded', 'allMatched'].includes(prop), +})<{ isExpanded: boolean; allMatched: boolean; }>`