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 · May be fixed by #5317
Open

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

iansan5653 opened this issue Oct 31, 2024 · 3 comments · May be fixed by #5317
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.

AK1003018 added a commit to AK1003018/react that referenced this issue Nov 19, 2024
@AK1003018 AK1003018 linked a pull request Nov 19, 2024 that will close this issue
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

Successfully merging a pull request may close this issue.

3 participants