DateRange: make onCancel and onSubmit events optional (web)

[CarlosAvina]

Summary

Makes onCancel and onSubmit events optional props. This will also hide cancel and submit buttons.

What changed?

Makes onCancel and onSubmit events optional props. If those props are not passed then the component is going to hide the cancel and submit buttons.

Why?

The current DatePicker used in analytics doesn't have an apply button, the user is accustomed to an action to occur when the endDate is selected, the data fetching occurs currently on the endDateChange event. There is no onCancel or onSubmit business logic on our side. For accomplish this we don't need to change the logic of the component, we just need to conditionally render those buttons if the props are present.

Screenshots

Links

• Jira
• [TDD](link to Paper doc)
• [Figma](link to Figma file)

Checklist

• Added unit tests
• Added documentation + accessibility tests
• Verified accessibility: keyboard & screen reader interaction
• Checked dark mode, responsiveness, and right-to-left support
• Checked stakeholder feedback (e.g. Gestalt designers, relevant feature teams)

[netlify]

✅ Deploy Preview for gestalt ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3607b5a
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/6712d603dbc6e8000845be20
😎 Deploy Preview	https://deploy-preview-3812--gestalt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AlbertCarreras]

https://gestalt.pinterest.systems/web/daterange#Controlled-component

on this example, can you fix the on dismiss? and add setShowComponent(false)?
thasnk! it was innacessible that way

Can you also update the docs?

DateRange is a controlled component.
Use dateValue, onDateChange, onDateError, onSubmit and onCancel to implement it correctly.

Follow the implementation in the example to implement a controlled DateRange correctly.

When there’s not a date range selected, the call-to-action is disabled to prevent user errors.

'onSubmit' and 'onCancel' are optional props. When not used, make sure DateRange is accessible implementing Popover's onDismiss correctly, as shown in the example. Otherwise, DateRange might not be able to be dismissed if the user performs no changes in the data.