Dispatch composed events #483
Conversation
🦋 Changeset detectedLatest commit: d5b628d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
src/tab.group.ts
Outdated
| this.dispatchEvent( | ||
| new CustomEvent('tab-show', { | ||
| tab.dispatchEvent( | ||
| new Event('active', { |
There was a problem hiding this comment.
Tab Group (via Tab) dispatches "active" while Tree dispatches "selected". We probably don't need two different names for more or less the same thing. What do you think?
Of the two, I favor "selected" because it doesn't include other connotations, from :active, like "active" does.
There was a problem hiding this comment.
Of the two, I favor "selected" because it doesn't include other connotations, from :active, like "active" does.
Same here
There was a problem hiding this comment.
Sweet. I'll take it as a followup.
There was a problem hiding this comment.
Morning + PTO brain. I'll do it with this PR given I'm already changing it.
There was a problem hiding this comment.
Pushed a commit if you want to take a look.
0440cfd to
926dfb2
Compare
| expect(event.bubbles).to.be.true; | ||
| }); | ||
|
|
||
| it('dispatches a "clear" event', async () => { |
There was a problem hiding this comment.
Does anyone remember why we're dispatching a "clear" event instead of "input" and "change" events?
There was a problem hiding this comment.
I don't, no. May be leftover from the original repository when we were still figuring things out. They can get the same information (that something was cleared) from change and input as you were saying, I think. Update away!
There was a problem hiding this comment.
Nice. Will do as a followup.
453a2fd to
c3cf965
Compare
src/button-group.stories.ts
Outdated
| summary: 'method', | ||
| detail: 'event: "change" | "input", handler: (event: Event) => void', | ||
| detail: | ||
| '(event: "change" | "input", handler: (event: Event) => void) => void', |
.changeset/long-pumas-lay.md
Outdated
| Most component events are now [`composed`](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed). | ||
| "change", "close", and "toggle" events are still not composed to match native. | ||
| We're happy to deviate from native and make them composed. | ||
| So let us know if you have a use case. |
There was a problem hiding this comment.
No doubt a use case will present itself. Until then I figure we hold the line—however awkward it is. It may turn out that native has a good reason for not composing those events.
src/tab.group.ts
Outdated
| this.dispatchEvent( | ||
| new CustomEvent('tab-show', { | ||
| tab.dispatchEvent( | ||
| new Event('active', { |
There was a problem hiding this comment.
Of the two, I favor "selected" because it doesn't include other connotations, from :active, like "active" does.
Same here
| expect(event.bubbles).to.be.true; | ||
| }); | ||
|
|
||
| it('dispatches a "clear" event', async () => { |
There was a problem hiding this comment.
I don't, no. May be leftover from the original repository when we were still figuring things out. They can get the same information (that something was cleared) from change and input as you were saying, I think. Update away!
src/tab.group.ts
Outdated
| this.dispatchEvent( | ||
| new CustomEvent('tab-show', { | ||
| tab.dispatchEvent( | ||
| new Event('active', { |
6d6679c to
cca0f37
Compare
cca0f37 to
d5b628d
Compare
|
Rebased onto |
🚀 Description
From the changesets:
Most component events are now
composed. "change", "close", and "toggle" events are still not composed to match native.Tree no longer dispatches an "item-selected" event. It instead dispatches a bubbling "selected" event from the selected Tree Item. The event's
targetproperty is set to that Tree Item.Tab Group no longer dispatches a "tab-show". It instead dispatches a bubbling "active" event from the activated Tab. The event's
targetproperty is set to that Tab.📋 Checklist
🔬 How to Test
Your guess is as good as mine! Maybe add a couple event listeners to different components and verify their events. Pay special attention to Tab, Tab Group, and Tree.
📸 Images/Videos of Functionality
N/A