ref(react19): Remove various styled defaultProps (#83409)

Author: scttcper

static/app/components/alerts/toastIndicator.tsx

@@ -43,6 +43,14 @@ function ToastIndicator({indicator, onDismiss, className, ...props}: Props) {
       onClick={handleClick}
       data-test-id={type ? `toast-${type}` : 'toast'}
       className={classNames(className, 'ref-toast', `ref-${type}`)}
+      initial={{opacity: 0, y: 70}}
+      animate={{opacity: 1, y: 0}}
+      exit={{opacity: 0, y: 70}}
+      transition={testableTransition({
+        type: 'spring',
+        stiffness: 450,
+        damping: 25,
+      })}
       {...props}
     >
       {type === 'loading' ? (
@@ -74,26 +82,6 @@ const Toast = styled(motion.div)`
   position: relative;
 `;
 
-Toast.defaultProps = {
-  initial: {
-    opacity: 0,
-    y: 70,
-  },
-  animate: {
-    opacity: 1,
-    y: 0,
-  },
-  exit: {
-    opacity: 0,
-    y: 70,
-  },
-  transition: testableTransition({
-    type: 'spring',
-    stiffness: 450,
-    damping: 25,
-  }),
-};
-
 const Icon = styled('div', {shouldForwardProp: p => p !== 'type'})<{type: string}>`
   margin-right: ${space(0.75)};
   svg {

static/app/components/banner.tsx

@@ -59,7 +59,17 @@ function Banner({
   return (
     <BannerWrapper backgroundImg={backgroundImg} className={className}>
       {backgroundComponent}
-      {isDismissable ? <CloseButton onClick={dismiss} aria-label={t('Close')} /> : null}
+      {isDismissable ? (
+        <CloseButton
+          type="button"
+          borderless
+          size="xs"
+          priority="link"
+          icon={<IconClose />}
+          onClick={dismiss}
+          aria-label={t('Close')}
+        />
+      ) : null}
       <BannerContent>
         <BannerTitle>{title}</BannerTitle>
         <BannerSubtitle>{subtitle}</BannerSubtitle>
@@ -139,12 +149,4 @@ const CloseButton = styled(Button)`
   z-index: 1;
 `;
 
-CloseButton.defaultProps = {
-  icon: <IconClose />,
-  ['aria-label']: t('Close'),
-  priority: 'link',
-  borderless: true,
-  size: 'xs',
-};
-
 export default Banner;

static/app/components/charts/loadingPanel.tsx

@@ -3,6 +3,9 @@ import styled from '@emotion/styled';
 import LoadingMask from 'sentry/components/loadingMask';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default '200px'
+   */
   height?: string;
 }
 
@@ -14,14 +17,10 @@ const LoadingPanel = styled(({height: _height, ...props}: Props) => (
   flex: 1;
   flex-shrink: 0;
   overflow: hidden;
-  height: ${p => p.height};
+  height: ${p => p.height ?? '200px'};
   position: relative;
   border-color: transparent;
   margin-bottom: 0;
 `;
 
-LoadingPanel.defaultProps = {
-  height: '200px',
-};
-
 export default LoadingPanel;

static/app/components/checkInTimeline/timelineZoom.tsx

@@ -146,7 +146,22 @@ function useTimelineZoom<E extends HTMLElement>({enabled = true, onSelect}: Opti
   }, [enabled, handleMouseMove, handleMouseDown, handleMouseUp]);
 
   const timelineSelector = (
-    <AnimatePresence>{isActive && <Selection role="presentation" />}</AnimatePresence>
+    <AnimatePresence>
+      {isActive && (
+        <Selection
+          role="presentation"
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          transition={testableTransition({duration: 0.2})}
+          variants={{
+            initial: {opacity: 0},
+            animate: {opacity: 1},
+            exit: {opacity: 0},
+          }}
+        />
+      )}
+    </AnimatePresence>
   );
 
   return {selectionContainerRef: containerRef, isActive, timelineSelector};
@@ -165,16 +180,4 @@ const Selection = styled(motion.div)`
   z-index: 2;
 `;
 
-Selection.defaultProps = {
-  initial: 'initial',
-  animate: 'animate',
-  exit: 'exit',
-  transition: testableTransition({duration: 0.2}),
-  variants: {
-    initial: {opacity: 0},
-    animate: {opacity: 1},
-    exit: {opacity: 0},
-  },
-};
-
 export {useTimelineZoom};

static/app/components/circleIndicator.tsx

@@ -2,22 +2,29 @@ import styled from '@emotion/styled';
 
 type Props = {
   color?: string;
+  /**
+   * @default true
+   */
   enabled?: boolean;
+  /**
+   * @default 14
+   */
   size?: number;
 };
 
+const defaultProps = {
+  enabled: true,
+  size: 14,
+};
+
 const CircleIndicator = styled('div')<Props>`
   display: inline-block;
   position: relative;
   border-radius: 50%;
-  height: ${p => p.size}px;
-  width: ${p => p.size}px;
-  background: ${p => p.color ?? (p.enabled ? p.theme.success : p.theme.error)};
+  height: ${p => p.size ?? defaultProps.size}px;
+  width: ${p => p.size ?? defaultProps.size}px;
+  background: ${p =>
+    p.color ?? (p.enabled ?? defaultProps.enabled ? p.theme.success : p.theme.error)};
 `;
 
-CircleIndicator.defaultProps = {
-  enabled: true,
-  size: 14,
-};
-
 export default CircleIndicator;

static/app/components/globalModal/index.tsx

@@ -233,7 +233,19 @@ function GlobalModal({onClose}: Props) {
         >
           <AnimatePresence>
             {visible && (
-              <Modal role="dialog" aria-modal css={options.modalCss}>
+              <Modal
+                role="dialog"
+                aria-modal
+                css={options.modalCss}
+                initial={{opacity: 0, y: -10}}
+                animate={{opacity: 1, y: 0}}
+                exit={{opacity: 0, y: 15}}
+                transition={testableTransition({
+                  type: 'spring',
+                  stiffness: 450,
+                  damping: 25,
+                })}
+              >
                 <Content role="document">{renderedChild}</Content>
               </Modal>
             )}
@@ -285,16 +297,6 @@ const Modal = styled(motion.div)`
   }
 `;
 
-Modal.defaultProps = {
-  initial: {opacity: 0, y: -10},
-  animate: {opacity: 1, y: 0},
-  exit: {opacity: 0, y: 15},
-  transition: testableTransition({
-    opacity: {duration: 0.2},
-    y: {duration: 0.25},
-  }),
-};
-
 const Content = styled('div')`
   background: ${p => p.theme.background};
   border-radius: ${p => p.theme.modalBorderRadius};

static/app/components/highlightModalContainer.tsx

@@ -5,14 +5,20 @@ import BottomLeft from 'sentry-images/pattern/highlight-bottom-left.svg';
 import TopRight from 'sentry-images/pattern/highlight-top-right.svg';
 
 type Props = {
-  bottomWidth: string;
   children: React.ReactNode;
-  topWidth: string;
+  /**
+   * @default '200px'
+   */
+  bottomWidth?: string;
+  /**
+   * @default '400px'
+   */
+  topWidth?: string;
 };
 
 export default function HighlightModalContainer({
-  topWidth,
-  bottomWidth,
+  topWidth = '400px',
+  bottomWidth = '200px',
   children,
 }: Props) {
   return (
@@ -41,8 +47,3 @@ const PositionBottomLeft = styled('img')<{width: string}>`
   pointer-events: none;
   border-radius: 0 0 0 ${p => p.theme.modalBorderRadius};
 `;
-
-HighlightModalContainer.defaultProps = {
-  topWidth: '400px',
-  bottomWidth: '200px',
-};

static/app/components/interactionStateLayer.tsx

@@ -10,13 +10,19 @@ interface StateLayerProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * Controls if the opacity is increased when the element is in a
    * selected or expanded state (aria-selected='true' or aria-expanded='true')
+   *
+   * @default true
    */
   hasSelectedBackground?: boolean;
   higherOpacity?: boolean;
   isHovered?: boolean;
   isPressed?: boolean;
 }
 
+const defaultProps = {
+  hasSelectedBackground: true,
+};
+
 const InteractionStateLayer = styled(
   (props: StateLayerProps) => {
     // Prevent type checking of `rest` as it has hundreds of properties and is slow
@@ -74,7 +80,7 @@ const InteractionStateLayer = styled(
           *:active > && {
             opacity: ${p.higherOpacity ? 0.12 : 0.09};
           }
-          ${p.hasSelectedBackground &&
+          ${(p.hasSelectedBackground ?? defaultProps.hasSelectedBackground) &&
           css`
             *[aria-expanded='true'] > &&,
             *[aria-selected='true'] > && {
@@ -90,8 +96,4 @@ const InteractionStateLayer = styled(
   }
 `;
 
-InteractionStateLayer.defaultProps = {
-  hasSelectedBackground: true,
-};
-
 export default InteractionStateLayer;

static/app/components/letterAvatar.tsx

@@ -106,10 +106,6 @@ const LetterAvatar = styled(
   ${imageStyle};
 `;
 
-LetterAvatar.defaultProps = {
-  round: false,
-};
-
 export default forwardRef<SVGSVGElement, Props>((props, ref) => (
   <LetterAvatar forwardedRef={ref} {...props} />
 ));

static/app/components/pageOverlay.tsx

@@ -32,27 +32,21 @@ const subItemAnimation = {
   },
 };
 
-const Header = styled(motion.h2)`
+const Header = styled((props: React.ComponentProps<typeof motion.h2>) => (
+  <motion.h2 variants={subItemAnimation} transition={testableTransition()} {...props} />
+))`
   display: flex;
   align-items: center;
   font-weight: ${p => p.theme.fontWeightNormal};
   margin-bottom: ${space(1)};
 `;
 
-Header.defaultProps = {
-  variants: subItemAnimation,
-  transition: testableTransition(),
-};
-
-const Body = styled(motion.div)`
+const Body = styled((props: React.ComponentProps<typeof motion.div>) => (
+  <motion.div variants={subItemAnimation} transition={testableTransition()} {...props} />
+))`
   margin-bottom: ${space(2)};
 `;
 
-Body.defaultProps = {
-  variants: subItemAnimation,
-  transition: testableTransition(),
-};
-
 type ContentOpts = {
   Body: typeof Body;
   Header: typeof Header;
@@ -206,7 +200,13 @@ function PageOverlay({
   return (
     <MaskedContent {...props}>
       {children}
-      <ContentWrapper ref={contentRef} transition={transition} variants={{animate: {}}}>
+      <ContentWrapper
+        initial="initial"
+        animate="animate"
+        ref={contentRef}
+        transition={transition}
+        variants={{animate: {}}}
+      >
         {BackgroundComponent && (
           <Background>
             <BackgroundComponent anchorRef={anchorRef} />
@@ -234,11 +234,6 @@ const ContentWrapper = styled(motion.div)`
   z-index: 900;
 `;
 
-ContentWrapper.defaultProps = {
-  initial: 'initial',
-  animate: 'animate',
-};
-
 const Background = styled('div')`
   ${absoluteFull}
   z-index: -1;

static/app/components/platformPicker.tsx

@@ -286,12 +286,6 @@ const ClearButton = styled(Button)`
   color: ${p => p.theme.textColor};
 `;
 
-ClearButton.defaultProps = {
-  icon: <IconClose isCircled />,
-  borderless: true,
-  size: 'xs',
-};
-
 const PlatformCard = styled(({platform, selected, onClear, ...props}) => (
   <div {...props}>
     <StyledPlatformIcon
@@ -302,7 +296,15 @@ const PlatformCard = styled(({platform, selected, onClear, ...props}) => (
       format="lg"
     />
     <h3>{platform.name}</h3>
-    {selected && <ClearButton onClick={onClear} aria-label={t('Clear')} />}
+    {selected && (
+      <ClearButton
+        icon={<IconClose isCircled />}
+        borderless
+        size="xs"
+        onClick={onClear}
+        aria-label={t('Clear')}
+      />
+    )}
   </div>
 ))`
   position: relative;