{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material2/issues/13667","repository_url":"https://api.github.com/repos/angular/material2","labels_url":"https://api.github.com/repos/angular/material2/issues/13667/labels{/name}","comments_url":"https://api.github.com/repos/angular/material2/issues/13667/comments","events_url":"https://api.github.com/repos/angular/material2/issues/13667/events","html_url":"https://github.com/angular/material2/issues/13667","id":371617120,"node_id":"MDU6SXNzdWUzNzE2MTcxMjA=","number":13667,"title":"feat(mat-button): add progress-spinner option","user":{"login":"CaerusKaru","id":416563,"node_id":"MDQ6VXNlcjQxNjU2Mw==","avatar_url":"https://avatars3.githubusercontent.com/u/416563?v=4","gravatar_id":"","url":"https://api.github.com/users/CaerusKaru","html_url":"https://github.com/CaerusKaru","followers_url":"https://api.github.com/users/CaerusKaru/followers","following_url":"https://api.github.com/users/CaerusKaru/following{/other_user}","gists_url":"https://api.github.com/users/CaerusKaru/gists{/gist_id}","starred_url":"https://api.github.com/users/CaerusKaru/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CaerusKaru/subscriptions","organizations_url":"https://api.github.com/users/CaerusKaru/orgs","repos_url":"https://api.github.com/users/CaerusKaru/repos","events_url":"https://api.github.com/users/CaerusKaru/events{/privacy}","received_events_url":"https://api.github.com/users/CaerusKaru/received_events","type":"User","site_admin":false},"labels":[{"id":433951675,"node_id":"MDU6TGFiZWw0MzM5NTE2NzU=","url":"https://api.github.com/repos/angular/material2/labels/discussion","name":"discussion","color":"d4c5f9","default":false},{"id":311421127,"node_id":"MDU6TGFiZWwzMTE0MjExMjc=","url":"https://api.github.com/repos/angular/material2/labels/feature","name":"feature","color":"d4c5f9","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2018-10-18T16:41:34Z","updated_at":"2018-10-29T16:34:19Z","closed_at":null,"author_association":"MEMBER","body":"#### Bug, feature request, or proposal:\r\n\r\nProposal\r\n\r\n#### What is the expected behavior?\r\n\r\nAllow for a properly-sized and positioned progress spinner to be triggered inside a `mat-button`, temporarily overriding its initial content\r\n\r\n\r\n#### What is the current behavior?\r\n\r\nNo configuration available, can manually place and position a progress spinner inside a `mat-button`\r\n\r\n\r\n#### What are the steps to reproduce?\r\n\r\nThis is a sample template thrown together (very unoptimized): https://stackblitz.com/edit/angular-material2-issue-qbjrmi?file=app%2Fapp.component.html\r\n\r\nClick on `LOADING` to trigger the spinner\r\n\r\n\r\n#### What is the use-case or motivation for changing an existing behavior?\r\n\r\nDefined in the spec: https://material.io/design/components/progress-indicators.html#circular-progress-indicators under “Integrating with actions”\r\n\r\n\r\n#### Is there anything else we should know?\r\n\r\nProbably needs an a11y review since the content of the button will change"},"comment":{"url":"https://api.github.com/repos/angular/material2/issues/comments/433981294","html_url":"https://github.com/angular/material2/issues/13667#issuecomment-433981294","issue_url":"https://api.github.com/repos/angular/material2/issues/13667","id":433981294,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMzk4MTI5NA==","user":{"login":"CaerusKaru","id":416563,"node_id":"MDQ6VXNlcjQxNjU2Mw==","avatar_url":"https://avatars3.githubusercontent.com/u/416563?v=4","gravatar_id":"","url":"https://api.github.com/users/CaerusKaru","html_url":"https://github.com/CaerusKaru","followers_url":"https://api.github.com/users/CaerusKaru/followers","following_url":"https://api.github.com/users/CaerusKaru/following{/other_user}","gists_url":"https://api.github.com/users/CaerusKaru/gists{/gist_id}","starred_url":"https://api.github.com/users/CaerusKaru/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CaerusKaru/subscriptions","organizations_url":"https://api.github.com/users/CaerusKaru/orgs","repos_url":"https://api.github.com/users/CaerusKaru/repos","events_url":"https://api.github.com/users/CaerusKaru/events{/privacy}","received_events_url":"https://api.github.com/users/CaerusKaru/received_events","type":"User","site_admin":false},"created_at":"2018-10-29T16:34:19Z","updated_at":"2018-10-29T16:34:19Z","author_association":"MEMBER","body":"Discussed with @crisbeto offline, and we've come up with two options:\r\n\r\n* We'll introduce a `mat-progress-container`, but its purpose is to center content inside another container element like `mat-button` or `mat-menu`\r\n* We'll also introduce a `matProgress` directive that sits on the container (ie the `mat-button` or `mat-menu`) to set `position: relative` and necessary ARIA attributes based on a boolean trigger\r\n\r\nHere's where the ideas diverge:\r\n1. In the first idea, we leave the rest to the user, likely to use this template:\r\n```html\r\n<button mat-raised-button [matProgress]=\"trigger\">\r\n  <mat-progress-container *ngIf=\"trigger; else content\">...</mat-progress-container>\r\n  <ng-template #content>Upload</ng-template>\r\n</button>\r\n```\r\n2. In the second idea, the burden of templating is on us. IMO this makes for a much nicer UX, but complicates the code a bit\r\n```html\r\n<button mat-raised-button [matProgress]=\"trigger\">\r\n  <mat-progress-container>...</mat-progress-container>\r\n  <mat-progress-content>Upload</mat-progress-content>\r\n</button>\r\n```\r\nThis not only provides a clear differentiation between the progress and the content, it also reduces the redundancy and possibility for failure by removing the dual `trigger` uses. Here, the `progress-container` is responsible for marshaling content inside the button/menu, replacing the content based on the value of the host's progress directive.\r\n\r\nThe only issues with both approaches are a) the best way to handle a11y, and b) the best way to swap content while maintaining size concerns (i.e. making sure the container height stays the same)"}}
{"actor":{"display_login":"CaerusKaru"}}