Dropdown Button with Icon

[buseselvi]

We decided to add icon attribute to the Dropdown Button component according to needs.
Here you can see the design documentation.

[mfurkan60]

Great work!

Icon Animations: Adding a subtle animation to the icon when the dropdown opens or closes can enhance the user experience.

Additionally, for the Icon Positioning section, incorporating a feature that allows users to adjust the icon size for the active state would provide flexibility.

[erbilnas]

Adding Icon Attribute to Dropdown Button Component

Status

Accepted

Context

The dropdown button component needs to support an icon on its left side, which can be customized from the icon library. This enhancement will provide more flexibility in the visual representation of dropdown buttons and align with common UI patterns.

Decision

We will add a new icon attribute to the dropdown button component with the following characteristics:

• The attribute will be optional
• It will accept a string value representing the icon name from our icon library
• The icon will be positioned on the left side of the button label
• The right-side arrow icon will remain fixed and unchanged

Implementation Details

interface DropdownButtonProps {
  // ... existing props
  icon?: string; // Optional icon name from the icon library
}

Consequences

Positive

• Enhanced visual customization options for dropdown buttons
• Better alignment with modern UI patterns
• Consistent with other button components that support icons
• Improved user experience through visual indicators

Negative

• Slight increase in component complexity
• Additional documentation and maintenance required

Examples

<bl-dropdown icon="info">Dropdown with Info Icon</bl-dropdown>
<bl-dropdown icon="heart">Dropdown with Heart Icon</bl-dropdown>
<bl-dropdown icon="user">Dropdown with User Icon</bl-dropdown>

[github-actions]

🎉 This issue has been resolved in version 3.3.0-beta.8 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀