Feedback widget#237
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📜 Recent review details⏰ Context from checks skipped due to timeout. (1)
📝 WalkthroughWalkthroughThe PR integrates PushFeedback into the Docusaurus document footer, adds feedback widget styling and submission handling, updates code-block theme selectors, and ignores ChangesFeedback and documentation UI
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant FooterWrapper
participant FeedbackButton
participant PushFeedback
FooterWrapper->>FeedbackButton: render positive and negative controls
FeedbackButton->>PushFeedback: submit rating
PushFeedback-->>FooterWrapper: dispatch feedbackSent or feedbackError
FooterWrapper->>FooterWrapper: update feedback status and render result
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying docs-source-network with
|
| Latest commit: |
8f991e2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a366a6cd.docs-source-network.pages.dev |
| Branch Preview URL: | https://feedback-widg.docs-source-network.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/css/custom.scss (1)
829-844: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse built-in button modifier classes instead of custom CSS.
Docusaurus uses the Infima CSS framework, which already provides semantic classes like
.button--danger. You can safely remove these custom overrides and instead change the "No" button's class insrc/theme/DocItem/Footer/index.jsfrombutton--primarytobutton--danger.Additionally, this custom CSS lacks a text color declaration on
:hover, which can cause the SVG icon to become invisible against the background color on hover.♻️ Proposed fix to remove redundant CSS
-.feedback-widget-positive button { - color: var(--ifm-color-primary); - border-color: var(--ifm-color-primary); - - &:hover, &:active { - background-color: var(--ifm-color-primary); - } -} -.feedback-widget-negative button { - color: var(--ifm-color-danger); - border-color: var(--ifm-color-danger); - - &:hover, &:active { - background-color: var(--ifm-color-danger); - } -}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/css/custom.scss` around lines 829 - 844, Remove the custom .feedback-widget-positive button and .feedback-widget-negative button styles from the stylesheet, and update the “No” button in the DocItem Footer component from button--primary to Infima’s button--danger modifier. Preserve the existing positive button styling through its built-in class and ensure the negative button uses the semantic danger variant.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.gitignore:
- Line 3: Remove package-lock.json from the ignore entries in .gitignore so the
application repository tracks and preserves the lockfile for reproducible
dependency installations.
In `@src/plugins/feedback.js`:
- Around line 1-45: Replace the vanilla DOM feedback plugin with React-managed
state: delete src/plugins/feedback.js entirely and remove its clientModules
entry from docusaurus.config.js at lines 200-201. In
src/theme/DocItem/Footer/index.js lines 1-7, import useState; refactor
FeedbackWidget at lines 8-40 to track submitted with useState, register and
clean up feedbackSent handling in useEffect, and conditionally render the
success message without manually removing React nodes. Change the “No” button
class from button--primary to button--danger.
---
Nitpick comments:
In `@src/css/custom.scss`:
- Around line 829-844: Remove the custom .feedback-widget-positive button and
.feedback-widget-negative button styles from the stylesheet, and update the “No”
button in the DocItem Footer component from button--primary to Infima’s
button--danger modifier. Preserve the existing positive button styling through
its built-in class and ensure the negative button uses the semantic danger
variant.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 660cac53-d88c-4a63-86df-cc1d14ea2eb0
📒 Files selected for processing (6)
.gitignoredocusaurus.config.jspackage.jsonsrc/css/custom.scsssrc/plugins/feedback.jssrc/theme/DocItem/Footer/index.js
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: Cloudflare Pages
🧰 Additional context used
📓 Path-based instructions (2)
src/{theme,css,code-theme}/**/*.{js,jsx,ts,tsx,scss,css}
📄 CodeRabbit inference engine (CLAUDE.md)
Custom theme components use Docusaurus swizzling with custom footer components, color mode toggle, SCSS styling in
/src/css/custom.scss, and custom code theme in/src/code-theme/code-theme.js
Files:
src/theme/DocItem/Footer/index.jssrc/css/custom.scss
docusaurus.config.js
📄 CodeRabbit inference engine (CLAUDE.md)
docusaurus.config.js: Changelog and release notes sidebar items should be automatically reversed (newest first) via thereverseSidebarChangelog()function indocusaurus.config.js
The site uses dark mode by default withrespectPrefersColorScheme: false
GitHub edit links should be configured to point to the master branch
Algolia search is configured with app IDN3M9YBYYQY
Files:
docusaurus.config.js
🪛 ast-grep (0.44.1)
src/plugins/feedback.js
[warning] 42-42: Avoid using the initial state variable in setState
Context: setTimeout(registerFeedbackHandlers, 1000)
Note: [CWE-710] Improper Adherence to Coding Standards. Security best practice.
(setstate-same-var)
🔇 Additional comments (3)
package.json (1)
27-29: LGTM!docusaurus.config.js (1)
287-294: LGTM!src/theme/DocItem/Footer/index.js (1)
42-49: LGTM!
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/theme/DocItem/Footer/index.tsx (1)
72-74: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAdd ARIA attributes for screen reader announcements.
Adding
role="status"andaria-live="polite"ensures that screen readers dynamically announce the thank-you message when it appears after the user submits feedback.♿ Proposed accessibility improvement
{feedbackSent && ( - <div className="feedback-thanks">Thanks for your feedback!</div> + <div className="feedback-thanks" role="status" aria-live="polite">Thanks for your feedback!</div> )}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/theme/DocItem/Footer/index.tsx` around lines 72 - 74, Add role="status" and aria-live="polite" to the feedback-thanks div rendered by the feedbackSent condition in the DocItem footer, so screen readers announce the thank-you message when it appears.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/theme/DocItem/Footer/index.tsx`:
- Around line 87-93: Remove the onClick handler that calls setFeedbackSent(true)
from the feedback thumbs-up button in the FeedbackButton component. Let the
existing document-level feedbackSent event listener control unmounting only
after the web component successfully submits the feedback.
---
Nitpick comments:
In `@src/theme/DocItem/Footer/index.tsx`:
- Around line 72-74: Add role="status" and aria-live="polite" to the
feedback-thanks div rendered by the feedbackSent condition in the DocItem
footer, so screen readers announce the thank-you message when it appears.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d641bffa-8ded-4fe0-a4a6-6eb2cf391afb
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
src/css/custom.scsssrc/theme/DocItem/Footer/index.jssrc/theme/DocItem/Footer/index.tsxsrc/theme/DocItem/Footer/styles.module.css
💤 Files with no reviewable changes (2)
- src/theme/DocItem/Footer/styles.module.css
- src/theme/DocItem/Footer/index.js
🚧 Files skipped from review as they are similar to previous changes (1)
- src/css/custom.scss
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: Cloudflare Pages
🧰 Additional context used
📓 Path-based instructions (1)
src/{theme,css,code-theme}/**/*.{js,jsx,ts,tsx,scss,css}
📄 CodeRabbit inference engine (CLAUDE.md)
Custom theme components use Docusaurus swizzling with custom footer components, color mode toggle, SCSS styling in
/src/css/custom.scss, and custom code theme in/src/code-theme/code-theme.js
Files:
src/theme/DocItem/Footer/index.tsx
🔇 Additional comments (1)
src/theme/DocItem/Footer/index.tsx (1)
78-111: 📐 Maintainability & Code QualityCheck the
FeedbackButtonprop casing. The currentpushfeedback-reactusage mixes kebab-case prop names with string booleans, which may not match the wrapper API.
|
|
||
| {/* Hidden rather than unmounted: feedback events emit on the host | ||
| element after the fetch resolves, so it must stay connected for the | ||
| document listeners (esp. feedbackError) to hear them */} |
There was a problem hiding this comment.
Ah, I was gonna comment on your previous commit as I had stumbled on the same issue, and adopted the same solution. Praise for having added a comment :)
| .feedback-widget-negative &:hover { | ||
| color: var(--src-red); | ||
| } | ||
| } |
There was a problem hiding this comment.
| } | |
| } | |
| /* END Feedback widget */ |
| justify-content: center; | ||
| width: 40px; | ||
| height: 40px; | ||
| color: var(--foreground); |
There was a problem hiding this comment.
This var is undefined.
| height: 40px; | ||
| color: var(--foreground); | ||
| opacity: 0.8; | ||
| transition: all 0.3s ease; |
There was a problem hiding this comment.
This doesn't seem to have any effect - the hiding of one div and display of the other is instantaneous to me.
| const handleError = (event: Event) => { | ||
| console.error( | ||
| "Feedback submission error:", | ||
| (event as CustomEvent<{ error: unknown }>).detail.error, |
There was a problem hiding this comment.
Q: What's the advantage of making this into a typed statement if the type is unknown?
2 participants
Feedbackbottom-right floating button, or via thumb up/down buttons in the footer of each page. Clicking the thumbs up in the footer directly sends the feedback, while thumbs down invites people to elaborate via the modal. The dependencydocusaurus-pushfeedbackis for the modal,pushfeedback-reactis for the footer widget.PushFeedback has a 25 feedback entries for free. Let's see how this plays out.