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

feature(itinerary-body): Add shouldAnimate param on all use of AnimateHeight #511

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

noletorious
Copy link
Contributor

The intent behind conditionally animating collapsing content is to help address accessibility concerns around when the user wants to toggle motion off via their operating systems settings. More information on prefers-reduce-motion.

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.

Thanks for this change, I agree that we should respect prefers-reduce-motion. Do you think it's possible to do this inside of this component instead of exposing a new prop?

@@ -287,7 +292,10 @@ class TransitLegBody extends Component<Props, State> {
)}
</S.TransitLegDetailsHeader>
{/* IntermediateStops expanded body */}
<AnimateHeight duration={500} height={stopsExpanded ? "auto" : 0}>
<AnimateHeight
duration={shouldAnimate ? 500 : 0}
Copy link
Contributor

Choose a reason for hiding this comment

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

since you're doing this check multiple times, you could assign the value to variable outside the mark-up and then re-use as a prop for the instances of AnimateHeight, something like:

const animationDuration = shouldAnimate ? 500 : 0;

<AnimateHeight duration={animationDuration} />

@grant-humphries
Copy link
Contributor

@noletorious sorry for taking so long to review this, forgot I was assigned. Where do you stand on this work, are you able to address Miles' comment?

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.

3 participants