google / google/site-kit-wp

Add relevancy thumbs feedback to the panel

Open
#13,337 7 comments 0 reactions 0 assignees View on GitHub
P0 Team M Type: Enhancement
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 14h
Merged PRs (30d)
77

Description

## Feature Description

The hub is only as good as the features it puts in front of a user, and the one group of people who can say whether a feature is worth their while are the users looking at it. The detail panel (#13330) is where they consider that question, so its footer is where we ask it: a thumbs up / thumbs down against the feature they're reading about.

This issue adds that control, and the follow-up a thumbs-down asks for. A vote is recorded against the user for that specific feature, so the answers say which features are landing and which aren't — one of the PRD's success measures.

Site Kit already has this thumbs control, so it's reused. It needs three additions to work here: a thumbs-up confirmed by a toast, following Site Kit's existing toast behaviour; a thumbs-down that asks why straight away, in a small "Help us improve" menu of reasons — the same menu **What's new?**'s dismiss control will offer (#13357), with the reasons that suit this question; and remembering a vote already given, so that a user who returns to a feature's panel sees the answer they gave rather than being asked again.

The detail panel shell (#13330) already leaves the footer space for this control.

For reference, see the [Feedback: dismiss reasons & relevancy](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.2wf0j9mao9ig) section in the design doc, and the [relevancy feedback](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=843-8912) and [feedback confirmation](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=860-21916) designs in Figma.

---------------

_Do not alter or remove anything below. The following sections will be managed by moderators only._

## Acceptance criteria

- The detail panel's footer (#13330) carries a thumbs-up and a thumbs-down control, alongside the prompt *"Is this service relevant to you? Let us know to help us improve our tailored suggestions"*. It appears on every feature's panel, opened from either tab.
- Clicking either thumb records that vote for that feature against the user, through Site Kit's survey pipeline, as `vote:feature_relevancy_{slug}:up` or `vote:feature_relevancy_{slug}:down` — where `{slug}` identifies the feature.
- A thumbs-up is confirmed with a toast reading *"Thanks for the feedback!"*, shown in the panel directly above the control, as the design places it.
- That toast behaves as Site Kit's existing toasts do: it fades in, has no dismiss control, and fades out on its own after the same interval as every other Site Kit toast.
- A thumbs-down asks why straight away: a menu headed *"Help us improve"* opens in the panel above the control, offering four reasons:
- *It's not relevant to my site goals*
- *I'm already using another tool*
- *Setup seems complex*
- *Something else*
- Choosing a reason records it for that feature against the user, through the same survey pipeline, as:
- *It's not relevant to my site goals* — `feedback:feature_relevancy_{slug}:not_relevant`
- *I'm already using another tool* — `feedback:feature_relevancy_{slug}:already_using`
- *Setup seems complex* — `feedback:feature_relevancy_{slug}:too_complicated`
- *Something else* — `feedback:feature_relevancy_{slug}:something_else`
- Choosing a reason, clicking outside the menu, or pressing Escape closes the menu.
- The menu can be navigated and used with the keyboard alone, and its options are announced to screen readers.
- The thumb the user chose is shown as chosen, and their vote is remembered: reopening that feature's panel — including in a later session — shows the panel with that thumb already selected.
- Site Kit's existing thumbs control is reused, and everywhere it's already used its appearance and behaviour are unchanged.
- The control matches the Figma design.

## Implementation Brief

- [ ] In `assets/js/googlesitekit/datastore/feature-discovery/constants.ts`
- Add a `SOMETHING_ELSE = 'something_else'` to `FEATURE_RELEVANCY_REASONS` (#13357).
- [ ] In `assets/js/components/surveys/ThumbsSurveyTrigger.tsx`
- Add props:
- `hasToast?: boolean`
- `voteDirection?: VoteDirection`
- `feedbackOptions?: FeedbackOption[]` (#13357).
- Pass the `voteDirection` as the default value for `selectedDirection`.
- Track `showToast` as state, defaulting to `false`.
- Track whether the feedback menu is open as state, defaulting to `false`.
- Define a callback for closing the feedback menu that sets the menu state to closed.
- In `handleVote`:
- Set `showToast` to `true` if the vote direction is `VOTE_DIRECTION_UP`.
- Call `setAnchorElement()` with `null` on an upvote if `hasToast`.
- Set the feedback menu to open if the vote direction is `VOTE_DIRECTION_DOWN`.
- Render a `` if `hasToast` and `showToast`:
- Pass an `onDismiss()` callback that sets `showToast` to false.
- Pass `'Thanks for the feedback!'` as the `title`
- Render `` if `feedbackOptions` is passed, with:
- `id` – An ID generated with `useInstanceId()`.
- `isOpen` – The feedback menu open state.
- `onClose` – The feedback menu close callback.
- `options` – Pass through `feedbackOptions`.
- [ ] In `assets/js/components/feature-discovery/detail/FeatureDetailPanel/PanelFooter.tsx`
- Define a list of `feedbackOptions` as an array of `FeedbackMenuOption` for each `FEATURE_RELEVANCY_REASONS` shown in the design.
- `id` – The `FEATURE_RELEVANCY_REASONS` value.
- `label` – The corresponding label from the design.
- `triggerID` – Pass the feature slug and relevancy reason to the trigger ID builder (#13357).
- Add `` in the reserved space, passing:
- `hasToast`
- `voteID` – `feature_relevancy_${slug}`.
- `voteDirection`:
- `VOTE_DIRECTION_UP` if ``isItemDismissed( `feature-discovery-relevancy-${slug}-up` )``
- `VOTE_DIRECTION_DOWN` if ``isItemDismissed( `feature-discovery-relevancy-${slug}-down` )``
- `onVote` – A callback that calls `dismissItem()` with the item slug for the selected vote, and `removeDismissedItems()` with the slug of the opposite vote.
- `feedbackOptions` – `feedbackOptions`
- Use `

` for the "Is this service relevant?" label.
- [ ] In `assets/sass/components/surveys/_googlesitekit-thumbs-survey-trigger.scss`
- Style the toast notice to be positioned `absolute` above and left-aligned to the controls.
- [ ] In `assets/sass/components/feature-discovery/_googlesitekit-feature-details-panel.scss`
- Style the layout of the relevancy controls and their label and adjust the positioning of the feedback menu if necessary.

### Test Coverage

- Add VRT stories for `ThumbsSurveyTrigger` with the toast notices and feedback menus shown.
- Add unit test coverage to `ThumbsSurveyTrigger` for passing a default vote and the behaviour of the toast and feedback menu on downvote.
- Add unit test coverage to `FeatureDetailPanel` for setting and persisting the selected vote.

## QA Brief

-

## Changelog entry

-

Contributor guide

Open the contributing guide

Research direction

Start with assets/js/components/surveys/ThumbsSurveyTrigger.tsx and the existing Site Kit thumbs control, then read PanelFooter.tsx and the relevancy constants. Use the requested unit tests and VRT stories to verify default vote persistence, toast and feedback-menu behavior, keyboard access, styling, and the specified survey events.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, sass, typescript
Domain
accessibility, frontend, testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.