fix(progress)!: remove circular progress slots

PiperOrigin-RevId: 549190658
material-components · Jul 19, 2023 · aea4d5e · aea4d5e
1 parent 9d3501b
commit aea4d5e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts
@@ -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> = {

diff --git a/progress/lib/circular-progress.ts b/progress/lib/circular-progress.ts
@@ -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