Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Token sizes and icons don't align with other controls #5203

Open
iansan5653 opened this issue Oct 31, 2024 · 3 comments
Open

Token sizes and icons don't align with other controls #5203

iansan5653 opened this issue Oct 31, 2024 · 3 comments
Labels
bug Something isn't working component: Token react

Comments

@iansan5653
Copy link
Contributor

iansan5653 commented Oct 31, 2024

Token has a size prop which accepts standard size names like small and medium. These sizes, however, don't correspond with other Primer components, making it difficult to integrate token components into a design.

For example, here is a set of medium tokens with a medium IconButton:

screenshot showing a set of tokens and an icon button. The tokens are much smaller than the button

Note how the icon button and the tokens do not align at all. And even though the tokens are small, their "x" buttons are larger, exacerbating the problem further.

I would expect that tokens would render with a height that matches the corresponding --control-size variable for the size they are rendered with, and with icons that match the corresponding size of IconButton.

Copy link
Contributor

Uh oh! @iansan5653, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

@iansan5653 iansan5653 changed the title Token sizes don't align with other control sizes Token sizes and icons don't align with other controls Oct 31, 2024
@iansan5653
Copy link
Contributor Author

Ended up having to remake the component from scratch to get a good look, which is unfortunate because I also lose all the accessibility improvements around interactive tokens with close buttons.

token design with squarer corners and sizing to match an icon button

@broccolinisoup
Copy link
Member

Sorry I was testing SelectPanel in review lab 😅 Ignore assignments please.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working component: Token react
Projects
None yet
Development

No branches or pull requests

3 participants