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

[DatePicker | TimePicker] Update visual styles #4460

Merged
merged 31 commits into from Mar 29, 2021
Merged

[DatePicker | TimePicker] Update visual styles #4460

merged 31 commits into from Mar 29, 2021

Conversation

almedina-ms
Copy link
Contributor

@almedina-ms almedina-ms commented Mar 9, 2021 •
edited

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

@ghost ghost added the needs-triage Issue needs to be triaged by the area owners label Mar 9, 2021
@ranjeshj ranjeshj added area-DateTimePickers DatePicker, TimePicker, CalendarDatePicker, CalendarView team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels Mar 10, 2021
@ranjeshj
Copy link
Contributor

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

@marcelwgn
Copy link
Contributor

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

@almedina-ms
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

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

@almedina-ms
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

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

@almedina-ms
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

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

@almedina-ms
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

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

@almedina-ms
Copy link
Contributor Author

/azp run

@azure-pipelines
Copy link

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

@almedina-ms almedina-ms merged commit 86a5451 into user/jevansaks/datepickerhighlightrect Mar 29, 2021
@almedina-ms 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 Mar 31, 2021
@jevansaks @almedina-ms
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 <almedina@microsoft.com>
Co-authored-by: almedina-ms <35784165+almedina-ms@users.noreply.github.com>
@jordan-msftfan jordan-msftfan mentioned this pull request Apr 17, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mdtauk mdtauk mdtauk left review comments

@marksfoster marksfoster marksfoster approved these changes

@YuliKl YuliKl Awaiting requested review from YuliKl

@teaP teaP Awaiting requested review from teaP

@jevansaks jevansaks Awaiting requested review from jevansaks

@karkarl karkarl Awaiting requested review from karkarl

@StephenLPeters StephenLPeters Awaiting requested review from StephenLPeters

@ranjeshj ranjeshj Awaiting requested review from ranjeshj

Assignees
No one assigned
Labels
area-DateTimePickers DatePicker, TimePicker, CalendarDatePicker, CalendarView team-Controls Issue for the Controls team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@almedina-ms @ranjeshj @marcelwgn @mdtauk @StephenLPeters @marksfoster