fix(progress-circle): ensure size can be applied to non-"size" attrib…

…ute bearing elements
adobe · Feb 20, 2024 · 2bc1065 · 2bc1065
1 parent 27a9e24
commit 2bc1065
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 30 deletions.
diff --git a/packages/button/stories/index.ts b/packages/button/stories/index.ts
@@ -116,35 +116,21 @@ export const makeOverBackground =
     };
 
 export function renderButton(properties: Properties): TemplateResult {
-    if (properties.variant) {
-        return html`
-            <sp-button
-                variant="${properties.variant}"
-                treatment="${properties.treatment}"
-                ?quiet="${!!properties.quiet}"
-                ?disabled=${!!properties.disabled}
-                size=${properties.size || 'm'}
-                href=${ifDefined(properties.href)}
-                target=${ifDefined(properties.target)}
-                ?warning=${properties.warning}
-                ?pending=${!!properties.pending}
-                ?icon-only=${properties.iconOnly}
-            >
-                ${properties.content || 'Click Me'}
-            </sp-button>
-        `;
-    } else {
-        return html`
-            <sp-button
-                ?quiet="${!!properties.quiet}"
-                ?disabled=${!!properties.disabled}
-                size=${properties.size}
-                ?pending=${!!properties.pending}
-            >
-                ${properties.content || 'Click Me'}
-            </sp-button>
-        `;
-    }
+    return html`
+        <sp-button
+            ?disabled=${!!properties.disabled}
+            href=${ifDefined(properties.href)}
+            ?icon-only=${properties.iconOnly}
+            ?pending=${!!properties.pending}
+            ?quiet="${!!properties.quiet}"
+            size=${properties.size}
+            target=${ifDefined(properties.target)}
+            treatment=${ifDefined(properties.treatment)}
+            variant=${ifDefined(properties.variant)}
+        >
+            ${properties.content || 'Click Me'}
+        </sp-button>
+    `;
 }
 
 export function renderButtonSet(properties: Properties): TemplateResult {

diff --git a/packages/button/stories/template.ts b/packages/button/stories/template.ts
@@ -27,7 +27,6 @@ export interface Properties {
     size?: 's' | 'm' | 'l' | 'xl';
     href?: string;
     target?: '_blank' | '_parent' | '_self' | '_top';
-    warning?: boolean;
     iconOnly?: boolean;
 }
 

diff --git a/packages/progress-circle/src/progress-circle.css b/packages/progress-circle/src/progress-circle.css
@@ -22,6 +22,7 @@ governing permissions and limitations under the License.
         var(--_spectrum-progress-circle-size)
     );
 
+    --spectrum-progress-circle-size: inherit;
     --spectrum-progresscircle-m-over-background-track-fill-color: var(
         --spectrum-alias-track-fill-color-overbackground
     );
@@ -78,3 +79,11 @@ slot {
         var(--_spectrum-progress-circle-size)
     );
 }
+
+/* stylelint-disable */
+:host([indeterminate]) .fills,
+:host([indeterminate]) .fillSubMask1,
+:host([indeterminate]) .fillSubMask2 {
+    animation-duration: var(--spectrum-animation-duration-2000);
+}
+/* stylelint-enable */
diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts
@@ -89,6 +89,7 @@ const reduceMotionProperties = css`
     --spectrum-animation-duration-2000: 0ms;
     --spectrum-animation-duration-4000: 0ms;
     --spectrum-animation-duration-6000: 0ms;
+    --pending-delay: 0s;
     --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
     --swc-test-duration: 1ms;
 `;