Add Buttons Shortcuts Helpers to the Design System

[Bonapara]

Desired Behavior

We're planning to introduce an optional shortcut helper on buttons, with color variations (for text and vertical separator) based on different variants.

The separator and shortcut helper colors are different.

Figma

https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=27442-83448&mode=design&t=rBbwIqCdtFV9i9Jg-11

[Bonapara]

@DevStackArchitect You can ask for help in Discord :)

[jss475]

Hey @Bonapara!

Mind if I work on this?

[Bonapara]

Sure @jss475, Thanks!

[Bonapara]

Hi @jss475, I'm unassigning you. Ping me if you still want it!

[ehconitin]

@Bonapara Couldnt find these in figma. Could you please reshare the figma designs.

[lucasbordeau]

@Mihan786Chistie You can work on this issue

[Mihan786Chistie]

Thanks @lucasbordeau, looking into it

[Mihan786Chistie]

@Bonapara can you give more details for the issue. I am still very confused about it. Also the Figma designs doesn't seem to be updated as the one provided for the issue

[Bonapara]

The shortcuts helper are there but hidden otherwise they would appear everywhere in the Figma 😄

Duplicated the file and displayed them here: https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=38933-151210&node-type=FRAME&t=1bOEBMGNbJiNYwdc-11

Thanks @Mihan786Chistie!

[Mihan786Chistie]

Thanks for the clarification! I checked out the Figma file, but I’m still a bit confused about how to implement the color variations for the shortcut helper and separator. Could you guide me on how these color changes should be applied?@Bonapara

[Bonapara]

/oss.gg 150

[oss-gg[bot]]

Thanks for opening an issue! It's live on oss.gg!

[unrenamed]

@Bonapara Is the goal to enhance the existing button component (Button.tsx) with a keyboard shortcut action based on the provided Figma design, or should a new button component be composed for this?

[Bonapara]

Let's just start with the UI for now! Thanks @unrenamed

[unrenamed]

/assign

[oss-gg[bot]]

Assigned to @unrenamed! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[oss-gg[bot]]

@unrenamed, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[PremPrakashCodes]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[AdityaJadhav9423]

/assign

[oss-gg[bot]]

Assigned to @AdityaJadhav9423! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[SaurabhRadke]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[oss-gg[bot]]

@unrenamed, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg[bot]]

@AdityaJadhav9423, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[oss-gg[bot]]

@unrenamed, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg[bot]]

@AdityaJadhav9423, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg[bot]]

@AdityaJadhav9423, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.