diff --git a/projects/packages/forms/changelog/update-forms-external-links-ui b/projects/packages/forms/changelog/update-forms-external-links-ui new file mode 100644 index 000000000000..ab0edf5040a3 --- /dev/null +++ b/projects/packages/forms/changelog/update-forms-external-links-ui @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Replace link-style `Button` components and bare `` tags with `Link` from `@wordpress/ui` in integrations, the responses modal, and response inspector mailto/tel links. Open Akismet-related URLs in a new tab only in the block editor so the dashboard keeps navigation in the same tab. diff --git a/projects/packages/forms/routes/responses/integrations-modal.tsx b/projects/packages/forms/routes/responses/integrations-modal.tsx index 9d579cdfbaf2..caab714a674f 100644 --- a/projects/packages/forms/routes/responses/integrations-modal.tsx +++ b/projects/packages/forms/routes/responses/integrations-modal.tsx @@ -214,9 +214,9 @@ const IntegrationCardComponent = ( {

{ message }

- + { id === 'akismet' && ( <> | diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx b/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx index f0181f953606..73017a603af0 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx @@ -56,13 +56,21 @@ export function buildAkismetCard( { 'Akismet is active. There is one step left. Please add your
Akismet key.', 'jetpack-forms' ), - { a: } + { + a: ( + + ), + } ) }

+ { __( 'View spam', 'jetpack-forms' ) } ) : ( - + ) } | { settingsUrl && ( <> - + | ) } diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/google-drive.tsx b/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/google-drive.tsx index 0b295f8d0e27..2b390f1e598f 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/google-drive.tsx +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/google-drive.tsx @@ -1,5 +1,6 @@ import { Button, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis import { __ } from '@wordpress/i18n'; +import { Link } from '@wordpress/ui'; import GoogleSheetsIcon from '../../../../../icons/google-sheets.tsx'; import GoogleDriveConnectButton from '../components/google-drive-connect-button.tsx'; import GoogleDriveDisconnectButton from '../components/google-drive-disconnect-button.tsx'; @@ -60,9 +61,9 @@ export function buildGoogleDriveCard( { { __( 'View form responses', 'jetpack-forms' ) } ) : ( - + ) } | - ), + a: , } ) }

diff --git a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx index 64b6eaebf4d5..2bc1e37993f7 100644 --- a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx +++ b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx @@ -1,6 +1,7 @@ import { __experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis } from '@wordpress/components'; +import { Link } from '@wordpress/ui'; import CopyClipboardButton from '../../../copy-clipboard-button'; import './style.scss'; @@ -14,10 +15,10 @@ const FieldEmail = ( { email } ) => { justify="left" spacing="2" > - + { emailParts[ 0 ] } @{ emailParts[ 1 ] } - + ); diff --git a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx index 1f9361248172..1518bb993a6a 100644 --- a/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx +++ b/projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx @@ -2,6 +2,7 @@ * WordPress dependencies */ import { useEffect, useState } from '@wordpress/element'; +import { Link } from '@wordpress/ui'; /** * Internal dependencies */ @@ -65,7 +66,7 @@ const FieldPhone = ( { phone }: FieldPhoneProps ) => { return ( - { formattedNumber } + { formattedNumber } ); }; diff --git a/projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx b/projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx index 5d72eacedd07..25a613efe98d 100644 --- a/projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx +++ b/projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx @@ -1,6 +1,7 @@ /** * Internal dependencies */ +import { Link } from '@wordpress/ui'; import clsx from 'clsx'; import { isFieldsCollection, @@ -56,7 +57,7 @@ const ResponseFieldsIterator = ( { } if ( isLikelyPhoneNumber( value ) ) { - return { String( value ) }; + return { String( value ) }; } return value as import('react').ReactNode;