Remove all styled(Component) patterns in favor of parent wrappers and props (#18430)

## Summary Eliminates all ~350 `styled(Component)` usages across `twenty-front` and `twenty-ui` (212 files changed). Each was replaced following these rules: - **Margin/layout CSS** (margin, padding, flex, align-self, width) → wrapped in a `styled.div`/`styled.span` parent container - **Third-party components** (Link, TextareaAutosize, ReactPhoneNumberInput, Handle, etc.) → parent container with child CSS selectors (`> a`, `> textarea`, `> input`, etc.) - **Intrinsic behavior via existing props** (TableRow `gridTemplateColumns`, TableCell `color`/`align`) → replaced `styled(TableRow)` / `styled(TableCell)` with direct prop usage - **Other visual overrides on twenty-ui components** (Card, Section, TabList, Button, MenuItem, ScrollWrapper, etc.) → parent wrappers with `> div` / `> *` child selectors - **Extending styled.div/span** → merged all CSS into a single `styled.div`/`styled.span` Also adds `overflow: hidden` to parent containers wrapping `ScrollWrapper` so scroll activates correctly with the new wrapper structure. ### Migration patterns | Before | After | |--------|-------| | `styled(Avatar)` with `margin-right` | `<StyledAvatarContainer><Avatar /></StyledAvatarContainer>` | | `styled(Link)` with `text-decoration: none` | `<StyledLinkContainer><Link /></StyledLinkContainer>` with `> a { ... }` | | `styled(TableRow)` with `grid-template-columns` | `<TableRow gridTemplateColumns="..." />` | | `styled(TableCell)` with `color` / `align` | `<TableCell color={...} align="right" />` | | `styled(Card)` with `margin-top` | `<StyledCardContainer><Card /></StyledCardContainer>` | | `styled(TabList)` with `background` | `<StyledTabListContainer><TabList /></StyledTabListContainer>` with `> div { ... }` | | `styled(StyledBase)` extending a `styled.div` | Single merged `styled.div` with all styles inlined |
2026-03-05 18:16:25 +01:00
parent e5e3132ddd
commit c53a13417e
224 changed files with 4765 additions and 3837 deletions
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { type ReadonlyDeep } from 'type-fest';

 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@@ -26,11 +26,20 @@ interface MatchColumnToFieldSelectProps {
  placeholder?: string;
 }

-const StyledMenuItem = styled(MenuItem)`
-  background-color: ${themeCssVariables.background.transparent.lighter};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
+const StyledMenuItemContainer = styled.div`
+  > div {
+    background-color: ${themeCssVariables.background.transparent.lighter};
+    border: 1px solid ${themeCssVariables.border.color.medium};
+    border-radius: ${themeCssVariables.border.radius.sm};
+  }
 `;
+
+const StyledMenuItem = (props: React.ComponentProps<typeof MenuItem>) => (
+  <StyledMenuItemContainer>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <MenuItem {...props} />
+  </StyledMenuItemContainer>
+);
 export const MatchColumnToFieldSelect = ({
  onChange,
  value,
@@ -5,7 +5,7 @@ import DataGrid, { type DataGridProps } from 'react-data-grid';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

-const StyledDataGrid = styled(DataGrid)`
+const StyledDataGridContainer = styled.div<{ headerRowHeight?: number }>`
  --rdg-background-color: ${themeCssVariables.background.primary};
  --rdg-border-color: ${themeCssVariables.border.color.medium};
  --rdg-color: ${themeCssVariables.font.color.primary};
@@ -25,9 +25,11 @@ const StyledDataGrid = styled(DataGrid)`
  --row-selected-hover-background-color: ${themeCssVariables.background
    .secondary};

-  border: none;
-  block-size: 100%;
-  width: 100%;
+  > * {
+    border: none;
+    block-size: 100%;
+    width: 100%;
+  }

  .rdg-header-row .rdg-cell {
    box-shadow: none;
@@ -99,7 +101,7 @@ const StyledDataGrid = styled(DataGrid)`
    display: flex;
    line-height: none;
  }
-` as typeof DataGrid;
+`;

 type SpreadsheetImportTableProps<Data> = Pick<
  DataGridProps<Data>,
@@ -138,21 +140,23 @@ export const SpreadsheetImportTable = <Data,>({
  if (!rows?.length || !columns?.length) return null;

  return (
-    <StyledDataGrid
-      direction={rtl ? 'rtl' : 'ltr'}
-      rowHeight={40}
-      {...{
-        className: `${className || ''} ${themeClassName}`,
-        columns,
-        headerRowHeight,
-        rowKeyGetter,
-        onRowsChange,
-        rows,
-        components,
-        onRowClick,
-        onSelectedRowsChange,
-        selectedRows,
-      }}
-    />
+    <StyledDataGridContainer headerRowHeight={headerRowHeight}>
+      <DataGrid
+        direction={rtl ? 'rtl' : 'ltr'}
+        rowHeight={40}
+        {...{
+          className: `${className || ''} ${themeClassName}`,
+          columns,
+          headerRowHeight,
+          rowKeyGetter,
+          onRowsChange,
+          rows,
+          components,
+          onRowClick,
+          onSelectedRowsChange,
+          selectedRows,
+        }}
+      />
+    </StyledDataGridContainer>
  );
 };
@@ -7,10 +7,12 @@ import { MainButton } from 'twenty-ui/input';
 import { ModalFooter } from 'twenty-ui/layout';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

-const StyledFooter = styled(ModalFooter)`
-  border-top: 1px solid ${themeCssVariables.border.color.medium};
-  box-shadow: ${themeCssVariables.boxShadow.strong};
-  justify-content: space-between;
+const StyledFooterContainer = styled.div`
+  > div {
+    border-top: 1px solid ${themeCssVariables.border.color.medium};
+    box-shadow: ${themeCssVariables.boxShadow.strong};
+    justify-content: space-between;
+  }
 `;

 type StepNavigationButtonProps = {
@@ -31,24 +33,26 @@ export const StepNavigationButton = ({
  isContinueDisabled = false,
 }: StepNavigationButtonProps) => {
  return (
-    <StyledFooter autoHeight>
-      {!isUndefinedOrNull(onBack) && (
-        <MainButton
-          Icon={isLoading ? CircularProgressBar : undefined}
-          title={backTitle}
-          onClick={!isLoading ? onBack : undefined}
-          variant="secondary"
-        />
-      )}
-      {!isUndefinedOrNull(onContinue) && (
-        <MainButton
-          Icon={isLoading ? CircularProgressBar : undefined}
-          title={continueTitle}
-          onClick={!isLoading ? onContinue : undefined}
-          variant="primary"
-          disabled={isContinueDisabled}
-        />
-      )}
-    </StyledFooter>
+    <StyledFooterContainer>
+      <ModalFooter autoHeight>
+        {!isUndefinedOrNull(onBack) && (
+          <MainButton
+            Icon={isLoading ? CircularProgressBar : undefined}
+            title={backTitle}
+            onClick={!isLoading ? onBack : undefined}
+            variant="secondary"
+          />
+        )}
+        {!isUndefinedOrNull(onContinue) && (
+          <MainButton
+            Icon={isLoading ? CircularProgressBar : undefined}
+            title={continueTitle}
+            onClick={!isLoading ? onContinue : undefined}
+            variant="primary"
+            disabled={isContinueDisabled}
+          />
+        )}
+      </ModalFooter>
+    </StyledFooterContainer>
  );
 };
@@ -13,8 +13,9 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { Tag, type TagColor } from 'twenty-ui/components';
 import { IconChevronDown } from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
-const StyledIconChevronDown = styled(IconChevronDown)`
+const StyledIconChevronDownContainer = styled.div`
  color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
 `;

 export type SubMatchingSelectDropdownButtonProps = {
@@ -40,7 +41,9 @@ export const SubMatchingSelectDropdownButton = ({
        text={value?.label ?? placeholder}
        color={value?.color as TagColor}
      />
-      <StyledIconChevronDown size={theme.icon.size.md} />
+      <StyledIconChevronDownContainer>
+        <IconChevronDown size={theme.icon.size.md} />
+      </StyledIconChevronDownContainer>
    </SubMatchingSelectControlContainer>
  );
 };
@@ -4,13 +4,15 @@ import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui/display';
 import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

-const StyledBanner = styled(Banner)<{ allMatched: boolean }>`
-  background: ${({ allMatched }) =>
-    allMatched
-      ? themeCssVariables.accent.secondary
-      : themeCssVariables.background.transparent.light};
-  border-radius: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[2]} 10px;
+const StyledBannerContainer = styled.div<{ allMatched: boolean }>`
+  > div {
+    background: ${({ allMatched }) =>
+      allMatched
+        ? themeCssVariables.accent.secondary
+        : themeCssVariables.background.transparent.light};
+    border-radius: ${themeCssVariables.spacing[2]};
+    padding: ${themeCssVariables.spacing[2]} 10px;
+  }
 `;

 const StyledText = styled.div<{ allMatched: boolean }>`
@@ -65,24 +67,26 @@ export const UnmatchColumnBanner = ({
  const { theme } = useContext(ThemeContext);

  return (
-    <StyledBanner allMatched={allMatched}>
-      <IconInfoCircle
-        color={allMatched ? theme.color.blue : theme.font.color.secondary}
-        size={theme.icon.size.md}
-      />
-      {isDefined(buttonOnClick) ? (
-        <StyledClickableContainer onClick={buttonOnClick}>
+    <StyledBannerContainer allMatched={allMatched}>
+      <Banner>
+        <IconInfoCircle
+          color={allMatched ? theme.color.blue : theme.font.color.secondary}
+          size={theme.icon.size.md}
+        />
+        {isDefined(buttonOnClick) ? (
+          <StyledClickableContainer onClick={buttonOnClick}>
+            <StyledText allMatched={allMatched}>{message}</StyledText>
+            <StyledIconChevronDownWrapper
+              isExpanded={isExpanded}
+              allMatched={allMatched}
+            >
+              <IconChevronDown size={theme.icon.size.md} />
+            </StyledIconChevronDownWrapper>
+          </StyledClickableContainer>
+        ) : (
          <StyledText allMatched={allMatched}>{message}</StyledText>
-          <StyledIconChevronDownWrapper
-            isExpanded={isExpanded}
-            allMatched={allMatched}
-          >
-            <IconChevronDown size={theme.icon.size.md} />
-          </StyledIconChevronDownWrapper>
-        </StyledClickableContainer>
-      ) : (
-        <StyledText allMatched={allMatched}>{message}</StyledText>
-      )}
-    </StyledBanner>
+        )}
+      </Banner>
+    </StyledBannerContainer>
  );
 };
@@ -15,7 +15,7 @@ import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/Spre
 import { useLingui } from '@lingui/react/macro';
 import { SelectHeaderTable } from './components/SelectHeaderTable';

-const StyledHeading = styled(Heading)`
+const StyledHeadingContainer = styled.div`
  margin-bottom: ${themeCssVariables.spacing[8]};
 `;

@@ -105,7 +105,9 @@ export const SelectHeaderStep = ({
  return (
    <>
      <ModalContent>
-        <StyledHeading title={t`Select header row`} />
+        <StyledHeadingContainer>
+          <Heading title={t`Select header row`} />
+        </StyledHeadingContainer>
        <StyledTableContainer>
          <SelectHeaderTable
            importedRows={importedRows}
@@ -11,20 +11,16 @@ import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';

 import { ModalContent } from 'twenty-ui/layout';
 import { useLingui } from '@lingui/react/macro';
-import { Radio, RadioGroup } from 'twenty-ui/input';
+import { Radio } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type WorkBook } from 'xlsx-ugnis';

-const StyledHeading = styled(Heading)`
-  display: flex;
-`;
-
 const StyledRadioContainer = styled.div`
  display: flex;
  flex-direction: column;
 `;

-const StyledRadio = styled(Radio)`
+const StyledRadioItemContainer = styled.div`
  margin-bottom: ${themeCssVariables.spacing[6]};
 `;

@@ -104,17 +100,20 @@ export const SelectSheetStep = ({
  return (
    <>
      <ModalContent isVerticallyCentered isHorizontallyCentered gap={8}>
-        <StyledHeading title={t`Select the sheet to use`} />
+        <Heading title={t`Select the sheet to use`} />
        <StyledRadioContainer>
-          <RadioGroup onValueChange={(value) => setValue(value)} value={value}>
-            {sheetNames.map((sheetName) => (
-              <StyledRadio
+          {sheetNames.map((sheetName) => (
+            <StyledRadioItemContainer key={sheetName}>
+              <Radio
                value={sheetName}
-                key={sheetName}
                label={sheetName}
+                checked={value === sheetName}
+                onCheckedChange={(checked) => {
+                  if (checked) setValue(sheetName);
+                }}
              />
-            ))}
-          </RadioGroup>
+            </StyledRadioItemContainer>
+          ))}
        </StyledRadioContainer>
      </ModalContent>
      <StepNavigationButton
@@ -56,8 +56,10 @@ const StyledToolbar = styled.div`
  box-shadow: ${themeCssVariables.boxShadow.strong};
 `;

-const StyledButton = styled(Button)`
-  height: 24px;
+const StyledButtonContainer = styled.div`
+  > button {
+    height: 24px;
+  }
 `;

 const StyledErrorToggle = styled.div`
@@ -323,13 +325,15 @@ export const ValidationStep = ({
                <Trans>Show only rows with errors</Trans>
              </StyledErrorToggleDescription>
            </StyledErrorToggle>
-            <StyledButton
-              Icon={IconTrash}
-              title={t`Remove`}
-              accent="default"
-              onClick={deleteSelectedRows}
-              disabled={selectedRows.size === 0}
-            />
+            <StyledButtonContainer>
+              <Button
+                Icon={IconTrash}
+                title={t`Remove`}
+                accent="default"
+                onClick={deleteSelectedRows}
+                disabled={selectedRows.size === 0}
+              />
+            </StyledButtonContainer>
          </StyledToolbar>
        </StyledContentWrapper>
      </ModalContent>