loading-button-temp

jpmorganchase · Jul 10, 2024 · 2b93589 · 2b93589
1 parent 2aaa505
commit 2b93589
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 64 deletions.
diff --git a/packages/core/src/button/Button.css b/packages/core/src/button/Button.css
@@ -55,7 +55,7 @@
   border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0));
   border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));
   color: var(--saltButton-text-color, var(--button-text-color));
-  cursor: var(--saltButton-cursor, pointer);
+  cursor: var(--saltButton-cursor, var(--salt-actionable-cursor-hover));
   display: inline-flex;
   gap: var(--salt-spacing-50);
   justify-content: var(--saltButton-justifyContent, center);
@@ -133,50 +133,44 @@
   border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));
 }
 
-.saltButton-loading-cta {
+.saltButton-cta.saltButton-loading {
+  --button-text-color: var(--salt-content-primary-foreground);
+  --button-background: var(--salt-container-primary-background);
   --button-borderColor: var(--salt-actionable-cta-borderColor);
-  --button-background-hover: var(--salt-actionable-cta-background);
-  --saltButton-background-active: var(--salt-actionable-cta-background);
-  cursor: unset;
 }
 
-.saltButton-loading-primary {
-  --button-borderColor: var(--salt-actionable-primary-borderColor);
-  --button-background-hover: var(--salt-actionable-primary-background);
-  --saltButton-background-active: var(--salt-actionable-primary-background);
-  cursor: unset;
+.saltButton-cta.saltButton-loading:hover,
+.saltButton-cta.saltButton-loading:active {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-container-primary-background);
+  border-color: var(--salt-actionable-cta-borderColor);
+  cursor: default;
 }
 
-.saltButton-loading-secondary {
-  --button-borderColor: var(--salt-container-primary-background);
-  --saltButton-background-hover: none;
-  --saltButton-background-active: none;
-  --saltButton-borderColor-active: var(--salt-actionable-secondary-borderColor);
-  --saltButton-borderColor-hover: var(--salt-actionable-secondary-borderColor);
-  cursor: unset;
+.saltButton-primary.saltButton-loading {
+  --button-text-color: var(--salt-content-primary-foreground);
+  --button-background: var(--salt-container-primary-background);
+  --button-borderColor: var(--salt-actionable-primary-borderColor);
 }
 
-.saltButton-loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.saltButton-primary.saltButton-loading:hover,
+.saltButton-primary.saltButton-loading:active {
+  color: var(--salt-content-primary-foreground);
   background: var(--salt-container-primary-background);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  gap: var(--salt-spacing-50);
-  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));
+  border-color: var(--salt-actionable-primary-borderColor);
+  cursor: default;
 }
 
-.saltButton-hidden-element {
-  display: flex;
-  gap: var(--salt-spacing-50);
-  align-items: center;
+.saltButton-secondary.saltButton-loading {
+  --button-text-color: var(--salt-content-primary-foreground);
+  --button-background: var(--salt-container-primary-background);
+  --button-borderColor: var(--salt-actionable-secondary-borderColor);
 }
 
-.saltButton-loading-text {
+.saltButton-secondary.saltButton-loading:hover,
+.saltButton-secondary.saltButton-loading:active {
   color: var(--salt-content-primary-foreground);
+  background: var(--salt-container-primary-background);
+  border-color: var(--salt-actionable-secondary-borderColor);
+  cursor: default;
 }
diff --git a/packages/core/src/button/Button.tsx b/packages/core/src/button/Button.tsx
@@ -64,7 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       showLoadingText,
       ...restProps
     },
-    ref?,
+    ref?
   ): ReactElement<ButtonProps> {
     const { active, buttonProps } = useButton({
       disabled,
@@ -93,40 +93,20 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           withBaseName(variant),
           {
             [withBaseName("disabled")]: disabled,
-            [withBaseName(`loading-${variant}`)]: loading,
+            [withBaseName("loading")]: loading,
             [withBaseName("active")]: active,
           },
-          className,
+          className
         )}
         {...restProps}
         ref={ref}
         type={type}
       >
-        {loading ? (
-          <>
-            <span className={clsx(withBaseName("loading-overlay"), className)}>
-              <Spinner
-                size="small"
-                className={clsx(withBaseName("loading-spinner"), className)}
-                aria-label={!showLoadingText ? loadingText : ""}
-              />
-              {showLoadingText && (
-                <span className={clsx(withBaseName("loading-text"), className)}>
-                  {loadingText}
-                </span>
-              )}
-            </span>
-            <span
-              aria-hidden="true"
-              className={clsx(withBaseName("hidden-element"))}
-            >
-              {children}
-            </span>
-          </>
-        ) : (
-          children
+        {loading && (
+          <Spinner size="small" aria-label={loading ? loadingText : ""} />
         )}
+        {children}
       </button>
     );
-  },
+  }
 );
diff --git a/packages/core/stories/button/button.stories.tsx b/packages/core/stories/button/button.stories.tsx
@@ -191,9 +191,9 @@ export const FullWidth: StoryFn<typeof Button> = () => {
 };
 
 export const LoadingButtons: StoryFn<typeof Button> = () => {
-  const [primaryLoadingState, setPrimaryLoadingState] = useState(false);
-  const [secondaryLoadingState, setSecondaryLoadingState] = useState(false);
-  const [ctaLoadingState, setCtaLoadingState] = useState(false);
+  const [primaryLoadingState, setPrimaryLoadingState] = useState(true);
+  const [secondaryLoadingState, setSecondaryLoadingState] = useState(true);
+  const [ctaLoadingState, setCtaLoadingState] = useState(true);
 
   const handlePrimaryClick = () => {
     setPrimaryLoadingState(true);