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 Custom CSS Properties for Border Radius, Style, and Color to bl-button #812

Closed
MehmetCanBOZ opened this issue Mar 13, 2024 · 4 comments
Assignees
Labels
bl-button Button Component related issues

Comments

@MehmetCanBOZ
Copy link
Contributor

Description
In split button design Figma, we need to add some CSS custom properties for borders to match with the design.

This issue aims to enhance the bl-button component's styling flexibility by introducing three new CSS custom properties:

  • --bl-button-border-radius
  • --bl-button-border-style
  • --bl-button-border-color

These properties will allow developers to more easily customize the appearance of bl-button components to fit the design requirements of their projects without modifying the component's internal CSS or structure.

@MehmetCanBOZ MehmetCanBOZ added the bl-button Button Component related issues label Mar 13, 2024
@MehmetCanBOZ MehmetCanBOZ self-assigned this Mar 13, 2024
@erbilnas
Copy link
Collaborator

erbilnas commented Mar 13, 2024

We don't need these attributes because we already have four styles: Default, Neutral, Success, and Danger. We want to enforce strictness for now in order to maintain consistency within the design system.

@MehmetCanBOZ
Copy link
Contributor Author

MehmetCanBOZ commented Mar 13, 2024

  • Is it possible to change the border radius of buttons?

  • For border style, in the secondary type of split button, the primary button and dropdown button are adjacent and to avoid overlapping borders each other, I think that if I give the "none" left border style of the dropdown button It solves the issue.

  • for border color, in the disabled type of split button, there is a divider between the primary button and the dropdown button. I think that if I give the specific border color to the right border of the split button It solves the issue.

You are right, maybe I can add a divider for the last one, but for the other ones, we can talk if they are necessary or not.

@erbilnas
Copy link
Collaborator

  • No, it isn't.
  • The border style shouldn't be changed by the developer, so I believe your solution is appropriate.
  • The button and the dropdown handler each have separate disabled attributes, so they should be considered as three different scenarios.

@erbilnas
Copy link
Collaborator

You could consider one of them as the new button inherited from our bl-button, while the other is an already existing component of bl-dropdown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bl-button Button Component related issues
Projects
None yet
Development

No branches or pull requests

2 participants