Skip to content

Forms Update to use words in the single response actions. #45947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

Forms Update to use words in the single response actions. #45947

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a0af587
Forms: Turn icons into words on the single response view
enejb Nov 14, 2025
1aa55ca
changelog
enejb Nov 14, 2025
8b40859
Update projects/packages/forms/changelog/update-forms-update-to-words…
enejb Nov 14, 2025
c97522c
Remove variant
enejb Nov 15, 2025
d70e37e
Use a class and remove the magic numbers.
enejb Nov 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/update-forms-update-to-words-menu
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Forms: update the icons to now be label
73 changes: 45 additions & 28 deletions projects/packages/forms/src/dashboard/components/response-actions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -90,7 +91,7 @@ const ResponseActions = ( {
}, [ response, registry, onActionComplete ] );

const sharedProps = {
iconSize: 24,
variant: 'tertiary',
showTooltip: true,
size: 'compact',
};
Expand All @@ -102,83 +103,99 @@ const ResponseActions = ( {
{ ...sharedProps }
onClick={ handleMarkAsRead }
isBusy={ isTogglingReadStatus }
label={ markAsReadAction.label }
icon={ markAsReadAction.icon }
></Button>
label={ __( 'Mark as read', 'jetpack-forms' ) }
aria-label={ __( 'Mark as read', 'jetpack-forms' ) }
>
{ markAsReadAction.label }
</Button>
) }
{ ! response.is_unread && (
<Button
{ ...sharedProps }
onClick={ handleMarkAsUnread }
isBusy={ isTogglingReadStatus }
label={ markAsUnreadAction.label }
icon={ markAsUnreadAction.icon }
></Button>
label={ __( 'Mark as unread', 'jetpack-forms' ) }
aria-label={ __( 'Mark as unread', 'jetpack-forms' ) }
>
{ markAsUnreadAction.label }
</Button>
) }
</>
);

switch ( response.status ) {
case 'spam':
return (
<div>
<div className="jp-forms__response-actions">
{ readUnreadButtons }
<Button
{ ...sharedProps }
onClick={ handleMarkAsNotSpam }
isBusy={ isMarkingAsNotSpam }
label={ markAsNotSpamAction.label }
icon={ markAsNotSpamAction.icon }
></Button>
label={ __( 'Mark as not spam', 'jetpack-forms' ) }
aria-label={ __( 'Mark as not spam', 'jetpack-forms' ) }
>
{ markAsNotSpamAction.label }
</Button>
<Button
{ ...sharedProps }
onClick={ handleMoveToTrash }
isBusy={ isMovingToTrash }
label={ moveToTrashAction.label }
icon={ moveToTrashAction.icon }
></Button>
label={ __( 'Move to trash', 'jetpack-forms' ) }
aria-label={ __( 'Move to trash', 'jetpack-forms' ) }
>
{ moveToTrashAction.label }
</Button>
</div>
);

case 'trash':
return (
<div>
<div className="jp-forms__response-actions">
{ readUnreadButtons }
<Button
{ ...sharedProps }
onClick={ handleRestore }
isBusy={ isRestoring }
label={ restoreAction.label }
icon={ restoreAction.icon }
></Button>
label={ __( 'Restore from trash', 'jetpack-forms' ) }
aria-label={ __( 'Restore from trash', 'jetpack-forms' ) }
>
{ restoreAction.label }
</Button>
<Button
{ ...sharedProps }
onClick={ handleDelete }
isBusy={ isDeleting }
label={ deleteAction.label }
icon={ deleteAction.icon }
></Button>
label={ __( 'Delete permanently', 'jetpack-forms' ) }
aria-label={ __( 'Delete permanently', 'jetpack-forms' ) }
>
{ deleteAction.label }
</Button>
</div>
);

default: // 'publish' (inbox) or any other status
return (
<div>
<div className="jp-forms__response-actions">
{ readUnreadButtons }
<Button
{ ...sharedProps }
onClick={ handleMarkAsSpam }
isBusy={ isMarkingAsSpam }
label={ markAsSpamAction.label }
icon={ markAsSpamAction.icon }
></Button>
label={ __( 'Mark as spam', 'jetpack-forms' ) }
aria-label={ __( 'Mark as spam', 'jetpack-forms' ) }
>
{ markAsSpamAction.label }
</Button>
<Button
{ ...sharedProps }
onClick={ handleMoveToTrash }
isBusy={ isMovingToTrash }
label={ moveToTrashAction.label }
icon={ moveToTrashAction.icon }
></Button>
label={ __( 'Move to trash', 'jetpack-forms' ) }
aria-label={ __( 'Move to trash', 'jetpack-forms' ) }
>
{ moveToTrashAction.label }
</Button>
</div>
);
}
Expand Down
9 changes: 6 additions & 3 deletions projects/packages/forms/src/dashboard/components/response-navigation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
></Button>
) }
Expand All @@ -43,15 +44,17 @@ const ResponseNavigation = ( {
{ ...sharedProps }
disabled={ ! hasNext }
icon={ chevronDown }
label={ __( 'Next', 'jetpack-forms' ) }
label={ __( 'Next response', 'jetpack-forms' ) }
aria-label={ __( 'Next response', 'jetpack-forms' ) }
onClick={ onNext }
></Button>
) }
{ onClose && (
<Button
{ ...sharedProps }
icon={ close }
label={ __( 'Close', 'jetpack-forms' ) }
label={ __( 'Close response', 'jetpack-forms' ) }
aria-label={ __( 'Close response', 'jetpack-forms' ) }
onClick={ onClose }
></Button>
) }
Expand Down
2 changes: 1 addition & 1 deletion projects/packages/forms/src/dashboard/components/response-view/single.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const SingleResponseView = ( {
<HStack alignment="left">
<ResponseActions onActionComplete={ handleActionComplete } response={ sidePanelItem } />
</HStack>
<HStack alignment="right">
<HStack alignment="right" style={ { width: '96px', minWidth: '96px' } }>
<ResponseNavigation { ...navigationProps } onClose={ onRequestClose } />
</HStack>
</HStack>
Expand Down
5 changes: 5 additions & 0 deletions projects/packages/forms/src/dashboard/components/response-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,11 @@
}
}

.jp-forms__response-actions .components-button {
Copy link
Member

@simison simison Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you should be able to handle these spacings with HStack component; we sort of rarely need to add things like these anymore.

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;
Expand Down
4 changes: 2 additions & 2 deletions projects/packages/forms/src/dashboard/inbox/dataviews/actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -685,7 +685,7 @@ export const markAsReadAction: Action = {
id: 'mark-as-read',
isPrimary: false,
icon: <Icon icon={ seen } />,
label: __( 'Mark as read', 'jetpack-forms' ),
label: __( 'Read', 'jetpack-forms' ),
Copy link
Member

@simison simison Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ilonagl I'm not sure this is a good rename; it's clearer "mark as read" in the dropdown

Image

Copy link

@ilonagl ilonagl Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

isEligible: item => item.is_unread,
supportsBulk: true,
async callback( items, { registry } ) {
Expand Down Expand Up @@ -800,7 +800,7 @@ export const markAsUnreadAction: Action = {
id: 'mark-as-unread',
isPrimary: false,
icon: <Icon icon={ unseen } />,
label: __( 'Mark as unread', 'jetpack-forms' ),
label: __( 'Unread', 'jetpack-forms' ),
isEligible: item => ! item.is_unread,
supportsBulk: true,
async callback( items, { registry } ) {
Expand Down
Loading