diff --git a/.changeset/clever-wolves-move.md b/.changeset/clever-wolves-move.md new file mode 100644 index 00000000000..3b9fb7a92a9 --- /dev/null +++ b/.changeset/clever-wolves-move.md @@ -0,0 +1,8 @@ +--- +'@primer/react': major +--- + +Remove components from deprecated +- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position`, `Dropdown`, `FormGroup`, `SelectMenu`, `InputField`, `Label`, `Button`, `DropdownButton`, `DropdownMenu` +- Update deprecated `Button` usage in `Dialog` and `ConfirmationDialog` +- Update deprecated `DropdownButton` usage in `SelectPanel` diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx index 13bfce59100..c34c097202c 100644 --- a/docs/content/deprecated/ActionList.mdx +++ b/docs/content/deprecated/ActionList.mdx @@ -4,7 +4,7 @@ status: Deprecated source: https://github.com/primer/react/tree/main/src/deprecated/ActionList --- -An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`. +An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `ActionMenu`. ## Deprecation diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md deleted file mode 100644 index 151a410d746..00000000000 --- a/docs/content/deprecated/BorderBox.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: BorderBox -status: Deprecated ---- - -BorderBox is a Box component with a border. When no `borderColor` is present, the component defaults to a primary border. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated -Item 1 -``` - -### After - -```jsx deprecated - - Item 1 - -``` - -## Default example - -```jsx live deprecated -This is a BorderBox -``` - -Note that `BorderBox` has default props set for `borderWidth`, `borderStyle`, and `borderColor`. This means that you cannot use `border={0} borderBottom={1}` or similar patterns; instead, use individual properties like `borderWidth={0} borderBottomWidth={1}`. - -## System props - -BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -| Prop name | Type | Default | Description | -| :----------- | :--------------- | :---------------------------: | :------------------------------------------------------------ | -| borderWidth | String | '1px' | Sets the border, use theme values or provide your own. | -| borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. | -| borderColor | String | 'border.primary' (from theme) | Sets the border color, use theme values or provide your own. | -| borderRadius | String or Number | 2 (from theme) | Sets the border radius, use theme values or provide your own. | -| boxShadow | String | | Sets box shadow, use theme values or provide your own. | diff --git a/docs/content/deprecated/Buttons.mdx b/docs/content/deprecated/Buttons.mdx deleted file mode 100644 index 3da951cec97..00000000000 --- a/docs/content/deprecated/Buttons.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Button (legacy) -status: Deprecated -source: https://github.com/primer/react/blob/main/src/Button -storybook: '/react/storybook?path=/story/components-button--default-button' ---- - -## Deprecation - -Use [Button](/Button) instead. - -`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 - Button outline - Button primary - Button invisible - window.alert('button clicked')} /> - - - - - - - - Button table list - -``` - -## Props - -Native ` - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - -``` - -## SelectMenu - -Main wrapper component for select menu. - -```jsx deprecated -{/* all other sub components are wrapped here*/} -``` - -### Component Props - -| Name | Type | Default | Description | -| :--------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- | -| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. | -| ref | React ref | | ref to pass down to SelectMenu component | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.MenuContext - -SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider). - -### Values available on MenuContext - -| Name | Type | Description | -| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | -| selectedTab | string | The currently selected tab | -| setSelectedTab | function | Used to update the currently selected tab state | -| open | boolean | State for open/closed status of the menu modal | -| setOpen | function | Used to update the `open` state | -| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value use the `initialTab` prop on `SelectMenu`. | - -### Example Usage - -```jsx deprecated -import {SelectMenu, Button} from '@primer/react' -import React, {useContext} from 'react' - -const MyMenu = () => ( - - - content - -) - -// note that we can only use the context in components that are already wrapped by SelectMenu (and thus the Context.Provider) -const MyButton = () => { - const menuContext = useContext(SelectMenu.MenuContext) - - return -} -``` - -## SelectMenu.Modal - -Used to wrap the content in a `SelectMenu`. - -```jsx deprecated -{/* all menu content is wrapped in the modal*/} -``` - -### Right-aligned modal - -Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly. - -```jsx deprecated live - - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - - -``` - -### Component Props - -| Prop name | Type | Default | Description | -| :-------- | :---------------- | :------ | ------------------------------------------------- | -| align | String | 'left' | Use `right` to align the select menu to the right | -| width | String or Number | 300px | Sets the modal width | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.List - -Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessibility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. - -```jsx deprecated -{/* all menu list items are wrapped in the list*/} -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Item - -Individual items in a select menu. SelectMenu.Item renders an anchor tag by default, you'll need to make sure to provide the appropriate `href`. - -You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component. - -```jsx deprecated - - {/* wraps an individual list item*/} - -``` - -### Component Props - -| Name | Type | Default | Description | -| :------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| selected | boolean | | Used to apply styles to the selected items in the list. | -| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Filter - -Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item. - -```jsx deprecated live - - - - Filter by Project - - - Primer React bugs - Primer React roadmap - More Options - Project 3 - Project 4 - - - -``` - -### Component Props - -SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets. - -| Name | Type | Default | Description | -| :---- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------- | -| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Tabs - -Use `SelectMenu.Tabs` to wrap the tab navigation and `SelectMenu.Tab` for each tab in the navigation. - -`SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`. - -To set one of the tabs to be open by default, use `initialTab` on the main `SelectMenu` component. Otherwise, the first tab will be shown by default. - -Each `Select.Menu` tab will need to have an `index` prop. The first tab should be at index `0`, the second at index `1` and so forth. The `index` prop is used to show the first tab by default. - -If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`. - -```jsx deprecated live - - - - Projects - - - - - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - Project 2 - - Showing 3 of 3 - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Tab - -Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `index` prop to correspond to the order the tab is in. The `tabName` prop should correspond to the `tabName` set on the `SelectMenu.TabPanel`. - -The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks. - -```jsx deprecated -<> - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- | -| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | -| index | Number | | The index at which the tab is in the list of tabs | -| onClick | Function | | Function to be called when the tab is clicked. Optional. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.TabPanel - -Wraps the content for each tab. Make sure to use the `tabName` prop to identify each tab panel with the correct tab in the tab navigation. - -**Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary. - -```jsx deprecated -{/* Wraps content for each tab */} -``` - -### Component Props - -| Name | Type | Default | Description | -| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- | -| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Divider - -Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - More Options - Project 3 - Project 4 - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Footer - -Use a `SelectMenu.Footer` to add content to the bottom of the select menu. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Header - -Use a `SelectMenu.Header` to add a header to the top of the select menu content. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.LoadingAnimation - -Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the SelectMenu. - -**Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state. - -```jsx deprecated live - - - - Projects - - {true ? ( - - ) : ( - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - )} - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index d6ef3c6b2c8..0cc74a68f49 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -108,7 +108,7 @@ Primer React includes TypeScript support and ships with its own typings. You wil Once installed, you can import components and their prop type interfaces from the `@primer/react` package: ```typescript -import {BorderBox, BorderBoxProps} from '@primer/react' +import {Button, ButtonProps} from '@primer/react' ``` ### Fixing "Duplicate identifier 'FormData'" diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index da1d837ce2b..07826d61189 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -178,31 +178,5 @@ url: /deprecated/ActionList - title: ActionMenu (legacy) url: /deprecated/ActionMenu - - title: BorderBox - url: /deprecated/BorderBox - - title: Buttons (legacy) - url: /deprecated/Buttons - - title: ChoiceFieldset - url: /deprecated/ChoiceFieldset - - title: ChoiceInputField - url: /deprecated/ChoiceInputField - - title: Dropdown - url: /deprecated/Dropdown - - title: DropdownMenu - url: /deprecated/DropdownMenu - - title: Flex - url: /deprecated/Flex - - title: FormGroup - url: /deprecated/FormGroup - - title: Grid - url: /deprecated/Grid - - title: InputField - url: /deprecated/InputField - - title: Label - url: /deprecated/Label - - title: Position - url: /deprecated/Position - - title: SelectMenu - url: /deprecated/SelectMenu - title: SideNav url: /deprecated/SideNav diff --git a/src/ActionList/ActionListContainerContext.tsx b/src/ActionList/ActionListContainerContext.tsx index bc57c3a06de..421e6cb96ae 100644 --- a/src/ActionList/ActionListContainerContext.tsx +++ b/src/ActionList/ActionListContainerContext.tsx @@ -6,7 +6,7 @@ import {AriaRole} from '../utils/types' type ContextProps = { container?: string listRole?: AriaRole - selectionVariant?: 'single' | 'multiple' // TODO: Remove after DropdownMenu2 deprecation + selectionVariant?: 'single' | 'multiple' // TODO: Remove after DropdownMenu2 deprecation (DropdownMenu is removed now.) selectionAttribute?: 'aria-selected' | 'aria-checked' listLabelledBy?: string // This can be any function, we don't know anything about the arguments diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 60126e3528a..dbf89a55c62 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -44,6 +44,7 @@ export const Item = React.forwardRef( /** Infer item role based on the container */ let itemRole: ActionListItemProps['role'] + //TODO: Remove this DropdownMenu is removed if (container === 'ActionMenu' || container === 'DropdownMenu') { if (selectionVariant === 'single') itemRole = 'menuitemradio' else if (selectionVariant === 'multiple') itemRole = 'menuitemcheckbox' diff --git a/src/Details/__tests__/Details.test.tsx b/src/Details/__tests__/Details.test.tsx index dc91cfd704b..58f87efb595 100644 --- a/src/Details/__tests__/Details.test.tsx +++ b/src/Details/__tests__/Details.test.tsx @@ -2,10 +2,10 @@ import {render} from '@testing-library/react' import userEvent from '@testing-library/user-event' import React from 'react' import {Details, useDetails, Box} from '../..' -import {Button, ButtonPrimary} from '../../deprecated' -import {ButtonProps} from '../../deprecated/Button/Button' +import {Button, IconButton} from '../../Button' import {behavesAsComponent, checkExports} from '../../utils/testing' import {axe} from 'jest-axe' +import {XIcon} from '@primer/octicons-react' describe('Details', () => { behavesAsComponent({Component: Details}) @@ -59,7 +59,6 @@ describe('Details', () => { it('Can manipulate state with setOpen', async () => { const user = userEvent.setup() - const CloseButton = (props: ButtonProps) => - setOpen(false)}>Close + setOpen(false)} aria-label="Close" icon={XIcon} /> ) } @@ -90,7 +89,7 @@ describe('Details', () => { {open ? 'Open' : 'Closed'} - test + ) diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 2df90952959..e6f66fdbe4e 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -1,6 +1,7 @@ import React, {forwardRef, useRef} from 'react' import styled from 'styled-components' -import ButtonClose from './deprecated/Button/ButtonClose' +import {IconButton} from './Button' +import {XIcon} from '@primer/octicons-react' import {get} from './constants' import Box from './Box' import useDialog from './hooks/useDialog' @@ -119,10 +120,12 @@ const Dialog = forwardRef( <> - {children} diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx index 2fa2259849e..2b6e573749e 100644 --- a/src/Dialog/ConfirmationDialog.tsx +++ b/src/Dialog/ConfirmationDialog.tsx @@ -37,7 +37,7 @@ export interface ConfirmationDialogProps { /** * The type of button to use for the confirm button. Default: Button. */ - confirmButtonType?: 'normal' | 'primary' | 'danger' + confirmButtonType?: 'default' | 'primary' | 'danger' } const StyledConfirmationHeader = styled.div` @@ -106,7 +106,7 @@ export const ConfirmationDialog: React.FC` ${sx}; ` -const buttonTypes = { - normal: Button, - primary: ButtonPrimary, - danger: ButtonDanger, -} const Buttons: React.FC> = ({buttons}) => { const autoFocusRef = useProvidedRefOrCreate(buttons.find(button => button.autoFocus)?.ref) let autoFocusCount = 0 @@ -387,17 +382,16 @@ const Buttons: React.FC> return ( <> {buttons.map((dialogButtonProps, index) => { - const {content, buttonType = 'normal', autoFocus = false, ...buttonProps} = dialogButtonProps - const ButtonElement = buttonTypes[buttonType] + const {children, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps return ( - - {content} - + {children} + ) })} diff --git a/src/Overlay/Overlay.test.tsx b/src/Overlay/Overlay.test.tsx index 2808aeb0f9e..32158f690f1 100644 --- a/src/Overlay/Overlay.test.tsx +++ b/src/Overlay/Overlay.test.tsx @@ -1,6 +1,6 @@ import React, {useRef, useState} from 'react' import {Overlay, Box, Text} from '..' -import {ButtonDanger, Button} from '../deprecated' +import {Button} from '../Button' import {render, waitFor, fireEvent} from '@testing-library/react' import userEvent from '@testing-library/user-event' import {axe} from 'jest-axe' @@ -43,7 +43,9 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => { > Are you sure? - Cancel + diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx index b0d53fc760c..4b3ea84c31a 100644 --- a/src/SelectPanel/SelectPanel.tsx +++ b/src/SelectPanel/SelectPanel.tsx @@ -3,7 +3,8 @@ import {FilteredActionList, FilteredActionListProps} from '../FilteredActionList import {OverlayProps} from '../Overlay' import {ItemInput} from '../deprecated/ActionList/List' import {FocusZoneHookSettings} from '../hooks/useFocusZone' -import {DropdownButton} from '../deprecated/DropdownMenu' +import {Button} from '../Button' +import {TriangleDownIcon} from '@primer/octicons-react' import {ItemProps} from '../deprecated/ActionList' import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay' import {TextInputProps} from '../TextInput' @@ -50,7 +51,14 @@ const focusZoneSettings: Partial = { export function SelectPanel({ open, onOpenChange, - renderAnchor = props => , + renderAnchor = props => { + const {children, ...rest} = props + return ( + + ) + }, anchorRef: externalAnchorRef, placeholder, selected, diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx index eb715d4dc5f..96e72776878 100644 --- a/src/TextInput/TextInput.tsx +++ b/src/TextInput/TextInput.tsx @@ -50,7 +50,7 @@ export type TextInputNonPassthroughProps = { export type TextInputProps = Merge, TextInputNonPassthroughProps> -// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input +// using forwardRef is important so that other components can autofocus the input const TextInput = React.forwardRef( ( { diff --git a/src/__tests__/AnchoredOverlay.test.tsx b/src/__tests__/AnchoredOverlay.test.tsx index fa005064c40..4905ffd7c45 100644 --- a/src/__tests__/AnchoredOverlay.test.tsx +++ b/src/__tests__/AnchoredOverlay.test.tsx @@ -4,7 +4,7 @@ import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, fireEvent} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import {SSRProvider} from '../index' -import {Button} from '../deprecated' +import {Button} from '../Button' import theme from '../theme' import BaseStyles from '../BaseStyles' import {ThemeProvider} from '../ThemeProvider' diff --git a/src/__tests__/BorderBox.test.tsx b/src/__tests__/BorderBox.test.tsx deleted file mode 100644 index 01909c4da22..00000000000 --- a/src/__tests__/BorderBox.test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import theme from '../theme' -import {BorderBox} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('BorderBox', () => { - behavesAsComponent({Component: BorderBox}) - - checkExports('deprecated/BorderBox', { - default: BorderBox, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('renders borders', () => { - expect(render()).toHaveStyleRule( - 'border-color', - theme.colorSchemes.light.colors.success?.emphasis, - ) - expect(render()).toHaveStyleRule('border-bottom', '0') - }) - - it('renders border radius', () => { - expect(render()).toHaveStyleRule('border-radius', theme.radii[2]) - }) - - // the test returns the box shadow value without spaces, so had to manually provide the expected string here - it('renders box shadow', () => { - expect(render()).toHaveStyleRule( - 'box-shadow', - theme.colorSchemes.light.shadows.shadow?.small, - ) - }) -}) diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/__tests__/ConfirmationDialog.test.tsx index 32e604d21a6..be2c670f6dd 100644 --- a/src/__tests__/ConfirmationDialog.test.tsx +++ b/src/__tests__/ConfirmationDialog.test.tsx @@ -5,7 +5,7 @@ import React, {useCallback, useRef, useState} from 'react' import {ActionMenu} from '../deprecated/ActionMenu' import BaseStyles from '../BaseStyles' import Box from '../Box' -import Button from '../deprecated/Button/Button' +import {Button} from '../Button' import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog' import theme from '../theme' import {ThemeProvider} from '../ThemeProvider' diff --git a/src/__tests__/Dialog.test.tsx b/src/__tests__/Dialog.test.tsx index 5d4e51078f6..9fd294899e4 100644 --- a/src/__tests__/Dialog.test.tsx +++ b/src/__tests__/Dialog.test.tsx @@ -1,6 +1,6 @@ import React, {useState, useRef} from 'react' import {Dialog, Box, Text} from '..' -import {Button} from '../deprecated' +import {Button} from '../Button' import {render as HTMLRender, fireEvent} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import {behavesAsComponent, checkExports} from '../utils/testing' diff --git a/src/__tests__/Dropdown.test.tsx b/src/__tests__/Dropdown.test.tsx deleted file mode 100644 index 08af8c9fa43..00000000000 --- a/src/__tests__/Dropdown.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react' -import {Dropdown} from '../deprecated' -import {behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('Dropdown', () => { - behavesAsComponent({Component: Dropdown, toRender: () => Hello!}) - - checkExports('deprecated/Dropdown', { - default: Dropdown, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) - -describe('Dropdown.Item', () => { - behavesAsComponent({ - Component: Dropdown.Item, - toRender: () => Hello!, - }) -}) - -describe('Dropdown.Button', () => { - behavesAsComponent({ - Component: Dropdown.Button, - toRender: () => Hello!, - }) -}) - -describe('Dropdown.Caret', () => { - behavesAsComponent({Component: Dropdown.Caret}) -}) - -describe('Dropdown.Menu', () => { - behavesAsComponent({ - Component: Dropdown.Menu, - toRender: () => ( - -
  • 1
    • -
  • 2
    • -
  • 3
    • -     - ), - }) -}) diff --git a/src/__tests__/Dropdown.types.test.tsx b/src/__tests__/Dropdown.types.test.tsx deleted file mode 100644 index 06402f96573..00000000000 --- a/src/__tests__/Dropdown.types.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import Dropdown from '../deprecated/Dropdown' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - return ( - <> - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - - ) -} diff --git a/src/__tests__/Flex.test.tsx b/src/__tests__/Flex.test.tsx deleted file mode 100644 index 750eeb44c89..00000000000 --- a/src/__tests__/Flex.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react' -import {Flex} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('Flex', () => { - behavesAsComponent({Component: Flex}) - - checkExports('deprecated/Flex', { - default: Flex, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('gets display: flex by default', () => { - expect(render()).toHaveStyleRule('display', 'flex') - }) - - it('respects flexWrap', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects flexDirection', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects justifyContent', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects alignItems', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects alignContent', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects display', () => { - expect(render()).toHaveStyleRule('display', 'inline-flex') - }) - - it('respects responsive display', () => { - expect(render()).toMatchSnapshot() - }) - - it('renders a div by default', () => { - expect(render().type).toEqual('div') - }) -}) diff --git a/src/__tests__/FormGroup.types.test.tsx b/src/__tests__/FormGroup.types.test.tsx deleted file mode 100644 index c35f16d3bd1..00000000000 --- a/src/__tests__/FormGroup.types.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import FormGroup from '../deprecated/FormGroup' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - // @ts-expect-error system props should not be accepted - return -} diff --git a/src/__tests__/Grid.test.tsx b/src/__tests__/Grid.test.tsx deleted file mode 100644 index aa227cef5d5..00000000000 --- a/src/__tests__/Grid.test.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import {Grid} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('Grid', () => { - behavesAsComponent({Component: Grid}) - - checkExports('deprecated/Grid', { - default: Grid, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('gets display: grid by default', () => { - expect(render()).toHaveStyleRule('display', 'grid') - }) - - it('respects gridGap', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridColumnGap', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridRowGap', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridColumn', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridRow', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridArea', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridAutoFlow', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridAutoRows', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridAutoColumns', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridTemplateColumns', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridTemplateRows', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridTemplateAreas', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects responsive display', () => { - expect(render()).toMatchSnapshot() - }) - - it('renders a div by default', () => { - expect(render().type).toEqual('div') - }) -}) diff --git a/src/__tests__/Position.test.tsx b/src/__tests__/Position.test.tsx deleted file mode 100644 index 304f0a45170..00000000000 --- a/src/__tests__/Position.test.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React from 'react' -import {Box} from '..' -import {Position, Absolute, Fixed, Relative, Sticky} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('position components', () => { - describe('Absolute', () => { - behavesAsComponent({Component: Absolute}) - - checkExports('deprecated/Position', { - default: Position, - Absolute, - Fixed, - Relative, - Sticky, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('sets position: absolute', () => { - expect(render()).toHaveStyleRule('position', 'absolute') - }) - - it('can render other components with the as prop', () => { - const result = render( - , - ) - expect(result).toHaveStyleRule('position', 'absolute') - expect(result).toHaveStyleRule('border-width', '1px') - expect(result).toHaveStyleRule('border-style', 'solid') - }) - }) - - describe('Fixed', () => { - behavesAsComponent({Component: Fixed}) - - it('respects the "as" prop', () => { - expect(render().type).toEqual('span') - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('sets position: fixed', () => { - expect(render()).toHaveStyleRule('position', 'fixed') - }) - - it('can render other components with the as prop', () => { - const result = render( - , - ) - expect(result).toHaveStyleRule('position', 'fixed') - expect(result).toHaveStyleRule('border-width', '1px') - expect(result).toHaveStyleRule('border-style', 'solid') - }) - }) - - describe('Relative', () => { - behavesAsComponent({Component: Relative}) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('sets position: relative', () => { - expect(render()).toHaveStyleRule('position', 'relative') - }) - - it('can render other components with the as prop', () => { - const result = render( - , - ) - expect(result).toHaveStyleRule('position', 'relative') - expect(result).toHaveStyleRule('border-width', '1px') - expect(result).toHaveStyleRule('border-style', 'solid') - }) - }) - - describe('Sticky', () => { - behavesAsComponent({Component: Sticky}) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('sets position: sticky', () => { - expect(render()).toHaveStyleRule('position', 'sticky') - }) - - it('can render other components with the as prop', () => { - const result = render( - , - ) - expect(result).toHaveStyleRule('position', 'sticky') - expect(result).toHaveStyleRule('border-width', '1px') - expect(result).toHaveStyleRule('border-style', 'solid') - }) - }) -}) diff --git a/src/__tests__/SelectMenu.test.tsx b/src/__tests__/SelectMenu.test.tsx deleted file mode 100644 index a6fd21bdd48..00000000000 --- a/src/__tests__/SelectMenu.test.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import {render as HTMLRender} from '@testing-library/react' -import userEvent from '@testing-library/user-event' -import React from 'react' -import {SelectMenu, Button} from '../deprecated' -import {render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing' -import {axe} from 'jest-axe' -import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../deprecated/SelectMenu' - -const BasicSelectMenu = ({ - onClick, - as, - align = 'left', -}: { - onClick?: SelectMenuItemProps['onClick'] - // eslint-disable-next-line @typescript-eslint/no-explicit-any - as?: any - align?: SelectMenuModalProps['align'] -}) => { - return ( - - - - - - Primer Components bugs - - - Primer Components roadmap - - stuff - Project 3 - Project 4 - footer - - - - ) -} - -const MenuWithTabs = ({onClick}: {onClick?: SelectMenuTabProps['onClick']}) => { - return ( - - - - - - - - - Primer Components bugs - Primer Components roadmap - Project 3 - Project 4 - - - Project 2 - - Showing 3 of 3 - - - ) -} - -describe('SelectMenu', () => { - checkExports('deprecated/SelectMenu', { - default: SelectMenu, - }) - - for (const Comp of [ - SelectMenu.List, - SelectMenu.Divider, - SelectMenu.Filter, - SelectMenu.Item, - SelectMenu.List, - SelectMenu.Modal, - SelectMenu.Tabs, - SelectMenu.Tab, - SelectMenu.TabPanel, - SelectMenu.Header, - ]) { - it('sets a valid displayName', () => { - expect(Comp.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX) - }) - } - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('does not allow the "as" prop on SelectMenu', () => { - const {container} = HTMLRender() - expect(container.firstElementChild?.tagName).toBe('DETAILS') - }) - - it('shows correct initial tab', () => { - const testInstance = renderRoot() - // `findByProps` is a method on the renderer, not testing-library - // eslint-disable-next-line testing-library/await-async-query - expect(testInstance.findByProps({'aria-selected': true}).props.children).toBe('Organization') - }) - - it('clicking on a tab opens the tab', async () => { - const user = userEvent.setup() - const {getByRole} = HTMLRender() - - await user.click(getByRole('tab', {name: 'Repository'})) - - expect(getByRole('tab', {name: 'Repository'})).toHaveAttribute('aria-selected', 'true') - }) - - it('selected items have aria-checked', () => { - const testInstance = renderRoot() - // `findByProps` is a method on the renderer, not testing-library - // eslint-disable-next-line testing-library/await-async-query - expect(testInstance.findByProps({'aria-checked': true}).props.children[1]).toBe('Primer Components bugs') - }) - - it('clicking on a list item calls user provided onClick handler', async () => { - const user = userEvent.setup() - const onClick = jest.fn() - const {getByRole} = HTMLRender() - - await user.click(getByRole('menuitemcheckbox', {name: 'Primer Components roadmap'})) - - expect(onClick).toHaveBeenCalledTimes(1) - }) - - it('clicking on a tab calls user provided onClick handler', async () => { - const user = userEvent.setup() - const onClick = jest.fn() - const {getByRole} = HTMLRender() - - await user.click(getByRole('tab', {name: 'Repository'})) - - expect(onClick).toHaveBeenCalledTimes(1) - }) - - it('clicking on an item closes the modal', async () => { - const user = userEvent.setup() - const {container, getByRole} = HTMLRender() - - await user.click(getByRole('menuitemcheckbox', {name: 'Primer Components roadmap'})) - - expect(container.firstElementChild).not.toHaveAttribute('open') - }) - - it('right-aligned modal has right: 0px', () => { - expect(render()).toMatchSnapshot() - }) -}) diff --git a/src/__tests__/SelectMenu.types.test.tsx b/src/__tests__/SelectMenu.types.test.tsx deleted file mode 100644 index 66e57ddef0b..00000000000 --- a/src/__tests__/SelectMenu.types.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import SelectMenu from '../deprecated/SelectMenu' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - return ( - <> - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - - ) -} diff --git a/src/__tests__/__snapshots__/BorderBox.test.tsx.snap b/src/__tests__/__snapshots__/BorderBox.test.tsx.snap deleted file mode 100644 index 804d86dac97..00000000000 --- a/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BorderBox renders consistently 1`] = ` -.c0 { - border-width: 1px; - border-style: solid; - border-color: #d0d7de; - border-radius: 6px; -} - -
    -`; diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap deleted file mode 100644 index 58a254a85f8..00000000000 --- a/src/__tests__/__snapshots__/Button.test.tsx.snap +++ /dev/null @@ -1,1904 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Button renders consistently 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 6px; - border: 1px solid; - border-color: rgba(31,35,40,0.15); - font-family: inherit; - font-weight: 500; - font-size: 14px; - 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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: #24292f; - background-color: #f6f8fa; - box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: #8c959f; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 14px; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: calc(20 / 12); -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: calc(20/14); - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0:hover:not([disabled]) { - background-color: #f3f4f6; - border-color: rgba(31,35,40,0.15); -} - -.c0:active:not([disabled]) { - background-color: hsla(220,14%,93%,1); - border-color: rgba(31,35,40,0.15); -} - -.c0[aria-expanded=true] { - background-color: hsla(220,14%,93%,1); - border-color: rgba(31,35,40,0.15); -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - - -`; - -exports[`Button respects block prop 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - 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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.text; - background-color: btn.bg; - box-shadow: undefined,undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 14px; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: calc(20 / 12); -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: calc(20/14); - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0:hover:not([disabled]) { - background-color: btn.hoverBg; - border-color: btn.hoverBorder; -} - -.c0:active:not([disabled]) { - background-color: btn.activeBg; - border-color: btn.activeBorder; -} - -.c0[aria-expanded=true] { - background-color: btn.activeBg; - border-color: btn.activeBorder; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - - -`; - -exports[`Button respects the alignContent prop 1`] = ` -.c1 { - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.c0 { - border-radius: 2; - border: 1px solid; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - 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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.text; - background-color: btn.bg; - box-shadow: undefined,undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 14px; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: calc(20 / 12); -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: calc(20/14); - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0:hover:not([disabled]) { - background-color: btn.hoverBg; - border-color: btn.hoverBorder; -} - -.c0:active:not([disabled]) { - background-color: btn.activeBg; - border-color: btn.activeBorder; -} - -.c0[aria-expanded=true] { - background-color: btn.activeBg; - border-color: btn.activeBorder; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - - -`; - -exports[`Button respects the large size prop 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - 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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.text; - background-color: btn.bg; - box-shadow: undefined,undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 14px; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: calc(20 / 12); -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: calc(20/14); - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0:hover:not([disabled]) { - background-color: btn.hoverBg; - border-color: btn.hoverBorder; -} - -.c0:active:not([disabled]) { - background-color: btn.activeBg; - border-color: btn.activeBorder; -} - -.c0[aria-expanded=true] { - background-color: btn.activeBg; - border-color: btn.activeBorder; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - - -`; - -exports[`Button respects the small size prop 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - 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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.text; - background-color: btn.bg; - box-shadow: undefined,undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 14px; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: calc(20 / 12); -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: calc(20/14); - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0:hover:not([disabled]) { - background-color: btn.hoverBg; - border-color: btn.hoverBorder; -} - -.c0:active:not([disabled]) { - background-color: btn.activeBg; - border-color: btn.activeBorder; -} - -.c0[aria-expanded=true] { - background-color: btn.activeBg; - border-color: btn.activeBorder; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - - -`; - -exports[`Button styles danger button appropriately 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - 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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.danger.text; - background-color: btn.bg; - box-shadow: undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: btn.danger.disabledText; - background-color: btn.danger.disabledBg; - border-color: btn.danger.disabledBorder; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; - background-color: btn.danger.disabledCounterBg; -} - -.c0 [data-component=ButtonCounter] { - font-size: 14px; - color: btn.danger.text; - background-color: btn.danger.counterBg; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: calc(20 / 12); -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: calc(20/14); - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0:hover:not([disabled]) { - color: btn.danger.hoverText; - background-color: btn.danger.hoverBg; - border-color: btn.danger.hoverBorder; - box-shadow: undefined; -} - -.c0:hover:not([disabled]) [data-component=ButtonCounter] { - background-color: btn.danger.hoverCounterBg; - color: btn.danger.hoverText; -} - -.c0:active:not([disabled]) { - color: btn.danger.selectedText; - background-color: btn.danger.selectedBg; - box-shadow: undefined; - border-color: btn.danger.selectedBorder; -} - -.c0[aria-expanded=true] { - color: btn.danger.selectedText; - background-color: btn.danger.selectedBg; - box-shadow: undefined; - border-color: btn.danger.selectedBorder; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - - -`; - -exports[`Button styles invisible button appropriately 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: transparent; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - 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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: accent.fg; - background-color: transparent; - box-shadow: none; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 14px; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: calc(20 / 12); -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; - color: fg.muted; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: calc(20/14); - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; - color: fg.muted; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0:hover:not([disabled]) { - background-color: btn.hoverBg; -} - -.c0:active:not([disabled]) { - background-color: btn.selectedBg; -} - -.c0[aria-expanded=true] { - background-color: btn.selectedBg; -} - -.c0[data-component="IconButton"][data-no-visuals] { - color: fg.muted; -} - -.c0[data-no-visuals] { - color: accent.fg; -} - -.c0:has([data-component="ButtonCounter"]) { - color: accent.fg; -} - -.c0:disabled[data-no-visuals] { - color: primer.fg.disabled; -} - -.c0:disabled[data-no-visuals] [data-component=ButtonCounter] { - color: inherit; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - - -`; - -exports[`Button styles primary button appropriately 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: btn.primary.border; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - 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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.primary.text; - background-color: btn.primary.bg; - box-shadow: undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: btn.primary.disabledText; - background-color: btn.primary.disabledBg; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 14px; - background-color: btn.primary.counterBg; - color: btn.primary.text; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: calc(20 / 12); -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: calc(20/14); - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0:hover:not([disabled]) { - color: btn.primary.hoverText; - background-color: btn.primary.hoverBg; -} - -.c0:focus:not([disabled]) { - box-shadow: inset 0 0 0 3px; -} - -.c0:focus-visible:not([disabled]) { - box-shadow: inset 0 0 0 3px; -} - -.c0:active:not([disabled]) { - background-color: btn.primary.selectedBg; - box-shadow: undefined; -} - -.c0[aria-expanded=true] { - background-color: btn.primary.selectedBg; - box-shadow: undefined; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - - -`; diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap deleted file mode 100644 index 5fc9fbc3644..00000000000 --- a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ /dev/null @@ -1,247 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Dropdown renders consistently 1`] = ` -.c0 { - position: relative; - display: inline-block; -} - -.c0 > summary { - list-style: none; -} - -.c0 > summary::-webkit-details-marker { - display: none; -} - -
    - Hello! -
    -`; - -exports[`Dropdown.Button renders consistently 1`] = ` -.c0 { - position: relative; - display: inline-block; - padding: 6px 16px; - font-family: inherit; - font-weight: 600; - 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: #24292f; - background-color: #f6f8fa; - border: 1px solid rgba(31,35,40,0.15); - box-shadow: 0 1px 0 rgba(31,35,40,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; -} - -.c0:disabled svg { - opacity: 0.6; -} - -.c0:hover { - background-color: #f3f4f6; - border-color: rgba(31,35,40,0.15); -} - -.c0:focus { - outline: solid 2px #0969da; -} - -.c0:active { - background-color: hsla(220,14%,94%,1); -} - -.c0:disabled { - color: #8c959f; - background-color: #f6f8fa; - border-color: rgba(31,35,40,0.15); -} - -.c1 { - border: 4px solid transparent; - margin-left: 12px; - border-top-color: currentcolor; - border-bottom-width: 0; - content: ''; - display: inline-block; - height: 0; - vertical-align: middle; - width: 0; -} - - - Hello! -
    -
     -`; - -exports[`Dropdown.Caret renders consistently 1`] = ` -.c0 { - border: 4px solid transparent; - margin-left: 12px; - border-top-color: currentcolor; - border-bottom-width: 0; - content: ''; - display: inline-block; - height: 0; - vertical-align: middle; - width: 0; -} - -
    -`; - -exports[`Dropdown.Item renders consistently 1`] = ` -.c0 { - display: block; - padding: 4px 10px 4px 15px; - overflow: hidden; - color: #1F2328; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 a { - color: #1F2328; - -webkit-text-decoration: none; - text-decoration: none; - display: block; - overflow: hidden; - color: #1F2328; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0:focus, -.c0 a:focus { - color: #ffffff; - -webkit-text-decoration: none; - text-decoration: none; - background-color: #0969da; -} - -.c0:hover, -.c0:hover a { - color: #ffffff; - -webkit-text-decoration: none; - text-decoration: none; - background-color: #0969da; - outline: none; -} - -
  • - Hello! -
    • -`; - -exports[`Dropdown.Menu renders consistently 1`] = ` -.c0 { - background-clip: padding-box; - background-color: #ffffff; - border: 1px solid #d0d7de; - border-radius: 6px; - box-shadow: 0 8px 24px rgba(140,149,159,0.2); - left: 0; - list-style: none; - margin-top: 2px; - padding: 5px 0 5px 0 !important; - position: absolute; - top: 100%; - width: 160px; - z-index: 100; - right: 0; - left: auto; -} - -.c0::before { - position: absolute; - display: inline-block; - content: ''; -} - -.c0::after { - position: absolute; - display: inline-block; - content: ''; -} - -.c0::before { - border: 8px solid transparent; - border-bottom-color: #ffffff; -} - -.c0::after { - border: 7px solid transparent; - border-bottom-color: #ffffff; -} - -.c0 > ul { - list-style: none; -} - -.c0::before { - top: -16px; - right: 9px; - left: auto; -} - -.c0::after { - top: -14px; - right: 10px; - left: auto; -} - -
      -
    • - 1 -
      • -
    • - 2 -
      • -
    • - 3 -
      • -
    -`; diff --git a/src/__tests__/__snapshots__/Flex.test.tsx.snap b/src/__tests__/__snapshots__/Flex.test.tsx.snap deleted file mode 100644 index 1059519e3ac..00000000000 --- a/src/__tests__/__snapshots__/Flex.test.tsx.snap +++ /dev/null @@ -1,130 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Flex renders consistently 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -
    -`; - -exports[`Flex respects alignContent 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-content: start; - -ms-flex-line-pack: start; - align-content: start; -} - -
    -`; - -exports[`Flex respects alignItems 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: start; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: start; -} - -
    -`; - -exports[`Flex respects flexDirection 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -
    -`; - -exports[`Flex respects flexWrap 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} - -
    -`; - -exports[`Flex respects justifyContent 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: start; - -ms-flex-pack: start; - justify-content: start; -} - -
    -`; - -exports[`Flex respects responsive display 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -@media screen and (min-width:544px) { - .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - } -} - -
    -`; diff --git a/src/__tests__/__snapshots__/Grid.test.tsx.snap b/src/__tests__/__snapshots__/Grid.test.tsx.snap deleted file mode 100644 index dceeb157bc1..00000000000 --- a/src/__tests__/__snapshots__/Grid.test.tsx.snap +++ /dev/null @@ -1,178 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Grid renders consistently 1`] = ` -.c0 { - display: grid; -} - -
    -`; - -exports[`Grid respects gridArea 1`] = ` -.c0 { - display: grid; - grid-area: sidebar; -} - -
    -`; - -exports[`Grid respects gridAutoColumns 1`] = ` -.c0 { - display: grid; - grid-auto-columns: 1fr; -} - -
    -`; - -exports[`Grid respects gridAutoFlow 1`] = ` -.c0 { - display: grid; - grid-auto-flow: row; -} - -
    -`; - -exports[`Grid respects gridAutoRows 1`] = ` -.c0 { - display: grid; - grid-auto-rows: 1fr; -} - -
    -`; - -exports[`Grid respects gridColumn 1`] = ` -.c0 { - display: grid; - grid-column: 1 / 2; -} - -
    -`; - -exports[`Grid respects gridColumnGap 1`] = ` -.c0 { - display: grid; - grid-column-gap: 8px; -} - -
    -`; - -exports[`Grid respects gridGap 1`] = ` -.c0 { - display: grid; - grid-gap: 4px; -} - -
    -`; - -exports[`Grid respects gridRow 1`] = ` -.c0 { - display: grid; - grid-row: 1 / 2; -} - -
    -`; - -exports[`Grid respects gridRowGap 1`] = ` -.c0 { - display: grid; - grid-row-gap: 8px; -} - -
    -`; - -exports[`Grid respects gridTemplateAreas 1`] = ` -.c0 { - display: grid; - grid-template-areas: sidebar main; -} - -
    -`; - -exports[`Grid respects gridTemplateColumns 1`] = ` -.c0 { - display: grid; - grid-template-columns: 200px 1fr; -} - -
    -`; - -exports[`Grid respects gridTemplateRows 1`] = ` -.c0 { - display: grid; - grid-template-rows: 200px 1fr; -} - -
    -`; - -exports[`Grid respects responsive display 1`] = ` -.c0 { - display: grid; -} - -@media screen and (min-width:544px) { - .c0 { - display: inline-grid; - } -} - -
    -`; diff --git a/src/__tests__/__snapshots__/Position.test.tsx.snap b/src/__tests__/__snapshots__/Position.test.tsx.snap deleted file mode 100644 index 5bcd50ad24c..00000000000 --- a/src/__tests__/__snapshots__/Position.test.tsx.snap +++ /dev/null @@ -1,44 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`position components Absolute renders consistently 1`] = ` -.c0 { - position: absolute; -} - -
    -`; - -exports[`position components Fixed renders consistently 1`] = ` -.c0 { - position: fixed; -} - -
    -`; - -exports[`position components Relative renders consistently 1`] = ` -.c0 { - position: relative; -} - -
    -`; - -exports[`position components Sticky renders consistently 1`] = ` -.c0 { - top: 0; - z-index: 1; - position: -webkit-sticky; - position: sticky; -} - -
    -`; diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap deleted file mode 100644 index 3fd7842da9c..00000000000 --- a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +++ /dev/null @@ -1,471 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` -.c1 { - position: relative; - display: inline-block; - padding: 6px 16px; - font-family: inherit; - font-weight: 600; - 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: #24292f; - background-color: #f6f8fa; - border: 1px solid rgba(31,35,40,0.15); - box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); -} - -.c1:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c1:focus { - outline: none; -} - -.c1:disabled { - cursor: default; -} - -.c1:disabled svg { - opacity: 0.6; -} - -.c1:hover { - background-color: #f3f4f6; - border-color: rgba(31,35,40,0.15); -} - -.c1:focus { - outline: solid 2px #0969da; -} - -.c1:active { - background-color: hsla(220,14%,94%,1); -} - -.c1:disabled { - color: #8c959f; - background-color: #f6f8fa; - border-color: rgba(31,35,40,0.15); -} - -.c6 { - padding: 4px 16px; - margin: 0; - font-size: 12px; - font-weight: 600; - color: #656d76; - background-color: #f6f8fa; - border-bottom: 1px solid hsla(210,18%,87%,1); -} - -.c7 { - margin-top: -1px; - padding: 8px 16px; - font-size: 12px; - color: #656d76; - text-align: center; - border-top: 1px solid hsla(210,18%,87%,1); -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 16px; - overflow: hidden; - text-align: left; - cursor: pointer; - background-color: #ffffff; - border: 0; - border-bottom: 1px solid hsla(210,18%,87%,1); - color: #656d76; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 12px; - font-family: inherit; - width: 100%; -} - -.c5:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c5:focus { - outline: none; -} - -.c5[hidden] { - display: none !important; -} - -.c5 .SelectMenu-icon { - width: 16px; - margin-right: 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.c5 .SelectMenu-selected-icon { - visibility: hidden; - -webkit-transition: -webkit-transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear; - -webkit-transition: transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear; - transition: transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); -} - -.c5[aria-checked='true'] { - font-weight: 500; - color: #1F2328; -} - -.c5[aria-checked='true'] .SelectMenu-selected-icon { - visibility: visible; - -webkit-transition: -webkit-transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear; - -webkit-transition: transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear; - transition: transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.c4 { - position: relative; - padding: 0; - margin: 0; - -webkit-flex: auto; - -ms-flex: auto; - flex: auto; - overflow-x: hidden; - overflow-y: auto; - background-color: #ffffff; - -webkit-overflow-scrolling: touch; -} - -.c3 { - position: relative; - z-index: 99; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - max-height: 66%; - margin: auto 0; - overflow: hidden; - pointer-events: auto; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #ffffff; - border-radius: 6px; - box-shadow: 0 1px 0 rgba(31,35,40,0.04); - -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards; - animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards; - width: 300px; -} - -.c2 { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 99; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 16px; - pointer-events: none; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - content: ''; - background-color: rgba(31,35,40,0.5); -} - -.c0 > summary { - list-style: none; -} - -.c0 > summary::before { - display: none; -} - -.c0 > summary::-webkit-details-marker { - display: none; -} - -@media (min-width:544px) { - .c7 { - padding: 4px 8px; - } -} - -@media (min-width:544px) { - .c5 { - padding-top: 8px; - padding-bottom: 8px; - } -} - -@media (hover:hover) { - .c5:hover, - .c5:active, - .c5:focus { - background-color: rgba(234,238,242,0.5); - } -} - -@media (hover:none) { - .c5 { - -webkit-tap-highlight-color: rgba(175,184,193,0.5); - } - - .c5:focus, - .c5:active { - background-color: #f6f8fa; - } -} - -@media (hover:hover) { - .c4 .SelectMenuTab:focus { - background-color: #b6e3ff; - } - - .c4 .SelectMenuTab:not([aria-checked='true']):hover { - color: #1F2328; - background-color: #f6f8fa; - } - - .c4 .SelectMenuTab:not([aria-checked='true']):active { - color: #1F2328; - background-color: #f6f8fa; - } -} - -@media (min-width:544px) { - .c3 { - height: auto; - max-height: 350px; - margin: 4px 0 16px 0; - font-size: 12px; - border: 1px solid #d0d7de; - border-radius: 6px; - box-shadow: 0 1px 0 rgba(31,35,40,0.04); - } -} - -@media (min-width:544px) { - .c2::before { - display: none; - } -} - -@media (min-width:544px) { - .c2 { - position: absolute; - top: auto; - right: 0; - bottom: auto; - left: auto; - padding: 0; - } -} - -
    - - Projects - - -
    -`; diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 4b791e40326..2d571167482 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -99,33 +99,8 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` exports[`@primer/react/decprecated should not update exports without a semver change 1`] = ` [ - "Absolute", "ActionList", "ActionMenu", - "BorderBox", - "Button", - "ButtonClose", - "ButtonDanger", - "ButtonInvisible", - "ButtonOutline", - "ButtonPrimary", - "ButtonTableList", - "ChoiceFieldset", - "ChoiceInputField", - "Dropdown", - "DropdownButton", - "DropdownMenu", - "Fixed", - "Flex", - "FormGroup", - "Grid", - "InputField", - "Item", - "Label", - "Position", - "Relative", - "SelectMenu", - "Sticky", ] `; diff --git a/src/__tests__/deprecated/Button.test.tsx b/src/__tests__/deprecated/Button.test.tsx deleted file mode 100644 index db324b1ffc7..00000000000 --- a/src/__tests__/deprecated/Button.test.tsx +++ /dev/null @@ -1,128 +0,0 @@ -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} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -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() - }) - - it('preserves "onClick" prop', () => { - expect(render( -`; diff --git a/src/__tests__/deprecated/__snapshots__/FormGroup.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/FormGroup.test.tsx.snap deleted file mode 100644 index a2578a5fd45..00000000000 --- a/src/__tests__/deprecated/__snapshots__/FormGroup.test.tsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FormGroup renders consistently 1`] = ` -.c0 { - margin: 16px 0; - font-weight: 400; -} - -
    -`; - -exports[`FormGroup.Label renders consistently 1`] = ` -.c0 { - display: block; - margin: 0 0 8px; - font-size: 14px; - font-weight: 600; -} - -