fix: horizontal token display for all dropdown lists (search input & mentions)

tokens-studio / figma-plugin

Official repository of the plugin 'Tokens Studio for Figma' (Figma Tokens)

https://www.figma.com/community/plugin/843461159747178978

MIT License

1.35k stars 194 forks source link

fix: horizontal token display for all dropdown lists (search input & mentions) #2882

Closed cuserox closed 3 months ago

cuserox commented 3 months ago

Why does this PR exist?

Closes #2878

The ability to view full token data (specifically names) was a pain point for users, which was solved by stacking these (PR). Negative feedback means we are reverting this, and aligning both views to horizontally display the data.

What does this pull request do?

Adapts mentions.css & Mentions to have the same look & feel as DownshiftInput when displaying an item on the list
Allows name & resolved value to grow equally, while displaying a tooltip with these full values

Testing this change

Run the plugin
Create a new token with a loooooong name
Go and create a composition token (for example)
- Search for the loooooong name = DownshiftInput
- Start typing {... = Mentions

Samples of updated UI

DownShiftInput	Mentions

changeset-bot[bot] commented 3 months ago

⚠️ No Changeset found

Latest commit: 6c711d70a07434bd178ca315a9bc7f7856f8c6b8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

macintoshhelper commented 3 months ago

Small non blocking UI difference, seems like there is a 4px padding for the DownshiftInput list container that's not being applied, and only the 4px for the list items is being applied

4px padding

4px + 4px padding

Proposed change:

8px horixontal padding:

six7 commented 3 months ago

Can we make the values right aligned and only truncate the name if needed? Right now it truncates even if enough space would be available

cuserox commented 3 months ago

Can we make the values right aligned and only truncate the name if needed? Right now it truncates even if enough space would be available

@six7 something like this? Leaving the flex containers for the name & value to fight amongst themselves, depending on which one needs the space the most 😄