Finalize Button migration (#10367)

* Don't export the legacy getButtonClasses function
* Deleted legacy Button component; add ref forwarding support to new button

packages/replay-next/components/Button.tsx

@@ -1,25 +1,29 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes, ForwardedRef, forwardRef } from "react";
 
 import styles from "./Button.module.css";
 
-export function Button({
-  className = "",
-  color = "primary",
-  size = "normal",
-  variant = "solid",
-  ...rest
-}: ButtonHTMLAttributes<HTMLButtonElement> & {
-  color?: "primary" | "secondary";
-  size?: "normal" | "large" | "small";
-  variant?: "outline" | "solid";
-}) {
+export const Button = forwardRef(function Button(
+  {
+    className = "",
+    color = "primary",
+    size = "normal",
+    variant = "solid",
+    ...rest
+  }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    color?: "primary" | "secondary";
+    size?: "normal" | "large" | "small";
+    variant?: "outline" | "solid";
+  },
+  ref: ForwardedRef<HTMLButtonElement>
+) {
   return (
     <button
       className={`${className} ${styles.Button}`}
       data-color={color}
       data-size={size}
       data-variant={variant}
+      ref={ref}
       {...rest}
     />
   );
-}
+});

pages/browser/choose-role.tsx

@@ -1,8 +1,8 @@
 import { useRouter } from "next/router";
 
+import { Button } from "replay-next/components/Button";
 import { Role } from "shared/user-data/GraphQL/config";
 import { userData } from "shared/user-data/GraphQL/UserData";
-import { getButtonClasses } from "ui/components/shared/Button";
 import {
   OnboardingActions,
   OnboardingBody,
@@ -25,18 +25,12 @@ export default function ImportSettings() {
         <OnboardingHeader>Can you tell us your role?</OnboardingHeader>
         <OnboardingBody>(So we can skip stuff you might find boring)</OnboardingBody>
         <OnboardingActions>
-          <button
-            className={getButtonClasses("blue", "primary", "2xl")}
-            onClick={() => setRole("developer")}
-          >
+          <Button onClick={() => setRole("developer")} size="large">
             Developer
-          </button>
-          <button
-            className={getButtonClasses("blue", "primary", "2xl")}
-            onClick={() => setRole("other")}
-          >
+          </Button>
+          <Button onClick={() => setRole("other")} size="large">
             Not a Developer
-          </button>
+          </Button>
         </OnboardingActions>
         <iframe id="migrationFrame" className="h-0 w-0" />
       </OnboardingContentWrapper>

pages/browser/welcome.tsx

@@ -1,7 +1,4 @@
-import Link from "next/link";
-import React from "react";
-
-import { getButtonClasses } from "ui/components/shared/Button";
+import { Button } from "replay-next/components/Button";
 import {
   OnboardingBody,
   OnboardingContent,
@@ -12,7 +9,9 @@ import {
 import styles from "src/ui/components/shared/Onboarding/Onboarding.module.css";
 
 export default function WelcomeToReplay() {
-  const classes = getButtonClasses("blue", "primary", "2xl");
+  const onClick = () => {
+    window.location.replace("/login?returnTo=/browser/choose-role");
+  };
 
   return (
     <div className={styles.stars}>
@@ -21,9 +20,9 @@ export default function WelcomeToReplay() {
           <OnboardingHeader>{`Welcome to Replay`}</OnboardingHeader>
           <OnboardingBody>{` `}</OnboardingBody>
 
-          <Link href="/login?returnTo=/browser/choose-role" className={classes}>
+          <Button onClick={onClick} size="large">
             Let's get started!
-          </Link>
+          </Button>
         </OnboardingContent>
       </OnboardingModalContainer>
       <div className={styles.bottom}>

src/ui/components/Timeline/FocusModePopout.tsx

@@ -17,7 +17,6 @@ import { useAppDispatch, useAppSelector } from "ui/setup/hooks";
 import { AppDispatch } from "ui/setup/store";
 import { trackEvent } from "ui/utils/telemetry";
 
-import { Button as LegacyButton } from "../shared/Button";
 import Icon from "../shared/Icon";
 import styles from "./FocusModePopout.module.css";
 
@@ -151,15 +150,13 @@ export default function FocusModePopout({
             Cancel
           </Button>
         )}
-        <LegacyButton
-          color="blue"
-          dataTestId="SaveFocusModeButton"
+        <Button
+          data-test-id="SaveFocusModeButton"
+          disabled={isSavePending}
           onClick={savePendingChanges}
-          size="md"
-          style={isSavePending ? "disabled" : "primary"}
         >
           {isSavePending ? "Saving" : "Save"}
-        </LegacyButton>
+        </Button>
       </div>
     </div>
   );

src/ui/components/shared/Confirm/ConfirmDialog.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef } from "react";
 
 import { Button } from "replay-next/components/Button";
 
-import { Button as LegacyButton } from "../Button";
 import {
   Dialog,
   DialogActions,
@@ -69,25 +68,22 @@ export const ConfirmDialog = ({
       {description && <DialogDescription>{description}</DialogDescription>}
       <DialogActions>
         <Button
-          className="mx-3 flex-1 justify-center"
           data-test-id={dataTestId ? `${dataTestId}-DeclineButton` : undefined}
           data-test-name={dataTestName ? `${dataTestName}-DeclineButton` : undefined}
           onClick={onDecline}
         >
           {declineLabel}
         </Button>
-        <LegacyButton
+        <Button
           className="mx-2 flex-1 justify-center"
-          dataTestId={dataTestId ? `${dataTestId}-ConfirmButton` : undefined}
-          dataTestName={dataTestName ? `${dataTestName}-ConfirmButton` : undefined}
-          color={isDestructive ? "pink" : "blue"}
+          color={isDestructive ? "secondary" : "primary"}
+          data-test-id={dataTestId ? `${dataTestId}-ConfirmButton` : undefined}
+          data-test-name={dataTestName ? `${dataTestName}-ConfirmButton` : undefined}
           onClick={onAccept}
           ref={primaryButtonRef}
-          size="md"
-          style="primary"
         >
           {acceptLabel}
-        </LegacyButton>
+        </Button>
       </DialogActions>
     </Dialog>
   );

src/ui/components/shared/LaunchBrowserModal.tsx

@@ -1,11 +1,9 @@
-import classNames from "classnames";
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 
 import { actions } from "ui/actions";
 import { trackEvent } from "ui/utils/telemetry";
 
-import { getButtonClasses } from "./Button";
 import Modal, { ModalCloseButton } from "./NewModal";
 
 function LaunchBrowser({

src/ui/components/shared/WorkspaceSettingsModal/AddPaymentMethod.tsx

@@ -2,9 +2,9 @@ import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { PaymentMethod } from "@stripe/stripe-js";
 import React, { useEffect, useState } from "react";
 
+import { Button } from "replay-next/components/Button";
 import hooks from "ui/hooks";
 
-import { Button } from "../Button";
 import { CountrySelect } from "./CountrySelect";
 import { FieldRow } from "./FieldRow";
 import { InputField } from "./InputField";
@@ -175,22 +175,15 @@ export function EnterPaymentMethod({
       <CountrySelect />
       <div className="flex flex-row items-center justify-end space-x-4 border-t border-gray-200 pt-5 pb-2">
         <Button
-          size="sm"
-          color="blue"
-          style="secondary"
+          size="small"
           onClick={onCancel}
           className={saving ? "opacity-60" : undefined}
           type="button"
+          variant="outline"
         >
           Cancel
         </Button>
-        <Button
-          size="sm"
-          color="blue"
-          style="primary"
-          type="submit"
-          className={saving ? "opacity-60" : undefined}
-        >
+        <Button size="small" type="submit" className={saving ? "opacity-60" : undefined}>
           Save
         </Button>
       </div>

src/ui/components/shared/WorkspaceSettingsModal/Details.tsx

@@ -1,13 +1,11 @@
-import React from "react";
-
+import { Button } from "replay-next/components/Button";
 import { SubscriptionWithPricing, Workspace } from "shared/graphql/types";
 import { inUnpaidFreeTrial, subscriptionEndsIn } from "ui/utils/workspace";
 
-import { Button } from "../Button";
 import { SettingsHeader } from "../SettingsModal/SettingsBody";
 import { BillingBanners } from "./BillingBanners";
 import { PlanDetails } from "./PlanDetails";
-import { Views, formatPaymentMethod, isSubscriptionCancelled } from "./utils";
+import { formatPaymentMethod, isSubscriptionCancelled } from "./utils";
 
 function TrialDetails({
   workspace,
@@ -44,12 +42,10 @@ function TrialDetails({
           </p>
           <div className="flex justify-center">
             <Button
-              size="xl"
-              color="blue"
-              style="primary"
-              type="submit"
               className="w-full justify-center"
               onClick={onSelectPricing}
+              size="large"
+              type="submit"
             >
               Team Plan Pricing
             </Button>