From b99582c665346a62e425d69de6d577f2a7d2132f Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 29 Jan 2026 14:02:16 +0000
Subject: [PATCH] Fix React warnings for custom props on styled DOM elements
 (#17553)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React was warning that custom props like `isExpanded` and `allMatched`
were being passed to DOM elements (SVG icons and divs), which only
accept standard HTML/SVG attributes.

## Changes

Added `shouldForwardProp` configuration to styled components to filter
out custom props before they reach the DOM:

```typescript
import isPropValid from '@emotion/is-prop-valid';

const StyledChevronIcon = styled(IconChevronDown, {
  shouldForwardProp: (prop) =>
    isPropValid(prop) && prop !== 'isExpanded',
})<{ isExpanded: boolean }>`
  transform: ${({ isExpanded }) => isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'};
`;
```

This pattern is already used in other components (e.g.,
`NavigationDrawerItem`, `TableRow`) and ensures custom props are
available for styling logic but don't leak to the underlying DOM
element.

## Files Modified

- `FieldsWidgetSectionContainer.tsx` - `isExpanded` on icon component
- `UnmatchColumnBanner.tsx` - `isExpanded`, `allMatched` on icon, div,
and Banner components

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions,
customizing its development environment and configuring Model Context
Protocol (MCP) servers. Learn more [Copilot coding agent
tips](https://gh.io/copilot-coding-agent-tips) in the docs.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Devessier <29370468+Devessier@users.noreply.github.com>
Co-authored-by: Devessier <baptiste@devessier.fr>
---
 .../components/FieldsWidgetSectionContainer.tsx    |  5 ++++-
 .../components/UnmatchColumnBanner.tsx             | 14 +++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

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;
 }>`