From 8bee0345f249a49de42787f7fd7fa00412ae9070 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Tue, 25 Feb 2025 14:19:21 +0530 Subject: [PATCH 1/5] feat: allow customizable modal size through props --- .../src/components/dataviews-item-actions/index.tsx | 2 +- packages/dataviews/src/types.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index 70df04e4333e6f..af29a08a8f6bf9 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx @@ -111,7 +111,7 @@ export function ActionModal< Item >( { __experimentalHideHeader={ !! action.hideModalHeader } onRequestClose={ closeModal } focusOnMount="firstContentElement" - size="medium" + size={ action.modalSize || 'medium' } overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( action.id ) }` } diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index 8ea13ed0b459cc..49c50e71993786 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -463,6 +463,11 @@ export interface ActionModal< Item > extends ActionBase< Item > { * The header of the modal. */ modalHeader?: string; + + /** + * The size of the modal. + */ + modalSize?: 'small' | 'medium' | 'large' | 'fill'; } export interface ActionButton< Item > extends ActionBase< Item > { From a68a101f2cf6f30241bf96c6bc9fcbc7b3f6b27c Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Mon, 3 Mar 2025 09:57:16 +0530 Subject: [PATCH 2/5] feat: add support for `focusOnMount` prop within `ActionModal` --- .../src/components/dataviews-item-actions/index.tsx | 2 +- packages/dataviews/src/types.ts | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index af29a08a8f6bf9..fb1a37e6e80670 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx @@ -110,7 +110,7 @@ export function ActionModal< Item >( { title={ action.modalHeader || label } __experimentalHideHeader={ !! action.hideModalHeader } onRequestClose={ closeModal } - focusOnMount="firstContentElement" + focusOnMount={ action.modalFocusOnMount } size={ action.modalSize || 'medium' } overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( action.id diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index 49c50e71993786..e0213c77dc9742 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -3,6 +3,11 @@ */ import type { ReactElement, ComponentType } from 'react'; +/** + * WordPress dependencies + */ +import type { useFocusOnMount } from '@wordpress/compose'; + /** * Internal dependencies */ @@ -468,6 +473,13 @@ export interface ActionModal< Item > extends ActionBase< Item > { * The size of the modal. */ modalSize?: 'small' | 'medium' | 'large' | 'fill'; + + /** + * The focus on mount of the modal. + */ + modalFocusOnMount?: + | Parameters< typeof useFocusOnMount >[ 0 ] + | 'firstContentElement'; } export interface ActionButton< Item > extends ActionBase< Item > { From a0eb1dfe50fa23d44334a5995d98fce7a1f7ff49 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Tue, 4 Mar 2025 09:09:13 +0530 Subject: [PATCH 3/5] revert: `focusOnMount` prop should use `firstContentElement` --- .../src/components/dataviews-item-actions/index.tsx | 2 +- packages/dataviews/src/types.ts | 12 ------------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index fb1a37e6e80670..af29a08a8f6bf9 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx @@ -110,7 +110,7 @@ export function ActionModal< Item >( { title={ action.modalHeader || label } __experimentalHideHeader={ !! action.hideModalHeader } onRequestClose={ closeModal } - focusOnMount={ action.modalFocusOnMount } + focusOnMount="firstContentElement" size={ action.modalSize || 'medium' } overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase( action.id diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index e0213c77dc9742..49c50e71993786 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -3,11 +3,6 @@ */ import type { ReactElement, ComponentType } from 'react'; -/** - * WordPress dependencies - */ -import type { useFocusOnMount } from '@wordpress/compose'; - /** * Internal dependencies */ @@ -473,13 +468,6 @@ export interface ActionModal< Item > extends ActionBase< Item > { * The size of the modal. */ modalSize?: 'small' | 'medium' | 'large' | 'fill'; - - /** - * The focus on mount of the modal. - */ - modalFocusOnMount?: - | Parameters< typeof useFocusOnMount >[ 0 ] - | 'firstContentElement'; } export interface ActionButton< Item > extends ActionBase< Item > { From 23e80b4204d48055aeffa18dcee9e7a964c6a018 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Tue, 4 Mar 2025 15:52:01 +0530 Subject: [PATCH 4/5] feat: add default value for `modalSize` in types --- packages/dataviews/src/types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index 49c50e71993786..cf891913673063 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -466,6 +466,8 @@ export interface ActionModal< Item > extends ActionBase< Item > { /** * The size of the modal. + * + * @default 'medium' */ modalSize?: 'small' | 'medium' | 'large' | 'fill'; } From dc3ff35b84f9f10d33080f1863ad9bdca7c62e31 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Tue, 4 Mar 2025 16:05:39 +0530 Subject: [PATCH 5/5] chore: update readme --- packages/dataviews/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index 741d25971f5341..6d36fca64f45f1 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -705,6 +705,23 @@ The header text to show in the modal. - Type: `string` - Optional +### `modalSize` + +Specifies the size of the modal window when displaying action content using `RenderModal`. + +- Type: `string` +- Optional +- Default: `'medium'` +- One of: `'small'`, `'medium'`, `'large'`, `'fill'` + +Example: + +```js +{ + modalSize: 'large'; +} +``` + ## Fields API ### `id`