Remove use of deprecated backdropClassName

kraenhansen · kraenhansen · commit a44608b446f5 · 2025-10-07T16:33:47.000+02:00
diff --git a/packages/compass-components/src/components/modals/confirmation-modal.tsx b/packages/compass-components/src/components/modals/confirmation-modal.tsx
@@ -6,12 +6,15 @@ import {
 } from '../leafygreen';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
+export type ConfirmationModalProps = Omit<
+  React.ComponentProps<typeof LeafyGreenConfirmationModal>,
+  'backdropClassName'
+>;
+
 function ConfirmationModal({
   children,
   ...props
-}: React.ComponentProps<
-  typeof LeafyGreenConfirmationModal
->): React.ReactElement {
+}: ConfirmationModalProps): React.ReactElement {
   return (
     <LeafyGreenConfirmationModal {...props}>
       <Body as="div">{children}</Body>
diff --git a/packages/compass-components/src/components/modals/marketing-modal.tsx b/packages/compass-components/src/components/modals/marketing-modal.tsx
@@ -5,10 +5,15 @@ import {
 } from '../leafygreen';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
+export type MarketingModalProps = Omit<
+  React.ComponentProps<typeof LeafyGreenMarketingModal>,
+  'backdropClassName'
+>;
+
 function MarketingModal({
   children,
   ...props
-}: React.ComponentProps<typeof LeafyGreenMarketingModal>): React.ReactElement {
+}: MarketingModalProps): React.ReactElement {
   return (
     <LeafyGreenMarketingModal {...props}>
       <Body as="div">{children}</Body>
diff --git a/packages/compass-components/src/components/modals/modal.tsx b/packages/compass-components/src/components/modals/modal.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { Body, Modal as LeafyGreenModal } from '../leafygreen';
-import { useScrollbars } from '../../hooks/use-scrollbars';
 import { withStackedComponentStyles } from '../../hooks/use-stacked-component';
 
 const styles = css({
@@ -25,24 +24,15 @@ const fullScreenStyles = css({
 });
 
 function UnwrappedModal({
-  backdropClassName,
   className,
   children,
   fullScreen = false,
   ...props
-}: React.ComponentProps<typeof LeafyGreenModal> & {
+}: Omit<React.ComponentProps<typeof LeafyGreenModal>, 'backdropClassName'> & {
   fullScreen?: boolean;
 }): React.ReactElement {
-  // NOTE: We supply scrollbar styles to the `Modal` content as
-  // there is currently a bug in `LeafyGreen` with the portal providers
-  // where our top level `portalContainer` we supply to the `LeafyGreenProvider`
-  // in home.tsx is not used by Modals.
-  // Once this issue is fixed we can remove these styles here.
-  const { className: scrollbarStyles } = useScrollbars();
-
   return (
     <LeafyGreenModal
-      backdropClassName={cx(scrollbarStyles, backdropClassName)}
       className={cx(styles, className, {
         [fullScreenStyles]: fullScreen,
       })}
diff --git a/packages/compass-crud/src/components/insert-document-dialog.tsx b/packages/compass-crud/src/components/insert-document-dialog.tsx
@@ -297,7 +297,6 @@ const InsertDocumentDialog: React.FC<InsertDocumentDialogProps> = ({
     <FormModal
       title="Insert Document"
       subtitle={`To collection ${ns}`}
-      backdropClassName="insert-document-dialog"
       open={isOpen}
       onSubmit={handleInsert.bind(this)}
       onCancel={closeInsertDocumentDialog}
diff --git a/packages/connection-form/src/components/connection-form-modal.tsx b/packages/connection-form/src/components/connection-form-modal.tsx
@@ -4,29 +4,13 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { ConnectionFormProps } from './connection-form';
 import ConnectionForm from './connection-form';
 
-const modalStyles = css({
-  '& > div': {
-    height: '100%',
-  },
-});
-
-const modalContentStyles = css({
+const styles = css({
   width: '960px',
   maxWidth: '960px',
-  margin: 0,
 
   display: 'flex',
   alignItems: 'stretch',
   justifyContent: 'stretch',
-
-  '& > div': {
-    width: '100%',
-  },
-});
-
-const modalContentFullHeightStyles = css({
-  height: '100%',
-  maxHeight: spacing[1600] * 18,
 });
 
 export default function ConnectionFormModal({
@@ -48,11 +32,8 @@ export default function ConnectionFormModal({
       open={isOpen}
       setOpen={setOpen}
       data-testid="connection-form-modal"
-      backdropClassName={modalStyles}
-      className={cx(
-        modalContentStyles,
-        advancedOpen && modalContentFullHeightStyles
-      )}
+      className={styles}
+      fullScreen={advancedOpen}
     >
       <ConnectionForm
         // Key is not applied to the Modal itself or the upper component so that
