feat(corrections): update style of modal in the editor (#3766)

Automattic · Feb 20, 2025 · 0aee542 · 0aee542
1 parent 88a36f9
commit 0aee542
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 90 deletions.
diff --git a/src/other-scripts/corrections-modal/index.js b/src/other-scripts/corrections-modal/index.js
@@ -1,14 +1,23 @@
 /**
  * WordPress dependencies.
  */
-import { useState, useEffect } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
+import {
+	BaseControl,
+	Button,
+	Modal,
+	PanelBody,
+	Popover,
+	SelectControl,
+	TextareaControl,
+	DateTimePicker,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { PluginDocumentSettingPanel } from '@wordpress/editor';
+import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button, Modal, PanelBody, TextareaControl, SelectControl, Popover, DateTimePicker } from '@wordpress/components';
+import { calendar } from '@wordpress/icons';
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginDocumentSettingPanel } from '@wordpress/editor';
-import { Icon, trash, create } from '@wordpress/icons';
 
 /**
  * Internal dependencies.
@@ -157,8 +166,13 @@ const CorrectionsModal = () => {
 				title= { __( 'Corrections & Clarifications', 'newspack-plugin' ) }
 				className="newspack-corrections-panel"
 			>
-				<Button isSecondary onClick={ () => setIsOpen( true ) }>
-					{ __( 'Manage Corrections', 'newspack-plugin' ) }
+				<Button
+					variant="secondary"
+					onClick={ () => setIsOpen( true ) }
+					label={ __( 'Manage corrections and clarifications', 'newspack-plugin' ) }
+					__next40pxDefaultSize
+				>
+					{ __( 'Manage corrections', 'newspack-plugin' ) }
 				</Button>
 			</PluginDocumentSettingPanel>
 
@@ -167,30 +181,39 @@ const CorrectionsModal = () => {
 					title={ __( 'Corrections & Clarifications', 'newspack-plugin' ) }
 					onRequestClose={ () => setIsOpen( false ) }
 					className="newspack-corrections-modal"
-					size="fill"
+					size="medium"
 				>
 					{ corrections.length > 0 ? (
 						<PanelBody
-						title={ __( 'Corrections List', 'newspack-plugin' ) }
-						initialOpen={ true }
+							title={ __( 'Corrections log', 'newspack-plugin' ) }
+							initialOpen={ true }
+							className="correction-panel"
 						>
 							{ corrections.map( ( correction ) => (
 									<div key={correction.ID} className="correction-item">
 										<div>
 											<SelectControl
-												className='correction-select-type'
 												label={ __( 'Type', 'newspack-plugin' ) }
 												value={ correction.type }
 												options={ types }
 												onChange={ ( value ) => updateCorrection( correction.ID, correction.post_content, value, correction.date ) }
+												__next40pxDefaultSize
 											/>
-											<Button
-												className='correction-date-button'
-												variant='secondary'
-												onClick={ () => setIsDatePopoverOpen( correction.ID ) }
+											<BaseControl
+												id={ `correction-date-${correction.ID}` }
+												label={ __( 'Date', 'newspack-plugin' ) }
 											>
-												{ new Date( correction.date ).toLocaleString() }
-											</Button>
+												<Button
+													variant="secondary"
+													className="correction-date-button"
+													onClick={ () => setIsDatePopoverOpen( correction.ID ) }
+													icon={ calendar}
+													iconPosition="right"
+													__next40pxDefaultSize
+												>
+													{ new Date( correction.date ).toLocaleString() }
+												</Button>
+											</BaseControl>
 											{ isDatePopoverOpen === correction.ID && (
 												<Popover
 													className="correction-date-popover"
@@ -208,75 +231,75 @@ const CorrectionsModal = () => {
 											) }
 										</div>
 										<TextareaControl
-											className='correction-textarea'
 											label={ __( 'Description', 'newspack-plugin' ) }
 											rows={ 3 }
 											value={ correction.post_content }
 											onChange={ ( value ) => updateCorrection( correction.ID, value, correction.type, correction.date ) }
 										/>
 										<Button
-											className='correction-delete'
-											variant='tertiary'
+											text={ __( 'Delete', 'newspack-plugin' ) }
+											variant="secondary"
 											onClick={ () => deleteCorrection( correction.ID ) }
-											icon={ <Icon icon={ trash } height={ 24 } width={ 24 } /> }
+											isDestructive
 										/>
 									</div>
 								) )
 							}
 						</PanelBody>
 					) : null }
 
-					<PanelBody
-						title={ __( 'Add New Correction', 'newspack-plugin' ) }
-						initialOpen={ false }
-					>
-						<div className="correction-item">
-							<SelectControl
-								className='correction-select-type'
-								label={ __( 'Type', 'newspack-plugin' ) }
-								value={ newCorrectionType }
-								options={ types }
-								onChange={ ( value ) => setNewCorrectionType( value ) }
-							/>
-							<TextareaControl
-								className='correction-textarea'
-								label={ __( 'Description', 'newspack-plugin' ) }
-								rows={ 3 }
-								value={ newCorrection }
-								onChange={ ( value ) => setNewCorrection( value ) }
-							/>
-							<Button
-								className='correction-add'
-								onClick={ saveCorrection }
-								disabled={ ! newCorrection }
-								variant='primary'
-								icon={ <Icon icon={ create } height={ 24 } width={ 24 } /> }
-							/>
-						</div>
-					</PanelBody>
+					{ ! isSaving && (
+						<PanelBody
+							title={ __( 'Add new correction', 'newspack-plugin' ) }
+							initialOpen={ false }
+							className="correction-panel"
+						>
+							<div className="correction-item">
+								<SelectControl
+									label={ __( 'Type', 'newspack-plugin' ) }
+									value={ newCorrectionType }
+									options={ types }
+									onChange={ ( value ) => setNewCorrectionType( value ) }
+									__next40pxDefaultSize
+								/>
+								<TextareaControl
+									label={ __( 'Description', 'newspack-plugin' ) }
+									rows={ 3 }
+									value={ newCorrection }
+									onChange={ ( value ) => setNewCorrection( value ) }
+								/>
+								<Button
+									text={ __( 'Add', 'newspack-plugin' ) }
+									variant="secondary"
+									onClick={ saveCorrection }
+									disabled={ ! newCorrection }
+								/>
+							</div>
+						</PanelBody>
+					) }
 
 					{ saveError && <p className="error-message">{ saveError }</p> }
 
-					<Button
-						className='correction-save'
-						variant="primary"
-						onClick={ () => {
-							saveCorrection();
-							saveCorrections();
-						} }
-						disabled={ isSaving }
-					>
-						{ isSaving ? __( 'Saving…', 'newspack-plugin' ) : __( 'Save Corrections', 'newspack-plugin' ) }
-					</Button>
-					<Button
-						className='correction-cancel'
-						variant="secondary"
-						onClick={ () => {
-							setIsOpen( false )
-						} }
-					>
-						{ __( 'Cancel', 'newspack-plugin' ) }
-					</Button>
+					<div className="correction-actions">
+						<Button
+							variant="primary"
+							onClick={ () => {
+								saveCorrection();
+								saveCorrections();
+							} }
+							isBusy={ isSaving }
+						>
+							{ isSaving ? __( 'Saving…', 'newspack-plugin' ) : __( 'Close & save', 'newspack-plugin' ) }
+						</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								setIsOpen( false )
+							} }
+						>
+							{ __( 'Cancel', 'newspack-plugin' ) }
+						</Button>
+					</div>
 				</Modal>
 			) }
 		</>

diff --git a/src/other-scripts/corrections-modal/style.scss b/src/other-scripts/corrections-modal/style.scss
@@ -1,36 +1,44 @@
-/* Corrections Modal */
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
 .correction {
+	&-panel {
+		border-left: 1px solid wp-colors.$gray-200;
+		border-right: 1px solid wp-colors.$gray-200;
+	}
 
-	&-item {
-		display: flex;
-		gap: var(--newspack-ui-spacer-2);
-		border-bottom: 1px solid #e5e5e5;
-		padding: 10px 0;
+	&-item + &-item {
+		border-top: 1px solid wp-colors.$gray-300;
+		padding-top: 16px;
+		margin-top: 16px;
 	}
 
-	&-select-type {
-		min-width: 110px;
+	&-date-popover {
+		.components-popover__content {
+			padding: 16px;
+		}
 	}
 
-	&-textarea {
+	&-date-button {
 		width: 100%;
-	}
 
-	&-date-popover {
-		> * {
-			padding: 10px;
+		&.is-secondary.has-icon {
+			box-shadow: inset 0 0 0 1px var(--wp-components-color-gray-600, wp-colors.$gray-600);
+			color: currentcolor;
+			justify-content: space-between;
 		}
 	}
 
-	&-delete,
-	&-add {
-		margin-top: auto;
-		margin-bottom: auto;
+	&-actions {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 8px;
+		margin: 24px 0 0;
 	}
+}
 
-	&-save,
-	&-cancel {
-		margin-top: var(--newspack-ui-spacer-2);
-		margin-left: var(--newspack-ui-spacer-2);
+.newspack-corrections-panel {
+	.components-button.is-secondary {
+		justify-content: center;
+		width: 100%;
 	}
 }