admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improve command menu chip design (#9915)

Browse Source 
Before:

<img width="236" alt="Capture d’écran 2025-01-29 à 17 07 13"
src="https://github.com/user-attachments/assets/edc277f3-3e50-405a-9981-3ac63e270f3f"
/>
<img width="259" alt="Capture d’écran 2025-01-29 à 17 07 23"
src="https://github.com/user-attachments/assets/81863c50-5b96-4cbf-bc15-ab437d839fa1"
/>
<img width="224" alt="Capture d’écran 2025-01-29 à 17 07 41"
src="https://github.com/user-attachments/assets/c0783544-6928-4b05-bf86-66d37ddca5e5"
/>

After:

<img width="230" alt="Capture d’écran 2025-01-29 à 17 03 49"
src="https://github.com/user-attachments/assets/c47be446-32fa-40d1-af25-207ed91c0ea2"
/>
<img width="254" alt="Capture d’écran 2025-01-29 à 17 04 15"
src="https://github.com/user-attachments/assets/99b9ab30-c77d-4392-8ef6-2a1a5fb00047"
/>
<img width="218" alt="Capture d’écran 2025-01-29 à 17 04 37"
src="https://github.com/user-attachments/assets/6e214a42-438d-495f-9855-fd5397fcc6d3"
/>
This commit is contained in:
Raphaël Bosi
2025-01-29 17:37:59 +01:00
committed by GitHub
parent 9d32e63111
commit 04bc42aa47
6 changed files with 32 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
View File

@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { Fragment } from 'react/jsx-runtime';
const StyledChip = styled.div<{ variant?: 'default' | 'small' }>`
const StyledChip = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.transparent.light};
border: 1px solid ${({ theme }) => theme.border.color.medium};
@ -8,8 +9,7 @@ const StyledChip = styled.div<{ variant?: 'default' | 'small' }>`
box-sizing: border-box;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
height: ${({ theme, variant }) =>
variant === 'small' ? theme.spacing(6) : theme.spacing(8)};
height: ${({ theme }) => theme.spacing(6)};
padding: 0 ${({ theme }) => theme.spacing(2)};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -21,43 +21,18 @@ const StyledIconsContainer = styled.div`
display: flex;
`;
const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>`
background: ${({ theme, withIconBackground }) =>
withIconBackground ? theme.background.primary : 'unset'};
border-radius: ${({ theme }) => theme.border.radius.sm};
padding: ${({ theme }) => theme.spacing(0.5)};
border: 1px solid
${({ theme, withIconBackground }) =>
withIconBackground ? theme.border.color.medium : 'transparent'};
&:not(:first-of-type) {
margin-left: -${({ theme }) => theme.spacing(1)};
}
display: flex;
align-items: center;
justify-content: center;
`;
export const CommandMenuContextChip = ({
Icons,
text,
withIconBackground,
variant = 'default',
}: {
Icons: React.ReactNode[];
text?: string;
withIconBackground?: boolean;
variant?: 'default' | 'small';
}) => {
return (
<StyledChip variant={variant}>
<StyledChip>
<StyledIconsContainer>
{Icons.map((Icon, index) => (
<StyledIconWrapper
key={index}
withIconBackground={withIconBackground}
>
{Icon}
</StyledIconWrapper>
<Fragment key={index}>{Icon}</Fragment>
))}
</StyledIconsContainer>
<span>{text}</span>