All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[2.1.0] - 2026-10-12

The package code is the same as in 2.0.0. This release updates the docs and Storybook.

Added

• README - Quick Start, Requirements, Next.js and Server Rendering, a Survey Types table, props grouped by step, and async handlers.
• Catalog styles in the README - A collage and a preview of each ready-made style, with how to apply it. See Catalog Styles.
• Catalog CSS for any page - The CSS copied from Storybook works with and without a shadow root. Each style shows its usage with highlighted code.

Fixed

• Sticky note style with NPS - The surface was too narrow for the 11-point scale.
• Storybook theme - Light is the default. A docs page no longer keeps the theme of the last story.

[2.0.0] - 2026-10-09

Added

• Built-in themes - theme prop ('light' | 'dark' | 'auto') on Survey, Surface, and Popup. auto follows the system color scheme. Default is 'light', and --ft-* variables override every theme. See Themes (Dark Mode).
• Class names for every part - classNames now covers the feedback and email steps and the success icon. State keys choiceChecked, checkboxChecked, fieldInvalid, attachBusy, and pointIconFilled add a class while the part is in that state. See Custom Classes.
• Shadow DOM parts - Every part has a part attribute named after its classNames key in kebab case, with states as a second name, so page CSS can style it through ::part(). See Shadow DOM Parts.
• CSS variables - --ft-color-accent and --ft-color-accent-text for the submit button and a checked checkbox (default: text and background colors), --ft-color-star, --ft-checkbox-size, --ft-surface-shadow, and --ft-popup-shadow. See CSS Variables.
• Exported types - SurveyTheme, SurveyClassNames.
• Style catalog - Storybook shows ready-made styles, each with a use case and its CSS to copy. See Custom Styles.

Changed

• BREAKING: color variables take any CSS color - --ft-color-* took bare HSL channels and now take any color. Wrap old values in hsl(): 220 13% 13% → hsl(220 13% 13%). Minimum browsers: Chrome 111, Safari 16.4, Firefox 120.

• BREAKING: classNames is one flat object - The base, scale, and form groups are gone. SurveyClassNames replaces RootClassNames and ScaleClassNames:

  Before	After
  base.base	root
  base.head, base.title, base.body, base.rating, base.feedback, base.contact, base.success	same name, top level
  base.close	removed (never applied), use Popup's classNames.close
  scale.base	scale
  scale.list	points
  scale.button	point
  scale.icon	pointIcon
  scale.score	pointScore
  scale.labels	legend

• BREAKING: Popup classNames - content is renamed to surface. base is removed, use className.

• Styles in a cascade layer - All styles live in @layer react-feedback-surveys, so any unlayered CSS wins over them, global resets included. With Tailwind CSS v4, import them into the components layer. See How Styles Combine.

• No global styles - The library no longer sets font-family on :root/:host or font: inherit on page inputs. It styles only its own elements.

• Screenshot without text - After a rating, an attachment alone is enough to submit, and onFeedbackSubmit gets text: undefined. A general survey still needs text or a choice. See Attachments.

• Keyboard highlight - A rating point focused from the keyboard gets the hover highlight. Hover applies only on devices with a real pointer. Icons don't animate with reduced motion.

• Look - Softer surface shadow and a raised popup, grey fields and checkboxes with a clearer focus, equal button and field heights, more contrast for the close button and the email subtext, deeper thumbs colors.

Fixed

• --ft-* on any element - Variables set on any ancestor of the widget now apply. Before, only :root worked.
• --ft-font-family - The survey ignored it.
• Empty stars - They take --ft-color-outline instead of a fixed grey, so they fit the dark theme.
• Keys in the "Other" field - Keys typed in it no longer reach the page's keyboard shortcuts, the same as in the other fields.
• Text color and font in Surface - Surface sets the widget's text color and font, so content next to the survey inside it no longer takes the page's color and font.

Removed

• BREAKING: --ft-popup-head-offset - It only affected inline surveys. Use classNames.head to change the head padding.

[1.10.0] - 2026-09-30

Added

• Screenshot capture progress - While onCaptureScreenshot is pending, the screenshot control shows a spinner and is marked aria-busy. Its aria-label comes from the new strings.screenshotProcessingLabel (default 'Capturing screenshot…'). See Attachments.
• Dismissible screenshot error - A button next to the capture error hides it. Its aria-label/title comes from the new strings.screenshotErrorDismissLabel (default 'Dismiss error'). The next capture attempt still clears the error on its own. See Accessibility Labels.

Changed

• Screenshot errors always show screenshotErrorMessage - When onCaptureScreenshot throws or rejects, the respondent now sees screenshotErrorMessage, as documented, instead of the thrown error's own message. Pass any custom failure text through screenshotErrorMessage.
• Pending screenshot control label - The control's aria-label while a capture is pending changed from the hardcoded 'Processing…' to 'Capturing screenshot…' (overridable via strings.screenshotProcessingLabel). Consumer tests querying getByRole('button', { name: 'Processing…' }) should update.

[1.9.0] - 2026-09-11

Added

• General survey type - type="general" collects text feedback (and an optional screenshot) with no rating scale. See the README.
• Screenshot attachments - New onCaptureScreenshot, maxAttachments, screenshotButtonLabel, and screenshotErrorMessage props add an optional screenshot-attachment control to the feedback step. attachmentCaption overrides the caption shown under the thumbnail. Confirmed attachments are surfaced as attachments?: Attachment[] on the onFeedbackSubmit payload. See Attachments.
• strings prop - Overrides the library's built-in aria-labels and other screen-reader-only text (SurveyStrings), without touching visible copy. See Accessibility Labels.
• getScoreLabelSuffix prop - Customizes the text appended after the first/last numbered scale button when it carries minLabel/maxLabel.
• otherPlaceholder prop - Placeholder for the free-text input shown alongside choice checkboxes.
• Popup.closeLabel prop - Overrides the close button's aria-label/title.

Changed

• --ft-surface-padding default is now 20px (was 24px).
• Screen region aria-labels replaced by aria-labelledby - The rating/feedback/contact/success regions now derive their accessible name from each screen's own heading instead of a hardcoded aria-label. Feedback/Contact still expose overridable feedbackFormLabel/contactFormLabel. Consumer tests querying getByRole('region', { name: 'Feedback form' }) (etc.) should update.
• Feedback step: Submit requires content - Submitting fully empty input is no longer equivalent to Skip. For responseType: 'text', an attachment alone unlocks Submit, but submitting without text flags the field (red border, aria-invalid) instead of sending. For responseType: 'choices', an attachment alone doesn't unlock Submit at all: a selected choice or text is required.
• Feedback step: Skip is disabled while an attachment is confirmed - Once a screenshot is attached, Skip is disabled until the attachment is removed, so an attachment can no longer be silently discarded.

[1.8.0] - 2026-08-25

Changed

• BREAKING: Single Survey component replaces CSAT5Survey, CSAT2Survey, CES7Survey, and NPS10Survey - The four named components are gone. Import Survey instead and select the format with props: type ('csat' | 'nps' | 'ces') and, for csat, points (2 | 5). scaleStyle keeps its previous meaning, with valid values now depending on type/points.

  // Before
  import { CSAT5Survey } from 'react-feedback-surveys';
  <CSAT5Survey scaleStyle="emoji" question="…" />
  
  // After
  import { Survey } from 'react-feedback-surveys';
  <Survey type="csat" points={5} scaleStyle="emoji" question="…" />
  There are no deprecated aliases: update all imports when upgrading. See the README for the full format matrix.

Fixed

• Input and textarea font inheritance - Set a system font-family on :root/:host (overridable via --ft-font-family), and reset input/textarea/select to inherit it, so form controls no longer fall back to the browser's default (often monospace) font.

[1.7.0] - 2026-07-17

Added

• Optional email collection - New collectContact, userId, contactQuestion, contactSubtext, contactButtonSendLabel, and contactButtonSkipLabel props add an optional email collection screen before the success screen. Skipped automatically when userId is already known. New onContactSubmit event fires when a respondent submits an email.
• Skippable feedback step - New textButtonSkipLabel prop adds a Skip button to the follow-up feedback screen, mirroring the email collection step. Skipping (or submitting with empty input) advances to the next screen without calling onFeedbackSubmit.

Changed

• BREAKING: textButtonLabel renamed to textButtonSendLabel - Aligns naming with the new textButtonSkipLabel and the existing contactButtonSendLabel/contactButtonSkipLabel pair. Update your prop usage:

  <CSAT5Survey textButtonSendLabel="Send" textButtonSkipLabel="Skip" />
• Feedback and label styling - Added a focus outline to choice checkboxes, fixed font inheritance and checkmark proportions in feedback inputs, and prevented label overflow with box-sizing: border-box.

[1.6.1] - 2026-07-10

Changed

• Feedback textarea - Set explicit text color for correct contrast.
• Build tooling - Switched from @vitejs/plugin-react-swc to @vitejs/plugin-react, and updated vite, vite-plugin-dts, and vite-plugin-svgr to their latest major versions.
• Accessibility tests - CI now fails on a11y test violations.

[1.6.0] - 2026-06-19

Added

• CI workflow - GitHub Actions pipeline with parallel lint, typecheck, and Storybook (Playwright/Chromium) test jobs. Runs on push and pull requests to main.
• README badges - Added CI status, Storybook badges.

[1.5.5] - 2026-06-18

Fixed

• CSS variable inheritance - Private CSS variables (--_*) are now defined on :root, :host instead of inside component classes, fixing inheritance for Popup and Surface which are ancestors of SurveyRoot in the DOM tree.
• CSS reset scope - Box model reset (margin, padding, box-sizing) is now applied inside Popup as well, covering all descendants including Surface and the close button.

[1.5.4] - 2026-06-18

Added

• --ft-surface-radius CSS variable - Configure border radius of survey surface elements without modifying source code.

Changed

• CSS variable inheritance - Refactored variable scoping to work correctly in both shadow DOM and non-shadow DOM environments.
• Dependencies - Updated all packages to latest stable versions.

[1.5.3] - 2026-01-13

Changed

• Storybook links - Updated documentation and resource links in Storybook introduction page and branding configuration.

[1.5.2] - 2026-01-13

Added

• Storybook branding - Custom logo and branding configuration.
• Introduction page - Landing page with project overview, features, quick start guide, and resource links.
• MDX support - Enabled MDX file support in Storybook.
• Multi-platform Docker - Support for linux/amd64 and linux/arm64 architectures.

[1.5.1] - 2026-01-13

Added

• Docker support - Storybook now available as a Docker image published to DockerHub. Deploy component documentation as a containerized service with automatic builds on release.
• GitHub Actions workflow - Automated Docker image publishing to feedbacktools/react-feedback-surveys with version tags.

Changed

• Dependencies - Updated all packages to latest stable versions for security patches and performance improvements.

[1.5.0] - 2025-12-26

Added

• Responsive breakpoint CSS variables - Customize mobile, tablet, and desktop breakpoints without modifying source code. Makes it easy to integrate with your existing design system.
• Label center positioning option - Align labels in the center for balanced, symmetrical layouts. Perfect for emoji-based or icon rating scales.

Changed

• Survey screen state classnames - Refactored internal class names for better predictability. Easier to target specific states when customizing styles or debugging layout issues.
• Dependencies - Updated all packages to latest stable versions for security patches and performance improvements.
• Documentation - Enhanced README with more practical examples, better formatting, and detailed explanations of:
  • dir prop for RTL/LTR support
  • classnames configuration options

[1.4.1] - 2025-12-24

Added

• --ft-popup-head-offset CSS variable - Control popup header padding dynamically. Adjust spacing based on your layout requirements without CSS overrides.

Fixed

• Popup title overflow - Fixed layout bug where long survey titles overlapped the close button. Button now remains clickable in all cases.

[1.4.0] - 2025-12-23

Changed

• BREAKING: comment parameter renamed to text - More accurate naming for user feedback input across the API. Update your callback handlers:

  onFeedbackSubmit={({ text, rating }) => ...}

[1.3.0] - 2025-12-22

Added

• <Surface> component - New container component for building custom survey layouts. Use as a foundation when creating your own survey designs.
• Padding variables documentation - Complete reference for all available CSS padding variables. Helps achieve pixel-perfect spacing adjustments.

Changed

• CI/CD workflows - Modernized GitHub Actions pipelines for more reliable builds and faster deployments.

Fixed

• Repository URLs - Corrected broken repository links in package.json and documentation.
• npm trusted publishing - Configured automated publishing workflow for more secure package releases.

[1.2.0]

Added

• RTL/LTR bidirectional support - Full right-to-left text support for Arabic, Hebrew, and other RTL languages. Entire layout flips automatically when dir="rtl" is set, including icons and button positioning.
• Dark theme example - A documented dark palette for the --ft-* CSS variables. The library had no built-in dark mode until the theme prop (see 2.0.0).

Changed

• Storybook - Upgraded to latest version with enhanced documentation, more interactive examples, and improved developer experience.

[1.1.0]

Added

• Sensa credits - Optional branding attribution for library's origins. Fully customizable or can be removed entirely.
• Automated npm publishing - GitHub Actions workflow for consistent, reliable package releases without manual intervention.

Changed

• Color palette - Refined default colors to meet WCAG AA accessibility contrast requirements. Better readability for all users.
• Storybook viewports - Added realistic device viewport presets (iPhone, iPad, desktop) for accurate responsive testing.
• Survey state management - Improved internal value handling for more predictable behavior across component lifecycle.
• Dependencies - Updated all packages to latest versions for security patches and performance improvements.

Fixed

• Popup dimensions - Fixed inconsistent sizing across different screen sizes. Popups now scale gracefully from mobile to desktop.
• Popup z-index - Increased default z-index value to ensure popups appear above most common UI elements without manual CSS adjustments.
• Package metadata - Corrected broken license link in package.json.

[1.0.0]

Added

• Initial release - Flexible, customizable React library for collecting user feedback through beautiful surveys. Built with accessibility and developer experience as core priorities.
• Survey components - Complete set of ready-to-use components including:
  • Rating scales with multiple visual styles
  • Text feedback forms with validation
  • Multiple layout modes (popup, inline, embedded)
• Storybook documentation - Interactive documentation with live component examples, code snippets, and step-by-step customization guides.