Split Button Component

[leventozen]

Figma

[muratcorlu]

Split Button Component Design Meeting Report

Date: 05.10.2022 15:30 (UTC+3)

• Split Button component is very similar to Dropdown Component with a key difference: Split Button is a Dropdown that one action is put forward as the main action.
• Split Button will be always a primary button.
• Split Button main action button can optionally have an icon.
• It'll have 3 size variants as button component has.
• Same rules will apply for the popover part of the Dropdown component.

[erbilnas]

Split Button (ADR)

Our goal is to create a new button type: the Split Button. Similar to the dropdown component, the key distinction lies in the fact that the Split Button presents one action as the primary focus. (Figma)

Status

Proposed (Feb 05, 2024)

Last edit (Feb 08, 2024)

Decision

We can utilize the existing codebase for our dropdown component, except for the element <div class="popover-content">. We need to replace it with bl-button featuring an icon.

You can review this in bl-dropdown.ts in line 141.

We need to be extremely careful with focused states. This implies that if the user presses the TAB button, it can shift the focus between the button and the popover opener. (Accessibility related)

We should inherit every attribute of bl-button except for dropdown because we don't need it.

Rationale

Integration

<bl-split-button label="Split Button" variant="secondary" size="large">
  <bl-dropdown-group caption="Caption">
    <bl-dropdown-item>Action 1</bl-dropdown-item>
    <bl-dropdown-item>Action 2</bl-dropdown-item>
  </bl-dropdown-group>

  <bl-dropdown-item>Action 3</bl-dropdown-item>

  <bl-dropdown-item icon="info">Action 4</bl-dropdown-item>

  <bl-dropdown-item>Action 5</bl-dropdown-item>

  <bl-dropdown-group caption="Caption">
    <bl-dropdown-item icon="heart">Action 6</bl-dropdown-item>
    <bl-dropdown-item>Action 7</bl-dropdown-item>
  </bl-dropdown-group>
</bl-split-button>

---

Split Button

Attribute	Description	Default Value	Type	Options
label	Sets the split button label.	' '	String
variant	Sets the split button variant.	'primary'	String	'primary', 'secondary'
kind	Sets the split button kind.	'default'	String	'default', 'neutral', 'success', 'danger'
size	Sets the split button size.	'medium'	String	'small', 'medium', 'large'
disabled	Sets button as disabled.	false	Boolean
loading-label	Sets the button label for loading status.	' '	String
loading	Sets loading state of button.	false	Boolean
href	Set link url. If set, button will be rendered as anchor tag.	' '	String
icon	Sets the icon name. Shows icon with bl-icon component.		BaklavaIcon	https://baklava.design/?path=/docs/design-system-icons-iconography--documentation
target	Sets the anchor target. Used when href is set.	_self	TargetType	_blank, _self, _parent, _top, framename
type	Sets the type of the button. Set submit to use button as the submitter of parent form.	'button '	String	'submit', 'button', 'reset'
autofocus	Sets button to get keyboard focus automatically.	false	Boolean
form	Sets the associated form of the button. Use when type is set to submit and button is not inside the target form.		HTMLFormElement
dropdown-disabled	Sets the button of dropdown handler as disabled.	false	Boolean

Events	Description
bl-click	Trigger an event for button click.
bl-dropdown-open	Trigger an event when popover opened.
bl-dropdown-close	Trigger an event when popover closed.

Dropdown Item

We should add these attributes for the Split Button component.

Attribute	Description	Default Value	Type	Options
disabled	Sets button as disabled.	false	Boolean

Integration Considerations

1. If we intend to utilize this button within the tooltip component, the tooltip will remain visible at all times when the dropdown is opened. During development, we need to verify the slot attribute of the tooltip-trigger and address this scenario accordingly.

Consequences

Let's discuss this either under this comment or during our weekly meetings.

[github-actions]

🎉 This issue has been resolved in version 3.0.0-beta.9 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 3.1.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀