Refactor icons passed as props with the new way (#1492)

* Refactor icons passed as props with the new way Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Update more files Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Fix according to review * Fix according to review * Fix according to review * Fix chromatic regressions --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2023-09-10 19:39:17 +01:00
parent 89fed80537
commit fb737e2021
82 changed files with 341 additions and 425 deletions
--- a/front/src/modules/ui/view-bar/components/DropdownButton.tsx
+++ b/front/src/modules/ui/view-bar/components/DropdownButton.tsx
@ -1,18 +1,20 @@
 import { ReactNode } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';

+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';

 import { DropdownMenuContainer } from './DropdownMenuContainer';

-type OwnProps = {
+type DropdownButtonProps = {
  anchor?: 'left' | 'right';
  label: ReactNode;
  isActive: boolean;
  children?: ReactNode;
  isUnfolded?: boolean;
-  icon?: ReactNode;
+  Icon?: IconComponent;
  onIsUnfoldedChange?: (newIsUnfolded: boolean) => void;
  resetState?: () => void;
  hotkeyScope: string;
@ -64,11 +66,11 @@ function DropdownButton({
  children,
  isUnfolded = false,
  onIsUnfoldedChange,
+  Icon,
  hotkeyScope,
-  icon,
  color,
  menuWidth,
-}: OwnProps) {
+}: DropdownButtonProps) {
  useScopedHotkeys(
    [Key.Enter, Key.Escape],
    () => {
@ -86,6 +88,8 @@ function DropdownButton({
    onIsUnfoldedChange?.(false);
  };

+  const theme = useTheme();
+
  return (
    <StyledDropdownButtonContainer>
      <StyledDropdownButton
@ -95,7 +99,11 @@ function DropdownButton({
        aria-selected={isActive}
        color={color}
      >
-        {icon && <StyledDropdownButtonIcon>{icon}</StyledDropdownButtonIcon>}
+        {Icon && (
+          <StyledDropdownButtonIcon>
+            {<Icon size={theme.icon.size.md} />}
+          </StyledDropdownButtonIcon>
+        )}
        {label}
      </StyledDropdownButton>
      {isUnfolded && (
--- a/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx
+++ b/front/src/modules/ui/view-bar/components/FilterDropdownButton.tsx
@ -1,5 +1,6 @@
 import { Context } from 'react';

+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';

 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
@ -8,21 +9,23 @@ import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
 import { MultipleFiltersDropdownButton } from './MultipleFiltersDropdownButton';
 import { SingleEntityFilterDropdownButton } from './SingleEntityFilterDropdownButton';

+type FilterDropdownButtonProps = {
+  context: Context<string | null>;
+  hotkeyScope: FiltersHotkeyScope;
+  isPrimaryButton?: boolean;
+  Icon?: IconComponent;
+  color?: string;
+  label?: string;
+};
+
 export function FilterDropdownButton({
  context,
  hotkeyScope,
  isPrimaryButton = false,
  color,
-  icon,
+  Icon,
  label,
-}: {
-  context: Context<string | null>;
-  hotkeyScope: FiltersHotkeyScope;
-  isPrimaryButton?: boolean;
-  icon?: React.ReactNode;
-  color?: string;
-  label?: string;
-}) {
+}: FilterDropdownButtonProps) {
  const [availableFilters] = useRecoilScopedState(
    availableFiltersScopedState,
    context,
@ -40,7 +43,7 @@ export function FilterDropdownButton({
    <MultipleFiltersDropdownButton
      context={context}
      hotkeyScope={hotkeyScope}
-      icon={icon}
+      Icon={Icon}
      isPrimaryButton={isPrimaryButton}
      color={color}
      label={label}
--- a/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx
+++ b/front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx
@ -1,6 +1,7 @@
 import { Context, useCallback, useState } from 'react';

 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
@ -22,21 +23,23 @@ import { FilterDropdownOperandButton } from './FilterDropdownOperandButton';
 import { FilterDropdownOperandSelect } from './FilterDropdownOperandSelect';
 import { FilterDropdownTextSearchInput } from './FilterDropdownTextSearchInput';

+type MultipleFiltersDropdownButtonProps = {
+  context: Context<string | null>;
+  hotkeyScope: FiltersHotkeyScope;
+  isPrimaryButton?: boolean;
+  Icon?: IconComponent;
+  color?: string;
+  label?: string;
+};
+
 export function MultipleFiltersDropdownButton({
  context,
  hotkeyScope,
  isPrimaryButton = false,
  color,
-  icon,
+  Icon,
  label,
-}: {
-  context: Context<string | null>;
-  hotkeyScope: FiltersHotkeyScope;
-  isPrimaryButton?: boolean;
-  icon?: React.ReactNode;
-  color?: string;
-  label?: string;
-}) {
+}: MultipleFiltersDropdownButtonProps) {
  const [isUnfolded, setIsUnfolded] = useState(false);

  const [
@ -108,7 +111,7 @@ export function MultipleFiltersDropdownButton({
      label={label ?? 'Filter'}
      isActive={isFilterSelected}
      isUnfolded={isUnfolded}
-      icon={icon}
+      Icon={Icon}
      onIsUnfoldedChange={handleIsUnfoldedChange}
      hotkeyScope={hotkeyScope}
      color={color}
--- a/front/src/modules/ui/view-bar/components/SortOrFilterChip.tsx
+++ b/front/src/modules/ui/view-bar/components/SortOrFilterChip.tsx
@ -67,7 +67,7 @@ function SortOrFilterChip({
    <StyledChip isSort={isSort}>
      {Icon && (
        <StyledIcon>
-          <Icon />
+          <Icon size={theme.icon.size.md} />
        </StyledIcon>
      )}
      {labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}
--- a/front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx
+++ b/front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx
@ -108,7 +108,7 @@ export const UpdateViewButtonGroup = ({
        />
        <Button
          size="small"
-          icon={<IconChevronDown />}
+          Icon={IconChevronDown}
          onClick={handleArrowDownButtonClick}
        />
      </ButtonGroup>
--- a/front/src/modules/ui/view-bar/components/ViewBarDetails.tsx
+++ b/front/src/modules/ui/view-bar/components/ViewBarDetails.tsx
@ -202,7 +202,7 @@ function ViewBarDetails<SortField>({
              context={context}
              hotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
              color={theme.font.color.tertiary}
-              icon={<IconPlus size={theme.icon.size.md} />}
+              Icon={IconPlus}
              label="Add filter"
            />
          </StyledAddFilterContainer>