Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(list-item): Add calciteListItemToggle event. #8433

Merged
merged 9 commits into from
Dec 16, 2023
Merged

feat(list-item): Add calciteListItemToggle event. #8433

merged 9 commits into from
Dec 16, 2023

Conversation

driskull
Copy link
Member

@driskull driskull commented Dec 15, 2023 •
edited
Loading

Related Issue: #8434

Summary

  • Adds calciteListItemToggle event for when a list item open is toggled via user interaction.
  • Adds test

@driskull driskull marked this pull request as ready for review December 15, 2023 21:04
@driskull driskull requested a review from a team as a code owner December 15, 2023 21:04
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 15, 2023
@driskull driskull added the skip visual snapshots Pull requests that do not need visual regression testing. label Dec 15, 2023
macandcheese
macandcheese reviewed Dec 15, 2023
View reviewed changes
packages/calcite-components/src/components.d.ts Outdated
/**
* Fires when the open button is clicked.
*/
"onCalciteListItemOpen"?: (event: CalciteListItemCustomEvent<void>) => void;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly because we already have ‘close’ event for the “close button” interaction, but is it possible to use Toggle here or something besides ‘open’? We use ‘calcitePanelToggle‘ in Panel. It could also fire when collapsed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I can do that. its mapped to the open property though.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it’s tough with existing ‘close’ as that, in practice, is more of “dismiss” - is Toggle is too close to ‘select’ event? OpenToggle?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated. Ill let @jcfranco comment on name as well.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TL;DR: I think we should go with calciteListItemToggle event firing when opened/closed.

I'd like to avoid introducing an event name that mixes both open/close and toggling. We could introduce an individual toggle event (similar to block's toggle event before we added open/close events) and check the event target's open value for now until we look more into the following:

Unfortunately, list is in a bit of a tough spot with some of these props and patterns we're adopting.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks 👍

@driskull driskull changed the title feat(list-item): Add calciteListItemOpen event. feat(list-item): Add calciteListItemToggle event. Dec 15, 2023
@driskull driskull changed the title feat(list-item): Add calciteListItemToggle event. feat(list-item): Add calciteListItemOpenToggle event. Dec 15, 2023
@driskull driskull changed the title feat(list-item): Add calciteListItemOpenToggle event. feat(list-item): Add calciteListItemToggle event. Dec 15, 2023
jcfranco
jcfranco approved these changes Dec 16, 2023
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noice! 😎

Once the E2E test is updated, this should be good to merge!

packages/calcite-components/src/components/list-item/list-item.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/list-item/list-item.e2e.ts Outdated Show resolved Hide resolved
packages/calcite-components/src/components/list-item/list-item.tsx Outdated Show resolved Hide resolved
@driskull driskull merged commit 1d2fa04 into main Dec 16, 2023
11 checks passed
@driskull driskull deleted the dris0000/list-item-open-event branch December 16, 2023 00:47
@github-actions github-actions bot added this to the 2023 December Priorities milestone Dec 16, 2023
@calcite-admin calcite-admin mentioned this pull request Dec 16, 2023
Merged
benelan pushed a commit that referenced this pull request Dec 19, 2023
@calcite-admin @github-actions
chore: release main (#8329)
44d4b83 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-12-19)


### Features

* **font tokens:** Add font family fallbacks
([#8389](#8389))
([b2fd255](b2fd255))
* Update tokens for better documentation
([#8395](#8395))
([ff19630](ff19630))


### Bug Fixes

* **color tokens:** Fix errors in schema
([#8446](#8446))
([f36a90e](f36a90e))
* **color-context tokens:** Only apply when `.calcite-mode-auto` is
applied
([#8344](#8344))
([19de817](19de817))
* Replace "\n" to support Windows for tokens output
([#8352](#8352))
([02cf5d5](02cf5d5))
</details>

<details><summary>@esri/calcite-components: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-12-19)


### Features

* Add `validation-message` and `validation-icon` attributes to form
components for new internal `calcite-input-message`
([#8305](#8305))
([a554cfd](a554cfd))
* **dropdown-item:** Add disabled support
([#8312](#8312))
([4c311c6](4c311c6))
* **list-item:** Add calciteListItemToggle event.
([#8433](#8433))
([1d2fa04](1d2fa04))
* **list:** Add `calciteListDragStart` and `calciteListDragEnd` events
for when a drag starts and ends.
([#8361](#8361))
([1314605](1314605))
* **list:** Add drag event details to `calciteListDragStart` and
`calciteListDragEnd` events
([#8438](#8438))
([e199c08](e199c08))
* Provide legacy CSS custom props for backwards compatibility
([#8355](#8355))
([b0f063e](b0f063e))


### Bug Fixes

* **action-menu:** Filter hidden or disabled actions via keyboard.
([#8336](#8336))
([11c0007](11c0007))
* **action-menu:** Fix closing action menu after a drag occurs
([#8339](#8339))
([dcb8548](dcb8548))
* **action-menu:** Keep internal popover open property in sync
([#8387](#8387))
([38dff7c](38dff7c))
* **dropdown-item:** Avoid hover/active styling when disabled
([#8398](#8398))
([35817dc](35817dc))
* **floating-ui:** Improve floating element performance
([#8409](#8409))
([4d8cfb8](4d8cfb8))
* **input-date-picker:** Ensure range input toggling is consistent
([#8414](#8414))
([cd92586](cd92586))
* **input-date-picker:** No longer emits redundant change event
([#8341](#8341))
([cd5b92b](cd5b92b))
* **input-date-picker:** Respect the numberingSystem property when
rendering the input
([#8383](#8383))
([395b538](395b538))
* **list-item:** Drag grid cell should be accessible via arrow keys.
([#8353](#8353))
([2718ab3](2718ab3))
* **menu-item:** Improve keyboard navigability when `href` populated
([#8408](#8408))
([5b44798](5b44798))
* **modal:** Ensure document overflow styles are properly restored when
multiple modals are closed/removed
([#8390](#8390))
([f2c6b09](f2c6b09))
* Replace "\n" to support Windows for tokens output
([#8352](#8352))
([02cf5d5](02cf5d5))
* **shell-panel:** Adds border at the start when slotted in `panel-end`
([#8314](#8314))
([2d1a1e2](2d1a1e2))
* **shell, shell-panel:** Support resizing shell panel when there is an
iframe slotted in shell content
([#8317](#8317))
([e0f69c9](e0f69c9))
* **stepper:** Emits `calciteStepperItemChange` event when switched to
first step
([#8422](#8422))
([508979f](508979f))
* **table-cell:** Fix background css variable
([#8439](#8439))
([9e5c59b](9e5c59b))
* **tab:** Prevent vertical scrollbar on content pane when the height of
outer elements are specified
([#8399](#8399))
([9e6d901](9e6d901))
* Use Stencil watchers instead of global attributes util
([#8407](#8407))
([c531d81](c531d81))


### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @esri/calcite-design-tokens bumped from ^2.1.0-next.1 to ^2.1.0
</details>

<details><summary>@esri/calcite-components-angular: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-12-19)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.0
</details>

<details><summary>@esri/calcite-components-react: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-12-19)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@calcite-admin calcite-admin mentioned this pull request May 14, 2024
Merged
@calcite-admin calcite-admin mentioned this pull request May 28, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@macandcheese macandcheese macandcheese left review comments

@jcfranco jcfranco jcfranco approved these changes

Assignees

@driskull driskull

Labels
enhancement Issues tied to a new feature or request. skip visual snapshots Pull requests that do not need visual regression testing.
Projects
None yet
Milestone
2023 December Priorities
Development

Successfully merging this pull request may close these issues.
3 participants
@driskull @jcfranco @macandcheese