Fluentui: DatePicker: Fluent theme

[Vitalius1]

[Vitalius1]

This one seems is composed of a TextField which is already fluentized and a Callout holding a Calendar. So the most work should be done in fluentizing the Calendar.

Edit: Calendar is blocked due to not being yet converted to CSS-in-JS

[Vitalius1]

@betrue-final-final
A couple issues with DatePicker:

• The toolkit is missing DatePicker's input, which is a Textfield already fluentized... so not much work in this area, except that I need some specs regarding the Icon it has.
• The toolkit is also missing the Callout styles like rounded corners an shadow. I assumed they are the same as with ComboBox, Dropdown or ContextualMenu so that is what I submitted in #7072 . For now I rounded all 4 corners because we have no knowledge of the side the callout is rendered.

[mikewheaton]

@Vitalius1, would you mind opening bugs in Azure DevOps for the toolkit issues above?

[betrue-final-final]

Looks like hover state is an old background color and font color.

[Vitalius1]

Date picker fluent changes were made only the for the input and the callout holding the Calendar when open. The Calendar needs CSS-in-JS conversion and only then we could proceed with fluentization.

[mikewheaton]

I've moved this to the Building column and labeled it as blocked, as it's waiting on #5307 and #7071.

[Vitalius1]

@mikewheaton I wonder if we need this issue open... We could probably close it as soon as @betrue-final-final approves the changes to the Callouts borderRadius and shadow. When the Calendar gets converted and fluentized DatePicker will automatically pick up the change. So I don't think there is going to be more work on this issue.

[mikewheaton]

There shouldn't be any more work needed, but I'd still rather track is as incomplete so that teams using the Fluent theme have the right expectations on what will work.

[micahgodbolt]

calendar has been converted to css-in-js over in the date-time package. It's not 100% stable yet, but should be close enough to start building up a Fluent theme.

[mikewheaton]

@micahgodbolt Is that Calendar meant to replace the one in the main office-ui-fabric-react package? Do you know if anyone is using it in production?

[micahgodbolt]

the new one JUST got published, so no one is using it yet. The calendar team and power apps team will be driving most of the work. They are added as codeowners, and will start to dogfood it as soon as they feel its ready.

[mikewheaton]

Okay, sounds like it's likely to be production ready before the existing Calendar gets converted to CSS-in-JS. @Vitalius1, think we should try styling the new component? Even if it's not ready in time and we need to convert the existing calendar, I'd expect the styles should be mostly transferable.