Skip to content

Commit

Permalink
Remove split button example
Browse files Browse the repository at this point in the history
Split buttons cannot be made accessible:
openui#1077 (comment)
  • Loading branch information
josepharhar committed Aug 6, 2024
1 parent f2809b2 commit 22e179e
Showing 1 changed file with 1 addition and 24 deletions.
25 changes: 1 addition & 24 deletions site/src/pages/components/customizableselect.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -266,29 +266,6 @@ Here is another example with custom content in the listbox: [codepen](https://co
</div>
</div>

### Split buttons

<div className="code-image-container">
<div>
This example uses the [selectedoptionelement](#the-selectedoptionelement-attribute) attribute in order to have separate buttons which open the select's popover and another one which has the selected option content and submits a form. The image is taken from a richer example here: [link to codepen](https://codepen.io/una/pen/KKbNYbo).
```html
<button><selectedoption id=myselectedoption></selectedoption></button>
<select selectedoptionelement=myselectedoption>
<button>⬇️</button>
<option>Create a merge commit</option>
<option>Squash and merge</option>
<option>Rebase and merge</option>
</select>
```
</div>
<div>
<Image
src="/images/select-split-button.png"
alt="A customizable select element with a split button"
/>
</div>
</div>

## Button behavior

The first child `<button>` of a `<select>` will be slotted into the `<select>`'s UA ShadowRoot and will open the popup list of options.
Expand All @@ -303,7 +280,7 @@ Since the contents of the `<selectedoption>` element are maintained by the brows

## The `selectedoptionelement` attribute

`<select>` will support the `selectedoptionelement` attribute, which is an IDref which points to a single `<selectedoption>` element to update. This allows the `<selectedoption>` to exist outside of `<select>` in order to support the split buttons use case.
`<select>` will support the `selectedoptionelement` attribute, which is an IDref which points to a single `<selectedoption>` element to update. This allows the `<selectedoption>` to exist outside of `<select>` in order to support the other use cases.

## Testing out the customizable select element

Expand Down

0 comments on commit 22e179e

Please sign in to comment.