fix(progress)!: remove circular progress slots

PiperOrigin-RevId: 549190658
This commit is contained in:
Elizabeth Mitchell 2023-07-18 20:56:53 -07:00 committed by Copybara-Service
parent 9d3501b174
commit aea4d5e4fd
2 changed files with 17 additions and 7 deletions

View File

@ -76,9 +76,17 @@ const standardCircular: MaterialStoryInit<StoryKnobs> = {
};
const iconButton: MaterialStoryInit<StoryKnobs> = {
name: 'Containing an icon-button',
styles: css`.aroundIcon {
--md-circular-progress-size: 48px;
}`,
styles: css`
.around-icon {
position: relative;
}
md-standard-icon-button {
inset: 0;
margin: auto;
position: absolute;
}
`,
render({progress, indeterminate, fourColor}) {
const toggle = ({target}: Event) => {
const spinner =
@ -87,16 +95,18 @@ const iconButton: MaterialStoryInit<StoryKnobs> = {
};
return html`
<md-circular-progress class="aroundIcon"
<div class="around-icon">
<md-circular-progress
.progress=${progress}
.indeterminate=${indeterminate}
.fourColor=${fourColor}
>
></md-circular-progress>
<md-standard-icon-button toggle @change=${toggle}>
<md-icon>play_arrow</md-icon>
<md-icon slot="selectedIcon">pause</md-icon>
</md-standard-icon-button>
</md-circular-progress>`;
</div>
`;
}
};
const insideButton: MaterialStoryInit<StoryKnobs> = {

View File

@ -55,7 +55,7 @@ export class CircularProgress extends LitElement {
this.indeterminate ? this.renderIndeterminateContainer() :
this.renderDeterminateContainer()}
</div>
<slot></slot>`;
`;
}
// Determinate mode is rendered with an svg so the progress arc can be