Skip to content

feat(list-item, list): add expanded property and deprecate open property #11003

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.

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

Merged
merged 17 commits into from
Mar 5, 2025

Conversation

Elijbet
Copy link
Contributor

@Elijbet Elijbet commented Dec 6, 2024

Related Issue: #6473, #11225

Summary

Deprecate open prop in favor of expanded. Add logger warning for deprecation to help inform users about the deprecated property and guide them towards using the recommended alternatives.

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 6, 2024
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Dec 17, 2024
@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Feb 15, 2025
@Elijbet Elijbet changed the title feat(list-item): deprecate open/close props in favor of expanded/collapsed deprecate(list-item): deprecate open/close props in favor of expanded/collapsed Feb 17, 2025
@Elijbet Elijbet marked this pull request as ready for review February 17, 2025 07:58
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

Code changes look good to me,

I think this PR title should be: feat(list-item): add expanded property and deprecate open property.

Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

Can you make sure all other demos and stories are updated with this change as well? Including the HTML files.

@Elijbet Elijbet changed the title deprecate(list-item): deprecate open/close props in favor of expanded/collapsed feat(list-item): add expanded property and deprecate open property Feb 18, 2025
@Elijbet Elijbet added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 19, 2025
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.

Looking good, @Elijbet! 😎 One more pass and this should be good to land.

Can you also revert the readme changes? Try git checkout dev -- ./readme.md (assumes your cwd is <path-to-projects>/calcite-design-system/packages/calcite-components).

@jcfranco
Copy link
Member

@Elijbet Can you also update the PR description to match the title/changes?

@Elijbet
Copy link
Contributor Author

Elijbet commented Feb 28, 2025

git checkout dev -- ./readme.md

@jcfranco I tried to roll back the readme.md but it won't let me commit it - says it's an empty commit. One suggestion was to edit the PR on GitHub and paste in the code from the main branch so it doesn't do any formatting locally with eslint. I can do that right before merge.

@jcfranco
Copy link
Member

Ah, that's fine then. Looks like that's coming from the linting fix, so you can leave it as is.

@Elijbet Elijbet changed the title feat(list-item): add expanded property and deprecate open property feat(list-item, list): add expanded property and deprecate open property Feb 28, 2025
@Elijbet Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Mar 3, 2025
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.

Awesome! 🚀

html: html`<calcite-list-item id="test" display-mode="nested"
><calcite-list display-mode="nested"><calcite-list-item></calcite-list-item></calcite-list
></calcite-list-item>`,
describe("calciteListItemToggle event", () => {
Copy link
Member

Choose a reason for hiding this comment

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

✨🏆✨

@Elijbet Elijbet added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Mar 5, 2025
@Elijbet Elijbet merged commit 359fd0d into dev Mar 5, 2025
13 checks passed
@Elijbet Elijbet deleted the elijbet/6473-update-open-close-pattern branch March 5, 2025 20:24
benelan added a commit that referenced this pull request Mar 6, 2025
* origin/dev: (80 commits)
  build(deps): update nx monorepo to v20.4.6 (#11662)
  build(deps): update arcgis to ^4.32.7 (#11648)
  build: update browserslist db (#11639)
  build(deps): update eslint (#11670)
  build(deps): update dependency chromatic to v11.26.1 (#11669)
  build(deps): update dependency rollup to v4.34.9 (#11661)
  build(deps): update dependency tsx to v4.19.3 (#11658)
  chore: release next
  docs(text-area): update limitText description (#11672)
  feat(block, block-section): add `expanded` property and deprecate `open` property (#11582)
  feat(list-item, list): add `expanded` property and deprecate `open` property (#11003)
  chore: release next
  fix(tabs): redisplay close button when more than one tab is closable (#11492)
  test(shell-panel): Fix token story set up (#11635)
  chore: set up 3rd-party license generation (#11640)
  build(deps): update dependency happy-dom to v17.1.8 (#11649)
  build(deps): update dependency prettier to v3.5.2 (#11642)
  build(deps): update dependency happy-dom to v17.1.6 (#11641)
  chore: release next
  fix(card-group): Restore default gap spacing (#11638)
  ...
benelan pushed a commit that referenced this pull request Mar 26, 2025
…roperty (#11003)

**Related Issue:** #6473, #11225

## Summary
Deprecate `open` prop in favor of `expanded`. Add logger warning for
deprecation to help inform users about the deprecated property and guide
them towards using the recommended alternatives.
benelan added a commit that referenced this pull request Mar 26, 2025
🤖 I have created a release *beep* *boop*
---


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

##
[3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)


### Bug Fixes

* Allow global focus color token to inherit fallback value
([#11711](#11711))
([a732c8d](a732c8d))

</details>

<details><summary>@esri/calcite-ui-icons: 4.1.0</summary>

##
[4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)


### Features

* Add browser join and browser plus
([#11779](#11779))
([8f69b2d](8f69b2d))
* Update check
([#11799](#11799))
([5058939](5058939))
* Add language-2
([#11739](#11739))
([989df67](989df67))

</details>

<details><summary>@esri/eslint-plugin-calcite-components:
2.0.1</summary>

##
[2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

**Note:** Version bump only for package
@esri/eslint-plugin-calcite-components

</details>

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

##
[3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)


### Features

* **accordion:** Add new component tokens and deprecate old tokens
([#11390](#11390))
([fdf3e61](fdf3e61))
* **action:** Enhance component's interactivity states
([#11478](#11478))
([aad98df](aad98df))
* **block, block-section:** Add `expanded` property and deprecate `open`
property
([#11582](#11582))
([999f532](999f532))
* **button:** Enhance component's interactivity states
([#11590](#11590))
([23a62ca](23a62ca))
* **chip:** Deprecate `pressed` in favor of `press`
([#11389](#11389))
([c905f9f](c905f9f))
* **chip:** Enhance component's interactivity states
([#11538](#11538))
([8db5697](8db5697))
* **combobox-item:** Add component tokens
([#11645](#11645))
([9cbd155](9cbd155))
* **combobox-item:** Update idle icons
([#11801](#11801))
([034f430](034f430))
* **combobox-item:** Update interactive state
([#11647](#11647))
([19d7c43](19d7c43))
* **combobox-item:** Update selection icons
([#11726](#11726))
([723fd22](723fd22))
* **combobox, combobox-item-group:** Add component tokens
([#11623](#11623))
([8215314](8215314))
* **dropdown, dropdown-item, dropdown-group:** Add component tokens
([#11465](#11465))
([85f9378](85f9378))
* **dropdown:** Add `offsetDistance` and `offsetSkidding` properties
([#11614](#11614))
([3381040](3381040))
* **fab:** Add component tokens
([#11723](#11723))
([d436514](d436514))
* **flow-item:** Expose `FlowItemLike` type
([#11791](#11791))
([28c7522](28c7522))
* **list-item, list:** Add `expanded` property and deprecate `open`
property
([#11003](#11003))
([c80c44c](c80c44c))
* **rating:** Enhance component's interactivity states
([#11469](#11469))
([11d83f6](11d83f6))
* **segmented-control-item:** Enhance component's interactivity states
([#11477](#11477))
([f025330](f025330))
* **split-button:** Make downloadable and linkable
([#11520](#11520))
([fb3e1dc](fb3e1dc))
* **tab-title:** Enhance component's interactivity states
([#11493](#11493))
([88a5260](88a5260))


### Bug Fixes

* **card-group:** Restore default gap spacing
([#11638](#11638))
([a554598](a554598))
* **dropdown-group:** Fix error caused by early removal
([#11612](#11612))
([2dcef25](2dcef25))
* **panel:** Apply custom styles correctly to header actions
([#11495](#11495))
([5e84892](5e84892))
* Set floating-ui elements max size set to the view
([#11577](#11577))
([b3ffd7f](b3ffd7f))
* **tabs:** Redisplay close button when more than one tab is closable
([#11492](#11492))
([ae8064e](ae8064e))
* **text-area:** Fix error caused by internal measuring on disconnect
([#11751](#11751))
([810f79e](810f79e))
* **tooltip:** Close tooltip when hovering out of an iframe
([#11600](#11600))
([93a5692](93a5692))
* **tooltip:** Do not open after the pointer has moved off of the
reference element
([#11599](#11599))
([33cadc8](33cadc8))

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0
  * devDependencies
    * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1
* @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to
2.0.1
</details>

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

##
[3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 3.1.0-next.31 to 3.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>
Co-authored-by: Ben Elan <[email protected]>
benelan added a commit that referenced this pull request Mar 26, 2025
🤖 I have created a release *beep* *boop*
---

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

[3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

* Allow global focus color token to inherit fallback value
([#11711](#11711))
([a732c8d](a732c8d))

</details>

<details><summary>@esri/calcite-ui-icons: 4.1.0</summary>

[4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

* Add browser join and browser plus
([#11779](#11779))
([8f69b2d](8f69b2d))
* Update check
([#11799](#11799))
([5058939](5058939))
* Add language-2
([#11739](#11739))
([989df67](989df67))

</details>

<details><summary>@esri/eslint-plugin-calcite-components:
2.0.1</summary>

[2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

**Note:** Version bump only for package
@esri/eslint-plugin-calcite-components

</details>

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

[3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

* **accordion:** Add new component tokens and deprecate old tokens
([#11390](#11390))
([fdf3e61](fdf3e61))
* **action:** Enhance component's interactivity states
([#11478](#11478))
([aad98df](aad98df))
* **block, block-section:** Add `expanded` property and deprecate `open`
property
([#11582](#11582))
([999f532](999f532))
* **button:** Enhance component's interactivity states
([#11590](#11590))
([23a62ca](23a62ca))
* **chip:** Deprecate `pressed` in favor of `press`
([#11389](#11389))
([c905f9f](c905f9f))
* **chip:** Enhance component's interactivity states
([#11538](#11538))
([8db5697](8db5697))
* **combobox-item:** Add component tokens
([#11645](#11645))
([9cbd155](9cbd155))
* **combobox-item:** Update idle icons
([#11801](#11801))
([034f430](034f430))
* **combobox-item:** Update interactive state
([#11647](#11647))
([19d7c43](19d7c43))
* **combobox-item:** Update selection icons
([#11726](#11726))
([723fd22](723fd22))
* **combobox, combobox-item-group:** Add component tokens
([#11623](#11623))
([8215314](8215314))
* **dropdown, dropdown-item, dropdown-group:** Add component tokens
([#11465](#11465))
([85f9378](85f9378))
* **dropdown:** Add `offsetDistance` and `offsetSkidding` properties
([#11614](#11614))
([3381040](3381040))
* **fab:** Add component tokens
([#11723](#11723))
([d436514](d436514))
* **flow-item:** Expose `FlowItemLike` type
([#11791](#11791))
([28c7522](28c7522))
* **list-item, list:** Add `expanded` property and deprecate `open`
property
([#11003](#11003))
([c80c44c](c80c44c))
* **rating:** Enhance component's interactivity states
([#11469](#11469))
([11d83f6](11d83f6))
* **segmented-control-item:** Enhance component's interactivity states
([#11477](#11477))
([f025330](f025330))
* **split-button:** Make downloadable and linkable
([#11520](#11520))
([fb3e1dc](fb3e1dc))
* **tab-title:** Enhance component's interactivity states
([#11493](#11493))
([88a5260](88a5260))

* **card-group:** Restore default gap spacing
([#11638](#11638))
([a554598](a554598))
* **dropdown-group:** Fix error caused by early removal
([#11612](#11612))
([2dcef25](2dcef25))
* **panel:** Apply custom styles correctly to header actions
([#11495](#11495))
([5e84892](5e84892))
* Set floating-ui elements max size set to the view
([#11577](#11577))
([b3ffd7f](b3ffd7f))
* **tabs:** Redisplay close button when more than one tab is closable
([#11492](#11492))
([ae8064e](ae8064e))
* **text-area:** Fix error caused by internal measuring on disconnect
([#11751](#11751))
([810f79e](810f79e))
* **tooltip:** Close tooltip when hovering out of an iframe
([#11600](#11600))
([93a5692](93a5692))
* **tooltip:** Do not open after the pointer has moved off of the
reference element
([#11599](#11599))
([33cadc8](33cadc8))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0
  * devDependencies
    * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1
* @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to
2.0.1
</details>

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

[3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 3.1.0-next.31 to 3.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>
Co-authored-by: Ben Elan <[email protected]>
benelan added a commit that referenced this pull request Mar 26, 2025
🤖 I have created a release *beep* *boop*
---

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


[3.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

* Allow global focus color token to inherit fallback value
([#11711](#11711))

([a732c8d](a732c8d))

</details>

<details><summary>@esri/calcite-ui-icons: 4.1.0</summary>


[4.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

* Add browser join and browser plus
([#11779](#11779))

([8f69b2d](8f69b2d))
* Update check
([#11799](#11799))

([5058939](5058939))
* Add language-2
([#11739](#11739))

([989df67](989df67))

</details>

<details><summary>@esri/eslint-plugin-calcite-components:
2.0.1</summary>


[2.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

**Note:** Version bump only for package
@esri/eslint-plugin-calcite-components

</details>

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


[3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

* **accordion:** Add new component tokens and deprecate old tokens
([#11390](#11390))

([fdf3e61](fdf3e61))
* **action:** Enhance component's interactivity states
([#11478](#11478))

([aad98df](aad98df))
* **block, block-section:** Add `expanded` property and deprecate `open`
property
([#11582](#11582))

([999f532](999f532))
* **button:** Enhance component's interactivity states
([#11590](#11590))

([23a62ca](23a62ca))
* **chip:** Deprecate `pressed` in favor of `press`
([#11389](#11389))

([c905f9f](c905f9f))
* **chip:** Enhance component's interactivity states
([#11538](#11538))

([8db5697](8db5697))
* **combobox-item:** Add component tokens
([#11645](#11645))

([9cbd155](9cbd155))
* **combobox-item:** Update idle icons
([#11801](#11801))

([034f430](034f430))
* **combobox-item:** Update interactive state
([#11647](#11647))

([19d7c43](19d7c43))
* **combobox-item:** Update selection icons
([#11726](#11726))

([723fd22](723fd22))
* **combobox, combobox-item-group:** Add component tokens
([#11623](#11623))

([8215314](8215314))
* **dropdown, dropdown-item, dropdown-group:** Add component tokens
([#11465](#11465))

([85f9378](85f9378))
* **dropdown:** Add `offsetDistance` and `offsetSkidding` properties
([#11614](#11614))

([3381040](3381040))
* **fab:** Add component tokens
([#11723](#11723))

([d436514](d436514))
* **flow-item:** Expose `FlowItemLike` type
([#11791](#11791))

([28c7522](28c7522))
* **list-item, list:** Add `expanded` property and deprecate `open`
property
([#11003](#11003))

([c80c44c](c80c44c))
* **rating:** Enhance component's interactivity states
([#11469](#11469))

([11d83f6](11d83f6))
* **segmented-control-item:** Enhance component's interactivity states
([#11477](#11477))

([f025330](f025330))
* **split-button:** Make downloadable and linkable
([#11520](#11520))

([fb3e1dc](fb3e1dc))
* **tab-title:** Enhance component's interactivity states
([#11493](#11493))

([88a5260](88a5260))

* **card-group:** Restore default gap spacing
([#11638](#11638))

([a554598](a554598))
* **dropdown-group:** Fix error caused by early removal
([#11612](#11612))

([2dcef25](2dcef25))
* **panel:** Apply custom styles correctly to header actions
([#11495](#11495))

([5e84892](5e84892))
* Set floating-ui elements max size set to the view
([#11577](#11577))

([b3ffd7f](b3ffd7f))
* **tabs:** Redisplay close button when more than one tab is closable
([#11492](#11492))

([ae8064e](ae8064e))
* **text-area:** Fix error caused by internal measuring on disconnect
([#11751](#11751))

([810f79e](810f79e))
* **tooltip:** Close tooltip when hovering out of an iframe
([#11600](#11600))

([93a5692](93a5692))
* **tooltip:** Do not open after the pointer has moved off of the
reference element
([#11599](#11599))

([33cadc8](33cadc8))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 4.1.0-next.3 to 4.1.0
  * devDependencies
    * @esri/calcite-design-tokens bumped from 3.0.1-next.4 to 3.0.1
* @esri/eslint-plugin-calcite-components bumped from 2.0.1-next.2 to
2.0.1
</details>

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


[3.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2025-03-26)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 3.1.0-next.31 to 3.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>
Co-authored-by: Ben Elan <[email protected]>

Co-authored-by: Calcite Admin <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Development

Successfully merging this pull request may close these issues.

3 participants