feat(button): pending state

adobe · Feb 13, 2024 · 0b82dd9 · 0b82dd9
1 parent 0e9f4ee
commit 0b82dd9
Show file tree

Hide file tree

Showing 6 changed files with 813 additions and 29 deletions.
diff --git a/components/button/index.css b/components/button/index.css
@@ -56,6 +56,11 @@ governing permissions and limitations under the License.
   --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100);
   --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium);
   --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
+
+  &[pending],
+  &.is-pending {
+    --mod-button-edge-to-visual-only: calc(1px + var(--spectrum-button-edge-to-visual-only));
+  }
 }
 
 .spectrum-Button--sizeL {
@@ -72,6 +77,12 @@ governing permissions and limitations under the License.
   --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200);
   --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large);
   --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large);
+
+
+  &[pending],
+  &.is-pending {
+    --mod-button-edge-to-visual-only: calc(2px + var(--spectrum-button-edge-to-visual-only));
+  }
 }
 
 .spectrum-Button--sizeXL {
@@ -89,6 +100,15 @@ governing permissions and limitations under the License.
   --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large);
   --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large);
 
+  .spectrum--medium &[pending],
+  .spectrum--medium &.is-pending {
+    --mod-button-edge-to-visual-only: calc(3px + var(--spectrum-button-edge-to-visual-only));
+  }
+
+  .spectrum--large &[pending],
+  .spectrum--large &.is-pending {
+    --mod-button-edge-to-visual-only: calc(4px + var(--spectrum-button-edge-to-visual-only));
+  }
 }
 
 .spectrum-Button {
@@ -229,18 +249,33 @@ a.spectrum-Button {
   }
 
   &:disabled,
-  &.is-disabled {
+  &.is-disabled,
+  &[pending],
+  &.is-pending {
     background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled)));
     border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled)));
     color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled)));
   }
+
+  &[pending],
+  &.is-pending {
+    cursor: default;
+
+    .spectrum-Icon,
+    .spectrum-Button-label {
+      display: none;
+    }
+  }
 }
 
 /* windows high contrast mode over-writes for accent variant */
 @media (forced-colors: active) {
   .spectrum-Button {
     --highcontrast-button-content-color-disabled: GrayText;
     --highcontrast-button-border-color-disabled: GrayText;
+    --mod-progress-circle-track-border-color: ButtonText;
+    --mod-progress-circle-track-border-color-over-background: ButtonText;
+    --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);
 
     &:focus-visible {
       &::after {