Button deprecation #1908
There are no files selected for viewing
This file contains hidden or 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,89 @@ | ||
| --- | ||
| "@primer/react": patch | ||
| --- | ||
|
|
||
| ## Button deprecation | ||
|
|
||
| The new set of Button components brings a much needed update. | ||
| The older version was a set of seven different components. Each variant of the component had a separate component. | ||
| The guidelines to put in icons inside the buttons was also vague. With the new components, we now have a great guidance for common button usage. | ||
|
|
||
| ## Change list | ||
|
|
||
| ### Button variants | ||
|
|
||
| We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger` | ||
|
|
||
| #### Before | ||
|
|
||
| ```jsx | ||
|
Contributor
There was a problem hiding this comment. Todo for later.. we'd want to make these tables, but we can do this in a follow up PR |
||
| import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' | ||
| <ButtonPrimary>Primary Button</ButtonPrimary> | ||
| <ButtonInvisible>Invisible Button</ButtonInvisible> | ||
| <ButtonOutline>Outline Button</ButtonOutline> | ||
| <ButtonDanger>Danger Button</ButtonDanger> | ||
| ``` | ||
|
|
||
| #### After | ||
|
|
||
| ```jsx | ||
| import {Button} from '@primer/react' | ||
| <Button variant="primary">Primary Button</Button> | ||
| <Button variant="invisible">Invisible Button</Button> | ||
| <Button variant="outline">Outline Button</Button> | ||
| <Button variant="danger">Danger Button</Button> | ||
| ``` | ||
|
|
||
| ### Leading and Trailing icons | ||
|
|
||
| In the previous component, we allowed icon components to be direct children. This results in a lot of custom styling for the icon components. | ||
| In the new one, we now have `leadinIcon` and `trailingIcon` properties. | ||
|
|
||
| #### Before | ||
|
|
||
| ```jsx | ||
| <Button> | ||
| <SearchIcon /> | ||
| Search | ||
| </Button> | ||
| ``` | ||
|
|
||
| #### After | ||
|
|
||
| ```jsx | ||
| <Button leadingIcon={SearchIcon}>Search</Button> | ||
| ``` | ||
|
|
||
| ### Icon buttons | ||
|
|
||
| Icon only buttons are common usages in products. So we now have a component for the specific usecase | ||
|
|
||
| #### Before | ||
|
|
||
| ```jsx | ||
| <Button> | ||
| <XIcon /> | ||
| </Button> | ||
| ``` | ||
|
|
||
| #### After | ||
|
|
||
| ```jsx | ||
| <IconButton aria-label="Close button" icon={XIcon} /> | ||
| ``` | ||
|
|
||
| ### Size property | ||
|
|
||
| Earlier we used `variant` to mean size property. Now we have a new property called `size` which is more semantically correct. | ||
|
|
||
| #### Before | ||
|
|
||
| ```jsx | ||
| <Button variant="small">Small button</Button> | ||
| ``` | ||
|
|
||
| #### After | ||
|
|
||
| ```jsx | ||
| <Button size="small">Small button</Button> | ||
| ``` | ||
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 |
|---|---|---|
| @@ -1,39 +1,17 @@ | ||
| import React, {forwardRef} from 'react' | ||
| import {ButtonProps} from './types' | ||
| import {ButtonBase} from './ButtonBase' | ||
|
|
||
| const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>( | ||
| ({children, ...props}, forwardedRef): JSX.Element => { | ||
| return ( | ||
| <ButtonBase ref={forwardedRef} {...props} as="button"> | ||
| {children} | ||
| </ButtonBase> | ||
| ) | ||
| } | ||
| ) | ||
|
|
||
| ButtonComponent.displayName = 'Button' | ||
|
|
||
| export {ButtonComponent} |
File renamed without changes.
This file contains hidden or 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 |
|---|---|---|
| @@ -1,39 +1,42 @@ | ||
| import React, {ComponentPropsWithRef, forwardRef} from 'react' | ||
| import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic' | ||
| import Box from '../Box' | ||
| import {merge, SxProp} from '../sx' | ||
| import {useTheme} from '../ThemeProvider' | ||
| import {ButtonProps, StyledButton} from './types' | ||
| import {getVariantStyles, getSizeStyles, getButtonStyles} from './styles' | ||
|
|
||
| const ButtonBase = forwardRef<HTMLElement, ButtonProps>( | ||
| ({children, as: Component = 'button', sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => { | ||
| const {leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium'} = props | ||
| const {theme} = useTheme() | ||
| const iconWrapStyles = { | ||
| display: 'inline-block' | ||
| } | ||
| const sxStyles = merge.all([ | ||
| getButtonStyles(theme), | ||
| getSizeStyles(size, variant, false), | ||
| getVariantStyles(variant, theme), | ||
| sxProp as SxProp | ||
| ]) | ||
| return ( | ||
| <StyledButton as={Component} sx={sxStyles} {...props} ref={forwardedRef}> | ||
| {LeadingIcon && ( | ||
| <Box as="span" data-component="leadingIcon" sx={iconWrapStyles}> | ||
| <LeadingIcon /> | ||
| </Box> | ||
| )} | ||
| {children && <span data-component="text">{children}</span>} | ||
| {TrailingIcon && ( | ||
| <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}}> | ||
| <TrailingIcon /> | ||
| </Box> | ||
| )} | ||
| </StyledButton> | ||
| ) | ||
| } | ||
| ) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps> | ||
|
|
||
| export type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase> | ||
|
|
||
| export {ButtonBase} |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains hidden or 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 |
|---|---|---|
| @@ -1,16 +1,10 @@ | ||
| import {ButtonComponent} from './Button' | ||
| import {Counter} from './ButtonCounter' | ||
| import {IconButton} from './IconButton' | ||
| import {LinkButton} from './LinkButton' | ||
| export type {ButtonProps, IconButtonProps} from './types' | ||
| export {IconButton, LinkButton} | ||
|
|
||
| export const Button = Object.assign(ButtonComponent, { | ||
| Counter | ||
| }) |
File renamed without changes.
File renamed without changes.
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.
Uh oh!
There was an error while loading. Please reload this page.