[DatePicker | TimePicker] Update visual styles#4460

Merged

almedina-ms merged 31 commits intouser/jevansaks/datepickerhighlightrectfrom

user/almedina-ms/DatePicker_VisualStyleUpdates

Mar 29, 2021

Contributor

almedina-ms commented Mar 9, 2021 •

edited

Loading

Updates the visual style for DatePicker and TimePicker elements

Description

Changes background color of dropdown to the new standard color for flyouts.
Selected items (rows) now have a rounded, accent color backplate. This backplate has a 4px margin on the left/right and 2px margin on the top/bottom.
Hovered items have a lighter gray rounded backplate, with the same margins as the selected row.
The scroll up and down visuals use the new, updated icons. When the scroller arrow is hovered, it has a rounded grey backplate with ample margins from the edge of the control
The check and X buttons at the bottom of the Date/Time Picker use the new iconography. On hover, these buttons receive a 4px rounded gray backplate with ample margins from the edge of the control.
For the closed Date/Time Picker focus, it is now filled with an accent color background

Motivation and Context

Visual updates

How Has This Been Tested?

The changes must be approved with design discussions

almedina-ms added 7 commits

March 3, 2021 16:32


          Lift datepicker themes

bf93773


          Merge branch 'master' into user/almedina-ms/DatePicker_VisualStyleUpd…

e86916e

…ates


          Fix margin but LoopingSelector style is not respected

d4e3fa4


          Update DatePicker styles to match design

66ee2c7


          Fix colors in control

d61b871


          Update Highlight color

e7b9c88


          Fix Highligh color for TimePicker dark mode

143bff7

ghost added the needs-triage label

ranjeshj added area-DateTimePickers team-Controls and removed needs-triage labels


          Fix some colors for dark theme

8985e36

Contributor

ranjeshj commented Mar 10, 2021

@almedina-ms I think these files moved into common styles. Can you merge in master and update the files ?

ranjeshj requested review from YuliKl, jevansaks, karkarl and teaP

March 10, 2021 18:06

almedina-ms added 2 commits

March 10, 2021 11:19


          Fix highlight color on TimePicker, corner radius on highlighted date …

f1436bf

…and dark mode highlighted foreground


          Fix margins for accept/dismiss buttons

1543d76

ranjeshj reviewed

View reviewed changes

dev/DatePicker/DatePicker_themeresources.xaml Show resolved Hide resolved

almedina-ms added 2 commits

March 10, 2021 12:37


          Merge branch 'user/jevansaks/datepickerhighlightrect' into user/almed…

…ina-ms/DatePicker_VisualStyleUpdates


          Fix up/down buttons margin

f711800

StephenLPeters reviewed

View reviewed changes

dev/CommonStyles/DateTimePickerFlyout_themeresources.xaml Show resolved Hide resolved

StephenLPeters reviewed

View reviewed changes

dev/CommonStyles/DatePicker_themeresources.xaml Outdated Show resolved Hide resolved

almedina-ms added 6 commits

March 10, 2021 15:31


          Fix color keys and date/time pickers borders

8e7d370


          Fix everything but the plaveholder font color

f73ef3a


          Fix focus state for placeholders

41ab773


          Format all files

f536358


          Remove extra variables

c78b796


          Fix crash for pre 21h1 builds

fa07ec5

almedina-ms added 6 commits

March 15, 2021 14:48


          Remove extra border on focus + pointer

0abbb8f


          Remove accent background color for focus state

6ea1c12


          Merge branch 'master' into user/almedina-ms/DatePicker_VisualStyleUpd…

da70a96

…ates


          Fix missing reference to caret icons

7c2aed3


          Remove left over changes from old focus behaviour

1fb0a78


          Remove changes from old focus behaviour for TimePicker

54b1587

almedina-ms requested review from StephenLPeters and ranjeshj

March 18, 2021 19:34

Collaborator

marcelwgn commented Mar 18, 2021

@almedina-ms I think you had a bad merge here, there shouldn't be so many commits.

almedina-ms added 2 commits

March 18, 2021 14:56


          Fix contrast missing key

33be511


          Merge branch 'user/jevansaks/datepickerhighlightrect' into user/almed…

7f57c1e

…ina-ms/DatePicker_VisualStyleUpdates

Contributor Author

almedina-ms commented Mar 19, 2021

/azp run

azure-pipelines bot commented Mar 19, 2021

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.


          Merge branch 'user/jevansaks/datepickerhighlightrect' into user/almed…

4d1c0b9

…ina-ms/DatePicker_VisualStyleUpdates

Contributor Author

almedina-ms commented Mar 24, 2021

/azp run

azure-pipelines bot commented Mar 24, 2021

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

Contributor Author

almedina-ms commented Mar 24, 2021

/azp run

azure-pipelines bot commented Mar 24, 2021

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

Contributor Author

almedina-ms commented Mar 25, 2021

/azp run

azure-pipelines bot commented Mar 25, 2021

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

Contributor Author

almedina-ms commented Mar 25, 2021

/azp run

azure-pipelines bot commented Mar 25, 2021

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

marksfoster reviewed

View reviewed changes

dev/CommonStyles/TimePicker_themeresources.xaml Outdated Show resolved Hide resolved

dev/CommonStyles/Common_themeresources_any.xaml Outdated Show resolved Hide resolved

almedina-ms added 2 commits

March 29, 2021 11:15


          Remove added but unused colors

400d3b6


          Remove another unused resource

77c906c

marksfoster approved these changes

View reviewed changes

almedina-ms merged commit 86a5451 into user/jevansaks/datepickerhighlightrect

almedina-ms deleted the user/almedina-ms/DatePicker_VisualStyleUpdates branch

March 29, 2021 19:42

almedina-ms added a commit that referenced this pull request


          DatePicker and TimePicker flyout visual updates (#3947)

7b85ba5

* Initial checkin for DatePicker highlight rect

* Change style default back for the test app

* Fix inner loop solution

* Updates to make focus rect work (needs extensive comments, stay tuned)

* Rename ColorFilterOverlayControl to MonochromaticOverlayPresenter

* [DatePicker | TimePicker] Update visual styles (#4460)

* Lift datepicker themes

* Fix margin but LoopingSelector style is not respected

* Update DatePicker styles to match design

* Fix colors in control

* Update Highlight color

* Fix Highligh color for TimePicker dark mode

* Fix some colors for dark theme

* Fix highlight color on TimePicker, corner radius on highlighted date and dark mode highlighted foreground

* Fix margins for accept/dismiss buttons

* Fix up/down buttons margin

* Fix color keys and date/time pickers borders

* Fix everything but the plaveholder font color

* Fix focus state for placeholders

* Format all files

* Remove extra variables

* Fix crash for pre 21h1 builds

* Activate DatePicker as test

* Fix border brushes and update timepicker to match datepicker

* Remove extra border on focus + pointer

* Remove accent background color for focus state

* Fix missing reference to caret icons

* Remove left over changes from old focus behaviour

* Remove changes from old focus behaviour for TimePicker

* Fix contrast missing key

* Remove added but unused colors

* Remove another unused resource

Co-authored-by: Alberto Medina Gutierrez <[email protected]>
Co-authored-by: almedina-ms <[email protected]>

jordan-msftfan mentioned this pull request

Proposal: Update design of DatePicker and TimePicker controls #4308

Open

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

Reviewers

YuliKl Awaiting requested review from YuliKl

teaP Awaiting requested review from teaP

jevansaks Awaiting requested review from jevansaks

karkarl Awaiting requested review from karkarl

StephenLPeters Awaiting requested review from StephenLPeters

ranjeshj Awaiting requested review from ranjeshj

2 more reviewers

mdtauk mdtauk left review comments

marksfoster marksfoster approved these changes

Labels

area-DateTimePickers team-Controls