Revert "ref(core): button busy state and form SubmitButton UX (#109869)"

This reverts commit 2ff37ee.

Author: natemoo-re

static/app/components/core/button/button.spec.tsx

@@ -26,34 +26,6 @@ describe('Button', () => {
 
     expect(spy).not.toHaveBeenCalled();
   });
-
-  it('does not call `onClick` on busy buttons', async () => {
-    const spy = jest.fn();
-    render(
-      <Button onClick={spy} busy>
-        Click me
-      </Button>
-    );
-    await userEvent.click(screen.getByText('Click me'));
-
-    expect(spy).not.toHaveBeenCalled();
-  });
-
-  it('shows spinner when busy', () => {
-    render(<Button busy>Busy Button</Button>);
-
-    const button = screen.getByRole('button', {name: 'Busy Button'});
-    expect(button).toHaveAttribute('aria-busy', 'true');
-    expect(screen.getByRole('status', {name: 'Busy'})).not.toHaveStyle({
-      visibility: 'hidden',
-    });
-  });
-
-  it('hides spinner when not busy', () => {
-    render(<Button>Normal Button</Button>);
-
-    expect(screen.queryByRole('status', {name: 'Busy'})).not.toBeInTheDocument();
-  });
 });
 
 describe('LinkButton', () => {

static/app/components/core/button/button.tsx

@@ -1,7 +1,6 @@
-import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Flex, Grid} from '@sentry/scraps/layout';
+import {Flex} from '@sentry/scraps/layout';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
@@ -30,13 +29,6 @@ export function Button({
     busy,
   });
 
-  const iconGap =
-    props.icon && hasChildren
-      ? size === 'xs' || size === 'zero'
-        ? 'sm'
-        : 'md'
-      : undefined;
-
   return (
     <Tooltip
       skipWrapper
@@ -56,29 +48,30 @@ export function Button({
         onClick={handleClick}
         role="button"
       >
-        <Grid as="span" align="center" justifyItems="center" minWidth="0" height="100%">
-          <Flex
-            as="span"
-            align="center"
-            area="1 / 1"
-            gap={iconGap}
-            visibility={busy ? 'hidden' : undefined}
-          >
-            {props.icon && (
-              <Flex as="span" align="center" flexShrink={0}>
-                <IconDefaultsProvider size={BUTTON_ICON_SIZES[size]}>
-                  {props.icon}
-                </IconDefaultsProvider>
-              </Flex>
-            )}
-            {props.children}
-          </Flex>
-          <BusySpinner
-            role="status"
-            aria-label="Busy"
-            style={busy ? undefined : {visibility: 'hidden'}}
-          />
-        </Grid>
+        <Flex
+          as="span"
+          align="center"
+          justify="center"
+          minWidth="0"
+          height="100%"
+          whiteSpace="nowrap"
+        >
+          {props.icon && (
+            <Flex
+              as="span"
+              align="center"
+              flexShrink={0}
+              marginRight={
+                hasChildren ? (size === 'xs' || size === 'zero' ? 'sm' : 'md') : undefined
+              }
+            >
+              <IconDefaultsProvider size={BUTTON_ICON_SIZES[size]}>
+                {props.icon}
+              </IconDefaultsProvider>
+            </Flex>
+          )}
+          {props.children}
+        </Flex>
       </StyledButton>
     </Tooltip>
   );
@@ -87,24 +80,3 @@ export function Button({
 const StyledButton = styled('button')<ButtonProps>`
   ${p => getButtonStyles(p as any)}
 `;
-
-const spin = keyframes`
-  to {
-    transform: rotate(360deg);
-  }
-`;
-
-const BusySpinner = styled('span')`
-  grid-area: 1 / 1;
-
-  &::after {
-    content: '';
-    display: block;
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    border: 2px solid currentColor;
-    border-top-color: transparent;
-    animation: ${spin} 0.6s linear infinite;
-  }
-`;

static/app/components/core/button/styles.tsx

@@ -132,7 +132,11 @@ export function DO_NOT_USE_getButtonStyles(
       zIndex: 1,
       position: 'relative',
 
+      display: 'inherit',
+      alignItems: 'inherit',
+      justifyContent: 'inherit',
       flex: '1',
+      gap: 'inherit',
       overflow: 'hidden',
 
       whiteSpace: 'nowrap',

static/app/components/core/form/scrapsForm.spec.tsx

@@ -69,15 +69,14 @@ const {useAppForm} = createFormHook({
 function SubmitButton(props: ButtonProps) {
   const form = useFormContext();
   return (
-    <form.Subscribe selector={state => state.isSubmitting}>
-      {isSubmitting => (
+    <form.Subscribe selector={state => state.isSubmitting || state.isDefaultValue}>
+      {isDisabled => (
         <Button
           {...props}
           priority="primary"
           type="submit"
           form={form.formId}
-          busy={isSubmitting}
-          disabled={isSubmitting || props.disabled}
+          disabled={isDisabled || props.disabled}
         />
       )}
     </form.Subscribe>

static/app/components/core/form/scrapsForm.tsx

@@ -84,8 +84,6 @@ interface ContainerLayoutProps {
   alignSelf?: Responsive<React.CSSProperties['alignSelf']>;
   justifySelf?: Responsive<React.CSSProperties['justifySelf']>;
 
-  visibility?: Responsive<'visible' | 'hidden' | 'collapse'>;
-
   // Text Wrapping
   whiteSpace?: Responsive<
     'break-spaces' | 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap'
@@ -224,7 +222,6 @@ const omitContainerProps = new Set<keyof ContainerLayoutProps | 'as'>([
   'right',
   'row',
   'top',
-  'visibility',
   'width',
   'whiteSpace',
 ]);
@@ -312,7 +309,6 @@ export const Container = styled(
   ${p => rc('border-left', p.borderLeft, p.theme, getBorder)};
   ${p => rc('border-right', p.borderRight, p.theme, getBorder)};
 
-  ${p => rc('visibility', p.visibility, p.theme)};
   ${p => rc('white-space', p.whiteSpace, p.theme)};
 
   /**