feat: add date-picker today actions

[prsdthkr]

Description

• Add 2 optional features to the date-picker:
  • A 'today selection' button in datepicker footer that selects today's date, closes the datepicker, and updates the input field.
  • A 'today navigation' button in datepicker header that focuses on today's date, selects it but does not close the datepicker. Useful in mobile use cases where datepicker is closed after 'OK' button is clicked.
• Fix compact and cosy date-picker styles

Screenshots

Please check whether the PR fulfills the following requirements

• all items on the PR Review Checklist are addressed :
  https://github.com/SAP/fundamental-styles/wiki/PR-Review-Checklist

[netlify]

Deploy preview for fundamental-styles ready!

Built with commit 7b6171c

https://deploy-preview-1058--fundamental-styles.netlify.app

[InnaAtanasova]

hey @prsdthkr how would this button look like in mobile view?
In mobile view the calendar has the OK button in the footer.

Does it mean the Today button will be placed next to it? And if yes, is it a good UX?

[prsdthkr]

Hi @InnaAtanasova, good catch. After looking at the Fiori 3 specs I understand that in mobile view the datepicker should be rendered WITHIN a full-screen dialog component. This means a today button should render like this mock:

I'm not sure if this is a good user experience. We may need some guidance from SAP UX. What do you think?

[bcullman]

in the desktop view, selecting a date (or selecting today) is "closing the calendar" event.

if in the moible view if selecting a date does not close the calendar, then neither should the today button. if that is the case, the today button is a navigation element, and should be in the header. This is what i gathered from my conversation with SAP UX.

My question is "why" does selecting a date not dismiss the calendar on mobile?

[salarenko]

@InnaAtanasova @prsdthkr I think we should ping this to the designers and also include mobile example in pattern section.

@prsdthkr Could you by the way fix calendar navigation buttons?
Normal size partially uses compact buttons and compact size partially uses normal buttons 😋
Removing/adding fd-button--compact will do the thing.

[stefanoScalzo]

PR title should not be docs because it is changing the markup

[JKMarkowski]

@stefanoScalzo I'm not sure if docs is not good there. We do not provide any breaking change, so markup doesn't have to be changed.

[jbadan]

I would mark it as breaking for removing/adding fd-button--compact class, the footer additions aren't breaking unless they're required.

[prsdthkr]

Based on inputs from SAP UX and @bcullman, the today button will act as a navigational element in mobile view. Hence it will appear in the "upper right most corner" according to inputs from SAP UX. I have mocked this below. Would like to know what the designers think. Ideally we would be providing two today buttons (header and footer) and users can enable these based on desktop or mobile use case.

[bcullman]

per this PR description, it shows the “today” button as part of the default datepicker (before/after).

Instead, the today button should be implemented as a feature, that is OFF by default.

additionally, consider creating 2 today buttons

• one called "today-select" which is the original feature you worked on - a today button in the footer that selects today's date and closes the date picker. it is off by default
• once called "today-nav" which can be used in the mobile scenario - a today button in the header that navigates to, but does not select, today's date. it is off by default

iteration on the style of a "today-nav" can be done in a follow up PR, as long as the semantic HTML is in place, someone else can refine that style at a later when it's required.

[stefanoScalzo]

You are using aria controls but there is no element with that id
aria-controls="D8NDL125"

[stefanoScalzo]

Can you please include the mobile version in the examples please

[prsdthkr]

@stefanoScalzo I've added the DatePicker examples for mobile landscape and portrait mode with today navigation, based on the corresponding examples in Calendar. Should the mobile examples from Calendar be removed? Also now that I think about this, should the today navigation button be part of the Calendar spec?

[JKMarkowski]

LGTM