Skip to content

feat(feedback): add standalone comment entry point#676

Open
martyanovandrey wants to merge 11 commits into
masterfrom
DOCSTOOLS-5802-feedback-comment
Open

feat(feedback): add standalone comment entry point#676
martyanovandrey wants to merge 11 commits into
masterfrom
DOCSTOOLS-5802-feedback-comment

Conversation

@martyanovandrey

@martyanovandrey martyanovandrey commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

What

Decouples rating from commenting in the article feedback block. Adds an opt-in "Leave a comment" entry point next to like/dislike that opens a rating-free feedback form, so a comment can be left independently of any rating (the pattern used by DigitalOcean and AWS docs). Control visibility (comment entry point, aside reactions, etc.) is configured through one typed viewerInterface map.

Changes

  • Data contract: add FeedbackType.comment. A neutral comment is sent as {type: comment, comment}. Additive only; existing payloads unchanged.
  • Generalize DislikeVariantsPopup into a reusable FeedbackFormPopup (titleKey + showVariants): dislike keeps reasons + comment; neutral comment is free-text only.
  • New FeedbackControl entry point: Wide (footer) as a flat "Leave a comment" button under Yes/No; Regular (aside) as a comment icon next to the thumbs.
  • Control visibility via one map: DocPage consumes its (previously dormant) viewerInterface prop, merging it over the surrounding InterfaceProvider and re-providing it, so a single prop configures every control by key. Same keys as the config-driven interface (used by @diplodoc/cli / @diplodoc/client).
    • feedback-comment: true enables the comment entry point (opt-in, off by default).
    • feedback-aside: false hides the aside (top) reactions while keeping the footer block.
    • Typed InterfaceKey union gives autocomplete and typo-checking; arbitrary string keys are still allowed.
    • The ad-hoc showFeedbackComment / hideAsideFeedback props were removed in favour of the map. Feedback keeps a showComment unit prop for standalone use.
  • Analytics: add DOCS_FOOTER_FEEDBACK_CLICK and DOCS_ASIDE_FEEDBACK_CLICK.
  • i18n: add comment-text and comment-form-title across all locales (ru/en authored; rest best-effort).
  • Demo: the Document story drives everything via viewerInterface (a HideAsideFeedback arg toggles the aside reactions); the standalone Feedback story uses showComment; a neutral comment submit no longer resets the rating.

Configuration

Everything is off/shown by default. Configure via the viewerInterface prop (for consumers building their own client) or the same keys in InterfaceProvider / build config (config-driven path). The prop merges over the surrounding provider, per key.

<DocPage
  {...props}
  viewerInterface={{
    'feedback-comment': true,  // enable the comment entry point
    'feedback-aside': false,   // hide the top reactions, keep the footer block
  }}
/>
# config-driven equivalent
interface:
  feedback-comment: true
  feedback-aside: false

Standalone Feedback also accepts showComment. Keys default to each control's own default: most controls are shown (false hides); feedback-comment is opt-in (true shows).

Note: adding feedback-comment / feedback-aside to the @diplodoc/cli config schema (yfm-schema.yaml) is a small separate change in the CLI package.

Compatibility

No breaking changes - everything additive:

  • FeedbackType gains comment; FeedbackSendData, FeedbackView and existing props unchanged. viewerInterface on DocPage was already declared (now wired); its type is widened to the typed ViewerInterface (a superset of Record<string, boolean>).
  • The renamed/new control files are internal (not in the barrel; exports blocks deep imports), so the rename is invisible.
  • New i18n keys are additive.
  • Comment is opt-in and aside reactions default to shown, so the default rendered output is unchanged for existing consumers.

Visual tests

Baselines were regenerated on the x86_64 CI runner via /update-screenshots and are included.

Out of scope (follow-up)

Optional external feedback form URL (would extend the feedback config object across CLI + client + a component prop).

@martyanovandrey martyanovandrey requested review from a team and diplodoc-bot as code owners June 30, 2026 07:03
@martyanovandrey martyanovandrey requested review from separatrixxx and removed request for a team June 30, 2026 07:03
@martyanovandrey

Copy link
Copy Markdown
Contributor Author

/update-screenshots

@github-actions

Copy link
Copy Markdown
Contributor

✅ Screenshots have been updated successfully!

@yc-ui-bot

Copy link
Copy Markdown
Contributor

Visual Tests Report is ready.

martyanovandrey and others added 4 commits June 30, 2026 14:48
Decouple rating from commenting. Add an always-available comment control
next to like/dislike in both footer (Wide) and aside (Regular) views that
opens a rating-free feedback form, sending {type: comment, comment}.

- add FeedbackType.comment to the data contract
- generalize DislikeVariantsPopup into a reusable FeedbackFormPopup
  parametrized by titleKey and showVariants
- add FeedbackControl entry point and DOCS_FOOTER/ASIDE_FEEDBACK_CLICK
  analytics events
- add comment-text and comment-form-title i18n keys across all locales
- keep the rating untouched on a neutral comment submit in demo stories
Allow hiding the comment entry point independently of the like/dislike
rating via useInterface('feedback-comment'), mirroring the toc/toc-header
pattern. The key defaults to shown; set interface['feedback-comment'] to
false (globally or per-page meta) to hide the comment control and its
popups. The master 'feedback' flag still hides the whole block.
The Wide-view comment control used flex-basis:100%, so its hover/focus
background stretched across the whole feedback box. Wrap it in a full-width
row and let the button stay content-width and centered, so its hover hugs
the label and visually matches the like/dislike group.
@martyanovandrey martyanovandrey force-pushed the DOCSTOOLS-5802-feedback-comment branch from 7f9ce45 to c0c9c60 Compare June 30, 2026 11:48
@yc-ui-bot

Copy link
Copy Markdown
Contributor

Storybook preview is ready.

In Regular view the comment control was wrapped in a display:contents row,
so the tooltip popup's inline nodes joined the aside flex row on hover and
nudged the neighbouring control by its margin. Render the bare control in
Regular (like the like/dislike icons) and keep the wrapper only for the
Wide footer.
For the public package, the comment control must not appear on upgrade
unless explicitly enabled. Show it only when interface['feedback-comment']
is true (read directly, leaving the useInterface hide-flag contract
untouched). Enable the flag in the demo stories so Storybook and the
screenshot tests still exercise the control.
Add a showComment prop to Feedback for consumers that use the package as a
dependency, threaded through DocPage (showFeedbackComment) and Controls so
both the footer and aside honour it. The prop takes precedence; when omitted
it falls back to the feedback-comment interface flag (config-driven path).
Both default to off, so an upgrade still changes nothing by default.
Add a hideAsideFeedback prop (DocPage + Controls) to hide the like/dislike
reactions in the aside/header controls while keeping the footer feedback
block. When the prop is omitted it falls back to the feedback-aside
interface flag. Defaults to shown, so nothing changes by default. Lets a
consumer that builds its own client drop the top reactions programmatically.
Replace the ad-hoc showFeedbackComment / hideAsideFeedback props with a
single, typed control-visibility map. DocPage now consumes its (previously
dormant) viewerInterface prop: it merges the map over the surrounding
InterfaceProvider and re-provides it, so one prop configures every control
by key (feedback, feedback-aside, feedback-comment, ...). Add a typed
InterfaceKey union (open to custom strings) for autocomplete. Feedback keeps
its showComment unit prop. Additive and non-breaking; defaults unchanged.
@martyanovandrey martyanovandrey force-pushed the DOCSTOOLS-5802-feedback-comment branch from 19c2989 to 94442d5 Compare July 2, 2026 08:58
- drop redundant '?? {}' in DocPage.getInterface (spreading undefined is a no-op)
- reword an inherited TODO into a plain note (documents a uikit limitation)
- name the FeedbackControl forwardRef render function
Add a comment-form-placeholder i18n key (customer-provided ru/en copy;
other locales best-effort) and parametrize FeedbackFormPopup with an
optional placeholderKey. The neutral comment form uses the new friendlier
text; the dislike form keeps the shared comment-placeholder.
@martyanovandrey

Copy link
Copy Markdown
Contributor Author

/update-screenshots

@sonarqubecloud

sonarqubecloud Bot commented Jul 6, 2026

Copy link
Copy Markdown

@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

✅ Screenshots have been updated successfully!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants