Make Calendar able to scale down responsively #7583
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 tasks
taysea
reviewed
Apr 9, 2025
| const responsiveDaySizeStyle = (props) => { | ||
| const breakpoint = props.theme.global.size[props.sizeProp]; | ||
| const data = props.theme.calendar[props.sizeProp]; | ||
| // try width: 100%; max-width: data.daySize |
There was a problem hiding this comment.
Suggested change
| // try width: 100%; max-width: data.daySize |
This is implemented, can we remove?
taysea
reviewed
Apr 9, 2025
|
|
||
| const responsiveSizeStyle = (props) => { | ||
| const breakpoint = props.theme.global.size[props.sizeProp]; | ||
| // try width: 100%; max-width: width |
There was a problem hiding this comment.
Suggested change
| // try width: 100%; max-width: width |
taysea
reviewed
Apr 9, 2025
taysea
reviewed
Apr 9, 2025
| { value: breakpoint }, | ||
| ` | ||
| height: auto; | ||
| aspect-ratio: 7/6; |
There was a problem hiding this comment.
Remind me why 7/6? Could we add a comment for future reference?
There was a problem hiding this comment.
Answered via slack but replying here also for others benefit. 7 days per week, 6 weeks shown. Pre-existing code does 14.6% width (100%/7) and 6*daySize height.
There was a problem hiding this comment.
Good to know, agree adding a comment in the code would be helpful for future
taysea
reviewed
Apr 9, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Replaces #7581
What does this PR do?
This PR makes Calendar able to scale down if the specified size is smaller than the viewport.
This is to meet WCAG 1.4.10 Reflow. See #7557 .
Calendar accepts a
sizeproperty that defaults tomedium(384px). WCAG 1.4.10 requires that certain chunks of information be able to reflow and only require scrolling in 1 direction to see them down to 320px wide. 320px is basically equivalent to a 400% zoom of a 1280 display.The change adds a
@mediaquery at thesizeof the Calendar. If the viewport width is smaller than this size this adjusts the styles of the Calendar to narrow. This can be disabled by settingresponsive={false}or by usingfill.Only the width squishes and not the height so the result can be cells that are non-square. Currently I feel like this is acceptable since it would be a lot more work to scale the height also (although ideas are more than welcome.)UPDATE: Now the Calendar maintains aspect ratio as it shrinks,
Here's an example using the Input/DateInput/Simple story:
Normal size:
At 320px screen width:
At 320px screen width with a highlighted/button date:
Where should the reviewer start?
StyledCalendar.js
What testing has been done on this PR?
Jest and Storybook
How should this be manually tested?
Any of the Calendar or DateInput storys in storybook
Do Jest tests follow these best practices?
screenis used for querying.asFragment()is used for snapshot testing.Any background context you want to provide?
What are the relevant issues?
Fixes #7557
Screenshots (if appropriate)
Do the grommet docs need to be updated?
Yes
Should this PR be mentioned in the release notes?
Yes
Is this change backwards compatible or is it a breaking change?
Backwards compatible