Toolbar should support content slotted across a shadow root

Open
#2,571 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
accessibility, frontend

Research direction

Start by reading the chat message template and the nimble-toolbar implementation, then review the slot behavior described in the issue and the context of #2528. The work is done when the message uses a toolbar, nested slotted buttons are detected and placed in the toolbar's start slot or an explicitly selected slot, and the intended toolbar keyboard behavior works.

Written by the indexing model from the issue text.

Description

enhancement

🙋 Feature Request

😯 Problem to Solve

#2552 added a slot to the chat message to allow clients to insert a series of feedback buttons:

Image

The UX spec implies (and Alice confirmed verbally) that these buttons should be in a toolbar. This would align with other similar parts like the rich text editor buttons and provide a better tab behavior where the entire toolbar is one tab stop (with navigation between buttons possible via arrow keys), preventing users from having to tab through lots of reaction buttons as they move around the page.

This was not possible to implement because the toolbar is unaware of buttons forwarded via a slot:

<my-element>
    #shadow-root
        <nimble-toolbar><slot name="my-actions" slot="start"></slot></nimble-toolbar>

   <!-- light dom -->
    <nimble-button slot="my-actions"></nimble-button>
</my-element>

💁 Proposed Solution

The slot should be within a nimble-toolbar.

📋 Tasks

  • add the toolbar to the message template (hopefully this is trivial now that #2528 is fixed)
  • update the toolbar to allow it to detect buttons in nested slots
  • ensure buttons are added to the toolbar's start slot (or provide a way for the client to specify which toolbar slot)
Dominant language
TypeScript
Stars
39
Forks
14
Avg merge
1d 16h
Merged PRs (30d)
13

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ni/nimble

All issues in ni/nimble

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.