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(progress-spinner): element size not updated when diamater is changed #8697

Merged
merged 1 commit into from
Jan 23, 2018
Merged

fix(progress-spinner): element size not updated when diamater is changed #8697

merged 1 commit into from
Jan 23, 2018

Conversation

andreroggeri
Copy link
Contributor

Updating the diameter property programmatically don't trigger the ngOnChanges events.

This change updates the code to calculate the _elementSize property on diameter change

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 29, 2017
@jelbourn
Copy link
Member

Hi, thanks for taking the time to send a PR! This change would cause the browser to potentially trigger a re-layout on every change detection cycle, which is something we would want to avoid since it could hurt application performance.

The right approach would be to have the component mark itself as needing change detection when the diameter changes.

@andreroggeri
Copy link
Contributor Author

Hi @jelbourn thanks for the feedback.

I tried to use the methods markForCheck and detectChanges from ChangeDetectorRef. But none of these made the test pass.

After some research, I found this stackoverflow question. And it seems that the change detection will not work for input without bindings.

You said that this change can trigger a re-layout on every detection cycle, but the elementSize is only recalculated when the changes are for strokeWidth or diamter properties. Is there a way to check this behavior ?

@jelbourn
Copy link
Member

@crisbeto can you take a look at this PR?

crisbeto
crisbeto reviewed Jan 13, 2018
View reviewed changes
src/lib/progress-spinner/progress-spinner.spec.ts Outdated
const fixture = TestBed.createComponent(MatProgressSpinner);
const spinner = fixture.componentInstance;
spinner.diameter = 32;
expect(spinner._elementSize).toBe(32);
Copy link
Member

Choose a reason for hiding this comment

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

Can you test the styles that are applied to the element, rather than the property itself? You can look at how the other tests are doing it.

src/lib/progress-spinner/progress-spinner.ts Outdated
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
Copy link
Member

Choose a reason for hiding this comment

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

Can you remove this license banner? There is one already at the top of the file.

src/lib/progress-spinner/progress-spinner.ts Outdated
@@ -231,6 +240,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
.replace(/END_VALUE/g, `${0.2 * this._strokeCircumference}`)
.replace(/DIAMETER/g, `${this.diameter}`);
}

/**Updates the spinner element size based on its diameter */
Copy link
Member

Choose a reason for hiding this comment

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

Needs a space after the /** and a dot at the end of the sentence.

src/lib/progress-spinner/progress-spinner.ts Outdated
@@ -231,6 +240,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
.replace(/END_VALUE/g, `${0.2 * this._strokeCircumference}`)
.replace(/DIAMETER/g, `${this.diameter}`);
}

/**Updates the spinner element size based on its diameter */
private _updateSpinnerDimension() {
Copy link
Member

Choose a reason for hiding this comment

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

Rename to _updateElementSize.

@andreroggeri andreroggeri force-pushed the fix-dynamic-spinner branch 3 times, most recently from 3272b58 to 110c5e4 Compare January 14, 2018 12:31
@andreroggeri
Copy link
Contributor Author

@crisbeto comments addressed ! 👍

crisbeto
crisbeto reviewed Jan 14, 2018
View reviewed changes
Copy link
Member

@crisbeto crisbeto left a comment •
edited
Loading

Choose a reason for hiding this comment

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

LGTM, one last nit: can you rename the commit and PR to something like "fix(progress-spinner): element size not updated when diamater is changed"?

@andreroggeri andreroggeri changed the title (fix): Update the elementSize of progress-spinner dynamically fix(progress-spinner): element size not updated when diamater is changed Jan 14, 2018
@andreroggeri
Copy link
Contributor Author

@crisbeto Sure, changes done !

@crisbeto crisbeto added pr: lgtm action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Jan 14, 2018
jelbourn
jelbourn approved these changes Jan 16, 2018
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

LGTM

@jelbourn jelbourn merged commit 6d4c7ae into angular:master Jan 23, 2018
@andreroggeri andreroggeri deleted the fix-dynamic-spinner branch January 23, 2018 18:06
jelbourn pushed a commit to jelbourn/components that referenced this pull request Jan 29, 2018
@andreroggeri @jelbourn
fix(progress-spinner): element size not updated when diamater is chan…
23f0c47 
…ged (angular#8697)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@crisbeto crisbeto crisbeto left review comments

@jelbourn jelbourn jelbourn approved these changes

@josephperrott josephperrott Awaiting requested review from josephperrott

Assignees
No one assigned
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement target: patch This PR is targeted for the next patch release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@andreroggeri @jelbourn @crisbeto @googlebot