add prop to handle styles on Breadcrumb and fix sidebar icon

twentyhq · Sep 2, 2024 · 4784e72 · 4784e72
1 parent 574f610
commit 4784e72
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
-import { Fragment } from 'react';
+import { CSSProperties, Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
 type BreadcrumbProps = {
   className?: string;
-  links: { children: string; href?: string }[];
+  links: { children: string; href?: string; styles?: CSSProperties }[];
 };
 
 const StyledWrapper = styled.nav`
@@ -39,11 +39,13 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
     {links.map((link, index) => (
       <Fragment key={index}>
         {link.href ? (
-          <StyledLink title={link.children} to={link.href}>
+          <StyledLink style={link.styles} title={link.children} to={link.href}>
             {link.children}
           </StyledLink>
         ) : (
-          <StyledText title={link.children}>{link.children}</StyledText>
+          <StyledText style={link.styles} title={link.children}>
+            {link.children}
+          </StyledText>
         )}
         {index < links.length - 1 && '/'}
       </Fragment>

diff --git a/...nty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/...nty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -8,7 +8,12 @@ import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { Link, useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { IconComponent, MOBILE_VIEWPORT, Pill } from 'twenty-ui';
+import {
+  IconComponent,
+  MOBILE_VIEWPORT,
+  Pill,
+  TablerIconsProps,
+} from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 const DEFAULT_INDENTATION_LEVEL = 1;
@@ -22,7 +27,7 @@ export type NavigationDrawerItemProps = {
   subItemState?: NavigationDrawerSubItemState;
   to?: string;
   onClick?: () => void;
-  Icon: IconComponent;
+  Icon: IconComponent | ((props: TablerIconsProps) => JSX.Element);
   active?: boolean;
   danger?: boolean;
   soon?: boolean;
@@ -185,7 +190,11 @@ export const NavigationDrawerItem = ({
           <NavigationDrawerItemBreadcrumb state={subItemState} />
         )}
         {Icon && (
-          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.md} />
+          <Icon
+            style={{ minWidth: theme.icon.size.md }}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.md}
+          />
         )}
         <StyledItemLabel>{label}</StyledItemLabel>
         {soon && <Pill label="Soon" />}

diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@@ -176,10 +176,15 @@ export const SettingsObjectFieldEdit = () => {
           title={
             <Breadcrumb
               links={[
-                { children: 'Objects', href: '/settings/objects' },
+                {
+                  children: 'Objects',
+                  href: '/settings/objects',
+                  styles: { minWidth: 'max-content' },
+                },
                 {
                   children: activeObjectMetadataItem.labelPlural,
                   href: `/settings/objects/${objectSlug}`,
+                  styles: { maxWidth: '60%' },
                 },
                 { children: activeMetadataField.label },
               ]}

diff --git a/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@@ -181,10 +181,15 @@ export const SettingsObjectNewFieldStep2 = () => {
             <SettingsHeaderContainer>
               <Breadcrumb
                 links={[
-                  { children: 'Objects', href: '/settings/objects' },
+                  {
+                    children: 'Objects',
+                    href: '/settings/objects',
+                    styles: { minWidth: 'max-content' },
+                  },
                   {
                     children: activeObjectMetadataItem.labelPlural,
                     href: `/settings/objects/${objectSlug}`,
+                    styles: { maxWidth: '50%' },
                   },
                   { children: 'New Field' },
                 ]}