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

[Checkbox] Responsive Layout #6692

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

[Checkbox] Responsive Layout #6692

brittneytewks opened this issue Mar 28, 2023 · 3 comments
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. 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 - 13 Requires planning and 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.

Comments

@brittneytewks
Copy link

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

No response

Which Component

checkbox

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. Calcite (design) Issues logged by Calcite designers. estimate - 13 Requires planning and 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 the impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive label Mar 28, 2023
@brittneytewks brittneytewks removed impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs triage Planning workflow - pending design/dev review. labels Mar 31, 2023
@SkyeSeitz SkyeSeitz self-assigned this Apr 14, 2023
@SkyeSeitz SkyeSeitz added the ready for dev Issues ready for development implementation. label May 4, 2023
@geospatialem geospatialem removed the design Issues that need design consultation prior to development. label May 4, 2023
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jul 26, 2023
@geospatialem geospatialem added this to the 2023 August Priorities milestone Jul 26, 2023
@brittneytewks brittneytewks added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Sep 5, 2023
@SkyeSeitz
Copy link

Updated Figma file with AA hit target at 24px 🚀

@eriklharper eriklharper added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 19, 2023
eriklharper added a commit that referenced this issue Sep 20, 2023
…ptimized for touch users (#7773)

**Related Issue:** #6692 

## Summary

This adds an invisible 24px hotspot for pointer and touch clicks around
the checkbox for all scales. If the `--calcite-checkbox-size` custom
property is modified to be larger than 24px, this hotspot won't prevent
the clickable area from expanding to the new size; it will just serve to
enlarge the clickable area when the size is less than the WCAG AA
recommended minimum size of 24px.

---------

Co-authored-by: Erik Harper <[email protected]>
@eriklharper eriklharper added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Sep 20, 2023
@github-actions github-actions bot assigned geospatialem and unassigned eriklharper Sep 20, 2023
@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 Sep 22, 2023
@geospatialem
Copy link
Member

Verified in 1.9.0-next.7 with checkbox and card when selectable, where the differing sizing of --calcite-checkbox-size will adjust to the 24px hit target at a minimum.

@brittneytewks brittneytewks added the design Issues that need design consultation prior to development. label Dec 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. 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 - 13 Requires planning and 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
Development

No branches or pull requests

4 participants