Build the feature detail panel shell (`FeatureDetailPanel`)
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 383
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 77
Description
## Feature Description
A card tells the user what a feature is in a sentence. Before committing to setting one up, some users want more: what it actually does for them, what it'll need from them, and what it looks like. The **Read more** control on every card (#13320) opens a panel that slides in over the tab they were on and gives them that fuller picture.
This issue builds the panel itself — how it opens and closes, its header, its three sub-tabs, and its footer, which carries the same call to action the card does so that setting a feature up from here is no different to setting it up from its card. What sits inside the three sub-tabs is covered by #13331, and the relevancy feedback control in the footer by #13337.
One panel serves every card, on both tabs.
For reference, see the [The feature detail panel](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.tlohhdyhro2s) and [UI component architecture](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.fea05o70cj5q) sections in the design doc, and the [feature detail panel design](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=756-13327) in Figma.
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
- **Read more** on a feature card opens a panel that slides in over the tab the user is on, from either tab — **What's new?** (#13321) and **All services and features** (#13328).
- The panel's header shows the feature's title, and the service it belongs to — that service's icon and name — as the card does (#13320).
- The panel has three sub-tabs — **Description**, **Requirements** and **Screenshots** — and opens on **Description** every time it's opened. Their content is covered by #13331.
- The panel footer carries the same call to action the feature's card carries (#13322): the same label, unavailable in the same circumstances, and starting a setup from the panel does exactly what starting it from the card does. The panel closes when the user starts a setup from it.
- The footer also carries a **Cancel** control, which closes the panel.
- The panel can also be closed by its close (X) control, by pressing ESC, and by clicking outside it. However it's closed, the user is returned to the tab they opened it from, where they were on it.
- Opening or closing the panel changes nothing about the feature: it isn't marked as seen, dismissed, or set up, and the hub's new-feature indicators are unaffected.
- The panel behaves as Site Kit's other slide-out panels do: while it's open keyboard focus stays within it, and it's fully keyboard navigable.
- The footer leaves room for the relevancy feedback control, but renders nothing there: that control, its prompt and its behaviour are all covered by #13337.
- The panel matches the Figma design.
## Implementation Brief
- [ ] In `assets/js/modules/feature-discovery/constants.ts`
- Define `FEATURE_DETAIL_PANEL_FEATURE_SLUG_KEY = 'feature-detail-panel-feature-slug`.
- [ ] Create `assets/js/components/feature-discovery/detail/FeatureDetailPanel/PanelFooter.tsx`
- Accept `onClose()` for the Cancel button and a `Feature`.
- Leave space for relevancy controls (#13337).
- Render Cancel link as ``, consistent with ``.
- Render `` (#13322) for the main button.
- [ ] Create `assets/js/components/feature-discovery/detail/FeatureDetailPanel/PanelHeader.tsx`
- Accept `onClose()` for the close button and `feature: Feature`.
- Render `feature.title` as ``.
- Render close button as a `` with ``, consistent with ``.
- Render `feature.moduleSlug` (#13320) using `` plus the module's name from `select( CORE_MODULES ).getModule()` as ``. Fall back to `@/svg/graphics/logo-g.svg` and "Site Kit feature" if there is no `feature.moduleSlug`, consistent with the ``.
- [ ] Create `assets/js/components/feature-discovery/detail/FeatureDetailPanel/PanelContent.tsx`
- Accept `onClose()` handler for closing the panel and `feature: Feature`.
- Use state to manage the active tab.
- Render ``
- Render a ``. Use active tab state for `activeIndex` and `handleActiveIndexUpdate`. Use a `` each for Description, Requirement, and Screenshots. Ensure `focusOnActivate={ false }`.
- Add placeholders for tab content components (#13331) to be rendered based on the active tab.
- Render ``
- [ ] Create `assets/js/components/feature-discovery/detail/FeatureDetailPanel/index.tsx`
- Define an `onClose()` callback that calls `select( CORE_UI ).setValue( FEATURE_DETAIL_PANEL_FEATURE_SLUG_KEY, false )`.
- Use `select( CORE_UI ).getValue( FEATURE_DETAIL_PANEL_FEATURE_SLUG_KEY )` to get a feature `slug`.
- Use `select( CORE_FEATURE_DISCOVERY ).getFeature( slug )` to get a `feature: Feature`.
- Render a ``. Inside render a `` if `!! feature`.
- Use a `googlesitekit-feature-details-panel` class at the top level and BEM syntax for sub-elements in sub-components.
- [ ] Create `assets/sass/components/feature-discovery/_googlesitekit-feature-details-panel.scss`
- Style the details panel.
- Adjust the width of this `.googlesitekit-side-sheet` instance as necessary. This variation may need to transition to the 'full-screen' mode on tablet too, not just mobile.
- The panel contents should fill space between the panel header and footer, scrolling vertically if there's not enough space. The panel header, tab bar, and panel footer should be fixed on scroll.
- Reference styling of `` in `assets/sass/components/global/_googlesitekit-selection-panel.scss` for consistency.
- Import into main styles entrypoint as needed.
- [ ] In `assets/js/components/feature-discovery/FeatureCard.tsx`
- Wire up read more link click handler to open the feature detail panel with `select( CORE_UI ).setValue( FEATURE_DETAIL_PANEL_FEATURE_SLUG_KEY, feature.slug )`.
- [ ] In `assets/js/components/feature-discovery/FeatureDiscoveryApp.tsx`
- Render a ``.
### Test Coverage
- Add stories for the panel open at each tab. Omit VRT references and leave them for #13331.
- Add unit test coverage for `FeatureDetailPanel`, verifying its open and close status and rendered feature respond to the UI flag, that the internal close buttons control the flag and the sheet, that the tab bar controls the tab content and that the panel renderes the content for the feature indicated by the UI flag.
- Add test coverage to the `FeatureCard` for the read more link.
## QA Brief
-
## Changelog entry
-
Contributor guide
Research direction
Start with assets/js/components/feature-discovery/FeatureCard.tsx and FeatureDiscoveryApp.tsx, then compare the existing SelectionPanel components and styles in assets/sass/components/global/_googlesitekit-selection-panel.scss. Run the feature-discovery unit tests and add the requested panel stories and coverage; done means the panel opens, closes, switches tabs, renders the selected feature, and matches the acceptance criteria.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 65/100