Update modal dialog

assets/js/components/ModalDialog.js

@@ -43,19 +43,19 @@ import {
 import ExclamationIcon from '../../svg/icons/warning.svg';
 
 function ModalDialog( {
-	className,
-	dialogActive,
-	handleDialog,
-	title,
+	className = '',
+	dialogActive = false,
+	handleDialog = null,
+	title = null,
 	provides,
 	handleConfirm,
 	subtitle,
-	confirmButton,
+	confirmButton = null,
 	dependentModules,
-	danger,
+	danger = false,
 	inProgress = false,
-	small,
-	medium,
+	small = false,
+	medium = false,
 } ) {
 	const instanceID = useInstanceId( ModalDialog );
 	const describedByID = `googlesitekit-dialog-description-${ instanceID }`;
@@ -144,23 +144,10 @@ ModalDialog.propTypes = {
 	handleDialog: PropTypes.func,
 	handleConfirm: PropTypes.func.isRequired,
 	title: PropTypes.string,
-	description: PropTypes.string,
 	confirmButton: PropTypes.string,
 	danger: PropTypes.bool,
 	small: PropTypes.bool,
 	medium: PropTypes.bool,
 };
 
-ModalDialog.defaultProps = {
-	className: null,
-	dialogActive: false,
-	handleDialog: null,
-	title: null,
-	description: null,
-	confirmButton: null,
-	danger: false,
-	small: false,
-	medium: false,
-};
-
 export default ModalDialog;

assets/js/components/ModalDialog.stories.js

@@ -21,32 +21,76 @@
  */
 import ModalDialog from './ModalDialog';
 
-function Template() {
-	return (
-		<ModalDialog
-			dialogActive
-			title="Modal Dialog Title"
-			subtitle="Modal Dialog Subtitle"
-			provides={ [
-				'Audience overview',
-				'Top pages',
-				'Top acquisition channels',
-			] }
-			handleConfirm={ global.console.log.bind(
-				null,
-				'Dialog::handleConfirm'
-			) }
-			danger
-		/>
-	);
+const defaultArgs = {
+	dialogActive: true,
+	title: 'Modal Dialog Title',
+	subtitle:
+		'Modal Dialog Subtitle. It will adjust the width based on default value.',
+	handleConfirm: () =>
+		global.console.log.bind( null, 'Dialog::handleConfirm' ),
+};
+
+function Template( args ) {
+	return <ModalDialog { ...args } />;
 }
 
 export const Default = Template.bind( {} );
 Default.storyName = 'Default';
+Default.args = defaultArgs;
 Default.scenario = {
 	label: 'Global/ModalDialog',
 };
 
+export const Danger = Template.bind( {} );
+Danger.storyName = 'Danger';
+Danger.args = {
+	...defaultArgs,
+	title: 'Danger/Error Modal Dialog Title',
+	provides: [ 'Audience overview', 'Top pages', 'Top acquisition channels' ],
+	danger: true,
+};
+Danger.scenario = {
+	label: 'Global/ModalDialog/Danger',
+};
+
+export const DependentModules = Template.bind( {} );
+DependentModules.storyName = 'Danger With DependentModules Text';
+DependentModules.args = {
+	...defaultArgs,
+	subtitle:
+		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
+	dependentModules: 'Depend modules text',
+	provides: [ 'Audience overview', 'Top pages', 'Top acquisition channels' ],
+	danger: true,
+};
+DependentModules.scenario = {
+	label: 'Global/ModalDialog/DangerWithDependentModules',
+};
+
+export const SmallModal = Template.bind( {} );
+SmallModal.storyName = 'Small Width Modal';
+SmallModal.args = {
+	...defaultArgs,
+	subtitle:
+		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
+	small: true,
+};
+SmallModal.scenario = {
+	label: 'Global/ModalDialog/Small',
+};
+
+export const MediumModal = Template.bind( {} );
+MediumModal.storyName = 'Medium Width Modal';
+MediumModal.args = {
+	...defaultArgs,
+	subtitle:
+		'Longer subtitle text for modal dialog. It will adjust to the size prop.',
+	medium: true,
+};
+MediumModal.scenario = {
+	label: 'Global/ModalDialog/Medium',
+};
+
 export default {
 	title: 'Global/Modal Dialog',
 	component: ModalDialog,

assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.stories.js

@@ -29,7 +29,7 @@ function Template() {
 }
 
 export const Default = Template.bind( {} );
-Default.storyName = 'AuthenticatedPermissionsModal dialog';
+Default.storyName = 'AuthenticatedPermissionsModal';
 Default.decorators = [
 	( Story ) => {
 		const setupRegistry = ( registry ) => {

assets/js/components/ResetButton.js

@@ -138,6 +138,7 @@ function ResetButton( { children } ) {
 					) }
 					confirmButton={ __( 'Reset', 'google-site-kit' ) }
 					danger
+					small
 					inProgress={ inProgress }
 				/>
 			</Portal>

assets/js/components/ResetButton.test.js

@@ -133,7 +133,7 @@ describe( 'ResetButton', () => {
 			// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are applied to the .mdc-dialog element.
 			expect(
 				document.querySelector( '.mdc-dialog' ).classList.length
-			).toBe( 1 );
+			).toBe( 2 );
 		} );
 
 		it( 'should close the modal on pressing escape key', async () => {
@@ -152,7 +152,7 @@ describe( 'ResetButton', () => {
 			// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are applied to the .mdc-dialog element.
 			expect(
 				document.querySelector( '.mdc-dialog' ).classList.length
-			).toBe( 1 );
+			).toBe( 2 );
 		} );
 
 		it( 'should reset the plugin, delete local and session storage', async () => {

assets/js/components/UserMenu/index.js

@@ -289,6 +289,7 @@ export default function UserMenu() {
 					) }
 					confirmButton={ __( 'Disconnect', 'google-site-kit' ) }
 					danger
+					small
 				/>
 			</Portal>
 		</Fragment>

assets/js/components/UserMenu/index.test.js

@@ -137,7 +137,7 @@ describe( 'UserMenu', () => {
 				// Verify that none of .mdc-dialog--opening, .mdc-dialog--open or .mdc-dialog--closing are appied to the .mdc-dialog element.
 				expect(
 					document.querySelector( '.mdc-dialog' ).classList.length
-				).toBe( 1 );
+				).toBe( 2 );
 			} );
 
 			it( 'should redirect user to Site Kit splash screen and clear storage', async () => {

assets/sass/vendor/_mdc-dialog.scss

@@ -2,24 +2,17 @@
 .googlesitekit-plugin .mdc-dialog {
 	z-index: 10000;
 
-	%label-small {
-		font-size: $fs-body-sm;
-		letter-spacing: 0.2px;
-		line-height: $lh-label-sm;
-	}
-
 	.mdc-dialog__surface {
-		border-radius: 8px;
-		box-shadow: 0 10px 40px 0 rgba(#000, 0.35);
-		padding: $grid-gap-desktop + 12px $grid-gap-desktop * 2 - 10; // 36px 38px.
+		border-radius: $br-xs;
+		box-shadow: 0 10px 40px 0 rgba($c-black, 0.35);
+		max-width: 76vw;
+		padding: $grid-gap-desktop;
 
 		@media (min-width: $bp-tablet) {
-			max-width: 478px;
-		}
-
-		@media (max-width: $bp-mobileOnly) {
-			max-width: 76vw;
-			padding: $grid-gap-desktop;
+			/* Differs from what is seen in figma design - 478px,
+			after disscusion with Sigal https://10up.slack.com/archives/C01CA828ZPZ/p1707129589297719 */
+			max-width: 590px;
+			padding: 36px;
 		}
 	}
 
@@ -29,17 +22,18 @@
 	}
 
 	.mdc-dialog__title {
-		align-items: center;
+		align-items: flex-start;
 		column-gap: 9px;
 		display: flex;
+		flex-direction: column;
 		font-size: $fs-headline-sm;
 		letter-spacing: 0;
-		padding: 0 0 $grid-gap-desktop - 10px; // 14px.
+		padding: 0 0 4px;
 
-		@media (max-width: $bp-mobileOnly) {
-			align-items: flex-start;
-			flex-direction: column;
-			padding: 0 0 4px;
+		@media (min-width: $bp-tablet) {
+			align-items: center;
+			flex-direction: row;
+			padding: 0 0 $grid-gap-desktop - 10px; // 14px.
 		}
 
 		&::before {
@@ -48,23 +42,20 @@
 
 		svg {
 			color: $c-red-r-500;
+			margin-bottom: 4px;
 
-			@media (max-width: $bp-mobileOnly) {
-				margin-bottom: 4px;
+			@media (min-width: $bp-tablet) {
+				margin-bottom: 0;
 			}
 		}
 	}
 
 	.mdc-dialog__lead {
-		font-size: $fs-title-sm;
-		font-weight: $fw-medium;
+		font-size: $fs-label-md;
+		font-weight: $fw-normal;
 		line-height: $lh-label-md;
 		margin: 0;
 		max-width: 430px;
-
-		@media (max-width: $bp-mobileOnly) {
-			font-weight: $fw-normal;
-		}
 	}
 
 	.mdc-dialog__content {
@@ -75,8 +66,10 @@
 	}
 
 	.mdc-dialog__dependencies {
+		font-size: $fs-label-sm;
+		letter-spacing: $ls-xs;
+		line-height: $lh-label-sm;
 		margin: 1em 0;
-		@extend %label-small;
 
 		strong {
 			font-weight: $fw-medium;
@@ -85,11 +78,7 @@
 
 	.mdc-dialog__provides {
 		overflow: initial;
-		padding: 10px 0;
-
-		& + .mdc-dialog__dependencies {
-			margin: 0.5em 0 0;
-		}
+		padding: 8px 0;
 	}
 
 	.mdc-list {
@@ -101,13 +90,15 @@
 		&.mdc-list--underlined {
 
 			.mdc-list-item {
-				@extend %label-small;
+				font-size: $fs-body-sm;
 				height: unset;
+				letter-spacing: $ls-xs;
+				line-height: $lh-body-sm;
 				min-height: 32px;
 				padding-left: 10px;
 
 				&::before {
-					background-color: $c-neutral-n-900;
+					background-color: $c-surfaces-on-surface;
 					border-radius: 50%;
 					content: " ";
 					height: 4px;
@@ -128,7 +119,7 @@
 		padding: 0;
 	}
 
-	/** Different Size Custom Style **/
+	// Size variants
 	&.googlesitekit-dialog-md {
 		.mdc-dialog__surface {
 			@media (min-width: $bp-tablet) {