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

Improve calendar styling #12481

Merged
merged 6 commits into from
Oct 19, 2022
Merged

Improve calendar styling #12481

merged 6 commits into from
Oct 19, 2022

Conversation

swissspidy
Copy link
Collaborator

@swissspidy swissspidy commented Oct 17, 2022

Context

It has always bugged me that our date picker's styling does not match the rest of the editor.

Summary

Updates the date/time picker in the editor to better match the rest of the app.

Relevant Technical Choices

To-do

  • Fix tests

User-facing changes

Before

Screenshot 2022-10-17 at 09 31 51
Screenshot 2022-10-17 at 09 32 07
Screenshot 2022-10-17 at 09 32 00

After

Screenshot 2022-10-17 at 10 26 02
Screenshot 2022-10-17 at 10 25 56
Screenshot 2022-10-17 at 10 25 51

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

  1. Date picker should still work the same, including the time input & the AM/PM toggle

Reviews

Does this PR have a security-related impact?

No

Does this PR change what data or activity we track or use?

No

Does this PR have a legal-related impact?

No

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #1391

@swissspidy swissspidy added Type: Enhancement New feature or improvement of an existing feature Group: Document Panel Group: Design System Type: UX Quality For issues impacting user experience labels Oct 17, 2022
@googleforcreators-bot
Copy link
Collaborator

Plugin builds for c36e551 are ready 🛎️!%0A- Download development build%0A- Download production build

@github-actions
Copy link
Contributor

github-actions bot commented Oct 17, 2022

Size Change: -383 B (0%)

Total Size: 2.72 MB

Filename Size Change
assets/js/wp-story-editor.js 1.44 MB -383 B (0%)
ℹ️ View Unchanged
Filename Size
assets/css/carousel-view-rtl.css 702 B
assets/css/carousel-view.css 701 B
assets/css/web-stories-block-rtl.css 4.52 kB
assets/css/web-stories-block.css 4.56 kB
assets/css/web-stories-embed-rtl.css 318 B
assets/css/web-stories-embed.css 317 B
assets/css/web-stories-list-styles-rtl.css 2.36 kB
assets/css/web-stories-list-styles.css 2.39 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B
assets/css/web-stories-theme-style-twentyten.css 143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B
assets/css/web-stories-widget-rtl.css 482 B
assets/css/web-stories-widget.css 482 B
assets/css/wp-dashboard-rtl.css 657 B
assets/css/wp-dashboard.css 659 B
assets/css/wp-story-editor-rtl.css 737 B
assets/css/wp-story-editor.css 738 B
assets/js/4422.js 49.3 kB
assets/js/5369.js 90.4 kB
assets/js/81.js 208 kB
assets/js/9166.js 7.69 kB
assets/js/9419.js 35.1 kB
assets/js/9750.js 12.8 kB
assets/js/carousel-view.js 3.41 kB
assets/js/chunk-colorthief.js 2.64 kB
assets/js/chunk-ffmpeg.js 5.89 kB
assets/js/chunk-focus-visible.js 1.01 kB
assets/js/chunk-html-to-image.js 4.5 kB
assets/js/chunk-opentype.js 96 B
assets/js/chunk-react-calendar.js 12.5 kB
assets/js/chunk-react-color.js 44.3 kB
assets/js/chunk-web-animations-js.js 14.6 kB
assets/js/chunk-web-stories-template-0-metaData.js 546 B
assets/js/chunk-web-stories-template-0.js 11.4 kB
assets/js/chunk-web-stories-template-1-metaData.js 540 B
assets/js/chunk-web-stories-template-1.js 9.61 kB
assets/js/chunk-web-stories-template-10-metaData.js 532 B
assets/js/chunk-web-stories-template-10.js 7.37 kB
assets/js/chunk-web-stories-template-11-metaData.js 539 B
assets/js/chunk-web-stories-template-11.js 9.09 kB
assets/js/chunk-web-stories-template-12-metaData.js 496 B
assets/js/chunk-web-stories-template-12.js 9.7 kB
assets/js/chunk-web-stories-template-13-metaData.js 525 B
assets/js/chunk-web-stories-template-13.js 7.4 kB
assets/js/chunk-web-stories-template-14-metaData.js 582 B
assets/js/chunk-web-stories-template-14.js 7.37 kB
assets/js/chunk-web-stories-template-15-metaData.js 544 B
assets/js/chunk-web-stories-template-15.js 9 kB
assets/js/chunk-web-stories-template-16-metaData.js 588 B
assets/js/chunk-web-stories-template-16.js 10.9 kB
assets/js/chunk-web-stories-template-17-metaData.js 540 B
assets/js/chunk-web-stories-template-17.js 9.2 kB
assets/js/chunk-web-stories-template-18-metaData.js 587 B
assets/js/chunk-web-stories-template-18.js 9.91 kB
assets/js/chunk-web-stories-template-19-metaData.js 501 B
assets/js/chunk-web-stories-template-19.js 10.8 kB
assets/js/chunk-web-stories-template-2-metaData.js 586 B
assets/js/chunk-web-stories-template-2.js 9.3 kB
assets/js/chunk-web-stories-template-20-metaData.js 548 B
assets/js/chunk-web-stories-template-20.js 9.01 kB
assets/js/chunk-web-stories-template-21-metaData.js 536 B
assets/js/chunk-web-stories-template-21.js 9.85 kB
assets/js/chunk-web-stories-template-22-metaData.js 525 B
assets/js/chunk-web-stories-template-22.js 7.83 kB
assets/js/chunk-web-stories-template-23-metaData.js 604 B
assets/js/chunk-web-stories-template-23.js 7.48 kB
assets/js/chunk-web-stories-template-24-metaData.js 517 B
assets/js/chunk-web-stories-template-24.js 11.7 kB
assets/js/chunk-web-stories-template-25-metaData.js 543 B
assets/js/chunk-web-stories-template-25.js 7.06 kB
assets/js/chunk-web-stories-template-26-metaData.js 600 B
assets/js/chunk-web-stories-template-26.js 7.26 kB
assets/js/chunk-web-stories-template-27-metaData.js 542 B
assets/js/chunk-web-stories-template-27.js 7.82 kB
assets/js/chunk-web-stories-template-28-metaData.js 532 B
assets/js/chunk-web-stories-template-28.js 9.07 kB
assets/js/chunk-web-stories-template-29-metaData.js 561 B
assets/js/chunk-web-stories-template-29.js 9.25 kB
assets/js/chunk-web-stories-template-3-metaData.js 539 B
assets/js/chunk-web-stories-template-3.js 8.42 kB
assets/js/chunk-web-stories-template-30-metaData.js 576 B
assets/js/chunk-web-stories-template-30.js 7.89 kB
assets/js/chunk-web-stories-template-31-metaData.js 503 B
assets/js/chunk-web-stories-template-31.js 10.3 kB
assets/js/chunk-web-stories-template-32-metaData.js 552 B
assets/js/chunk-web-stories-template-32.js 13.3 kB
assets/js/chunk-web-stories-template-33-metaData.js 491 B
assets/js/chunk-web-stories-template-33.js 9.07 kB
assets/js/chunk-web-stories-template-34-metaData.js 570 B
assets/js/chunk-web-stories-template-34.js 7.58 kB
assets/js/chunk-web-stories-template-35-metaData.js 565 B
assets/js/chunk-web-stories-template-35.js 8.91 kB
assets/js/chunk-web-stories-template-36-metaData.js 575 B
assets/js/chunk-web-stories-template-36.js 12.7 kB
assets/js/chunk-web-stories-template-37-metaData.js 529 B
assets/js/chunk-web-stories-template-37.js 6.71 kB
assets/js/chunk-web-stories-template-38-metaData.js 572 B
assets/js/chunk-web-stories-template-38.js 7.94 kB
assets/js/chunk-web-stories-template-39-metaData.js 589 B
assets/js/chunk-web-stories-template-39.js 8.08 kB
assets/js/chunk-web-stories-template-4-metaData.js 564 B
assets/js/chunk-web-stories-template-4.js 12.7 kB
assets/js/chunk-web-stories-template-40-metaData.js 556 B
assets/js/chunk-web-stories-template-40.js 10.2 kB
assets/js/chunk-web-stories-template-41-metaData.js 573 B
assets/js/chunk-web-stories-template-41.js 7.75 kB
assets/js/chunk-web-stories-template-42-metaData.js 521 B
assets/js/chunk-web-stories-template-42.js 7 kB
assets/js/chunk-web-stories-template-43-metaData.js 557 B
assets/js/chunk-web-stories-template-43.js 8.76 kB
assets/js/chunk-web-stories-template-44-metaData.js 583 B
assets/js/chunk-web-stories-template-44.js 11.1 kB
assets/js/chunk-web-stories-template-45-metaData.js 565 B
assets/js/chunk-web-stories-template-45.js 7.52 kB
assets/js/chunk-web-stories-template-46-metaData.js 531 B
assets/js/chunk-web-stories-template-46.js 5.22 kB
assets/js/chunk-web-stories-template-47-metaData.js 591 B
assets/js/chunk-web-stories-template-47.js 9.42 kB
assets/js/chunk-web-stories-template-48-metaData.js 556 B
assets/js/chunk-web-stories-template-48.js 9.09 kB
assets/js/chunk-web-stories-template-49-metaData.js 518 B
assets/js/chunk-web-stories-template-49.js 9.69 kB
assets/js/chunk-web-stories-template-5-metaData.js 556 B
assets/js/chunk-web-stories-template-5.js 9.94 kB
assets/js/chunk-web-stories-template-50-metaData.js 503 B
assets/js/chunk-web-stories-template-50.js 9.15 kB
assets/js/chunk-web-stories-template-51-metaData.js 526 B
assets/js/chunk-web-stories-template-51.js 10.4 kB
assets/js/chunk-web-stories-template-52-metaData.js 601 B
assets/js/chunk-web-stories-template-52.js 10.4 kB
assets/js/chunk-web-stories-template-53-metaData.js 551 B
assets/js/chunk-web-stories-template-53.js 5.78 kB
assets/js/chunk-web-stories-template-54-metaData.js 547 B
assets/js/chunk-web-stories-template-54.js 7.67 kB
assets/js/chunk-web-stories-template-55-metaData.js 574 B
assets/js/chunk-web-stories-template-55.js 7.13 kB
assets/js/chunk-web-stories-template-56-metaData.js 542 B
assets/js/chunk-web-stories-template-56.js 9.87 kB
assets/js/chunk-web-stories-template-57-metaData.js 528 B
assets/js/chunk-web-stories-template-57.js 14.9 kB
assets/js/chunk-web-stories-template-58-metaData.js 554 B
assets/js/chunk-web-stories-template-58.js 5.74 kB
assets/js/chunk-web-stories-template-59-metaData.js 590 B
assets/js/chunk-web-stories-template-59.js 8.96 kB
assets/js/chunk-web-stories-template-6-metaData.js 568 B
assets/js/chunk-web-stories-template-6.js 7.07 kB
assets/js/chunk-web-stories-template-60-metaData.js 509 B
assets/js/chunk-web-stories-template-60.js 9.51 kB
assets/js/chunk-web-stories-template-7-metaData.js 569 B
assets/js/chunk-web-stories-template-7.js 7.46 kB
assets/js/chunk-web-stories-template-8-metaData.js 569 B
assets/js/chunk-web-stories-template-8.js 8.93 kB
assets/js/chunk-web-stories-template-9-metaData.js 580 B
assets/js/chunk-web-stories-template-9.js 8.46 kB
assets/js/chunk-web-stories-templates.js 1.17 kB
assets/js/chunk-web-stories-textset-0.js 5.06 kB
assets/js/chunk-web-stories-textset-1.js 6.65 kB
assets/js/chunk-web-stories-textset-2.js 7.65 kB
assets/js/chunk-web-stories-textset-3.js 15.1 kB
assets/js/chunk-web-stories-textset-4.js 4.15 kB
assets/js/chunk-web-stories-textset-5.js 5.47 kB
assets/js/chunk-web-stories-textset-6.js 5.28 kB
assets/js/chunk-web-stories-textset-7.js 10.2 kB
assets/js/generateBlurhash.worker.worker.js 1.1 kB
assets/js/imgareaselect.js 3.77 kB
assets/js/lightbox.js 550 B
assets/js/tinymce-button.js 2.85 kB
assets/js/web-stories-activation-notice.js 27.1 kB
assets/js/web-stories-block.js 22.6 kB
assets/js/web-stories-embed.js 20 B
assets/js/web-stories-widget.js 587 B
assets/js/wp-dashboard.js 63.8 kB

compressed-size-action

Copy link
Contributor

@miina miina left a comment

Choose a reason for hiding this comment

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

Screenshot 2022-10-17 at 17 26 51

^ The contrast between the background color and the hovered / focused date seems a bit low -- perhaps it has been tested and is ok though.

@swissspidy
Copy link
Collaborator Author

Screenshot 2022-10-17 at 17 26 51

^ The contrast between the background color and the hovered / focused date seems a bit low -- perhaps it has been tested and is ok though.

Good call. Improved the contrast now.

@googleforcreators-bot
Copy link
Collaborator

Plugin builds for b0710ce are ready 🛎️!%0A- Download development build%0A- Download production build

@kkalarickal kkalarickal self-assigned this Oct 17, 2022
@kkalarickal
Copy link

@swissspidy - there seems to be a different color for current date vs the selected date which is lost with the changes in this ticket.

For example, consider a story with publish data 01-Nov-2022. This is different from today's date of 17-Oct-2022

In the main branch (without these changes), the date picker show a yellow shade on 17-Oct-2022 and a blue shade on 01-Nov-2022
image.png

However, with the changes in 12481 applied, the two colors are the same:image.png

Similarly, when you go one level higher by clicking the Month-Year title, you can see that in main branch the current month is yellow while the selected month is blue.image.png

But in 12481 branch the color for selected month is missing !!image.png

Since this is a ticket for consistent calendar styling, these color changes for present vs selected dates should probably be fixed.

@kkalarickal kkalarickal removed their assignment Oct 17, 2022
@swissspidy
Copy link
Collaborator Author

However, with the changes in 12481 applied, the two colors are the same:

Not technically :-) Well, on hover they were similar, but otherwise the current date has a gray bg:

Screenshot 2022-10-18 at 08 40 39

But in 12481 branch the color for selected month is missing

Good catch 👍

Fixed now:

Screenshot 2022-10-18 at 08 55 48

@googleforcreators-bot
Copy link
Collaborator

Plugin builds for 49d9d28 are ready 🛎️!%0A- Download development build%0A- Download production build

@kkalarickal
Copy link

Confirmed that the current date/month/year appears in a grey box when the published date/month/year is different

image.png

image.png

image.png

@swissspidy swissspidy merged commit ad8d7f6 into main Oct 19, 2022
@swissspidy swissspidy deleted the fix/1391-calendar-styling branch October 19, 2022 10:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Design System Group: Document Panel Type: Enhancement New feature or improvement of an existing feature Type: UX Quality For issues impacting user experience
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Custom Calendar Styling
4 participants