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

[Tile] Responsive Layout #6690

Closed
4 tasks
brittneytewks opened this issue Mar 28, 2023 · 6 comments
Closed
4 tasks

[Tile] Responsive Layout #6690

brittneytewks opened this issue Mar 28, 2023 · 6 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. c-tile Issues that pertain to the calcite-tile and related components Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation.
Milestone
2024-02-15 - Feb ...

Comments

@brittneytewks
Copy link

brittneytewks commented Mar 28, 2023 •
edited
Loading

Description

Responsiveness across Calcite Design System, focused on web (traditionally desktop sized web browser), tablet, phone screen sizes, and large monitors.

Acceptance Criteria

  1. Consider breaking changes for folks. Consultation should occur on both the design and development teams.
  2. Components need to be designed for the following breakpoints:
  • Small (s), 476px
  • Medium (m), 768px
  • Large (l), 1152px
  • Extra larger (xl), 1440px

Relevant Info

Part of epic #6670

Which Component

tile

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

Calcite (design)
@brittneytewks brittneytewks added enhancement Issues tied to a new feature or request. design Issues that need design consultation prior to development. p - high Issue should be addressed in the current milestone, impacts component or core functionality 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. estimate - 8 Requires input from team, consider smaller steps. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Mar 28, 2023
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Mar 28, 2023
@brittneytewks brittneytewks mentioned this issue Mar 28, 2023
Closed
27 tasks
@brittneytewks brittneytewks removed the needs triage Planning workflow - pending design/dev review. label Mar 28, 2023
@brittneytewks brittneytewks changed the title [tile] Responsive Layout [Tile] Responsive Layout Mar 28, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Mar 30, 2023
@brittneytewks brittneytewks added 0 - new New issues that need assignment. and removed 1 - assigned Issues that are assigned to a sprint and a team member. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Mar 31, 2023
@SkyeSeitz SkyeSeitz self-assigned this Apr 14, 2023
@SkyeSeitz
Copy link

I will be rolling responsive layout considerations into the Tile redesign epic in June.

@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label May 4, 2023
@geospatialem geospatialem mentioned this issue May 4, 2023
Closed
38 tasks
@macandcheese macandcheese added the c-tile Issues that pertain to the calcite-tile and related components label May 5, 2023
@ashetland ashetland removed this from the Design Sprint Next milestone Aug 18, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Oct 23, 2023
@brittneytewks brittneytewks removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Dec 12, 2023
@geospatialem
Copy link
Member

Closing as effort will instead focus on responsive layout with the effort of the tile redesign and new component tile-group in #6662 and #8615 respectively.

@geospatialem geospatialem closed this as not planned Won't fix, can't repro, duplicate, stale Jan 25, 2024
This was referenced Feb 1, 2024
Closed
Merged
@eriklharper eriklharper reopened this Feb 5, 2024
eriklharper added a commit that referenced this issue Feb 9, 2024
@eriklharper
feat(tile): add responsive layout features (#8691)
f4f872e 
**Related Issues:** #6690 #6662 

## Summary

This PR adds responsive layout features and some design improvements to
the Tile component, including:

- Tile: `min` and `max` inline-size (width) for all 3 scales
- Tile: `alignment` property, supporting `start` and `center`

Other improvements include refactoring Tile to remove the deprecated
`ConditionalSlotComponent` interface and improving style encapsulation
to allow more defined control of theming with css custom properties.

---------

Co-authored-by: Erik Harper <eriklharper@pm.me>
Elijbet pushed a commit that referenced this issue Feb 15, 2024
@eriklharper @Elijbet
feat(tile): add responsive layout features (#8691)
e763fe0 
**Related Issues:** #6690 #6662 

## Summary

This PR adds responsive layout features and some design improvements to
the Tile component, including:

- Tile: `min` and `max` inline-size (width) for all 3 scales
- Tile: `alignment` property, supporting `start` and `center`

Other improvements include refactoring Tile to remove the deprecated
`ConditionalSlotComponent` interface and improving style encapsulation
to allow more defined control of theming with css custom properties.

---------

Co-authored-by: Erik Harper <eriklharper@pm.me>
@eriklharper eriklharper added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Feb 21, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned eriklharper Feb 21, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 21, 2024
@geospatialem
Copy link
Member

Verified with https://codepen.io/geospatialem/pen/zYbQZYx in 2.5.1 for the alignment and min and max widths for each scale. Updated context is #6662.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. c-tile Issues that pertain to the calcite-tile and related components Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps. p - high Issue should be addressed in the current milestone, impacts component or core functionality ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2024-02-15 - Feb Maintenance Release
Development

No branches or pull requests
7 participants
@eriklharper @macandcheese @geospatialem @SkyeSeitz @DitwanP @ashetland @brittneytewks