Skip to content

[Tile/Tile Group] Support responsive grid-like behavior #15041

Description

@geospatialem

monday.com sync: #12838287354

Check existing issues

Which Component

Tile, Tile Group

Actual Behavior

This surfaced in a post-UC discussion with a customer who is trying to achieve a responsive behavior when using tile-group with child tiles within a dialog and smaller screen real estate. The responsive behavior is relatively difficult to achieve, and its something we considered while designing the tile-group in coordination with the tile components.

We should work towards a solution that fits with card and create a consistent pattern across the design system.

Note: A workaround exists where users can specify both CSS and JS to modify tile to fit different resolutions.

Expected Behavior

  • An easier story for developers to implement
  • Consistency with other components, in particular card [example]
Click to expand some discussion notes
  • Consider hosting styles from inline-block to flex/inline-flex - Note: This is a visual change
  • Consider a way for users to configure different offerings with minimal code similar to this approach, such as a variable or prop to control the "minmax" value

Reproduction Sample

https://codepen.io/geospatialem/pen/MYJMQBR

Reproduction Steps

  1. Open the sample
  2. Observe JS and CSS is needed to achieve functionality across different resolutions
  3. When working with Flex, observe the same behavior cannot be duplicated or created

Reproduction Version

5.1

Relevant Info

Related to the work when creating the new tile-group component with #8687

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Med/High - while card is rather easy to configure, tile is less intuitive.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/calcite-ui-icons
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Calcite (dev)Issues logged by Calcite developers.bugBug reports for broken functionality. Issues should include a reproduction of the bug.c-tileIssues that pertain to the calcite-tile and related componentsc-tile-groupIssues that pertain to the calcite-tile-group componentcalcite-componentsIssues specific to the @esri/calcite-components package.has workaroundIssues have a workaround available in the meantime.impact - p2 - want for an upcoming milestoneUser set priority impact status of p2 - want for an upcoming milestoneneeds triagePlanning workflow - pending design/dev review.regressionIssues that are caused by changes in a release, but were working before that.spikeIssues that need quick investigations for time estimations, prioritization, or a quick assessment.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions