angular / angular/components

Consistent animation & UX between ExpansionPanel and Tree?

Open
#12,126 4 comments 5 reactions 0 assignees View on GitHub
animation area: material/expansion area: material/tree feature material spec P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:

feature request

#### What is the expected behavior?

ExpansionPanel has pleasant default animations when the panels expand and shrink and the expand_more/chevron_right indicators rotate. I expected the new tree widget to have a consistent user experience as the other Material components.

#### What is the current behavior?

The subtrees hide and reveal without animation, which is a more jarring UX. Also, the transition of the chevron doesn't animate. (Perhaps it could be made to with additional coding, but ExpansionPanel doesn't require it.)

#### What are the steps to reproduce?

Compare the sample pages between the [Tree Widgets](https://material.angular.io/components/tree/examples) vs. [Expansion Panel Widgets](https://material.angular.io/components/expansion/examples)

#### What is the use-case or motivation for changing an existing behavior?

When I play with hide/show on the expansion panel and compare that to hide/show on a subtree, it just doesn't feel like a consistent user experience. Given (1) how much Material Design emphasizes motion to guide users through spatial relationships, and (2) how there are default animations for ExpansionPanel, Stepper, and Tabs, it really makes Tree appear the oddball out.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.7
Material 6.3.3

#### Is there anything else we should know?

Contributor guide

Open the contributing guide

Research direction

Start by comparing the Tree Widgets and Expansion Panel Widgets sample pages linked in the issue, then trace the Tree widget's expand/collapse behavior and the corresponding ExpansionPanel animation behavior. Done means subtree visibility changes animate and the chevron transition matches the expected Material interaction, with the examples showing a consistent experience.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.