-
Notifications
You must be signed in to change notification settings - Fork 535
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
Update token components' APIs #1998
Conversation
src/Token/TokenBase.tsx
Outdated
export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge' | ||
// TODO: remove invalid "extralarge" size name in next breaking change | ||
// ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md | ||
export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge' | 'xlarge' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about adding a @deprecated
flag to the extralarge
value here?
We'd need to bump to minor instead, but feels like we can give early notice that we'll remove it more formally later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it possible to add the @deprecated
flag to specific values?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's not supported end-to-end yet, but you can get it working for anyone browsing the codebase by hoisting it into a separate type and then reapplying it in the union or as an intersection. Maybe someone will find it useful 🤷
E.g. something like:
export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'extralarge' | 'xlarge' | |
/** @deprecated to be removed in v36.. probably **/ | |
type ExtraLarge = 'extralarge' | |
export type TokenSizeKeys = | |
| 'small' | |
| 'medium' | |
| 'large' | |
| 'xlarge' | |
| ExtraLarge |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is great. Love how you've avoided the breaking change here 🙌
@@ -239,7 +240,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo | |||
small: 'small', | |||
medium: 'small', | |||
large: 'medium', | |||
extralarge: 'medium' | |||
extralarge: 'medium', | |||
xlarge: 'medium' // will eventually replace "extralarge" per this ADR: https://github.com/github/primer/blob/main/adrs/2022-02-09-size-naming-guidelines.md |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this adr is on a private repo, can we remove the url?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this link is helpful for maintainers. I think it's okay that's internal-only
🦋 Changeset detectedLatest commit: 931d73b The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
Summary of changes:
'xlarge'
size option to eventually replace'extralarge'
to align with our size naming ADRleadingVisual
in small tokens because it's rendered <16pxhideRemoveButton
prop to AvatarTokenMerge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.