From 1afdfbe60d8ad028bd09baa69f3c2eb85b10b6d3 Mon Sep 17 00:00:00 2001 From: Rua Haszard Date: Wed, 24 Jul 2024 13:53:27 +1200 Subject: [PATCH 1/7] add default (= null) for classNames prop so it's optional: - for WizardTaskItem and CollapsibleBody --- client/additional-methods-setup/wizard/collapsible-body.js | 2 +- client/additional-methods-setup/wizard/task-item.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/additional-methods-setup/wizard/collapsible-body.js b/client/additional-methods-setup/wizard/collapsible-body.js index 2d95556b6ce..9e790dfcc6e 100644 --- a/client/additional-methods-setup/wizard/collapsible-body.js +++ b/client/additional-methods-setup/wizard/collapsible-body.js @@ -10,7 +10,7 @@ import classNames from 'classnames'; import WizardTaskContext from './task/context'; import './collapsible-body.scss'; -const CollapsibleBody = ( { className, ...restProps } ) => { +const CollapsibleBody = ( { className = null, ...restProps } ) => { const { isActive } = useContext( WizardTaskContext ); return ( diff --git a/client/additional-methods-setup/wizard/task-item.js b/client/additional-methods-setup/wizard/task-item.js index 943ac88760e..03c4347509e 100644 --- a/client/additional-methods-setup/wizard/task-item.js +++ b/client/additional-methods-setup/wizard/task-item.js @@ -11,7 +11,7 @@ import { Icon, check } from '@wordpress/icons'; import WizardTaskContext from './task/context'; import './task-item.scss'; -const WizardTaskItem = ( { children, title, index, className } ) => { +const WizardTaskItem = ( { children, title, index, className = null } ) => { const { isCompleted, isActive } = useContext( WizardTaskContext ); return ( From 87f2b2bdf2d348a5e91744b15fe9f4275be3cc54 Mon Sep 17 00:00:00 2001 From: Rua Haszard Date: Thu, 25 Jul 2024 08:49:25 +1200 Subject: [PATCH 2/7] changelog --- changelog/fix-9142-classname-optional-default-null | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/fix-9142-classname-optional-default-null diff --git a/changelog/fix-9142-classname-optional-default-null b/changelog/fix-9142-classname-optional-default-null new file mode 100644 index 00000000000..70c1d22ac1b --- /dev/null +++ b/changelog/fix-9142-classname-optional-default-null @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Improve tax details modal for Japan merchants – use correct local terms (consumption tax/corporate number). From a2fbbedf74abf96cead81e0d30fcdd2bb8e815ed Mon Sep 17 00:00:00 2001 From: Rua Haszard Date: Thu, 25 Jul 2024 08:52:31 +1200 Subject: [PATCH 3/7] =?UTF-8?q?changelog=20=E2=80=93=20correct=20for=20bra?= =?UTF-8?q?nch=20=F0=9F=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog/fix-9142-classname-optional-default-null | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/changelog/fix-9142-classname-optional-default-null b/changelog/fix-9142-classname-optional-default-null index 70c1d22ac1b..88c95723cba 100644 --- a/changelog/fix-9142-classname-optional-default-null +++ b/changelog/fix-9142-classname-optional-default-null @@ -1,4 +1,4 @@ -Significance: minor -Type: add +Significance: patch +Type: dev -Improve tax details modal for Japan merchants – use correct local terms (consumption tax/corporate number). +Default classNames prop to null so components are more flexible/easier to use. From 14cf342082885e937de9b921119f28aaa806c239 Mon Sep 17 00:00:00 2001 From: Rua Haszard Date: Wed, 25 Sep 2024 16:37:23 +1200 Subject: [PATCH 4/7] remove redundant null className prop in VAT modal components --- client/vat/form/tasks/company-data-task.tsx | 3 +-- client/vat/form/tasks/vat-number-task.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/client/vat/form/tasks/company-data-task.tsx b/client/vat/form/tasks/company-data-task.tsx index 223c35d309d..d2cac07cc67 100644 --- a/client/vat/form/tasks/company-data-task.tsx +++ b/client/vat/form/tasks/company-data-task.tsx @@ -96,9 +96,8 @@ export const CompanyDataTask = ( { 'Confirm your business details', 'woocommerce-payments' ) } - className={ null } > - +

{ __( @@ -168,7 +167,7 @@ export const VatNumberTask = ( { ) }

- + Date: Tue, 1 Oct 2024 11:40:07 +1300 Subject: [PATCH 5/7] try empty string as default value for className arg, to hint string type to TypeScript --- client/additional-methods-setup/wizard/collapsible-body.js | 2 +- client/additional-methods-setup/wizard/task-item.js | 2 +- client/multi-currency-setup/wizard/task-item.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/additional-methods-setup/wizard/collapsible-body.js b/client/additional-methods-setup/wizard/collapsible-body.js index 9e790dfcc6e..b10bfe65e59 100644 --- a/client/additional-methods-setup/wizard/collapsible-body.js +++ b/client/additional-methods-setup/wizard/collapsible-body.js @@ -10,7 +10,7 @@ import classNames from 'classnames'; import WizardTaskContext from './task/context'; import './collapsible-body.scss'; -const CollapsibleBody = ( { className = null, ...restProps } ) => { +const CollapsibleBody = ( { className = '', ...restProps } ) => { const { isActive } = useContext( WizardTaskContext ); return ( diff --git a/client/additional-methods-setup/wizard/task-item.js b/client/additional-methods-setup/wizard/task-item.js index 03c4347509e..4480ce32f8c 100644 --- a/client/additional-methods-setup/wizard/task-item.js +++ b/client/additional-methods-setup/wizard/task-item.js @@ -11,7 +11,7 @@ import { Icon, check } from '@wordpress/icons'; import WizardTaskContext from './task/context'; import './task-item.scss'; -const WizardTaskItem = ( { children, title, index, className = null } ) => { +const WizardTaskItem = ( { children, title, index, className = '' } ) => { const { isCompleted, isActive } = useContext( WizardTaskContext ); return ( diff --git a/client/multi-currency-setup/wizard/task-item.js b/client/multi-currency-setup/wizard/task-item.js index 02a4c081feb..d28980f29dc 100644 --- a/client/multi-currency-setup/wizard/task-item.js +++ b/client/multi-currency-setup/wizard/task-item.js @@ -15,8 +15,8 @@ const WizardTaskItem = ( { children, title, index, - className, visibleDescription, + className = '', } ) => { const { isCompleted, isActive } = useContext( WizardTaskContext ); From acf17bd00fb035e0c9e71b6889d0066e3701914a Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Wed, 2 Oct 2024 11:19:00 +1000 Subject: [PATCH 6/7] Migrate WizardTaskItem and CollapsibleBody components to TS for improve code safety and clarity (#9510) --- ...{collapsible-body.js => collapsible-body.tsx} | 5 ++++- .../wizard/{task-item.js => task-item.tsx} | 16 ++++++++++++++-- .../wizard/{task-item.js => task-item.tsx} | 14 +++++++++++--- 3 files changed, 29 insertions(+), 6 deletions(-) rename client/additional-methods-setup/wizard/{collapsible-body.js => collapsible-body.tsx} (80%) rename client/additional-methods-setup/wizard/{task-item.js => task-item.tsx} (82%) rename client/multi-currency-setup/wizard/{task-item.js => task-item.tsx} (86%) diff --git a/client/additional-methods-setup/wizard/collapsible-body.js b/client/additional-methods-setup/wizard/collapsible-body.tsx similarity index 80% rename from client/additional-methods-setup/wizard/collapsible-body.js rename to client/additional-methods-setup/wizard/collapsible-body.tsx index b10bfe65e59..df92339fb34 100644 --- a/client/additional-methods-setup/wizard/collapsible-body.js +++ b/client/additional-methods-setup/wizard/collapsible-body.tsx @@ -10,7 +10,10 @@ import classNames from 'classnames'; import WizardTaskContext from './task/context'; import './collapsible-body.scss'; -const CollapsibleBody = ( { className = '', ...restProps } ) => { +const CollapsibleBody: React.FC< React.HTMLAttributes< HTMLDivElement > > = ( { + className, + ...restProps +} ) => { const { isActive } = useContext( WizardTaskContext ); return ( diff --git a/client/additional-methods-setup/wizard/task-item.js b/client/additional-methods-setup/wizard/task-item.tsx similarity index 82% rename from client/additional-methods-setup/wizard/task-item.js rename to client/additional-methods-setup/wizard/task-item.tsx index 4480ce32f8c..f1c7ba4177e 100644 --- a/client/additional-methods-setup/wizard/task-item.js +++ b/client/additional-methods-setup/wizard/task-item.tsx @@ -11,7 +11,19 @@ import { Icon, check } from '@wordpress/icons'; import WizardTaskContext from './task/context'; import './task-item.scss'; -const WizardTaskItem = ( { children, title, index, className = '' } ) => { +interface WizardTaskItemProps { + children: React.ReactNode; + title: string; + index: number; + className?: string; +} + +const WizardTaskItem: React.FC< WizardTaskItemProps > = ( { + children, + title, + index, + className, +} ) => { const { isCompleted, isActive } = useContext( WizardTaskContext ); return ( @@ -26,7 +38,7 @@ const WizardTaskItem = ( { children, title, index, className = '' } ) => { className="wcpay-wizard-task__headline" // tabindex with value `-1` is necessary to programmatically set the focus // on an element that is not interactive. - tabIndex="-1" + tabIndex={ -1 } >
diff --git a/client/multi-currency-setup/wizard/task-item.js b/client/multi-currency-setup/wizard/task-item.tsx similarity index 86% rename from client/multi-currency-setup/wizard/task-item.js rename to client/multi-currency-setup/wizard/task-item.tsx index d28980f29dc..93711e4c80f 100644 --- a/client/multi-currency-setup/wizard/task-item.js +++ b/client/multi-currency-setup/wizard/task-item.tsx @@ -11,12 +11,20 @@ import { Icon, check } from '@wordpress/icons'; import WizardTaskContext from '../../additional-methods-setup/wizard/task/context'; import './task-item.scss'; -const WizardTaskItem = ( { +interface WizardTaskItemProps { + children: React.ReactNode; + title: string; + index: number; + visibleDescription: string; + className?: string; +} + +const WizardTaskItem: React.FC< WizardTaskItemProps > = ( { children, title, index, visibleDescription, - className = '', + className, } ) => { const { isCompleted, isActive } = useContext( WizardTaskContext ); @@ -32,7 +40,7 @@ const WizardTaskItem = ( { className="wcpay-wizard-task__headline" // tabindex with value `-1` is necessary to programmatically set the focus // on an element that is not interactive. - tabIndex="-1" + tabIndex={ -1 } >
From faf777f8ade4de56473dacf635d0b0984ec6d2d6 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Wed, 2 Oct 2024 14:46:43 +1000 Subject: [PATCH 7/7] Update changelog with TS migration --- changelog/fix-9142-classname-optional-default-null | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog/fix-9142-classname-optional-default-null b/changelog/fix-9142-classname-optional-default-null index 88c95723cba..bfcb783f576 100644 --- a/changelog/fix-9142-classname-optional-default-null +++ b/changelog/fix-9142-classname-optional-default-null @@ -1,4 +1,4 @@ Significance: patch Type: dev -Default classNames prop to null so components are more flexible/easier to use. +Migrate WizardTaskItem and CollapsibleBody components to TypeScript, making the className prop optional.