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.

Sign up for GitHub

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

Jump to bottom

fix(expansion): define default expansion header heights via css. #9313

Merged
merged 1 commit into from
Jan 23, 2018
+7 −2
Merged

fix(expansion): define default expansion header heights via css. #9313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/lib/expansion/expansion-animations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ export const matExpansionAnimations: {
state('collapsed', style({
height: '{{collapsedHeight}}',
}), {
params: {collapsedHeight: '48px'},
params: {collapsedHeight: '*'},
}),
state('expanded', style({
height: '{{expandedHeight}}'
}), {
params: {expandedHeight: '64px'}
params: {expandedHeight: '*'}
Copy link
Member

Choose a reason for hiding this comment

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

I agree that it's a better way to handle custom height, but AFAIK it will break the people that are using the binding as it's set up right now. We could either remove the inputs and leave these changes for a later release, or deprecate them and set up the bindings so they just set the height as an inline style.

Copy link
Member Author

Choose a reason for hiding this comment

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

It shouldn't break those using it as it is currently since we define the same expanded and collapsed heights (64px and 48px) in css rather than the animation parameters.

If a user set it by changing the animation params, it should be respected as it will be put into the style tag and override our css rule's height.
If a user set it by setting the params to * and defined the css rule's, then it results as the same how the new set up works.

Am I missing a scenario that would break?

Copy link
Member

Choose a reason for hiding this comment

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

Sorry, I probably got confused last time. Looking at it again, it should be fine.

}),
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
]),
Expand Down
5 changes: 5 additions & 0 deletions src/lib/expansion/expansion-panel-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@
.mat-expansion-panel-header {
display: flex;
flex-direction: row;
height: 48px;
align-items: center;
padding: 0 24px;

&.mat-expanded {
height: 64px;
}

&:focus,
&:hover {
outline: none;
Expand Down