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

190 display ctrl instead of for windows users (#9617)

Browse Source 
Closes https://github.com/twentyhq/core-team-issues/issues/190

<img width="226" alt="Capture d’écran 2025-01-15 à 12 07 12"
src="https://github.com/user-attachments/assets/b9a13746-2629-477a-9795-cda03c63f8f6"
/>

To test, update the user agent in your browser dev tools:
<img width="459" alt="Capture d’écran 2025-01-15 à 12 14 29"
src="https://github.com/user-attachments/assets/4371d5fc-fd3c-403d-beaa-7ba58019d3c9"
/>
This commit is contained in:
Raphaël Bosi
2025-01-15 13:53:18 +01:00
committed by GitHub
parent 9ba510eb3f
commit ff93fd3c74
17 changed files with 136 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,8 @@ import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Pill } from '@ui/components/Pill/Pill';
import { IconComponent } from '@ui/display/icon/types/IconComponent';
import { useIsMobile } from '@ui/utilities';
import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator';
import React from 'react';
import { Link } from 'react-router-dom';
@ -29,7 +31,7 @@ export type ButtonProps = {
to?: string;
target?: string;
dataTestId?: string;
shortcut?: string;
hotkeys?: string[];
ariaLabel?: string;
} & React.ComponentProps<'button'>;
@ -417,11 +419,13 @@ export const Button = ({
to,
target,
dataTestId,
shortcut,
hotkeys,
ariaLabel,
}: ButtonProps) => {
const theme = useTheme();
const isMobile = useIsMobile();
return (
<StyledButton
fullWidth={fullWidth}
@ -443,11 +447,11 @@ export const Button = ({
>
{Icon && <Icon size={theme.icon.size.sm} />}
{title}
{shortcut && (
{hotkeys && !isMobile && (
<>
<StyledSeparator buttonSize={size} accent={accent} />
<StyledShortcutLabel variant={variant} accent={accent}>
{shortcut}
{hotkeys.join(getOsShortcutSeparator())}
</StyledShortcutLabel>
</>
)}

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

@ -23,7 +23,7 @@ type Story = StoryObj<typeof Button>;
export const Default: Story = {
argTypes: {
shortcut: { control: false },
hotkeys: { control: false },
Icon: { control: false },
},
args: {
@ -44,7 +44,7 @@ export const Default: Story = {
};
export const Catalog: CatalogStory<Story, typeof Button> = {
args: { title: 'Filter', Icon: IconSearch, shortcut: '' },
args: { title: 'Filter', Icon: IconSearch, hotkeys: ['⌘', 'O'] },
argTypes: {
size: { control: false },
variant: { control: false },
@ -127,7 +127,7 @@ export const SoonCatalog: CatalogStory<Story, typeof Button> = {
soon: { control: false },
position: { control: false },
className: { control: false },
shortcut: { control: false },
hotkeys: { control: false },
},
parameters: {
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@ -199,7 +199,7 @@ export const PositionCatalog: CatalogStory<Story, typeof Button> = {
fullWidth: { control: false },
soon: { control: false },
position: { control: false },
shortcut: { control: false },
hotkeys: { control: false },
},
parameters: {
pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@ -266,7 +266,7 @@ export const PositionCatalog: CatalogStory<Story, typeof Button> = {
};
export const ShortcutCatalog: CatalogStory<Story, typeof Button> = {
args: { title: 'Actions', shortcut: '⌘O' },
args: { title: 'Actions', hotkeys: ['⌘', 'O'] },
argTypes: {
size: { control: false },
variant: { control: false },