google / google/site-kit-wp

Build the dashboard header pill (`AddFeaturesButton`)

Open
#13,358 3 comments 0 reactions 1 assignee Claimed by @techanvil 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 dashboard is where users spend their time in Site Kit, so it's where the way into the hub belongs: an **Add features** button in the dashboard header, sitting with the date range selector and the sharing controls, offering the hub at the moment a user is already thinking about their site.

This issue adds that button, on both the main dashboard and the entity dashboard. It carries a small red dot whenever the user has new features they haven't seen. What decides whether the dot is there is the same new-feature count behind the wp-admin menu badge and the **What's new?** list (#13246). Once the user has been to **What's new?** (#13321) the dot is gone, and the button remains as a permanent, quiet way back in.

The overlay that draws attention to this button when it first appears is a separate issue (#13360).

For reference, see the [Entry points & new-feature indicators](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.iwgxt6wulwk) section in the design doc, and the [header button design](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=756-18826) in Figma.

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

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

## Acceptance criteria

- An **Add features** button is added to the Site Kit header on both the main dashboard and the entity dashboard, alongside the date range selector and the dashboard sharing button, positioned as the design shows.
- Clicking it navigates to the hub.
- It carries a small red dot when the user has features that are new and that they haven't seen yet (#13246), and no dot when they don't.
- The dot follows that count: once the user has visited **What's new?** (#13321), or dismissed the features listed there (#13357), the dot is gone the next time a dashboard is loaded.
- It's styled as a colour pill, standing out from the neighbouring header controls, per the Figma design — including how it appears at the viewport sizes the dashboard header supports.
- It's shown only to authenticated users, and only when the `featureDiscoveryHub` feature flag is enabled.
- Its label and its dot are conveyed to screen readers, so a user who can't see the dot is still told there's something new.

## Implementation Brief

- [ ] Create `assets/svg/icons/plus-heavy.svg`
- Extract icon from Figma as an SVG. The icon should be edge-to-edge of the canvas.
- [ ] Create `assets/js/components/feature-discovery/AddFeaturesButton.tsx`:
- Import `assets/svg/icons/plus-heavy.svg` as `PlusHeavy`.
- Render nothing if `! select( CORE_USER ).hasCapability( PERMISSION_MANAGE_OPTIONS )` or `! useFeature( 'featureDiscoveryHub' )`.
- Generate an ID for a descriptive element, `ariaDescribedBy` with `useInstanceId()`.
- Define `hasNewFeatures` as `MODULES_READER_REVENUE_MANAGER.getNewFeatureCount() > 0` (#13246).
- Render an `` with:
- `getAdminURL( 'googlesitekit-features' )` as `href`.
- `googlesitekit-add-features-button` as `className`.
- ``.
- _Add features_ text in ``.
- `aria-describedby` as `ariaDescribedBy` _if_ `hasNewFeatures`.
- Outside of the link, if `hasNewFeatures`, render a `` with:
- `id` as `ariaDescribedBy`.
- _New features available_ text in ``.
- Render a wrapper `

` around the link and span.
- [ ] In `assets/js/components/DashboardMainApp.js`
- Render `` inside ``.
- [ ] In `assets/js/components/DashboardEntityApp.js`
- Render `` inside ``.
- [ ] Create `assets/sass/components/global/_googlesitekit-add-features-button.scss`
- Style the button according to the Figma design.
- Style the span as the red dot, positioned over the link, using the wrapper for relative positioning. The text should be visually hidden.
- Below `$bp-wpAdminBarTablet` visually hide the _Add features_ text and display the button as a 36x36 circle in line with the other icons.

### Test Coverage

- Add unit test coverage for `AddFeaturesButton`, verifying its conditional visibility and the rendering of the badge when there are new features.
- Add VRT stories for `AddFeaturesButton` with and without the badge.
- Update VRT references for existing stories that show the dashboard header.

## QA Brief

- Set up Site Kit with the `featureDiscoveryHub` feature flag enabled.
- Confirm that the **Add features** button appears in the header as per the AC.
- Additionally:
- Check that the button's interactive states match those on the [Figma design system](https://www.figma.com/design/ZL8qlbUyR9lmBaF95t0xpq/sitekit-system-gm2-?node-id=4386-5823&t=5cAyRTjQfA7JdD3r-0).
- Confirm the button appears in the features menu shown in mobile and tablet viewports, as per [Figma](https://www.figma.com/design/IsjMhBZHT5aMgBENleQoSQ/Proactive-user-engagement?node-id=4151-18599&m=dev), which is also now shown on the entity dashboard.
- The button will initially appear with the red dot present. To simulate visiting the "What's new?" tab which will clear the newness state for all new features, run the following snippet in the dev console:

```js
items = googlesitekit.data
.select( 'core/feature-discovery' )
.getFeatures()
.reduce(
( items, { slug } ) => [
...items,
{ slug: `feature-discovery-new-${ slug }`, expiresInSeconds: 1 },
],
[]
);

googlesitekit.data.dispatch( 'core/user' ).setExpirableItemTimers( items );
```

## Changelog entry

-

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.