twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-22 19:41:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added Button Shortcut Style Enhancements + Additional Storybook Tests (#8947)

Browse Source 
Resolves Issue #4871 (or enhances)

**Additions**
- **Customized Styling for Button Shortcuts:** Previously, button
shortcuts/separator styling was standardized. We added customized
styling for optional button shortcuts based on button accents and
variants.
- **Enhanced Storybook Catalogs:** We modified ShortcutCatalog in
Button.stories.tsx to display button shortcuts across styles and various
inputs.

![Screenshot 2024-12-07 at 9 16
35 PM](https://github.com/user-attachments/assets/f56ec269-d5d4-45d7-b490-e5632371f9b2)
![Screenshot 2024-12-07 at 9 16
30 PM](https://github.com/user-attachments/assets/04c3b7a9-a0bb-49fc-ae30-6e488f9658dd)
![Screenshot 2024-12-07 at 9 16
22 PM](https://github.com/user-attachments/assets/a22847c2-f5da-4a10-9a0d-f07389e1751e)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Emily Yu 2024-12-10 02:27:11 -05:00 committed by GitHub
parent bb5cc7e30c
commit 0654d814c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 54 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/twenty-ui/src/input/button/components/Button.tsx
View File

@ -360,17 +360,43 @@ const StyledSoonPill = styled(Pill)`
margin-left: auto;
`;
const StyledShortcutLabel = styled.div`
color: ${({ theme }) => theme.font.color.light};
font-weight: ${({ theme }) => theme.font.weight.medium};
const StyledSeparator = styled.div<{
buttonSize: ButtonSize;
accent: ButtonAccent;
}>`
background: ${({ theme, accent }) => {
switch (accent) {
case 'blue':
return theme.color.blue30;
case 'danger':
return theme.border.color.danger;
default:
return theme.font.color.light;
}
}};
height: ${({ theme, buttonSize }) =>
theme.spacing(buttonSize === 'small' ? 2 : 4)};
margin: 0;
width: 1px;
`;
const StyledSeparator = styled.div<{ buttonSize: ButtonSize }>`
background: ${({ theme }) => theme.border.color.light};
height: ${({ theme, buttonSize }) =>
theme.spacing(buttonSize === 'small' ? 3 : 4)};
margin: 0 ${({ theme }) => theme.spacing(1)};
width: 1px;
const StyledShortcutLabel = styled.div<{
variant: ButtonVariant;
accent: ButtonAccent;
}>`
color: ${({ theme, variant, accent }) => {
switch (accent) {
case 'blue':
return theme.color.blue30;
case 'danger':
return variant === 'primary'
? theme.border.color.danger
: theme.color.red40;
default:
return theme.font.color.light;
}
}};
font-weight: ${({ theme }) => theme.font.weight.medium};
`;
export const Button = ({
@ -419,8 +445,10 @@ export const Button = ({
{title}
{shortcut && (
<>
<StyledSeparator buttonSize={size} />
<StyledShortcutLabel>{shortcut}</StyledShortcutLabel>
<StyledSeparator buttonSize={size} accent={accent} />
<StyledShortcutLabel variant={variant} accent={accent}>
{shortcut}
</StyledShortcutLabel>
</>
)}
{soon && <StyledSoonPill label="Soon" />}

18
packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
View File

@ -44,7 +44,7 @@ export const Default: Story = {
};
export const Catalog: CatalogStory<Story, typeof Button> = {
args: { title: 'Filter', Icon: IconSearch },
args: { title: 'Filter', Icon: IconSearch, shortcut: '' },
argTypes: {
size: { control: false },
variant: { control: false },
@ -55,7 +55,6 @@ export const Catalog: CatalogStory<Story, typeof Button> = {
soon: { control: false },
position: { control: false },
className: { control: false },
shortcut: { control: false },
},
parameters: {
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@ -277,7 +276,6 @@ export const ShortcutCatalog: CatalogStory<Story, typeof Button> = {
fullWidth: { control: false },
soon: { control: false },
position: { control: false },
shortcut: { control: false },
},
parameters: {
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@ -288,6 +286,20 @@ export const ShortcutCatalog: CatalogStory<Story, typeof Button> = {
values: ['small', 'medium'] satisfies ButtonSize[],
props: (size: ButtonSize) => ({ size }),
},
{
name: 'accents',
values: ['default', 'blue', 'danger'] satisfies ButtonAccent[],
props: (accent: ButtonAccent) => ({ accent }),
},
{
name: 'variants',
values: [
'primary',
'secondary',
'tertiary',
] satisfies ButtonVariant[],
props: (variant: ButtonVariant) => ({ variant }),
},
],
},
},