feat(activity-indicator): update to new visual language (#2027)

Author: giamir

.changeset/solid-mugs-jog.md

@@ -5,9 +5,15 @@ describe("activity-indicator", () => {
     runA11yTests({
         baseClass: "s-activity-indicator",
         variants: ["danger", "success", "warning"],
+        modifiers: {
+            primary: ["sm"],
+        },
         children: {
             default: `<div class="v-visible-sr">New activity</div>`,
             new: `new<div class="v-visible-sr">New activity</div>`,
         },
+        excludedTestids: [
+            /^s-activity-indicator-(?=.*sm).*new$/, // s-activity-indicator with content in sm size not supported
+        ],
     });
 });

packages/stacks-classic/lib/components/activity-indicator/activity-indicator.a11y.test.ts

@@ -1,7 +1,8 @@
 .s-activity-indicator {
-    --_ai-translucent: var(--translucent-secondary);
     --_ai-bg: var(--theme-secondary-400);
     --_ai-fc: var(--white);
+    --_ai-min-size: var(--su-static16);
+    --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
 
     .highcontrast-mode({
         --_ai-bg: var(--theme-secondary-500);
@@ -10,7 +11,6 @@
     // VARIANTS
     &&__danger {
         --_ai-bg: var(--red-400);
-        --_ai-translucent: var(--translucent-error);
 
         .highcontrast-mode({
             --_ai-bg: var(--red-500);
@@ -19,7 +19,6 @@
 
     &&__success {
         --_ai-bg: var(--green-400);
-        --_ai-translucent: var(--translucent-success);
 
         .highcontrast-mode({
             --_ai-bg: var(--green-500);
@@ -29,25 +28,31 @@
     &&__warning {
         --_ai-bg: var(--yellow-400);
         --_ai-fc: var(--_black-static);
-        --_ai-translucent: var(--translucent-warning);
 
         .highcontrast-mode({
             --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
             --_ai-fc: var(--white);
         });
     }
 
+    &&__sm {
+        --_ai-min-size: calc(var(--su-static8) + var(--su-static2));
+        --_ai-p: 0;
+    }
+
     background-color: var(--_ai-bg);
-    box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
     color: var(--_ai-fc);
+    min-width: var(--_ai-min-size);
+    min-height: var(--_ai-min-size);
+    padding: var(--_ai-p);
 
     border-radius: 1000px;
-    display: inline-block;
+    display: inline-flex;
     font-size: var(--fs-fine);
-    font-weight: 700;
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    min-width: var(--su-static12);
-    min-height: var(--su-static12);
-    padding: var(--su2) var(--su4);
+    font-weight: 600;
+    line-height: 1.1;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
     text-transform: uppercase;
 }

packages/stacks-classic/lib/components/activity-indicator/activity-indicator.less

@@ -6,10 +6,16 @@ describe("activity-indicator", () => {
     runVisualTests({
         baseClass: "s-activity-indicator",
         variants: ["danger", "success", "warning"],
+        modifiers: {
+            primary: ["sm"],
+        },
         children: {
             default: `<div class="v-visible-sr">New activity</div>`,
             new: `new<div class="v-visible-sr">New activity</div>`,
         },
+        excludedTestids: [
+            /^s-activity-indicator-(?=.*sm).*new$/, // s-activity-indicator with content in sm size not supported
+        ],
         template: ({ component, testid }) => html`
             <div
                 class="d-inline-flex ai-center jc-center hs1 ws1 p8"

packages/stacks-classic/lib/components/activity-indicator/activity-indicator.visual.test.ts

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:117d67d686a488f9754cb953d7dad967e9d239fbd0cf4a8085b930bd49f7fdb8
-size 1531
+oid sha256:65a3aef25fae7c8f3bbefb536af7d17ffb7046540240648dafe8dcd2cd90fa2b
+size 1141

packages/stacks-classic/screenshots/Chromium/baseline/s-activity-indicator-dark-danger-new.ico

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:32b831d421bd04d081085e0be97cadda06e5506a779bea7eda0267e96ebca624
+size 544

packages/stacks-classic/screenshots/Chromium/baseline/s-activity-indicator-dark-danger-sm.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b4ee315ffc4434c2283919aba0bb601178d43f95bfda70270d993b09829b2bb0
-size 830
+oid sha256:feefab91e9a9d9fc86bfe508e38c3c6a170a74ea67d8d51ec3f59586e7ef6165
+size 668

packages/stacks-classic/screenshots/Chromium/baseline/s-activity-indicator-dark-danger.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:851226ef16bc876368653376b232803fccd1b82b1c30b07812bc57aa7de6d2d5
-size 1628
+oid sha256:36cc82e0f9ad34c977093c8c4cb3b4b9648c2191ffdfe1297019dd79b2aa7a1a
+size 1140

packages/stacks-classic/screenshots/Chromium/baseline/s-activity-indicator-dark-new.ico

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e4bc529ee895220dd89de246c8aff7759a3c7e1a9f17f16a012907fd59616d89
+size 554

packages/stacks-classic/screenshots/Chromium/baseline/s-activity-indicator-dark-sm.ico

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d8155c03641d72244f79a0fb282c6be7e6376cd61492a236e447d997418d76f6
-size 1635
+oid sha256:7baeb9881de1af00649bda81cb1d261f56eeb9b85b330fd2e62ba13219747565
+size 1127