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.

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

Update Date/Time Selector #793

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

amy-corson-ibigroup
Copy link
Contributor

@amy-corson-ibigroup amy-corson-ibigroup commented Nov 4, 2024

Updates the D/T selector styling so that date time inputs are always visible, and the departure option (leave now, depart at, arrive by) is a dropdown.

If a user updates the date or time input when the option "leave now" is selected, the dropdown will change to "depart at".

Before After
image image

Copy link
Collaborator

@miles-grant-ibigroup miles-grant-ibigroup left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We definitely need this to be a breaking change! Please add a breaking change commit. Stories look great! Haven't looked at the code yet

BREAKING CHANGE: Replaces the old d/t selector in favor of new design
Copy link
Collaborator

@miles-grant-ibigroup miles-grant-ibigroup left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First round of fixes! There's some layout problems in some contexts and some code cleanup possible too

>
<S.DateTimeSelector.DepartureRow>
<Dropdown alignMenuLeft id="date-time-depart-arrive" text={departureOptions.find(opt => opt.isSelected).text} buttonStyle={{ backgroundColor: S.baseColor() || blue[900], borderRadius: "3px 0px 0px 3px", color: "white", height: "45px", border: "0px", padding:"5px 7px" }}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make the default gray instead of blue?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also some of these values are pretty fixed and are causing layout problems in some implementations. Any way we can make this more reactive to its environment?

Comment on lines +150 to +152
departureOptions.forEach(opt => {
opt.isSelected = departArrive === opt.type;
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works but it's pretty inefficient... Anyway we can replace/generate isSelected when we're iterating through the array anyway?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants