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

[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]

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

[SaurabhRadke]

/assign

[oss-gg]

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

[oss-gg]

@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]

@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]

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

[oss-gg]

@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]

@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]

@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.

[Bonapara]

Hi @AdityaJadhav9423, I am unassigning you as it has been 1 week. Thanks for contributing!

[nikhileshkumar21]

/assign

[oss-gg]

Assigned to @nikhileshkumar21! 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 🚀

[emshyu]

Hi @Bonapara! I am currently working in a group of 5 students from CMU taking an introductory software engineering course, and our final project is to contribute to an open-source repo. Our project has multiple checkpoints and will be due on December 8 (meaning our PR will take longer to open). Would it be possible for us to be assigned to this issue (or do you have any issues that would be a good fit)? Thanks!

[Bonapara]

Hi yes @emshyu, glad to be your first contribution to open-source!

[emshyu]

Thanks! Sorry for my groupmate's spam, in total we are looking for two issues.

[tinchil]

Hi @Bonapara, would you be able to clarify what do you mean by the "Design System". Is there a particular section/part of the website you would like to see the Filter Shortcut Added? Would it be something similar to the image below, or do u just want edits to the Button.tsx component to allow for different color choices.

[Bonapara]

Hi @tinchil! We would like to add a parameter to the button.tsx component indeed.

[muraliSingh7]

Hey @Bonapara ,

I think the filter, sort, and options are separate from the button itself, and they are actually customized button components. For instance, the filter is using a component called MultipleFiltersButton.tsx. I tried customizing MultipleFiltersButton, and it worked as expected. Here is the screenshot :

However, for all buttons, we’ll need to identify which ones need customization and which ones don’t. If you’d like the button to include the shortcut and left icon, those features already exist in the Button.tsx component; you just need to add the shortcuts and icons where necessary.

This is my understanding of the current issue. If anything is unclear or if I have misunderstood your expectations, please provide further clarification.

[Bonapara]

Hi @muraliSingh7 This design only regards the Button component, and not the light icon buttons. @lucasbordeau can you guide @muraliSingh7? I don't have a such MultipleFiltersButton.tsx button in Figma.

[emshyu]

Hi @Bonapara, I agree with @muraliSingh7 and it seems that separators and shortcuts seem to already be included in Button.tsx. I am currently writing storybook tests, but I am having trouble with running the catalog tests for Button.stories.tsx. Is there a way for me to find them (view all the ways buttons are displayed depending on variant/color) in the local storyboard UI?

[Bonapara]

I guess there @emshyu? https://storybook.twenty.com/

Thanks for your answer, will close this issue then