@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

package/src/modules/dx/spinner/spinner.css

@@ -7,13 +7,6 @@
     bottom: 0;
     left: 0;
     z-index: 9050;
-    background-color: rgba(255, 255, 255, 0.75);
-    visibility: visible;
-    opacity: 1;
-    -webkit-transition: opacity 0.2s ease, visibility 0s;
-    transition: opacity 0.2s ease, visibility 0s;
-    -webkit-transition-delay: 0s, 0.3s;
-    transition-delay: 0s, 0.3s;
 }
 
 .spinner {
@@ -21,14 +14,12 @@
     top: 50%;
     left: 50%;
     z-index: 9051;
-    -webkit-transform: translate(-50%, -50%) rotate(90deg);
     transform: translate(-50%, -50%) rotate(90deg);
 }
 
 .spinner,
 .spinner_dot-a,
 .spinner_dot-b {
-    -webkit-transform-origin: 50% 50%;
     transform-origin: 50% 50%;
     will-change: transform;
 }
@@ -51,51 +42,40 @@
     position: absolute;
     background: #b0adab;
     border-radius: 50%;
-    -webkit-animation-duration: 1000ms;
     animation-duration: 1000ms;
-    -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
-    -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }
 
 .spinner_dot-a {
-    -webkit-transform: rotate(60deg);
     transform: rotate(60deg);
 }
 
 .spinner_dot-b {
-    -webkit-transform: rotate(120deg);
     transform: rotate(120deg);
 }
 
 .spinner::before {
-    -webkit-animation-delay: -83.33333ms;
-    animation-delay: -83.33333ms;
+    animation-delay: -83.3333ms;
 }
 
 .spinner_dot-a::before {
-    -webkit-animation-delay: 83.33333ms;
-    animation-delay: 83.33333ms;
+    animation-delay: 83.3333ms;
 }
 
 .spinner_dot-b::before {
-    -webkit-animation-delay: 250ms;
     animation-delay: 250ms;
 }
 
 .spinner::after {
-    -webkit-animation-delay: 416.66667ms;
-    animation-delay: 416.66667ms;
+    animation-delay: 416.6667ms;
 }
 
 .spinner_dot-a::after {
-    -webkit-animation-delay: 583.33333ms;
-    animation-delay: 583.33333ms;
+    animation-delay: 583.3333ms;
 }
 
 .spinner_dot-b::after {
-    -webkit-animation-delay: 750ms;
     animation-delay: 750ms;
 }
 
@@ -132,7 +112,6 @@
 .spinner_x-small .spinner_dot-b::before {
     top: -0.125rem;
     left: -0.125rem;
-    -webkit-animation-name: dotsbouncebefore-extrasmall;
     animation-name: dotsbouncebefore-extrasmall;
 }
 
@@ -141,7 +120,6 @@
 .spinner_x-small .spinner_dot-b::after {
     top: -0.125rem;
     right: -0.125rem;
-    -webkit-animation-name: dotsbounceafter-extrasmall;
     animation-name: dotsbounceafter-extrasmall;
 }
 
@@ -153,126 +131,82 @@
     height: 1rem;
 }
 
-@-webkit-keyframes dotsbouncebefore-extrasmall {
+@keyframes dotsbouncebefore-extrasmall {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(-0.25rem, 0, 0);
         transform: translate3d(-0.25rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
 @keyframes dotsbouncebefore-extrasmall {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(-0.25rem, 0, 0);
         transform: translate3d(-0.25rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
-@-webkit-keyframes dotsbounceafter-extrasmall {
+@keyframes dotsbounceafter-extrasmall {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(0.25rem, 0, 0);
         transform: translate3d(0.25rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
 @keyframes dotsbounceafter-extrasmall {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(0.25rem, 0, 0);
         transform: translate3d(0.25rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
@@ -300,7 +234,6 @@
 .spinner_small .spinner_dot-b::before {
     top: -0.125rem;
     left: -0.125rem;
-    -webkit-animation-name: dotsbouncebefore-small;
     animation-name: dotsbouncebefore-small;
 }
 
@@ -309,130 +242,85 @@
 .spinner_small .spinner_dot-b::after {
     top: -0.125rem;
     right: -0.125rem;
-    -webkit-animation-name: dotsbounceafter-small;
     animation-name: dotsbounceafter-small;
 }
 
-@-webkit-keyframes dotsbouncebefore-small {
+@keyframes dotsbouncebefore-small {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(-0.375rem, 0, 0);
         transform: translate3d(-0.375rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
 @keyframes dotsbouncebefore-small {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(-0.375rem, 0, 0);
         transform: translate3d(-0.375rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
-@-webkit-keyframes dotsbounceafter-small {
+@keyframes dotsbounceafter-small {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(0.375rem, 0, 0);
         transform: translate3d(0.375rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0);
     }
 }
 
 @keyframes dotsbounceafter-small {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(0.375rem, 0, 0);
         transform: translate3d(0.375rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0);
     }
 }
@@ -454,7 +342,6 @@
 .spinner_medium.spinner::before,
 .spinner_medium .spinner_dot-a::before,
 .spinner_medium .spinner_dot-b::before {
-    -webkit-animation-name: dotsbouncebefore-medium;
     animation-name: dotsbouncebefore-medium;
     top: -0.25rem;
     left: -0.25rem;
@@ -463,132 +350,87 @@
 .spinner_medium.spinner::after,
 .spinner_medium .spinner_dot-a::after,
 .spinner_medium .spinner_dot-b::after {
-    -webkit-animation-name: dotsbounceafter-medium;
     animation-name: dotsbounceafter-medium;
     top: -0.25rem;
     right: -0.25rem;
 }
 
-@-webkit-keyframes dotsbouncebefore-medium {
+@keyframes dotsbouncebefore-medium {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(-0.5rem, 0, 0);
         transform: translate3d(-0.5rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
 @keyframes dotsbouncebefore-medium {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(-0.5rem, 0, 0);
         transform: translate3d(-0.5rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 }
 
-@-webkit-keyframes dotsbounceafter-medium {
+@keyframes dotsbounceafter-medium {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(0.5rem, 0, 0);
         transform: translate3d(0.5rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0);
     }
 }
 
 @keyframes dotsbounceafter-medium {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(0.5rem, 0, 0);
         transform: translate3d(0.5rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0);
     }
 }
@@ -610,7 +452,6 @@
 .spinner_large.spinner::before,
 .spinner_large .spinner_dot-a::before,
 .spinner_large .spinner_dot-b::before {
-    -webkit-animation-name: dotsbouncebefore-medium;
     animation-name: dotsbouncebefore-medium;
     top: -0.3125rem;
     left: -0.3125rem;
@@ -619,132 +460,87 @@
 .spinner_large.spinner::after,
 .spinner_large .spinner_dot-a::after,
 .spinner_large .spinner_dot-b::after {
-    -webkit-animation-name: dotsbounceafter-medium;
     animation-name: dotsbounceafter-medium;
     top: -0.3125rem;
     right: -0.3125rem;
 }
 
-@-webkit-keyframes dotsbouncebefore-large {
+@keyframes dotsbouncebefore-large {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(-0.75rem, 0, 0);
         transform: translate3d(-0.75rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0);
     }
 }
 
 @keyframes dotsbouncebefore-large {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(-0.75rem, 0, 0);
         transform: translate3d(-0.75rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0);
     }
 }
 
-@-webkit-keyframes dotsbounceafter-large {
+@keyframes dotsbounceafter-large {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(0.75rem, 0, 0);
         transform: translate3d(0.75rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0);
     }
 }
 
 @keyframes dotsbounceafter-large {
     0% {
-        -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
 
     60% {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(
-            0.55,
-            0.085,
-            0.68,
-            0.53
-        );
+        transform: translate3d(0, 0, 0);
         animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
     }
 
     80% {
-        -webkit-transform: translate3d(0.75rem, 0, 0);
         transform: translate3d(0.75rem, 0, 0);
-        -webkit-animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
         animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
     }
 
     100% {
-        -webkit-transform: translateX(0);
         transform: translateX(0);
     }
 }

package/src/modules/dx/stepSequence/stepSequence.css

@@ -0,0 +1,42 @@
+/*
+  This CSS will automatically handle the displaying of child dx-step-sequence-step components,
+  including animations, if they are enabled. There is no other UI for this component.
+*/
+::slotted(*) {
+    position: absolute;
+    top: 0;
+    transition: transform 0.4s ease, opacity 0.4s ease;
+    width: 100%;
+}
+
+.no-animations ::slotted(*) {
+    display: none;
+}
+
+::slotted(.visible) {
+    display: block;
+}
+
+::slotted(.active-step) {
+    position: relative;
+}
+
+::slotted(.animate-left-out) {
+    opacity: 0;
+    transform: translateX(-100%);
+}
+
+::slotted(.animate-in) {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+::slotted(.animate-right-out) {
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+.step-sequence-container {
+    overflow: hidden;
+    position: relative;
+}