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

enejb · 2025-11-14T21:10:02Z

Resolves FORMS-408

This PR updates the icons to now be buttons.

In order to make this happen. We use a single word an tooltips to make things a bit more clear.

Before:

After:

Proposed changes:

Update the design to use a single word instead of the icons.
Added a tooltip to show clarify the action even more.
Made sure that the other icons only take up as little space as possible so that things to end up in two lines.
Decreased the hotizontal spacing even more that the current buttons take up so that things don't end up in two lines.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

no

Does this pull request change what data or activity we track or use?

no

Testing instructions:

Go to the Dashboard.

Notice that now the icons are gone for the actions.
Open up a single view. Notice the new copy. notice the new tooltips and the aria labels.
Resize the window notice that we don't end up in a state where the actions are on two lines in english.

Updated button labels and aria-labels for response actions and navigation to be more descriptive and accessible. Changed button variant and styling for consistency. Adjusted layout in response view and refined button padding in SCSS. Also shortened action labels for read/unread in dataviews actions.

github-actions · 2025-11-14T21:10:55Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the update/forms-update-to-words-menu branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/forms-update-to-words-menu

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-11-14T21:11:03Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Copilot

Pull Request Overview

This PR updates the Forms dashboard inbox UI by replacing icon-only action buttons with text-based buttons to improve clarity and usability.

Simplified action button labels from phrases like "Mark as read" to single words like "Read"
Converted icon-only buttons to text buttons with tooltips for better user experience
Adjusted spacing and layout to prevent button wrapping on smaller screens

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
projects/packages/forms/src/dashboard/inbox/dataviews/actions.tsx	Shortened action labels from "Mark as read"/"Mark as unread" to "Read"/"Unread"
projects/packages/forms/src/dashboard/components/response-actions/index.tsx	Converted buttons from icon-only to text-based with tooltips and reduced horizontal padding
projects/packages/forms/src/dashboard/components/response-view/style.scss	Added CSS rule to reduce button padding (8px left/right) for space efficiency
projects/packages/forms/src/dashboard/components/response-view/single.tsx	Fixed navigation container width to prevent layout wrapping
projects/packages/forms/src/dashboard/components/response-navigation/index.tsx	Enhanced button labels with more descriptive text (e.g., "Previous response" instead of "Previous")
projects/packages/forms/changelog/update-forms-update-to-words-menu	Added changelog entry documenting the icon-to-label transition

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

projects/packages/forms/src/dashboard/components/response-navigation/index.tsx

Copilot · 2025-11-14T21:15:57Z

projects/packages/forms/src/dashboard/components/response-view/single.tsx

 						<ResponseActions onActionComplete={ handleActionComplete } response={ sidePanelItem } />
 					</HStack>
-					<HStack alignment="right">
+					<HStack alignment="right" style={ { width: '96px', minWidth: '96px' } }>


[nitpick] Consider moving the inline style to a CSS class for better maintainability. Inline styles with hardcoded pixel values make it harder to adjust responsive behavior and maintain consistency across the codebase. This width/minWidth constraint could be defined in the stylesheet with a semantic class name like jp-forms__response-navigation-container.

Suggested change

<HStack alignment="right" style={ { width: '96px', minWidth: '96px' } }>

<HStack alignment="right" className="jp-forms__response-navigation-container">

I agree with Copilot here. These are magic numbers a bit and potentially need adjusting for mobile?

projects/packages/forms/src/dashboard/components/response-actions/index.tsx

projects/packages/forms/changelog/update-forms-update-to-words-menu

projects/packages/forms/src/dashboard/components/response-actions/index.tsx

projects/packages/forms/src/dashboard/components/response-navigation/index.tsx

…-menu Co-authored-by: Copilot <[email protected]>

simison · 2025-11-14T21:19:17Z

projects/packages/forms/src/dashboard/components/response-view/style.scss

 	}
 }

+.jp-forms__response-actions .components-button {


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

simison · 2025-11-14T21:20:15Z

projects/packages/forms/src/dashboard/inbox/dataviews/actions.tsx

 	isPrimary: false,
 	icon: <Icon icon={ seen } />,
-	label: __( 'Mark as read', 'jetpack-forms' ),
+	label: __( 'Read', 'jetpack-forms' ),


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

projects/packages/forms/src/dashboard/components/response-actions/index.tsx

jp-launch-control · 2025-11-14T21:28:06Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

enejb added 2 commits November 14, 2025 13:01

changelog

1aa55ca

enejb requested review from a team and Copilot November 14, 2025 21:10

enejb added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Review This PR is ready for review. [Package] Forms labels Nov 14, 2025

Copilot started reviewing on behalf of enejb November 14, 2025 21:10 View session

github-actions bot added the [Feature] Contact Form label Nov 14, 2025

enejb changed the title ~~Update/forms update to words menu~~ Forms Update to use words in the singel response actions. Nov 14, 2025

enejb changed the title ~~Forms Update to use words in the singel response actions.~~ Forms Update to use words in the single response actions. Nov 14, 2025

Copilot finished reviewing on behalf of enejb November 14, 2025 21:13

Copilot AI reviewed Nov 14, 2025

View reviewed changes

Update projects/packages/forms/changelog/update-forms-update-to-words…

8b40859

…-menu Co-authored-by: Copilot <[email protected]>

simison reviewed Nov 14, 2025

View reviewed changes

projects/packages/forms/src/dashboard/components/response-actions/index.tsx Outdated Show resolved Hide resolved

enejb added 2 commits November 14, 2025 16:05

Remove variant

c97522c

Use a class and remove the magic numbers.

d70e37e

	<HStack alignment="right" style={ { width: '96px', minWidth: '96px' } }>
	<HStack alignment="right" className="jp-forms__response-navigation-container">

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

Are you sure you want to change the base?

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

Conversation

enejb commented Nov 14, 2025 • edited by simison Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Uh oh!

github-actions bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

simison Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

simison Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

simison Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

ilonagl Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jp-launch-control bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

enejb commented Nov 14, 2025 •

edited by simison

Loading

github-actions bot commented Nov 14, 2025 •

edited

Loading

jp-launch-control bot commented Nov 14, 2025 •

edited

Loading