Teemu/enhancement/637 feedbackcard update and interactive tooltips

[temez26]

📄 Pull Request Overview

Closes #637

🔧 Changes Made

1. FeedbackCard overhaul: Refactored FeedbackCard to use the new FeedbackCardSuccess component for the post-submission view, which displays the selected emoji rating and links to full feedback forms (web & game). Added dynamic, rating-aware input placeholders that change based on the selected emoji.

2. Interactive emoji tooltips: Updated FeedbackEmoji to render a speech-bubble style rating label (e.g. "Bad", "Meh..", "OK", "Good", "Great") below the selected emoji, with dynamic horizontal positioning. Emoji can now be deselected by clicking again.

3. New FeedbackCardSuccess component: Created new FeedbackCardSuccess component and its SCSS module to handle the success state UI after feedback submission.

4. CustomForm.TextareaField added: Extended the CustomForm compound component with a new TextareaField sub-component for more flexible, accessible multi-line text input in forms.

5. i18n updates: Updated feedbackCard.json localization files with shorter, cleaner sentences and added new keys: rating-label-1 through rating-label-5, input-placeholder-1 through input-placeholder-5, error-submit-failed, href-to-webform, and href-to-gameform.

---

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected.
• JSDoc: I have added or updated JSDoc comments for all relevant code.
• Debugging: No console.log() or other debugging statements are left.
• Clean Code: Removed commented-out or unnecessary code.
• Tests: Added new tests or updated existing ones for the changes made.
• Documentation: Documentation has been updated (if applicable).

---

📝 Additional Information

• Screenshots: Include screenshots of the interactive emoji tooltip (speech bubble label) and the new FeedbackCardSuccess view.
• Dependencies: No new dependencies added.
• Known Issues: English text for some i18n keys may still need final confirmation/review.

[Skoivumaki]

Good work! Unfortunately the original issue might have been a bit misleading, since the given Figma Design example is meant to be toggled via feedback button. (unless im mistaken @Rutjake ?) However the only differences between toggle vs footer applied feedback component really is the border😄

Todo:

• Remove borders from component if its implemented inside footer.
• Adjust components layout so it looks more clean. (see example)
• ratingLabels go off-center on small devices, fix by detaching the arrow and center it to emoji... or figure something else. (see example)
• Remove inline styling unless its setting CSS via variables.

Examples:
Feedback layout adjusted by fit-content and div filling the extra space, since the ratingLabels are absolute and don't contribute to flex:
https://github.com/user-attachments/assets/add71c85-c841-436b-90cc-35e1857d3131

ratingLabel off-center:

[Rutjake]

Good work! Unfortunately the original issue might have been a bit misleading, since the given Figma Design example is meant to be toggled via feedback button. (unless im mistaken @Rutjake ?)

You’re absolutely right. The original issue was a bit misleading, and I apologize for the lack of clarity in the initial description.
The goal is to include both elements for now. This is because the new footer design is still being finalized by the design team.

[temez26]

Alright, I will look into it at some point.

[temez26]

So now I’ve added the fixes to the form, but the new footer doesn’t even have the form imported. Is this how it’s supposed to work, that the form is only accessible from the side button?

[Skoivumaki]

So now I’ve added the fixes to the form, but the new footer doesn’t even have the form imported. Is this how it’s supposed to work, that the form is only accessible from the side button?

According to latest Figma design, the feedback form is removed from footer and only accessible via side button. However your branch is quite behind dev branch and still has feedback form in footer. I would suggest you rebase from dev and then commit your changes related ti feedback component. (this also resolves the merge conflicts)

[Skoivumaki]

PR ready for review? @temez26

[Skoivumaki]

Previous requested changes implemented. However now the component is broken in desktop:

Fix the overflow issue on desktop and then all is good 👍

[codecov-alt]

Codecov Report

❌ Patch coverage is 77.14286% with 8 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
.../ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx	60.00%	4 Missing ⚠️
...ed/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx	81.25%	3 Missing ⚠️
.../Feedback/ui/FeedbackCard/FeedbackCard.stories.tsx	0.00%	1 Missing ⚠️

Files with missing lines	Coverage Δ
...gration/src/shared/ui/CustomForm/ui/CustomForm.tsx	73.61% <100.00%> (ø)
...ared/ui/v2/Footer/ui/FooterMobile/FooterMobile.tsx	100.00% <ø> (ø)
.../Feedback/ui/FeedbackCard/FeedbackCard.stories.tsx	0.00% <0.00%> (ø)
...ed/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx	80.00% <81.25%> (ø)
.../ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx	80.95% <60.00%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[temez26]

Now the fixes are done on the feedbackcard

[Skoivumaki]

Seems like something has caused new issues. The overflow issue is gone now, but the textbox isn't filling the space 100% anymore. Both textbox and "lähetä" button should fill the feedback component. Figma example: