-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Buttons Shortcuts Helpers to the Design System #4871
Comments
This comment was marked as off-topic.
This comment was marked as off-topic.
Hey @Bonapara! Mind if I work on this? |
Sure @jss475, Thanks! |
Hi @jss475, I'm unassigning you. Ping me if you still want it! |
@Bonapara Couldnt find these in figma. |
@Mihan786Chistie You can work on this issue |
Thanks @lucasbordeau, looking into it |
@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 |
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! |
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 |
/oss.gg 150 |
Thanks for opening an issue! It's live on oss.gg! |
@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? |
Let's just start with the UI for now! Thanks @unrenamed |
/assign |
/assign |
This issue is already assigned to another person. Please find more issues here. |
@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. |
@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. |
This issue is already assigned to another person. Please find more issues here. |
@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. |
@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. |
1 similar comment
@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. |
Hi @AdityaJadhav9423, I am unassigning you as it has been 1 week. Thanks for contributing! |
/assign |
Assigned to @nikhileshkumar21! Please open a draft PR linking this issue within 48h |
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! |
Hi yes @emshyu, glad to be your first contribution to open-source! |
Thanks! Sorry for my groupmate's spam, in total we are looking for two issues. |
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. |
Hi @tinchil! We would like to add a parameter to the |
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 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 This is my understanding of the current issue. If anything is unclear or if I have misunderstood your expectations, please provide further clarification. |
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 |
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? |
I guess there @emshyu? https://storybook.twenty.com/ Thanks for your answer, will close this issue then |
…#8947) 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.    --------- Co-authored-by: Félix Malfait <[email protected]>
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
The text was updated successfully, but these errors were encountered: