Deprecate legacy Label component #1889
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| --- | ||
| '@primer/react': major | ||
| --- | ||
|
|
||
|  | ||
|
|
||
| The Label component's API and visual design have been updated to be consistent with its counterpart in [Primer ViewComponents' Label component](https://primer.style/view-components/components/label). | ||
|
|
||
| Major changes in the new Label component: | ||
|
|
||
| - No more `medium` size - only `small` and `large` | ||
| - Labels are outlined by default, so the `outline` prop has been removed | ||
| - Custom text and background colors are discouraged, but still possible via the `sx` prop | ||
|
|
||
| If you were using the `Label` component to render issue/PR labels, use the [IssueLabelToken](https://primer.style/react/Token#issuelabeltoken) component instead. | ||
|
|
||
| <table> | ||
| <tr> | ||
| <th> Before </th> <th> After </th> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"> | ||
|
|
||
| ```jsx | ||
| import {Label} from "@primer/react" | ||
|
|
||
| <Label outline>default</Label> | ||
| <Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>danger</Label> | ||
| ``` | ||
|
|
||
| </td> | ||
| <td valign="top"> | ||
|
|
||
| ```jsx | ||
| import {Label} from "@primer/react" | ||
|
|
||
| <Label>default</Label> | ||
| <Label size="small" variant="danger">danger</Label> | ||
| ``` | ||
|
|
||
| </td> | ||
| </tr> | ||
| </table> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| --- | ||
| title: Label | ||
| description: Use Label components to add contextual metadata to a design. | ||
| status: Deprecated | ||
| source: https://github.com/primer/react/blob/main/src/Label.tsx | ||
| componentId: legacy_label | ||
| --- | ||
|
|
||
| ## Deprecation | ||
|
|
||
| Use the new [Label](/Label) instead. | ||
|
|
||
| ## Example | ||
|
|
||
| ```jsx live deprecated | ||
| <> | ||
| <Label variant="small" outline sx={{borderColor: 'danger.emphasis', mr: 2, color: 'danger.fg'}}> | ||
| small | ||
| </Label> | ||
| <Label variant="medium" sx={{mr: 2}}> | ||
| medium (default) | ||
| </Label> | ||
| <Label variant="large" sx={{mr: 2}}> | ||
| large | ||
| </Label> | ||
| <Label variant="xl">xl label</Label> | ||
|
|
||
| <Box mt={4} /> | ||
| <Label variant="medium" sx={{bg: '#A575FF', m: 1}}> | ||
| good first issue | ||
| </Label> | ||
| <Label variant="medium" sx={{bg: '#FF75C8', m: 1}}> | ||
| 🚂 deploy: train | ||
| </Label> | ||
| <Label variant="medium" sx={{bg: '#1C90FA', m: 1}}> | ||
| css | ||
| </Label> | ||
| <Label variant="medium" sx={{bg: '#FFF06C', color: '#24292E', m: 1}}> | ||
| documentation | ||
| </Label> | ||
| <Label variant="medium" sx={{bg: '#656BFE', m: 1}}> | ||
| primer | ||
| </Label> | ||
| </> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| <PropsTable> | ||
| <PropsTableRow name="outline" type="boolean" defaultValue="false" description="Creates an outline style label" /> | ||
| <PropsTableRow name="variant" type="'small' | 'medium' | 'large' | 'xl'" defaultValue="'medium'" /> | ||
| <PropsTableRow name="dropshadow" type="boolean" defaultValue="false" description="Adds a dropshadow to the label" /> | ||
| <PropsTableSxRow /> | ||
| </PropsTable> | ||
|
|
||
| ## Status | ||
|
|
||
| <ComponentChecklist | ||
| items={{ | ||
| propsDocumented: true, | ||
| noUnnecessaryDeps: false, | ||
| adaptsToThemes: true, | ||
| adaptsToScreenSizes: false, | ||
| fullTestCoverage: false, | ||
| usedInProduction: false, | ||
| usageExamplesDocumented: true, | ||
| designReviewed: false, | ||
| a11yReviewed: false, | ||
| stableApi: false, | ||
| addressedApiFeedback: false, | ||
| hasDesignGuidelines: false, | ||
| hasFigmaComponent: false | ||
| }} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back 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.
OOO shiny ✨ ... We should do this for the other components too if we're doing this here. Thoughts @mperrotti?
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.
You mean show all the variations? That might not fit neatly into 1 header image 😅
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.
Sorry, no I meant other components being deprecated in v35 don't have header images in their release notes, so this will stand out. We should either do it for all, or not at all IMO.