diff --git a/projects/packages/forms/changelog/update-forms-update-to-words-menu b/projects/packages/forms/changelog/update-forms-update-to-words-menu new file mode 100644 index 0000000000000..e08bfc22b520f --- /dev/null +++ b/projects/packages/forms/changelog/update-forms-update-to-words-menu @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Forms: update the icons to now be labels diff --git a/projects/packages/forms/src/dashboard/components/response-actions/index.tsx b/projects/packages/forms/src/dashboard/components/response-actions/index.tsx index d143ae642dddf..928fdba0cfdc8 100644 --- a/projects/packages/forms/src/dashboard/components/response-actions/index.tsx +++ b/projects/packages/forms/src/dashboard/components/response-actions/index.tsx @@ -4,6 +4,7 @@ import { Button } from '@wordpress/components'; import { useRegistry } from '@wordpress/data'; import { useCallback, useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ @@ -90,7 +91,6 @@ const ResponseActions = ( { }, [ response, registry, onActionComplete ] ); const sharedProps = { - iconSize: 24, showTooltip: true, size: 'compact', }; @@ -102,18 +102,22 @@ const ResponseActions = ( { { ...sharedProps } onClick={ handleMarkAsRead } isBusy={ isTogglingReadStatus } - label={ markAsReadAction.label } - icon={ markAsReadAction.icon } - > + label={ __( 'Mark as read', 'jetpack-forms' ) } + aria-label={ __( 'Mark as read', 'jetpack-forms' ) } + > + { markAsReadAction.label } + ) } { ! response.is_unread && ( + label={ __( 'Mark as unread', 'jetpack-forms' ) } + aria-label={ __( 'Mark as unread', 'jetpack-forms' ) } + > + { markAsUnreadAction.label } + ) } ); @@ -121,64 +125,76 @@ const ResponseActions = ( { switch ( response.status ) { case 'spam': return ( -
+
{ readUnreadButtons } + label={ __( 'Mark as not spam', 'jetpack-forms' ) } + aria-label={ __( 'Mark as not spam', 'jetpack-forms' ) } + > + { markAsNotSpamAction.label } + + label={ __( 'Move to trash', 'jetpack-forms' ) } + aria-label={ __( 'Move to trash', 'jetpack-forms' ) } + > + { moveToTrashAction.label } +
); case 'trash': return ( -
+
{ readUnreadButtons } + label={ __( 'Restore from trash', 'jetpack-forms' ) } + aria-label={ __( 'Restore from trash', 'jetpack-forms' ) } + > + { restoreAction.label } + + label={ __( 'Delete permanently', 'jetpack-forms' ) } + aria-label={ __( 'Delete permanently', 'jetpack-forms' ) } + > + { deleteAction.label } +
); default: // 'publish' (inbox) or any other status return ( -
+
{ readUnreadButtons } + label={ __( 'Mark as spam', 'jetpack-forms' ) } + aria-label={ __( 'Mark as spam', 'jetpack-forms' ) } + > + { markAsSpamAction.label } + + label={ __( 'Move to trash', 'jetpack-forms' ) } + aria-label={ __( 'Move to trash', 'jetpack-forms' ) } + > + { moveToTrashAction.label } +
); } diff --git a/projects/packages/forms/src/dashboard/components/response-navigation/index.tsx b/projects/packages/forms/src/dashboard/components/response-navigation/index.tsx index 9d73a4083b0bc..3e853a5c502d8 100644 --- a/projects/packages/forms/src/dashboard/components/response-navigation/index.tsx +++ b/projects/packages/forms/src/dashboard/components/response-navigation/index.tsx @@ -34,7 +34,8 @@ const ResponseNavigation = ( { { ...sharedProps } disabled={ ! hasPrevious } icon={ chevronUp } - label={ __( 'Previous', 'jetpack-forms' ) } + label={ __( 'Previous response', 'jetpack-forms' ) } + aria-label={ __( 'Previous response', 'jetpack-forms' ) } onClick={ onPrevious } > ) } @@ -43,7 +44,8 @@ const ResponseNavigation = ( { { ...sharedProps } disabled={ ! hasNext } icon={ chevronDown } - label={ __( 'Next', 'jetpack-forms' ) } + label={ __( 'Next response', 'jetpack-forms' ) } + aria-label={ __( 'Next response', 'jetpack-forms' ) } onClick={ onNext } > ) } @@ -51,7 +53,8 @@ const ResponseNavigation = ( { ) } diff --git a/projects/packages/forms/src/dashboard/components/response-view/single.tsx b/projects/packages/forms/src/dashboard/components/response-view/single.tsx index 1df91188967e5..7c816a4a0f43e 100644 --- a/projects/packages/forms/src/dashboard/components/response-view/single.tsx +++ b/projects/packages/forms/src/dashboard/components/response-view/single.tsx @@ -141,7 +141,7 @@ const SingleResponseView = ( { - + diff --git a/projects/packages/forms/src/dashboard/components/response-view/style.scss b/projects/packages/forms/src/dashboard/components/response-view/style.scss index 9ee1208298729..e52125b6b9a8d 100644 --- a/projects/packages/forms/src/dashboard/components/response-view/style.scss +++ b/projects/packages/forms/src/dashboard/components/response-view/style.scss @@ -101,6 +101,11 @@ .jp-forms__inbox-response-data-value { white-space: pre-wrap; } +// for increased specificity. +.jp-forms__response-navigation-container.jp-forms__response-navigation-container { + width: auto; + min-width: fit-content; +} .response-country-flag { font-size: 16px; @@ -130,6 +135,11 @@ } } +.jp-forms__response-actions .components-button { + padding-left: 8px; + padding-right: 8px; +} + .jp-forms__inbox__tip-container { border-top: 1px solid var(--jp-forms-border-color); margin: 8px 0 0 0; diff --git a/projects/packages/forms/src/dashboard/inbox/dataviews/actions.tsx b/projects/packages/forms/src/dashboard/inbox/dataviews/actions.tsx index 6fdf703b007c9..f6d0ee4248aa7 100644 --- a/projects/packages/forms/src/dashboard/inbox/dataviews/actions.tsx +++ b/projects/packages/forms/src/dashboard/inbox/dataviews/actions.tsx @@ -685,7 +685,7 @@ export const markAsReadAction: Action = { id: 'mark-as-read', isPrimary: false, icon: , - label: __( 'Mark as read', 'jetpack-forms' ), + label: __( 'Read', 'jetpack-forms' ), isEligible: item => item.is_unread, supportsBulk: true, async callback( items, { registry } ) { @@ -800,7 +800,7 @@ export const markAsUnreadAction: Action = { id: 'mark-as-unread', isPrimary: false, icon: , - label: __( 'Mark as unread', 'jetpack-forms' ), + label: __( 'Unread', 'jetpack-forms' ), isEligible: item => ! item.is_unread, supportsBulk: true, async callback( items, { registry } ) {