### Problem to solve In https://gitlab.com/gitlab-org/gitlab/-/issues/408656+ we added predefined date ranges for VSA. We want to enhance this to provide a better user experience by integrating the date picker into the dropdown as per the screenshot below:  ### Implementation guide * [ ] Update the dropdown text to display the full date range text (perhaps some CSS tweaks needed to get this right) * [ ] Extend the dropdown to include the start and end calendars * [ ] Add prop to opt-out of the new GlDatepicker behaviour * GitLab project changes will happen in https://gitlab.com/gitlab-org/gitlab/-/issues/419049 --- ### Description <!-- Add a short description of the component addition or update. Consider adding a checklist of variations, states, and breakpoints to the description so that reviewers can be sure to cross reference everything that has been completed. --> #### Figma file <!-- If design specs exist in Figma, link them below. Otherwise, remove the link and add a link to the issue to add the component to Figma --> [View design specs in Figma →](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/branch/y4TdOiF44s57wbjKgNe8YJ/%F0%9F%93%99-Component-library?type=design&node-id=102817%3A103986&mode=design&t=yWtKwPeOpVahkL9F-1) ### Checklist Make sure the following are completed before closing the issue: 1. [ ] Assign the correct component label to this issue. 1. [ ] Create an MR with the additions or updates needed. 1. [ ] Be sure to get your MR reviewed by a [FE/UX Foundations designer][foundations-team]. 1. [ ] When applicable, create an [MR in Pajamas][pajamas-mr] to update the demos. If you do not have capacity to complete the demos, [create an issue in Pajamas][pajamas-issue] and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one. 1. [ ] When applicable, [create an MR in Pajamas][pajamas-mr] to update the component status. 1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Component Documentation"][pajamas-component-documentation-template] issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. 1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Figma update"][pajamas-figma-update-template] issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. 1. [ ] When introducing a major or breaking change, communicate the changes within the [Engineering Week in Review][eng-week-in-review-doc]. 1. [ ] 🎉 Congrats, you made it! You can now close this issue. <!-- ### Resources * [Compontent Lifecycle][component-lifecycle] * [Adding component][adding-components] * [Adding CSS][adding-css] * [Breaking changes][breaking-changes] --> [foundations-team]: https://about.gitlab.com/company/team/?department=fe-ux-foundations-team [pajamas-mr]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/new [pajamas-issue]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new [pajamas-component-documentation-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation [pajamas-figma-update-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update [component-lifecycle]: https://design.gitlab.com/get-started/lifecycle [adding-components]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_components.md [adding-css]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_css.md [breaking-changes]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/breaking_changes_to_components.md [eng-week-in-review-doc]: https://docs.google.com/document/d/1GQbnOP_lr9KVMVaBQx19WwKITCmh7H3YlgO-XqVwv0M/edit