ref(button): remove any type from button props (#51722)

Inferrence is still not great as props do not infer from the
HTMLElement, but it's baby steps towards improving and we can get rid of
`any` type

static/app/components/button.tsx

@@ -16,7 +16,7 @@ import mergeRefs from 'sentry/utils/mergeRefs';
  * to be poorly typed as `any`). So this is a bit of a workaround to receive
  * the proper html attributes.
  */
-type ButtonElement = HTMLButtonElement | HTMLAnchorElement | any;
+type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
 
 /**
  * Props shared across different types of button components
@@ -232,7 +232,7 @@ function BaseButton({
   });
 
   const handleClick = useCallback(
-    (e: React.MouseEvent) => {
+    (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
       // Don't allow clicks when disabled or busy
       if (disabled || busy) {
         e.preventDefault();
@@ -303,7 +303,16 @@ const Button = reactForwardRef<ButtonElement, ButtonProps>((props, ref) => (
 
 Button.displayName = 'Button';
 
-type StyledButtonProps = ButtonProps & {theme: Theme};
+interface StyledButtonPropsWithAriaLabel extends ButtonPropsWithoutAriaLabel {
+  theme: Theme;
+}
+interface StyledButtonPropsWithoutAriaLabel extends ButtonPropsWithAriaLabel {
+  theme: Theme;
+}
+
+type StyledButtonProps =
+  | StyledButtonPropsWithAriaLabel
+  | StyledButtonPropsWithoutAriaLabel;
 
 const getBoxShadow = ({
   priority,
@@ -431,7 +440,7 @@ const getSizeStyles = ({size = 'md', translucentBorder, theme}: StyledButtonProp
 };
 
 const StyledButton = styled(
-  reactForwardRef<any, ButtonProps>(
+  reactForwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
     (
       {
         forwardRef,

static/app/components/dropdownButton.tsx

@@ -9,7 +9,7 @@ export interface DropdownButtonProps extends Omit<ButtonProps, 'type' | 'prefix'
   /**
    * Forward a ref to the button's root
    */
-  forwardedRef?: React.ForwardedRef<HTMLElement>;
+  forwardedRef?: React.ForwardedRef<HTMLButtonElement>;
   /**
    * Whether or not the button should render as open
    */
@@ -62,11 +62,12 @@ const ChevronWrap = styled('div')`
   flex-shrink: 0;
 `;
 
-const StyledButton = styled(Button)<
-  Required<Pick<DropdownButtonProps, 'isOpen' | 'disabled'>> & {
-    hasPrefix: boolean;
-  }
->`
+interface StyledButtonProps
+  extends Required<Pick<DropdownButtonProps, 'isOpen' | 'disabled'>> {
+  hasPrefix?: boolean;
+}
+
+const StyledButton = styled(Button)<StyledButtonProps>`
   position: relative;
   max-width: 100%;
   z-index: 2;
@@ -84,6 +85,6 @@ const LabelText = styled('span')`
   padding-right: ${space(0.75)};
 `;
 
-export default forwardRef<HTMLElement, DropdownButtonProps>((props, ref) => (
+export default forwardRef<HTMLButtonElement, DropdownButtonProps>((props, ref) => (
   <DropdownButton forwardedRef={ref} {...props} />
 ));

static/app/components/events/viewHierarchy/wireframe.tsx

@@ -37,8 +37,8 @@ function Wireframe({hierarchy, selectedNode, onNodeSelect, project}: WireframePr
   const theme = useTheme();
   const [canvasRef, setCanvasRef] = useState<HTMLCanvasElement | null>(null);
   const [overlayRef, setOverlayRef] = useState<HTMLCanvasElement | null>(null);
-  const [zoomIn, setZoomIn] = useState<HTMLButtonElement | null>(null);
-  const [zoomOut, setZoomOut] = useState<HTMLButtonElement | null>(null);
+  const [zoomIn, setZoomIn] = useState<HTMLElement | null>(null);
+  const [zoomOut, setZoomOut] = useState<HTMLElement | null>(null);
 
   const canvases = useMemo(() => {
     return canvasRef && overlayRef ? [canvasRef, overlayRef] : [];

static/app/components/featureFeedback/index.tsx

@@ -20,7 +20,7 @@ export function FeatureFeedback<T extends Data>({
   buttonProps = {},
   ...props
 }: FeatureFeedbackProps<T>) {
-  function handleClick(e: React.MouseEvent) {
+  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
     openModal(modalProps => <FeedbackModal {...modalProps} {...props} />, {
       modalCss,
     });

static/app/views/discover/table/columnEditCollection.tsx

@@ -224,7 +224,7 @@ class ColumnEditCollection extends Component<Props, State> {
   }
 
   startDrag(
-    event: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>,
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
     index: number
   ) {
     const isDragging = this.state.isDragging;