Skip to content
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

Closed
Bonapara opened this issue Apr 8, 2024 · 42 comments
Closed

Add Buttons Shortcuts Helpers to the Design System #4871

Bonapara opened this issue Apr 8, 2024 · 42 comments
Assignees
Labels
good first issue Good for newcomers scope: front Issues that are affecting the frontend side only size: short

Comments

@Bonapara
Copy link
Member

Bonapara commented Apr 8, 2024

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.

CleanShot 2024-04-08 at 10 38 26

Figma

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

@Bonapara Bonapara added good first issue Good for newcomers scope: front Issues that are affecting the frontend side only size: short labels Apr 8, 2024
@Bonapara

This comment was marked as off-topic.

@jss475
Copy link
Contributor

jss475 commented May 8, 2024

Hey @Bonapara!

Mind if I work on this?

@Bonapara
Copy link
Member Author

Bonapara commented May 9, 2024

Sure @jss475, Thanks!

@Bonapara
Copy link
Member Author

Bonapara commented Jul 1, 2024

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

@ehconitin
Copy link
Contributor

ehconitin commented Aug 12, 2024

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

@lucasbordeau
Copy link
Contributor

@Mihan786Chistie You can work on this issue

@Mihan786Chistie
Copy link
Contributor

Thanks @lucasbordeau, looking into it

@Mihan786Chistie
Copy link
Contributor

@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
Copy link
Member Author

Bonapara commented Sep 3, 2024

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
Copy link
Contributor

Mihan786Chistie commented Sep 3, 2024

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
Copy link
Member Author

Bonapara commented Oct 2, 2024

/oss.gg 150

Copy link

oss-gg bot commented Oct 2, 2024

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

@unrenamed
Copy link
Contributor

@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
Copy link
Member Author

Bonapara commented Oct 8, 2024

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

@unrenamed
Copy link
Contributor

/assign

@SaurabhRadke
Copy link

/assign

Copy link

oss-gg bot commented Oct 11, 2024

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

Copy link

oss-gg bot commented Oct 12, 2024

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

Copy link

oss-gg bot commented Oct 12, 2024

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

Copy link

oss-gg bot commented Oct 12, 2024

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

Copy link

oss-gg bot commented Oct 14, 2024

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

Copy link

oss-gg bot commented Oct 14, 2024

@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
Copy link

oss-gg bot commented Oct 16, 2024

@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
Copy link
Member Author

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

@nikhileshkumar21
Copy link

/assign

Copy link

oss-gg bot commented Oct 17, 2024

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
Copy link
Contributor

emshyu commented Nov 19, 2024

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
Copy link
Member Author

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

@emshyu
Copy link
Contributor

emshyu commented Nov 23, 2024

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

@tinchil
Copy link

tinchil commented Nov 23, 2024

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.

Image

@Bonapara
Copy link
Member Author

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

@muraliSingh7
Copy link
Contributor

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 :
Image

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
Copy link
Member Author

Bonapara commented Dec 2, 2024

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
Copy link
Contributor

emshyu commented Dec 5, 2024

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
Copy link
Member Author

Bonapara commented Dec 6, 2024

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

Thanks for your answer, will close this issue then

@Bonapara Bonapara closed this as completed Dec 6, 2024
@github-project-automation github-project-automation bot moved this from 🆕 New to ✅ Done in 🎯 Roadmap & Sprints Dec 6, 2024
FelixMalfait added a commit that referenced this issue Dec 10, 2024
…#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.

![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 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers scope: front Issues that are affecting the frontend side only size: short
Projects
Archived in project
Development

No branches or pull requests

15 participants