diff --git a/.changeset/many-roses-hammer.md b/.changeset/many-roses-hammer.md new file mode 100644 index 00000000000..50bb79bc3f6 --- /dev/null +++ b/.changeset/many-roses-hammer.md @@ -0,0 +1,145 @@ +--- +'@primer/react': major +--- +### Button deprecation + +A new set of `Button` components brings a much needed update. Previously to `v35`, `Button` was a set of seven independent components. In `v35`, we now have common `Button` usage guidelines and more convenient API. + +#### Button variants +We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger` + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +import { ButtonPrimary, ButtonInvisible, + ButtonOutline, ButtonDanger } + from '@primer/react' + + + Primary Button + + + Invisible Button + + + Outline Button + + + Danger Button + +``` + + + +```jsx + +import { Button } from '@primer/react' + + + + + +``` + +
+ +### 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 (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + +``` + +
+ +### Icon buttons + +Icon only buttons are common usages in products. So we now have a component for the specific usecase + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + +``` + +
+ +### Size property + +Earlier we used `variant` to mean size property. Now we have a new property called `size` which is more semantically correct. + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + +``` + +
diff --git a/docs/content/drafts/Button2.mdx b/docs/content/Button.mdx similarity index 97% rename from docs/content/drafts/Button2.mdx rename to docs/content/Button.mdx index f33d782f723..e3adc9f2921 100644 --- a/docs/content/drafts/Button2.mdx +++ b/docs/content/Button.mdx @@ -1,14 +1,12 @@ --- -componentId: button_v2 -title: Button v2 +componentId: button +title: Button status: Alpha source: https://github.com/primer/react/tree/main/src/Button2 storybook: '/react/storybook?path=/story/composite-components-button2' description: Use button for the main actions on a page or form. --- -import {Props} from '../../src/props' -import {ComponentChecklist} from '../../src/component-checklist' import {Button, IconButton, LinkButton} from '@primer/react/drafts' ## Usage diff --git a/docs/content/drafts/IconButton.mdx b/docs/content/IconButton.mdx similarity index 95% rename from docs/content/drafts/IconButton.mdx rename to docs/content/IconButton.mdx index 3d6c9e5c2c6..68409d6d40e 100644 --- a/docs/content/drafts/IconButton.mdx +++ b/docs/content/IconButton.mdx @@ -6,9 +6,6 @@ storybook: '/react/storybook?path=/story/composite-components-button2' description: An accessible button component with no text and only icon. --- -import {Props} from '../../src/props' -import {ComponentChecklist} from '../../src/component-checklist' - ## Usage ### Installation diff --git a/docs/content/drafts/LinkButton.mdx b/docs/content/LinkButton.mdx similarity index 94% rename from docs/content/drafts/LinkButton.mdx rename to docs/content/LinkButton.mdx index 23cad9811a5..4ba5ad8d208 100644 --- a/docs/content/drafts/LinkButton.mdx +++ b/docs/content/LinkButton.mdx @@ -6,10 +6,6 @@ storybook: '/react/storybook?path=/story/composite-components-button2' description: It is a combination of a button and link. Use this to make your link look like a button. --- -import {Props} from '../../src/props' -import {ComponentChecklist} from '../../src/component-checklist' -import {ArrowRightIcon} from '@primer/octicons-react' - ## Usage ### Installation diff --git a/docs/content/Buttons.mdx b/docs/content/deprecated/Buttons.mdx similarity index 91% rename from docs/content/Buttons.mdx rename to docs/content/deprecated/Buttons.mdx index 226659a465a..c16aeb384b5 100644 --- a/docs/content/Buttons.mdx +++ b/docs/content/deprecated/Buttons.mdx @@ -1,11 +1,18 @@ --- componentId: button title: Button -status: Alpha +status: deprecated source: https://github.com/primer/react/blob/main/src/Button storybook: '/react/storybook?path=/story/composite-components-button--default-button' --- +## Deprecation + +Use [Button](/Button) instead. + +For more info on the changes, have a look at the migration guide. +[Button migration guide](/migration-guide/Button) + `Button` is used for actions, like in forms, while `Link` is used for destinations, or moving from one page to another. In special cases where you'd like to use a `` styled like a Button, use ` Button danger diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index c50f7f70dd0..4d42a6e8cfe 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -53,8 +53,8 @@ url: /BranchName - title: Breadcrumbs url: /Breadcrumbs - - title: Buttons - url: /Buttons + - title: Button + url: /Button - title: Checkbox url: /Checkbox - title: CheckboxGroup @@ -79,12 +79,16 @@ url: /Header - title: Heading url: /Heading + - title: IconButton + url: /IconButton - title: Label url: /Label - title: LabelGroup url: /LabelGroup - title: Link url: /Link + - title: LinkButton + url: /LinkButton - title: Overlay url: /Overlay - title: Pagehead @@ -141,12 +145,6 @@ url: /UnderlineNav - title: Drafts children: - - title: Button v2 - url: /drafts/Button2 - - title: LinkButton - url: /drafts/LinkButton - - title: IconButton - url: /drafts/IconButton - title: Deprecated children: - title: ActionList @@ -155,6 +153,8 @@ url: /deprecated/ActionMenu - title: BorderBox url: /deprecated/BorderBox + - title: Buttons + url: /deprecated/Buttons - title: Dialog url: /deprecated/Dialog - title: Dropdown diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx index accfa7115eb..59735ff01c7 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -6,7 +6,7 @@ import {OverlayProps} from './Overlay' import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuInitialFocus, useTypeaheadFocus} from './hooks' import {Divider} from './ActionList/Divider' import {ActionListContainerContext} from './ActionList/ActionListContainerContext' -import {Button, ButtonProps} from './Button2' +import {Button, ButtonProps} from './Button' import {MandateProps} from './utils/types' type MenuContextProps = Pick< diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index 204cbf25179..6cb08cc6a1e 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -1,39 +1,17 @@ -import styled from 'styled-components' -import {get} from '../constants' -import sx, {SxProp} from '../sx' -import {ComponentProps} from '../utils/types' -import ButtonBase, {ButtonBaseProps} from './ButtonBase' +import React, {forwardRef} from 'react' +import {ButtonProps} from './types' +import {ButtonBase} from './ButtonBase' -const Button = styled(ButtonBase)` - color: ${get('colors.btn.text')}; - background-color: ${get('colors.btn.bg')}; - border: 1px solid ${get('colors.btn.border')}; - box-shadow: ${get('shadows.btn.shadow')}, ${get('shadows.btn.insetShadow')}}; - - &:hover { - background-color: ${get('colors.btn.hoverBg')}; - border-color: ${get('colors.btn.hoverBorder')}; - } - - // focus must come before :active so that the active box shadow overrides - &:focus { - border-color: ${get('colors.btn.focusBorder')}; - box-shadow: ${get('shadows.btn.focusShadow')}; - } - - &:active { - background-color: ${get('colors.btn.selectedBg')}; - box-shadow: ${get('shadows.btn.shadowActive')}; - } - - &:disabled { - color: ${get('colors.primer.fg.disabled')}; - background-color: ${get('colors.btn.bg')}; - border-color: ${get('colors.btn.border')}; +const ButtonComponent = forwardRef( + ({children, ...props}, forwardedRef): JSX.Element => { + return ( + + {children} + + ) } +) - ${sx}; -` +ButtonComponent.displayName = 'Button' -export type ButtonProps = ComponentProps -export default Button +export {ButtonComponent} diff --git a/src/Button2/Button2.stories.tsx b/src/Button/Button2.stories.tsx similarity index 100% rename from src/Button2/Button2.stories.tsx rename to src/Button/Button2.stories.tsx diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 90dffc80733..b19781a36ae 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -1,39 +1,42 @@ -import styled from 'styled-components' -import {variant} from 'styled-system' -import {ComponentProps} from '../utils/types' -import buttonBaseStyles from './ButtonStyles' +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 variants = variant({ - variants: { - small: { - p: '4px 12px', - fontSize: 0 - }, - medium: { - fontSize: 1 - }, - large: { - fontSize: 2, - p: '10px 20px' +const ButtonBase = forwardRef( + ({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 ( + + {LeadingIcon && ( + + + + )} + {children && {children}} + {TrailingIcon && ( + + + + )} + + ) } -}) +) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps> -type StyledButtonBaseProps = { - as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType - variant?: 'small' | 'medium' | 'large' -} +export type ButtonBaseProps = ComponentPropsWithRef -const ButtonBase = styled.button.attrs(({disabled, onClick}) => ({ - onClick: disabled ? undefined : onClick -}))` - ${buttonBaseStyles} - ${variants} -` - -ButtonBase.defaultProps = { - variant: 'medium' -} - -export type ButtonBaseProps = ComponentProps -export default ButtonBase +export {ButtonBase} diff --git a/src/Button2/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx similarity index 100% rename from src/Button2/ButtonCounter.tsx rename to src/Button/ButtonCounter.tsx diff --git a/src/Button2/IconButton.tsx b/src/Button/IconButton.tsx similarity index 100% rename from src/Button2/IconButton.tsx rename to src/Button/IconButton.tsx diff --git a/src/Button2/LinkButton.tsx b/src/Button/LinkButton.tsx similarity index 100% rename from src/Button2/LinkButton.tsx rename to src/Button/LinkButton.tsx diff --git a/src/Button/index.ts b/src/Button/index.ts index 17f22e5a8e1..6aef1f6f8f8 100644 --- a/src/Button/index.ts +++ b/src/Button/index.ts @@ -1,16 +1,10 @@ -export {default} from './Button' -export type {ButtonProps} from './Button' -export {default as ButtonDanger} from './ButtonDanger' -export type {ButtonDangerProps} from './ButtonDanger' -export {default as ButtonGroup} from './ButtonGroup' -export type {ButtonGroupProps} from './ButtonGroup' -export {default as ButtonOutline} from './ButtonOutline' -export type {ButtonOutlineProps} from './ButtonOutline' -export {default as ButtonPrimary} from './ButtonPrimary' -export type {ButtonPrimaryProps} from './ButtonPrimary' -export {default as ButtonInvisible} from './ButtonInvisible' -export type {ButtonInvisibleProps} from './ButtonInvisible' -export {default as ButtonTableList} from './ButtonTableList' -export type {ButtonTableListProps} from './ButtonTableList' -export {default as ButtonClose} from './ButtonClose' -export type {ButtonCloseProps} from './ButtonClose' +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 +}) diff --git a/src/Button2/styles.ts b/src/Button/styles.ts similarity index 100% rename from src/Button2/styles.ts rename to src/Button/styles.ts diff --git a/src/Button2/types.ts b/src/Button/types.ts similarity index 100% rename from src/Button2/types.ts rename to src/Button/types.ts diff --git a/src/Button2/Button.tsx b/src/Button2/Button.tsx deleted file mode 100644 index 6cb08cc6a1e..00000000000 --- a/src/Button2/Button.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, {forwardRef} from 'react' -import {ButtonProps} from './types' -import {ButtonBase} from './ButtonBase' - -const ButtonComponent = forwardRef( - ({children, ...props}, forwardedRef): JSX.Element => { - return ( - - {children} - - ) - } -) - -ButtonComponent.displayName = 'Button' - -export {ButtonComponent} diff --git a/src/Button2/ButtonBase.tsx b/src/Button2/ButtonBase.tsx deleted file mode 100644 index b19781a36ae..00000000000 --- a/src/Button2/ButtonBase.tsx +++ /dev/null @@ -1,42 +0,0 @@ -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( - ({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 ( - - {LeadingIcon && ( - - - - )} - {children && {children}} - {TrailingIcon && ( - - - - )} - - ) - } -) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps> - -export type ButtonBaseProps = ComponentPropsWithRef - -export {ButtonBase} diff --git a/src/Button2/index.ts b/src/Button2/index.ts deleted file mode 100644 index 6aef1f6f8f8..00000000000 --- a/src/Button2/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -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 -}) diff --git a/src/Button/ButtonGroup.tsx b/src/ButtonGroup.tsx similarity index 87% rename from src/Button/ButtonGroup.tsx rename to src/ButtonGroup.tsx index 31fb38ce688..fa49418dd8e 100644 --- a/src/Button/ButtonGroup.tsx +++ b/src/ButtonGroup.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components' -import Box from '../Box' -import {get} from '../constants' -import sx from '../sx' -import {ComponentProps} from '../utils/types' +import Box from './Box' +import {get} from './constants' +import sx from './sx' +import {ComponentProps} from './utils/types' const ButtonGroup = styled(Box)` vertical-align: middle; diff --git a/src/Dialog.tsx b/src/Dialog.tsx index aee39d5979f..05b078d95b2 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -1,6 +1,6 @@ import React, {forwardRef, useRef} from 'react' import styled from 'styled-components' -import ButtonClose from './Button/ButtonClose' +import ButtonClose from './deprecated/Button/ButtonClose' import {get} from './constants' import Box from './Box' import useDialog from './hooks/useDialog' diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index 2cc91203db1..2bc1e534077 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useEffect, useRef, useState} from 'react' import styled from 'styled-components' -import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../Button' +import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button' import Box from '../Box' import {get} from '../constants' import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks' diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx index fba007a1c38..34778895ac3 100644 --- a/src/Dropdown.tsx +++ b/src/Dropdown.tsx @@ -1,6 +1,6 @@ import React from 'react' import styled from 'styled-components' -import Button, {ButtonProps} from './Button' +import Button, {ButtonProps} from './deprecated/Button' import {get} from './constants' import Details, {DetailsProps} from './Details' import getDirectionStyles from './DropdownStyles' diff --git a/src/__tests__/AnchoredOverlay.test.tsx b/src/__tests__/AnchoredOverlay.test.tsx index 29f2ff6a377..91855bd1e62 100644 --- a/src/__tests__/AnchoredOverlay.test.tsx +++ b/src/__tests__/AnchoredOverlay.test.tsx @@ -4,7 +4,8 @@ import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' -import {Button, SSRProvider} from '../index' +import {SSRProvider} from '../index' +import {Button} from '../deprecated' import theme from '../theme' import BaseStyles from '../BaseStyles' import {ThemeProvider} from '../ThemeProvider' diff --git a/src/__tests__/Button.test.tsx b/src/__tests__/Button.test.tsx index f4d1c9293ba..4da60203806 100644 --- a/src/__tests__/Button.test.tsx +++ b/src/__tests__/Button.test.tsx @@ -1,128 +1,98 @@ import React from 'react' -import { - Button, - ButtonPrimary, - ButtonClose, - ButtonDanger, - ButtonOutline, - ButtonInvisible, - ButtonGroup, - ButtonTableList -} from '..' -import {render, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender, cleanup} from '@testing-library/react' +import {IconButton, Button} from '../Button' +import {behavesAsComponent} from '../utils/testing' +import {render, cleanup, fireEvent} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' +import {SearchIcon} from '@primer/octicons-react' expect.extend(toHaveNoViolations) -// eslint-disable-next-line @typescript-eslint/no-empty-function -function noop() {} - describe('Button', () => { - behavesAsComponent({Component: Button}) - - checkExports('Button', { - default: Button, - ButtonPrimary, - ButtonDanger, - ButtonOutline, - ButtonInvisible, - ButtonGroup, - ButtonTableList, - ButtonClose - }) + behavesAsComponent({Component: Button, options: {skipAs: true}}) - it('renders a ) + const button = await container.findByRole('button') + expect(button.textContent).toEqual('Default') }) it('should have no axe violations', async () => { - const {container} = HTMLRender() + const {container} = render() const results = await axe(container) expect(results).toHaveNoViolations() cleanup() }) - it('preserves "onClick" prop', () => { - expect(render() + const button = await container.findByRole('button') + fireEvent.click(button) + expect(onClick).toHaveBeenCalledTimes(1) }) - it('respects width props', () => { - expect(render() + const button = await container.findByRole('button') + expect(button).toHaveStyleRule('width', '200px') }) - it('respects the "disabled" prop', () => { - const item = render( + ) + const button = await container.findByRole('button') + expect(button.hasAttribute('disabled')).toEqual(true) + fireEvent.click(button) + expect(onClick).toHaveBeenCalledTimes(0) }) - it('respects the "variant" prop', () => { - expect(render() + const button = await container.findByRole('button') + expect(button).toHaveStyleRule('font-size', '12px') }) - it('respects the "fontSize" prop over the "variant" prop', () => { - expect(render( + ) + const button = await container.findByRole('button') + expect(button).toHaveStyleRule('font-size', '20px') }) -}) - -describe('ButtonPrimary', () => { - behavesAsComponent({Component: ButtonPrimary}) - it('renders a ) + const button = await container.findByRole('button') + expect(button).toMatchSnapshot() }) - it('renders correct disabled styles', () => { - const item = render() - expect(item).toMatchSnapshot() + it('styles invisible button appropriately', async () => { + const container = render() + const button = await container.findByRole('button') + expect(button).toMatchSnapshot() }) -}) -describe('ButtonDanger', () => { - behavesAsComponent({Component: ButtonDanger}) - - it('renders a ) + const button = await container.findByRole('button') + expect(button).toMatchSnapshot() }) -}) - -describe('ButtonOutline', () => { - behavesAsComponent({Component: ButtonOutline}) - it('renders a ) + const button = await container.findByRole('button') + expect(button).toMatchSnapshot() }) - it('renders correct disabled styles', () => { - const item = render() - expect(item).toMatchSnapshot() + it('styles icon only button to make it a square', async () => { + const container = render() + const IconOnlyButton = await container.findByRole('button') + expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px') }) }) - -describe('ButtonInvisible', () => { - behavesAsComponent({Component: ButtonOutline}) - - it('renders a ) - const button = await container.findByRole('button') - expect(button.textContent).toEqual('Default') - }) - - it('should have no axe violations', async () => { - const {container} = render() - const results = await axe(container) - expect(results).toHaveNoViolations() - cleanup() - }) - - it('preserves "onClick" prop', async () => { - const onClick = jest.fn() - const container = render() - const button = await container.findByRole('button') - fireEvent.click(button) - expect(onClick).toHaveBeenCalledTimes(1) - }) - - it('respects width props', async () => { - const container = render() - const button = await container.findByRole('button') - expect(button).toHaveStyleRule('width', '200px') - }) - - it('respects the "disabled" prop', async () => { - const onClick = jest.fn() - const container = render( - - ) - const button = await container.findByRole('button') - expect(button.hasAttribute('disabled')).toEqual(true) - fireEvent.click(button) - expect(onClick).toHaveBeenCalledTimes(0) - }) - - it('respects the "variant" prop', async () => { - const container = render() - const button = await container.findByRole('button') - expect(button).toHaveStyleRule('font-size', '12px') - }) - - it('respects the "fontSize" prop over the "variant" prop', async () => { - const container = render( - - ) - const button = await container.findByRole('button') - expect(button).toHaveStyleRule('font-size', '20px') - }) - - it('styles primary button appropriately', async () => { - const container = render() - const button = await container.findByRole('button') - expect(button).toMatchSnapshot() - }) - - it('styles invisible button appropriately', async () => { - const container = render() - const button = await container.findByRole('button') - expect(button).toMatchSnapshot() - }) - - it('styles danger button appropriately', async () => { - const container = render() - const button = await container.findByRole('button') - expect(button).toMatchSnapshot() - }) - - it('styles outline button appropriately', async () => { - const container = render() - const button = await container.findByRole('button') - expect(button).toMatchSnapshot() - }) - - it('styles icon only button to make it a square', async () => { - const container = render() - const IconOnlyButton = await container.findByRole('button') - expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px') - }) -}) diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/__tests__/ConfirmationDialog.test.tsx index 7e7cff17bb6..7de379edf25 100644 --- a/src/__tests__/ConfirmationDialog.test.tsx +++ b/src/__tests__/ConfirmationDialog.test.tsx @@ -6,7 +6,7 @@ import React, {useCallback, useRef, useState} from 'react' import {ActionMenu} from '../deprecated/ActionMenu' import BaseStyles from '../BaseStyles' import Box from '../Box' -import Button from '../Button/Button' +import Button from '../deprecated/Button/Button' import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog' import theme from '../theme' import {ThemeProvider} from '../ThemeProvider' diff --git a/src/__tests__/Details.test.tsx b/src/__tests__/Details.test.tsx index c59bbc78989..12960286b33 100644 --- a/src/__tests__/Details.test.tsx +++ b/src/__tests__/Details.test.tsx @@ -1,6 +1,7 @@ import React from 'react' -import {Details, useDetails, Button, ButtonPrimary, Box} from '..' -import {ButtonProps} from '../Button/Button' +import {Details, useDetails, Box} from '..' +import {Button, ButtonPrimary} from '../deprecated' +import {ButtonProps} from '../deprecated/Button/Button' import {mount, behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/Dialog.test.tsx b/src/__tests__/Dialog.test.tsx index 0ae3bcb3e6b..3a409a38b3a 100644 --- a/src/__tests__/Dialog.test.tsx +++ b/src/__tests__/Dialog.test.tsx @@ -1,5 +1,6 @@ import React, {useState, useRef} from 'react' -import {Dialog, Box, Text, Button} from '..' +import {Dialog, Box, Text} from '..' +import {Button} from '../deprecated' import {render as HTMLRender, cleanup, act, fireEvent} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' diff --git a/src/__tests__/Overlay.test.tsx b/src/__tests__/Overlay.test.tsx index 05cc6320085..7cc6e7de4fe 100644 --- a/src/__tests__/Overlay.test.tsx +++ b/src/__tests__/Overlay.test.tsx @@ -1,5 +1,6 @@ import React, {useRef, useState} from 'react' -import {Overlay, Box, Text, ButtonDanger, Button} from '..' +import {Overlay, Box, Text} from '..' +import {ButtonDanger, Button} from '../deprecated' import {render, cleanup, waitFor, fireEvent, act} from '@testing-library/react' import userEvent from '@testing-library/user-event' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/SelectMenu.test.tsx b/src/__tests__/SelectMenu.test.tsx index 95e31f88a68..366b245e512 100644 --- a/src/__tests__/SelectMenu.test.tsx +++ b/src/__tests__/SelectMenu.test.tsx @@ -1,6 +1,5 @@ import React from 'react' -import {SelectMenu} from '../deprecated' -import {Button} from '..' +import {SelectMenu, Button} from '../deprecated' import {mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap index db323e63e09..4a558a6a82b 100644 --- a/src/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/__tests__/__snapshots__/Button.test.tsx.snap @@ -2,256 +2,119 @@ exports[`Button renders consistently 1`] = ` .c0 { - position: relative; - display: inline-block; - padding: 6px 16px; + border-radius: 6px; + border: 1px solid; + border-color: rgba(27,31,36,0.15); font-family: inherit; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - border-radius: 6px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -webkit-text-decoration: none; text-decoration: none; text-align: center; + display: grid; + grid-template-areas: "leadingIcon text trailingIcon"; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 16px; + padding-right: 16px; font-size: 14px; color: #24292f; background-color: #f6f8fa; - border: 1px solid rgba(27,31,36,0.15); box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } -.c0:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - .c0:focus { outline: none; } .c0:disabled { cursor: default; + color: #8c959f; + background-color: btn.disabledBg; } .c0:disabled svg { opacity: 0.6; } -.c0:hover { - background-color: #f3f4f6; - border-color: rgba(27,31,36,0.15); +.c0 > :not(:last-child) { + margin-right: 8px; } -.c0:focus { - border-color: rgba(27,31,36,0.15); - box-shadow: 0 0 0 3px rgba(9,105,218,0.3); +.c0 [data-component="leadingIcon"] { + grid-area: leadingIcon; } -.c0:active { - background-color: hsla(220,14%,94%,1); - box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15); +.c0 [data-component="text"] { + grid-area: text; } -.c0:disabled { - color: #8c959f; - background-color: #f6f8fa; - border-color: rgba(27,31,36,0.15); +.c0 [data-component="trailingIcon"] { + grid-area: trailingIcon; } - `; -exports[`ButtonInvisible renders consistently 1`] = ` +exports[`Button styles invisible button appropriately 1`] = ` .c0 { - position: relative; - display: inline-block; - padding: 6px 16px; + border-radius: 2; + border: 0; font-family: inherit; - font-weight: 600; + font-weight: bold; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-radius: 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - font-size: 14px; - color: #0969da; - border: 1px solid rgba(27,31,36,0.15); - background-color: #f6f8fa; - box-shadow: 0 1px 0 rgba(27,31,36,0.04); -} - -.c0:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:focus { - outline: none; -} - -.c0:disabled { - cursor: default; -} - -.c0:disabled svg { - opacity: 0.6; -} - -.c0:hover { - color: #ffffff; - background-color: #0969da; - border-color: rgba(27,31,36,0.15); - box-shadow: 0 1px 0 rgba(27,31,36,0.1); -} - -.c0:focus { - border-color: rgba(27,31,36,0.15); - box-shadow: 0 0 0 3px rgba(5,80,174,0.4); -} - -.c0:active { - color: #ffffff; - background-color: hsla(212,92%,42%,1); - box-shadow: inset 0 1px 0 rgba(0,33,85,0.2); - border-color: rgba(27,31,36,0.15); -} - -.c0:disabled { - color: rgba(9,105,218,0.5); - background-color: #f6f8fa; - border-color: rgba(27,31,36,0.15); -} - - `; -exports[`ButtonOutline renders correct disabled styles 1`] = ` +exports[`Button styles outline button appropriately 1`] = ` .c0 { - position: relative; - display: inline-block; - padding: 6px 16px; + border-radius: 2; + border: 1px solid; font-family: inherit; - font-weight: 600; + font-weight: bold; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - border-radius: 6px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -webkit-text-decoration: none; text-decoration: none; text-align: center; + display: grid; + grid-template-areas: "leadingIcon text trailingIcon"; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 16px; + padding-right: 16px; font-size: 14px; - color: #0969da; - border: 1px solid rgba(27,31,36,0.15); - background-color: #f6f8fa; - box-shadow: 0 1px 0 rgba(27,31,36,0.04); -} - -.c0:hover { - -webkit-text-decoration: none; - text-decoration: none; + color: btn.outline.text; + box-shadow: undefined; } .c0:focus { @@ -609,147 +318,107 @@ exports[`ButtonOutline renders correct disabled styles 1`] = ` .c0:disabled { cursor: default; + color: btn.outline.disabledText; + background-color: btn.outline.disabledBg; + border-color: btn.border; +} + +.c0:disabled [data-component="ButtonCounter"] { + background-color: btn.outline.disabledCounterBg; } .c0:disabled svg { opacity: 0.6; } -.c0:hover { - color: #ffffff; - background-color: #0969da; - border-color: rgba(27,31,36,0.15); - box-shadow: 0 1px 0 rgba(27,31,36,0.1); +.c0 > :not(:last-child) { + margin-right: 8px; } -.c0:focus { - border-color: rgba(27,31,36,0.15); - box-shadow: 0 0 0 3px rgba(5,80,174,0.4); +.c0 [data-component="leadingIcon"] { + grid-area: leadingIcon; } -.c0:active { - color: #ffffff; - background-color: hsla(212,92%,42%,1); - box-shadow: inset 0 1px 0 rgba(0,33,85,0.2); - border-color: rgba(27,31,36,0.15); +.c0 [data-component="text"] { + grid-area: text; } -.c0:disabled { - color: rgba(9,105,218,0.5); - background-color: #f6f8fa; - border-color: rgba(27,31,36,0.15); +.c0 [data-component="trailingIcon"] { + grid-area: trailingIcon; } - `; -exports[`ButtonPrimary renders correct disabled styles 1`] = ` +exports[`Button styles primary button appropriately 1`] = ` .c0 { - position: relative; - display: inline-block; - padding: 6px 16px; + border-radius: 2; + border: 1px solid; + border-color: border.subtle; font-family: inherit; - font-weight: 600; + font-weight: bold; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - border-radius: 6px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -webkit-text-decoration: none; text-decoration: none; text-align: center; + display: grid; + grid-template-areas: "leadingIcon text trailingIcon"; + padding-top: 5px; + padding-bottom: 5px; + padding-left: 16px; + padding-right: 16px; font-size: 14px; - color: #ffffff; - border: 1px solid rgba(27,31,36,0.15); - background-color: #2da44e; - box-shadow: 0 1px 0 rgba(27,31,36,0.1); -} - -.c0:hover { - -webkit-text-decoration: none; - text-decoration: none; + color: btn.primary.text; + background-color: btn.primary.bg; + box-shadow: undefined; } .c0:focus { @@ -758,83 +427,57 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = ` .c0:disabled { cursor: default; + color: btn.primary.disabledText; + background-color: btn.primary.disabledBg; } .c0:disabled svg { opacity: 0.6; } -.c0:hover { - background-color: #2c974b; - border-color: rgba(27,31,36,0.15); +.c0 > :not(:last-child) { + margin-right: 8px; } -.c0:focus { - border-color: rgba(27,31,36,0.15); - box-shadow: 0 0 0 3px rgba(45,164,78,0.4); +.c0 [data-component="leadingIcon"] { + grid-area: leadingIcon; } -.c0:active { - background-color: hsla(137,55%,36%,1); - box-shadow: inset 0 1px 0 rgba(0,45,17,0.2); +.c0 [data-component="text"] { + grid-area: text; } -.c0:disabled { - color: rgba(255,255,255,0.8); - background-color: #94d3a2; - border-color: rgba(27,31,36,0.15); +.c0 [data-component="trailingIcon"] { + grid-area: trailingIcon; } - `; diff --git a/src/__tests__/__snapshots__/Button2.test.tsx.snap b/src/__tests__/__snapshots__/Button2.test.tsx.snap deleted file mode 100644 index 4a558a6a82b..00000000000 --- a/src/__tests__/__snapshots__/Button2.test.tsx.snap +++ /dev/null @@ -1,483 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Button renders consistently 1`] = ` -.c0 { - border-radius: 6px; - border: 1px solid; - border-color: rgba(27,31,36,0.15); - font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: #24292f; - background-color: #f6f8fa; - box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); -} - -.c0:focus { - outline: none; -} - -.c0:disabled { - cursor: default; - color: #8c959f; - background-color: btn.disabledBg; -} - -.c0:disabled svg { - opacity: 0.6; -} - -.c0 > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; -} - -.c0 [data-component="text"] { - grid-area: text; -} - -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; -} - -.c0 [data-component="ButtonCounter"] { - font-size: 14px; -} - -.c0:hover:not([disabled]) { - background-color: #f3f4f6; -} - -.c0:focus:not([disabled]) { - box-shadow: 0 0 0 3px rgba(9,105,218,0.3); -} - -.c0:active:not([disabled]) { - background-color: hsla(220,14%,94%,1); - box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15); -} - - -`; - -exports[`Button styles invisible button appropriately 1`] = ` -.c0 { - border-radius: 2; - border: 0; - font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 6px; - padding-bottom: 6px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: accent.fg; - background-color: transparent; - box-shadow: none; -} - -.c0:focus { - outline: none; -} - -.c0:disabled { - cursor: default; - color: primer.fg.disabled; -} - -.c0:disabled svg { - opacity: 0.6; -} - -.c0 > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; -} - -.c0 [data-component="text"] { - grid-area: text; -} - -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; -} - -.c0 [data-component="ButtonCounter"] { - font-size: 14px; -} - -.c0:hover:not([disabled]) { - background-color: btn.hoverBg; -} - -.c0:focus:not([disabled]) { - box-shadow: undefined; -} - -.c0:active:not([disabled]) { - background-color: btn.selectedBg; -} - - -`; - -exports[`Button styles outline button appropriately 1`] = ` -.c0 { - border-radius: 2; - border: 1px solid; - font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: btn.outline.text; - box-shadow: undefined; -} - -.c0:focus { - outline: none; -} - -.c0:disabled { - cursor: default; - color: btn.outline.disabledText; - background-color: btn.outline.disabledBg; - border-color: btn.border; -} - -.c0:disabled [data-component="ButtonCounter"] { - background-color: btn.outline.disabledCounterBg; -} - -.c0:disabled svg { - opacity: 0.6; -} - -.c0 > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; -} - -.c0 [data-component="text"] { - grid-area: text; -} - -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; -} - -.c0 [data-component="ButtonCounter"] { - font-size: 14px; - background-color: btn.outline.counterBg; - color: btn.outline.text; -} - -.c0:hover:not([disabled]) { - color: btn.outline.hoverText; - background-color: btn.outline.hoverBg; - border-color: outline.hoverBorder; - box-shadow: undefined; -} - -.c0:hover:not([disabled]) [data-component="ButtonCounter"] { - background-color: btn.outline.hoverCounterBg; - color: btn.outline.hoverText; -} - -.c0:focus:not([disabled]) { - border-color: btn.outline.focusBorder; - box-shadow: undefined; -} - -.c0:active:not([disabled]) { - color: btn.outline.selectedText; - background-color: btn.outline.selectedBg; - box-shadow: undefined; - border-color: btn.outline.selectedBorder; -} - - -`; - -exports[`Button styles primary button appropriately 1`] = ` -.c0 { - border-radius: 2; - border: 1px solid; - border-color: border.subtle; - font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: btn.primary.text; - background-color: btn.primary.bg; - box-shadow: undefined; -} - -.c0:focus { - outline: none; -} - -.c0:disabled { - cursor: default; - color: btn.primary.disabledText; - background-color: btn.primary.disabledBg; -} - -.c0:disabled svg { - opacity: 0.6; -} - -.c0 > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; -} - -.c0 [data-component="text"] { - grid-area: text; -} - -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; -} - -.c0 [data-component="ButtonCounter"] { - font-size: 14px; - background-color: btn.primary.counterBg; - color: btn.primary.text; -} - -.c0:hover:not([disabled]) { - color: btn.primary.hoverText; - background-color: btn.primary.hoverBg; -} - -.c0:focus:not([disabled]) { - box-shadow: undefined; -} - -.c0:active:not([disabled]) { - background-color: btn.primary.selectedBg; - box-shadow: undefined; -} - - -`; diff --git a/src/__tests__/deprecated/Button.test.tsx b/src/__tests__/deprecated/Button.test.tsx new file mode 100644 index 00000000000..c1b5d6df449 --- /dev/null +++ b/src/__tests__/deprecated/Button.test.tsx @@ -0,0 +1,130 @@ +import React from 'react' +import { + Button, + ButtonPrimary, + ButtonClose, + ButtonDanger, + ButtonOutline, + ButtonInvisible, + ButtonTableList +} from '../../deprecated' +import {ButtonGroup} from '../..' +import {render, behavesAsComponent, checkExports} from '../../utils/testing' +import {render as HTMLRender, cleanup} from '@testing-library/react' +import {axe, toHaveNoViolations} from 'jest-axe' +import 'babel-polyfill' +expect.extend(toHaveNoViolations) + +// eslint-disable-next-line @typescript-eslint/no-empty-function +function noop() {} + +describe('Button', () => { + behavesAsComponent({Component: Button}) + + checkExports('deprecated/Button', { + default: Button, + ButtonPrimary, + ButtonDanger, + ButtonOutline, + ButtonInvisible, + ButtonTableList, + ButtonClose + }) + checkExports('ButtonGroup', { + default: ButtonGroup + }) + + it('renders a ) + const results = await axe(container) + expect(results).toHaveNoViolations() + cleanup() + }) + + it('preserves "onClick" prop', () => { + expect(render(