Trendyol/baklava

Add Custom CSS Properties for Border Radius, Style, and Color to bl-button

Closed this issue · 4 comments

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.

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.

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

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

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.