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.

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

feat(tile-group): add Tile Group component #8806

Merged
merged 15 commits into from
Feb 22, 2024
Merged

Conversation

eriklharper
Copy link
Contributor

Related Issues: #8615 #6691 #6662

Summary

This PR adds the new calcite-tile-group component. It includes these responsiveness features that address #6691:

  • Wrapped Tiles match width of Tiles above
  • Wrapped Tiles match height of tallest Tile in the group

The changes in this PR were extracted from and depend on the changes in #8681.

@eriklharper eriklharper requested a review from a team as a code owner February 22, 2024 00:34
@eriklharper eriklharper requested a review from jcfranco February 22, 2024 00:34
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Feb 22, 2024
@eriklharper eriklharper added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Feb 22, 2024
@eriklharper eriklharper 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 Feb 22, 2024
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! 🚀 Approving to get this landed, but let's address comments in a separate PR.

Also, can we add a usage file for this new component (see https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/conventions/Documentation.md#usage-snippets)?

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.

Should an entry be added to the stencil configuration as well?

Looks great 👍

//--------------------------------------------------------------------------

private updateTiles = (): void => {
this.el.querySelectorAll("calcite-tile").forEach((item) => (item.scale = this.scale));
Copy link
Member

Choose a reason for hiding this comment

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

Maybe for future but can we get the slotted assigned elements instead of querying the dom?

@jcfranco
Copy link
Member

Should an entry be added to the stencil configuration as well?

Agreed. Good catch!

@jcfranco jcfranco added the low risk Issues with low risk for consideration in low risk milestones label Feb 22, 2024
@jcfranco jcfranco merged commit 4f65bdd into main Feb 22, 2024
16 of 19 checks passed
@jcfranco jcfranco deleted the eriklharper/8615-tile-group branch February 22, 2024 19:09
eriklharper added a commit that referenced this pull request Feb 23, 2024
**Related Issue:** #8806

## Summary

This is a follow-up for #8806, addressing comments in the review. No
changes to functionality.

---------

Co-authored-by: Erik Harper <[email protected]>
geospatialem pushed a commit that referenced this pull request Feb 27, 2024
🤖 I have created a release *beep* *boop*
---


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

##
[2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-02-27)


### Features

* **card-group:** Add Card Group component
([#8749](#8749))
([b012324](b012324))
* **tile-group:** Add Tile Group component
([#8806](#8806))
([4f65bdd](4f65bdd))


### Bug Fixes

* **combobox:** Long text truncates on single and single-persist modes
([#8731](#8731))
([8fc42b1](8fc42b1))
* **navigation-logo:** No longer changes icon color when `href` is
parsed
([#8830](#8830))
([16d456f](16d456f))
* Only show validation message when status='invalid'
([#8649](#8649))
([7eac8d7](7eac8d7))
* **preset:** Calcite—color-brand to calcite-color-brand
([#8809](#8809))
([ee2cf4e](ee2cf4e))
* **table:** Ensure border are correctly applied with complex rowSpan
([#8779](#8779))
([69f05d4](69f05d4))
</details>

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

##
[2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-02-27)


### Miscellaneous Chores

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


### Dependencies

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

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

##
[2.6.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2024-02-27)


### Miscellaneous Chores

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


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.6.0-next.3 to ^2.6.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>
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. low risk Issues with low risk for consideration in low risk milestones pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants