feat: add descriptive for question types#3356
Conversation
|
@ChaseNelson is attempting to deploy a commit to the formbricks Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes in this pull request introduce a tooltip feature to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
ChaseNelson
changed the title
![coderabbitai[bot]](proxy.php?url=https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx (2 hunks)
🧰 Additional context used
🪛 Biome
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx
[error] 50-50: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
🔇 Additional comments (3)
apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx (3)
15-15: LGTM: Tooltip components imported correctlyThe new import statement for Tooltip components is correctly placed and imports the necessary components used in the changes below.
50-76: LGTM: Tooltip implementation enhances user experienceThe tooltip implementation successfully adds descriptive information for each question type, aligning with the PR objective. The use of
TooltipProvider,Tooltip,TooltipContent, andTooltipTriggercomponents is correct and maintains the existing button functionality while adding the new tooltip feature.The
delayDurationprop onTooltipProvideris a good addition to prevent accidental triggering of tooltips.🧰 Tools
🪛 Biome
[error] 50-50: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
Line range hint
15-76: Summary: Tooltip implementation successfully addresses PR objectivesThe changes in this file effectively implement tooltips for question types, aligning well with the PR objectives and the linked issue #2268. The tooltips provide clear descriptions for each question type, which should improve user onboarding and product usability as intended.
Key points:
- Tooltip components are correctly imported and implemented.
- Each question type button now has an informative tooltip.
- The implementation maintains existing functionality while adding the new feature.
These changes should significantly enhance the user experience during survey creation, making it easier for users to understand and select appropriate question types.
🧰 Tools
🪛 Biome
[error] 50-50: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
...ditor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx
Outdated
Show resolved
Hide resolved
jobenjada
added
🕹️ oss.gg
|
great idea! I've updated the UI but loved the idea :) |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
packages/lib/utils/questions.tsx (3)
127-127: LGTM with a suggestion: Improved description for NPS question type.The updated description "Measure Net-Promoter-Score (0-10)" is more accurate and aligns well with the PR objectives. It correctly uses the full term instead of the acronym and maintains important scale information.
Suggestion for further clarity:
Consider changing to "Measure Net Promoter Score (NPS) on a 0-10 scale" to include both the full term and the commonly used acronym.
181-181: LGTM with a suggestion: Improved description for Consent question type.The updated description "Ask to agree to terms, conditions, or data usage" provides more specific examples of what users might be consenting to, enhancing clarity and user understanding.
Suggestion for further improvement:
Consider changing to "Ask users to agree to terms, conditions, or data usage" to maintain consistency with other descriptions that explicitly mention "users" or "respondents".
Line range hint
53-237: Excellent enhancements: Significantly improved question type descriptions.The updates to all 15 question type descriptions represent a substantial improvement in clarity, specificity, and user-friendliness. These changes consistently:
- Provide more context and examples where appropriate.
- Use consistent language across descriptions (e.g., "Ask for" instead of "Allow").
- Focus on the purpose and functionality of each question type.
- Align perfectly with the PR objective of enhancing user understanding.
These improvements will greatly assist users in selecting the appropriate question types for their surveys, thereby enhancing the overall user experience and product usability.
Consider creating a separate configuration file for these descriptions to facilitate easier updates and potential internationalization in the future.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx (4 hunks)
- packages/lib/utils/questions.tsx (15 hunks)
🧰 Additional context used
🔇 Additional comments (13)
packages/lib/utils/questions.tsx (13)
53-53: LGTM: Improved description clarity for OpenText question type.The updated description "Collect open-ended feedback" provides a clearer explanation of the question type's purpose, aligning well with the PR objective of enhancing user understanding.
65-65: LGTM: Enhanced user-friendly description for MultipleChoiceSingle.The new description "Offer a list of options (choose one)" is more user-centric and easier to understand, especially for non-technical users. This change supports the PR's goal of improving user onboarding.
79-79: LGTM: Consistent and clear description for MultipleChoiceMulti.The updated description "Offer a list of options (choose multiple)" maintains consistency with the MultipleChoiceSingle description style while clearly indicating the ability to select multiple options. This change enhances user understanding and supports the PR's objectives.
94-94: LGTM: Refined description for PictureSelection question type.The updated description "Ask respondents to choose one or more images" uses more precise terminology while maintaining clarity. This minor refinement contributes to the overall goal of providing clear explanations for each question type.
114-114: Excellent improvement: Enhanced description for Rating question type.The updated description "Ask respondents for a rating (stars, smileys, numbers)" provides valuable context by including examples of rating types. This addition effectively communicates the versatility of the rating question, significantly enhancing user understanding of its functionality.
138-138: LGTM: Enhanced clarity for Ranking question type.The updated description "Ask respondents to order items by preference or importance" provides valuable context about the purpose of ranking. This change improves user understanding by clearly communicating the question type's functionality and potential use cases.
154-154: Excellent improvement: Significantly enhanced description for Matrix question type.The new description "Create a grid to rate multiple items on the same set of criteria" is a substantial improvement. It clearly explains both the structure and purpose of the matrix question, greatly enhancing user understanding. This change exemplifies the PR's objective of providing clearer explanations of question functionalities.
165-165: LGTM: Comprehensive description update for CTA question type.The new description "Display information and prompt users to take a specific action" is more comprehensive and accurate. It now includes the crucial aspect of displaying information and specifies the nature of the action. This change significantly improves user understanding of the CTA question type's functionality.
192-192: LGTM: Enhanced clarity and context for FileUpload question type.The updated description "Enable respondents to upload documents, images, or other files" provides valuable examples and context. This change effectively communicates the versatility of the file upload functionality, significantly improving user understanding. The use of "Enable" also adds a more positive tone to the description.
202-202: LGTM: Concise and consistent description for Date question type.The updated description "Ask for a date selection" is more concise while maintaining the essential information. This change improves consistency with other question type descriptions and supports the PR's goal of providing clear explanations.
212-212: Excellent improvement: Significantly enhanced description for Cal question type.The new description "Ask respondents to book a time slot for meetings or calls" is a substantial improvement. It clearly specifies the action and purpose of the question type, providing valuable context for its use. This change exemplifies the PR's objective of enhancing user understanding and providing clearer explanations of question functionalities.
222-222: LGTM: Concise and specific description for Address question type.The updated description "Ask for a mailing address" is more concise and specific. It clearly communicates the purpose of the question type while maintaining consistency with other descriptions. This change supports the PR's goal of providing clear and user-friendly explanations.
237-237: Excellent improvement: Comprehensive and specific description for ContactInfo question type.The new description "Ask for name, surname, email, phone number and company jointly" is a significant enhancement. It provides a detailed list of the information collected, clearly communicating the scope and purpose of this question type. The use of "jointly" effectively emphasizes that all this information is gathered in a single question. This change exemplifies the PR's objective of providing clear, specific explanations that enhance user understanding.
|
|
||
| export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestionButtonProps) => { | ||
| const [open, setOpen] = useState(false); | ||
| const [hoveredQuestionId, setHoveredQuestionId] = useState<string | null>(null); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using @radix-ui/react-tooltip for accessible tooltips
Using React state (hoveredQuestionId) and hover event handlers to manage tooltip visibility can lead to unnecessary re-renders and may not provide the best accessibility support, especially for keyboard and screen reader users. @radix-ui/react-tooltip offers an accessible and flexible tooltip component that handles these concerns.
Apply the following changes to implement tooltips using @radix-ui/react-tooltip:
-
Install the Tooltip package if it's not already installed:
npm install @radix-ui/react-tooltip
-
Import the Tooltip components:
+import * as Tooltip from "@radix-ui/react-tooltip"; -
Wrap each question type button with Tooltip components:
{availableQuestionTypes.map((questionType) => ( + <Tooltip.Provider delayDuration={50}> + <Tooltip.Root> + <Tooltip.Trigger asChild> <button type="button" key={questionType.id} className="group relative mx-2 inline-flex items-center justify-between rounded p-0.5 px-4 py-2 text-sm font-medium text-slate-700 last:mb-2 hover:bg-slate-100 hover:text-slate-800" onClick={() => { addQuestion({ ...universalQuestionPresets, ...getQuestionDefaults(questionType.id, product), id: createId(), type: questionType.id, }); setOpen(false); }} - onMouseEnter={() => setHoveredQuestionId(questionType.id)} - onMouseLeave={() => setHoveredQuestionId(null)}> + > <div className="flex items-center"> <questionType.icon className="text-brand-dark -ml-0.5 mr-2 h-4 w-4" aria-hidden="true" /> {questionType.label} </div> - <div - className={`absolute right-4 text-xs font-light text-slate-500 transition-opacity duration-200 ${ - hoveredQuestionId === questionType.id ? "opacity-100" : "opacity-0" - }`}> - {questionType.description} - </div> </button> + </Tooltip.Trigger> + <Tooltip.Content + side="right" + align="center" + className="bg-slate-800 text-white rounded px-2 py-1 text-xs" + > + {questionType.description} + </Tooltip.Content> + </Tooltip.Root> + </Tooltip.Provider> ))}
This refactor enhances accessibility, reduces unnecessary state management, and simplifies the code by leveraging a well-tested tooltip library.
Also applies to: 63-64, 70-74
|
Awarding ChaseNelson: 300 points 🕹️ Well done! Check out your new contribution on oss.gg/ChaseNelson |
3 participants
What does this PR do?
Fixes #2268
Provides tooltips that provide descriptions for each question type, helping users to better understand the various question options available when creating surveys.
https://www.loom.com/share/c3806f053e7f440eb2aab0578b8130c0?sid=a2062ad5-14a2-41cb-ac73-d4ba1c2b5277
How should this be tested?
Checklist
Required
pnpm buildconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
Add Questionbuttons, providing contextual descriptions of question types on hover.Bug Fixes