fix: change emojis & stickers pack selector button to dropdown#2733
fix: change emojis & stickers pack selector button to dropdown#2733smokku wants to merge 1 commit into
Conversation
|
All contributors have signed the CLA ✍️ ✅ |
There was a problem hiding this comment.
Pull request overview
Updates the Emojis & Stickers “Global Packs” UI to make the pack selector read more clearly as a dropdown and to make the “Save” affordance more visually prominent when selections are made.
Changes:
- Replaces the selector header “Save/Close” action from a
Chipto aButton, with styling that becomes solid “Success” when there are selections. - Adds a down-chevron icon to the “Select Pack” trigger button to match other dropdown triggers.
|
I have read the CLA Document and I hereby sign the CLA |
kfiven
changed the title
| <Button | ||
| size="300" | ||
| radii="300" | ||
| variant={hasSelected ? 'Success' : 'Secondary'} | ||
| fill={hasSelected ? 'Solid' : 'Soft'} | ||
| onClick={() => onSelect(selected)} |
There was a problem hiding this comment.
Hi, thanks for the PR. Chevron is nice addition.
In our design language, buttons are not used in header component. How something like in picture below if the current button is not noticeable?
There was a problem hiding this comment.
Nagranie.ekranu_20260316_123825.webm
With my eyes focused on the mouse pointer, with all the green around, my old eyes did not notice that at the edge of field of vision something changed from light gray, to light green…
There was a problem hiding this comment.
How does the Apply Changes approach shown in my last message looks to you?
There was a problem hiding this comment.
How does the Apply Changes approach shown in my last message looks to you?
It is visible enough. :-)
There was a problem hiding this comment.
If possible, can we do that for save button?
This PR introduces two changes resolving confusion I had when dealing with Emojis & Stickers Pack selector.
1. Changes the button to show down chevron like other dropdowns do.
Before change:
After change:
2. Changes the "Save" button to be a Button component instead of Chip component.
When I initially tried to use this dropdown, I've selected the packs I wanted and did not notice the chip in top right corner changed to green "Save".
I've closed the dropdown by clicking outside and got confused that nothing happened.
A large, solid green "Save" button appearing should help get the user focus to it and suggest saving instead of just closing the dropdown.
Before change:
After change: