From a9e47b282f04ac7e55b3c9f6dcb33f1807ec91f7 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Mon, 8 May 2023 18:32:41 +1000 Subject: [PATCH 01/16] Remove BorderBox --- docs/content/deprecated/BorderBox.md | 46 ------------------- docs/content/getting-started.md | 2 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 - src/__tests__/BorderBox.test.tsx | 42 ----------------- .../__snapshots__/BorderBox.test.tsx.snap | 14 ------ .../__snapshots__/exports.test.ts.snap | 2 +- src/deprecated/BorderBox.tsx | 18 -------- src/deprecated/index.ts | 2 - 8 files changed, 2 insertions(+), 126 deletions(-) delete mode 100644 docs/content/deprecated/BorderBox.md delete mode 100644 src/__tests__/BorderBox.test.tsx delete mode 100644 src/__tests__/__snapshots__/BorderBox.test.tsx.snap delete mode 100644 src/deprecated/BorderBox.tsx 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/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..b9461d3b019 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -178,8 +178,6 @@ url: /deprecated/ActionList - title: ActionMenu (legacy) url: /deprecated/ActionMenu - - title: BorderBox - url: /deprecated/BorderBox - title: Buttons (legacy) url: /deprecated/Buttons - title: ChoiceFieldset 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__/__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__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 4b791e40326..9c1fdb0c92e 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -97,7 +97,7 @@ 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`] = ` +exports[`@primer/react/deprecated should not update exports without a semver change 1`] = ` [ "Absolute", "ActionList", diff --git a/src/deprecated/BorderBox.tsx b/src/deprecated/BorderBox.tsx deleted file mode 100644 index ba41a444910..00000000000 --- a/src/deprecated/BorderBox.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components' -import Box, {BoxProps} from '../Box' - -export type BorderBoxProps = BoxProps - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -const BorderBox = styled(Box)`` - -BorderBox.defaultProps = { - borderWidth: '1px', - borderStyle: 'solid', - borderColor: 'border.default', - borderRadius: 2, -} - -export default BorderBox diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index 9ced82cf98d..dcc82ae5c30 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -8,8 +8,6 @@ // Deprecated in v35.0.0 on March 9, 2022 // TODO: We can remove these 6 months after release: September 10, 2022 -export {default as BorderBox} from './BorderBox' -export type {BorderBoxProps} from './BorderBox' export {default as ChoiceFieldset, Item} from './ChoiceFieldset' export {default as ChoiceInputField} from './ChoiceInputField' export {default as Flex} from './Flex' From d80d0ee28e55a2d6c077490a77d0b2fbc0056e58 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Mon, 8 May 2023 18:43:25 +1000 Subject: [PATCH 02/16] snapshot update and changeset for BorderBox --- .changeset/clever-wolves-move.md | 5 +++++ src/__tests__/__snapshots__/exports.test.ts.snap | 3 +-- 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 .changeset/clever-wolves-move.md diff --git a/.changeset/clever-wolves-move.md b/.changeset/clever-wolves-move.md new file mode 100644 index 00000000000..7b2e7c05d9f --- /dev/null +++ b/.changeset/clever-wolves-move.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove components from deprecated diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 9c1fdb0c92e..4922e6808b4 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -97,12 +97,11 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` ] `; -exports[`@primer/react/deprecated 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", From e0061e41523e1e5595539cf4705a49c37fba9f3c Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 9 May 2023 10:36:55 +1000 Subject: [PATCH 03/16] Remove ChoiceFieldset --- .changeset/clever-wolves-move.md | 1 + docs/content/deprecated/ChoiceFieldset.mdx | 405 --- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 - .../deprecated/ChoiceFieldset.test.tsx | 315 -- .../ChoiceFieldset.test.tsx.snap | 2535 ----------------- .../ChoiceFieldset/ChoiceFieldCaption.tsx | 8 - .../ChoiceFieldset/ChoiceFieldLabel.tsx | 8 - .../ChoiceFieldset/ChoiceFieldset.tsx | 139 - .../ChoiceFieldsetDescription.tsx | 15 - .../ChoiceFieldset/ChoiceFieldsetLegend.tsx | 42 - .../ChoiceFieldset/ChoiceFieldsetList.tsx | 79 - .../ChoiceFieldsetListContext.tsx | 11 - .../ChoiceFieldset/ChoiceFieldsetListItem.tsx | 75 - .../ChoiceFieldsetValidation.tsx | 11 - src/deprecated/ChoiceFieldset/index.ts | 3 - src/deprecated/index.ts | 1 - 16 files changed, 1 insertion(+), 3649 deletions(-) delete mode 100644 docs/content/deprecated/ChoiceFieldset.mdx delete mode 100644 src/__tests__/deprecated/ChoiceFieldset.test.tsx delete mode 100644 src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldsetListContext.tsx delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx delete mode 100644 src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx delete mode 100644 src/deprecated/ChoiceFieldset/index.ts diff --git a/.changeset/clever-wolves-move.md b/.changeset/clever-wolves-move.md index 7b2e7c05d9f..9c80a74976d 100644 --- a/.changeset/clever-wolves-move.md +++ b/.changeset/clever-wolves-move.md @@ -3,3 +3,4 @@ --- Remove components from deprecated +- `BorderBox`, `ChoiceFieldset` diff --git a/docs/content/deprecated/ChoiceFieldset.mdx b/docs/content/deprecated/ChoiceFieldset.mdx deleted file mode 100644 index fddae43210a..00000000000 --- a/docs/content/deprecated/ChoiceFieldset.mdx +++ /dev/null @@ -1,405 +0,0 @@ ---- -title: ChoiceFieldset -status: Deprecated -source: https://github.com/primer/react/blob/main/src/ChoiceFieldset/ChoiceFieldset.tsx -storybook: '/react/storybook/?path=/story/forms-choicefieldset--radio-group' ---- - -import {ChoiceFieldset, Box} from '@primer/components' -import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' - -A `ChoiceFieldset` is a controlled component that is used to render a related set of checkbox or radio inputs. - -## Deprecation - -Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead. - -## Examples - -### Basic - -```jsx live deprecated - - Color mode - - Dark - High-contrast dark - Light - High-contrast light - - -``` - -### Using an onSelect handler - -```javascript live noinline deprecated -const WithOnSelectHandler = () => { - const [selectedChoices, setSelectedChoices] = React.useState([]) - const choices = [ - { - value: 'figma', - displayName: 'Figma library', - description: 'The Figma file where we have Figma symbols and light documentation', - }, - { - value: 'css', - displayName: 'Primer CSS', - description: 'The OG. A CSS library with utility styles and component styles', - }, - { - value: 'react', - displayName: 'Primer React components', - description: 'The React component library that these docs belong to', - }, - { - value: 'viewcomponents', - displayName: 'Primer ViewComponents', - description: 'The Rails and Web Components implementation of our components', - }, - ] - - return ( - <> - { - setSelectedChoices(selectedValues) - }} - selected={selectedChoices} - > - Prefered Primer component interface - - Your choice won't be used for anything, this is just a React example - - - {choices.map(choice => ( - - {choice.displayName} - {choice.description} - - ))} - - - {selectedChoices.length ? ( - - {choices.find(choice => choice.value === selectedChoices[0]).displayName} is your favorite? Ours too. - - ) : null} - - ) -} - -render() -``` - -### Checkbox group - -```jsx live deprecated - - Prefered Primer component interface - - - Figma library - Primer CSS - Primer React components - Primer ViewComponents - - -``` - -### Disabled - -```jsx live deprecated - - Color mode - - Dark - High-contrast dark - Light - High-contrast light - - -``` - -### Required - -```jsx live deprecated - - Color mode - - Dark - High-contrast dark - Light - High-contrast light - - -``` - -### With pre-selected choices - -```jsx live deprecated - - Prefered Primer component interface - - - Figma library - Primer CSS - Primer React components - Primer ViewComponents - - -``` - -### With validation - -```javascript live noinline deprecated -const choices = [ - { - value: 'figma', - displayName: 'Figma library', - description: 'The Figma file where we have Figma symbols and light documentation', - }, - { - value: 'css', - displayName: 'Primer CSS', - description: 'The OG. A CSS library with utility styles and component styles', - }, - { - value: 'react', - displayName: 'Primer React components', - description: 'The React component library that these docs belong to', - }, - { - value: 'viewcomponents', - displayName: 'Primer ViewComponents', - description: 'The Rails and Web Components implementation of our components', - }, -] - -const ChoiceFieldsetWithValidation = () => { - const [selectedChoices, setSelectedChoices] = React.useState([]) - const [validationResult, setValidationResult] = React.useState() - - React.useEffect(() => { - if (selectedChoices.length && selectedChoices.length > 2) { - setValidationResult('tooManySelections') - } else { - setValidationResult(undefined) - } - }, [selectedChoices]) - - return ( - { - setSelectedChoices(selectedValues) - }} - validationMap={{tooManySelections: 'error'}} - validationResult={validationResult} - selected={selectedChoices} - > - Prefered Primer component interface - Pick your top two - - - {choices.map(choice => ( - - {choice.displayName} - {choice.description} - - ))} - - - - Only two selections are allowed - - - ) -} - -render() -``` - -### A visually hidden legend - -```jsx live deprecated - - Color mode - - Dark - High-contrast dark - Light - High-contrast light - - -``` - -### With a ChoiceFieldset.Description - -```jsx live deprecated - - Notification preferences - - Your selection will affect notifications sent to your email and mobile device - - - - - - - - All notifications - Every possible notification - - - - - - Relevant notifications - Only the ones you'll care about - - - - - - No notifications - Notifications won't be sent - - - -``` - -### With one disabled item - -```jsx live deprecated - - Color mode - - - Dark - - High-contrast dark - Light - High-contrast light - - -``` - -### Items with a caption and a leading visual - -```jsx live deprecated - - Notification preferences - - - - - - - All notifications - Every possible notification - - - - - - Relevant notifications - Only the ones you'll care about - - - - - - No notifications - Notifications won't be sent - - - -``` - -## Props - -### ChoiceFieldset - -| Name | Type | Default | Description | -| :--------------- | :-------------------------------------------------------------------------------------------------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| children\* | `ChoiceFieldset.Legend`, `ChoiceFieldset.Description`, `ChoiceFieldset.List`, `ChoiceFieldset.Validation` | – | The list of choices and contextual information | -| disabled | `boolean` | – | Whether the fieldset is NOT ready for user input | -| id | `string` | – | The unique identifier for this fieldset. Used to associate the validation text with the fieldset
If an ID is not passed, one will be automatically generated | -| name | `string` | – | The unique identifier used to associate radio inputs with eachother
If a name is not passed and the fieldset renders radio inputs, a name will be automatically generated | -| onSelect | `(selectedValues?: string[]) => void` | – | The callback that is called when a user toggles a choice on or off | -| required | `boolean` | – | Whether this field must have a value for the user to complete their task | -| selected | `string[]` | – | The selected values | -| validationMap | `Record` | – | A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop, the associated validation message will be rendered in the correct style | -| validationResult | `keyof validationMap` | – | The key of the validation message to show | - -### ChoiceFieldset.Legend - -A title for the set of choices. A `ChoiceFieldset.Legend` must be passed, but it may be visually hidden. - -| Name | Type | Default | Description | -| :------------- | :-------- | :-----: | :------------------------------------------- | -| visuallyHidden | `boolean` | – | Whether to visually hide the fieldset legend | - -### ChoiceFieldset.List - -The list choices are rendered in. - -| Name | Type | Default | Description | -| :--------------- | :--------------------- | :-----: | :------------------------------------------------------ | -| children\* | `ChoiceFieldset.Item` | – | The choices that render as a checkbox or radio field | -| selectionVariant | `'single'\|'multiple'` | – | Whether multiple items or a single item can be selected | - -### ChoiceFieldset.Item - -Renders a choice to the list as a checkbox or radio field. - -| Name | Type | Default | Description | -| :--------- | :-------------------------------------------------------------------------------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| children\* | `ChoiceFieldset.Caption`, `ChoiceFieldset.Label`, `ChoiceFieldset.LeadingVisual`, `React.ReactNode` | – | The parts that make up the checkbox or radio field used to select the choice.
If you **only** need a label, it's fine to pass in a string or JSX instead of wrapping it in the `Item.Label` component | -| value\* | `string` | – | The value that is being selected | -| disabled | `boolean` | – | Whether the field is ready for user input | -| id | `string` | – | The unique identifier for this field. Used to associate the label, validation text, and caption text.
If an ID is not provided, one will be automatically generated. | - -### ChoiceFieldset.Description - -A `ChoiceFieldset.Description` may be used to render hint text if this list needs additional context to guide a user to make their selection - -| Name | Type | Default | Description | -| :--------- | :---------------- | :-----: | :---------------------- | -| children\* | `React.ReactNode` | – | The description content | - -### ChoiceFieldset.Validation - -If the user's selection has been flagged during validation, `ChoiceFieldset.Validation` may be used to render contextual validation information to help the user complete their task - -| Name | Type | Default | Description | -| :-------------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------- | -| children\* | `React.ReactNode` | – | The validation message | -| validationKey\* | `string` | – | When this matches the `validationResult` prop on the parent `ChoiceFieldset` component, this validation component will be rendered | - -## Status - - - -## Related components - -- [ChoiceInputField](/ChoiceInputField) -- [Checkbox](/Checkbox) -- [Radio](/Radio) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index b9461d3b019..57ca4df1a8a 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -180,8 +180,6 @@ url: /deprecated/ActionMenu - title: Buttons (legacy) url: /deprecated/Buttons - - title: ChoiceFieldset - url: /deprecated/ChoiceFieldset - title: ChoiceInputField url: /deprecated/ChoiceInputField - title: Dropdown diff --git a/src/__tests__/deprecated/ChoiceFieldset.test.tsx b/src/__tests__/deprecated/ChoiceFieldset.test.tsx deleted file mode 100644 index 0c115562782..00000000000 --- a/src/__tests__/deprecated/ChoiceFieldset.test.tsx +++ /dev/null @@ -1,315 +0,0 @@ -import React from 'react' -import {render} from '../../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {SSRProvider} from '../../' -import {MarkGithubIcon} from '@primer/octicons-react' -import userEvent from '@testing-library/user-event' -import ChoiceFieldset, {Item, ChoiceFieldsetProps} from '../../deprecated/ChoiceFieldset' -import {ChoiceFieldsetListProps} from '../../deprecated/ChoiceFieldset/ChoiceFieldsetList' - -const SelectableChoicelistFieldset: React.FC< - React.PropsWithChildren -> = ({onSelect, selectionVariant, selected = []}) => { - const [selectionVals, setSelectionVals] = React.useState(selected) - - React.useEffect(() => { - onSelect && onSelect(selectionVals) - }, [onSelect, selectionVals]) - - return ( - - { - setSelectionVals(selectedVals) - }} - selected={selectionVals} - > - Legend - - Label one - Label two - - - - ) -} - -describe('ChoiceFieldset', () => { - it('renders default', () => { - expect( - render( - - - Legend - - Label one - Label two - - - , - ), - ).toMatchSnapshot() - }) - it('renders a group of checkbox inputs when selectionVariant=single (default)', () => { - const {getByLabelText} = HTMLRender( - - - Legend - - Label one - Label two - - - , - ) - const firstInput = getByLabelText('Label one') - const secondInput = getByLabelText('Label one') - - expect(firstInput.getAttribute('type')).toBe('radio') - expect(secondInput.getAttribute('type')).toBe('radio') - }) - it('renders a group of checkbox inputs when selectionVariant=multiple', () => { - const {getByLabelText} = HTMLRender( - - - Legend - - Label one - Label two - - - , - ) - const firstInput = getByLabelText('Label one') - const secondInput = getByLabelText('Label one') - - expect(firstInput.getAttribute('type')).toBe('checkbox') - expect(secondInput.getAttribute('type')).toBe('checkbox') - }) - it('renders a list of items with leading visuals and captions', () => { - expect( - render( - - - Legend - - - - - - Label one - Caption one - - - - - - Label two - Caption two - - - - , - ), - ).toMatchSnapshot() - }) - it('renders a list with selected items', () => { - expect( - render( - - - Legend - - Label one - Label two - Label three - - - , - ), - ).toMatchSnapshot() - }) - it('renders a disabled list', () => { - expect( - render( - - - Legend - - Label one - Label two - - - , - ), - ).toMatchSnapshot() - }) - it('renders a required fieldset', () => { - expect( - render( - - - Legend - - Label one - Label two - - - , - ), - ).toMatchSnapshot() - }) - it('renders a fieldset with a description', () => { - expect( - render( - - - Legend - Description - - Label one - Label two - - - , - ), - ).toMatchSnapshot() - }) - it('renders with a custom name and id passed', () => { - expect( - render( - - - Legend - - Label one - Label two - - - , - ), - ).toMatchSnapshot() - }) - it('renders with a hidden legend', () => { - expect( - render( - - - Legend - - Label one - Label two - - - , - ), - ).toMatchSnapshot() - }) - it('renders with a success validation message', () => { - const {container, queryByText} = HTMLRender( - - - Legend - - Label one - Label two - - - You made the right selection - - - You made the wrong selection - - - , - ) - const successValidationMessage = queryByText('You made the right selection') - const errorValidationMessage = queryByText('You made the wrong selection') - - expect(container).toMatchSnapshot() - expect(successValidationMessage).not.toBeNull() - expect(errorValidationMessage).toBeNull() - }) - it('renders with an error validation message', () => { - const {container, queryByText} = HTMLRender( - - - Legend - - Label one - Label two - - - You made the right selection - - - You made the wrong selection - - - , - ) - const successValidationMessage = queryByText('You made the right selection') - const errorValidationMessage = queryByText('You made the wrong selection') - - expect(container).toMatchSnapshot() - expect(errorValidationMessage).not.toBeNull() - expect(successValidationMessage).toBeNull() - }) - it('calls onSelect with the values of the selected item (single selection)', async () => { - const user = userEvent.setup() - const onSelectHandler = jest.fn() - const {getByLabelText} = HTMLRender( - , - ) - const labelOneInputNode = getByLabelText('Label one') - - await user.click(labelOneInputNode) - expect(onSelectHandler).toHaveBeenCalledWith(['labelOne']) - }) - it('calls onSelect with the values of the selected items (multiple selections)', async () => { - const user = userEvent.setup() - const onSelectHandler = jest.fn() - - const {getByLabelText} = HTMLRender( - , - ) - const labelTwoInputNode = getByLabelText('Label two') - - await user.click(labelTwoInputNode) - expect(onSelectHandler).toHaveBeenCalledWith(['labelOne', 'labelTwo']) - }) - it('calls onSelect with an empty array if all values have be de-selected', async () => { - const user = userEvent.setup() - const onSelectHandler = jest.fn() - - const {getByLabelText} = HTMLRender( - , - ) - const labelTwoInputNode = getByLabelText('Label two') - - await user.click(labelTwoInputNode) - expect(onSelectHandler).toHaveBeenCalledWith([]) - }) - it('generates a name attribute for radio groups if one is not provided', () => { - const {getByLabelText} = HTMLRender( - - - Legend - - Label one - Label two - - - , - ) - - const labelOneInputNode = getByLabelText('Label one') - const labelTwoInputNode = getByLabelText('Label two') - - expect(labelOneInputNode.getAttribute('name')).toBeDefined() - expect(labelOneInputNode.getAttribute('name')).toEqual(labelTwoInputNode.getAttribute('name')) - }) -}) diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap deleted file mode 100644 index ec6ae363d57..00000000000 --- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap +++ /dev/null @@ -1,2535 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChoiceFieldset renders a disabled list 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c5 > input { - margin-left: 0; - margin-right: 0; -} - -.c7 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - color: #656d76; - font-size: 16px; - padding: 0; -} - -.c8 { - font-weight: 600; - font-size: 14px; - display: block; - color: #656d76; - cursor: not-allowed; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c6 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-color: #6e7781; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c6:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); - border-color: #d0d7de; -} - -.c6:checked { - border-color: #0969da; - border-width: var(--base-size-4,4px); -} - -.c6:checked:disabled { - cursor: not-allowed; - border-color: #656d76; -} - -.c6:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c6:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c6:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c3 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c6 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
- - Legend - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-`; - -exports[`ChoiceFieldset renders a fieldset with a description 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c6 > input { - margin-left: 0; - margin-right: 0; -} - -.c8 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - font-size: 16px; - padding: 0; -} - -.c9 { - font-weight: 600; - font-size: 14px; - display: block; - color: #1F2328; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c3 { - font-size: 14px; - color: #1F2328; -} - -.c7 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-color: #6e7781; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c7:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); - border-color: #d0d7de; -} - -.c7:checked { - border-color: #0969da; - border-width: var(--base-size-4,4px); -} - -.c7:checked:disabled { - cursor: not-allowed; - border-color: #656d76; -} - -.c7:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c7:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c7:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c4 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c7 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
- - Legend - - - Description - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-`; - -exports[`ChoiceFieldset renders a list of items with leading visuals and captions 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c5 > input { - margin-left: 0; - margin-right: 0; -} - -.c8 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c4 { - 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; -} - -.c7 { - margin-left: 8px; - color: #1F2328; -} - -.c7 > * { - min-width: 24px; - min-height: 24px; - fill: currentColor; -} - -.c2 { - font-size: 16px; - padding: 0; -} - -.c9 { - font-weight: 600; - font-size: 14px; - display: block; - color: #1F2328; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c10 { - font-size: 12px; - color: #656d76; - display: block; -} - -.c6 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-color: #6e7781; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c6:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); - border-color: #d0d7de; -} - -.c6:checked { - border-color: #0969da; - border-width: var(--base-size-4,4px); -} - -.c6:checked:disabled { - cursor: not-allowed; - border-color: #656d76; -} - -.c6:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c6:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c6:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c3 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c6 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
- - Legend - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    - - - Caption one - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    - - - Caption two - -
    -
    -
    • -
-
-
-`; - -exports[`ChoiceFieldset renders a list with selected items 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c5 > input { - margin-left: 0; - margin-right: 0; -} - -.c7 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - font-size: 16px; - padding: 0; -} - -.c8 { - font-weight: 600; - font-size: 14px; - display: block; - color: #1F2328; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c6 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-color: #6e7781; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: 3px; - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c6:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); - border-color: #d0d7de; -} - -.c6::before { - width: var(--base-size-16,16px); - height: var(--base-size-16,16px); - visibility: hidden; - content: ''; - background-color: #ffffff; - -webkit-transition: visibility 0s linear 230ms; - transition: visibility 0s linear 230ms; - -webkit-clip-path: inset(var(--base-size-16,16px) 0 0 0); - clip-path: inset(var(--base-size-16,16px) 0 0 0); - -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); - mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); - -webkit-mask-size: 75%; - mask-size: 75%; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: center; - mask-position: center; -} - -.c6:checked, -.c6:indeterminate { - background: #0969da; - border-color: #0969da; -} - -.c6:checked { - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; - transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms; -} - -.c6:checked::before { - visibility: visible; - -webkit-transition: visibility 0s linear 0s; - transition: visibility 0s linear 0s; -} - -.c6:checked:disabled { - cursor: not-allowed; - background-color: #656d76; - border-color: #656d76; - opacity: 1; -} - -.c6:checked:disabled::before { - background-color: #ffffff; -} - -.c6:indeterminate { - background: #0969da; -} - -.c6:indeterminate::before { - -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); - mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); - visibility: visible; -} - -.c6:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c6:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c6:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c3 > li + li { - margin-top: 8px; -} - -@media screen and (prefers-reduced-motion:no-preference) { - .c6::before { - -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; - animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards; - } -} - -@media screen and (prefers-reduced-motion:no-preference) { - .c6:checked::before, - .c6:indeterminate::before { - -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; - animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms; - } -} - -@media (forced-colors:active) { - .c6:checked { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
- - Legend - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-`; - -exports[`ChoiceFieldset renders a required fieldset 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c6 > input { - margin-left: 0; - margin-right: 0; -} - -.c8 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c4 { - margin-right: 4px; -} - -.c2 { - font-size: 16px; - padding: 0; -} - -.c9 { - font-weight: 600; - font-size: 14px; - display: block; - color: #1F2328; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c7 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-color: #6e7781; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c7:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); - border-color: #d0d7de; -} - -.c7:checked { - border-color: #0969da; - border-width: var(--base-size-4,4px); -} - -.c7:checked:disabled { - cursor: not-allowed; - border-color: #656d76; -} - -.c7:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c7:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c7:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c5 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c7 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
- - -
- Legend -
- - * - - - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-`; - -exports[`ChoiceFieldset renders default 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c5 > input { - margin-left: 0; - margin-right: 0; -} - -.c7 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - font-size: 16px; - padding: 0; -} - -.c8 { - font-weight: 600; - font-size: 14px; - display: block; - color: #1F2328; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c6 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-color: #6e7781; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c6:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); - border-color: #d0d7de; -} - -.c6:checked { - border-color: #0969da; - border-width: var(--base-size-4,4px); -} - -.c6:checked:disabled { - cursor: not-allowed; - border-color: #656d76; -} - -.c6:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c6:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c6:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c3 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c6 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
- - Legend - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-`; - -exports[`ChoiceFieldset renders with a custom name and id passed 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c5 > input { - margin-left: 0; - margin-right: 0; -} - -.c7 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - font-size: 16px; - padding: 0; -} - -.c8 { - font-weight: 600; - font-size: 14px; - display: block; - color: #1F2328; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c6 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-color: #6e7781; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c6:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); - border-color: #d0d7de; -} - -.c6:checked { - border-color: #0969da; - border-width: var(--base-size-4,4px); -} - -.c6:checked:disabled { - cursor: not-allowed; - border-color: #656d76; -} - -.c6:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c6:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c6:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c3 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c6 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
- - Legend - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-`; - -exports[`ChoiceFieldset renders with a hidden legend 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c4 > input { - margin-left: 0; - margin-right: 0; -} - -.c6 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c7 { - font-weight: 600; - font-size: 14px; - display: block; - color: #1F2328; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c1 { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - -webkit-clip: rect(0,0,0,0); - clip: rect(0,0,0,0); - white-space: nowrap; - border-width: 0; -} - -.c5 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-color: #6e7781; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c5:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); - border-color: #d0d7de; -} - -.c5:checked { - border-color: #0969da; - border-width: var(--base-size-4,4px); -} - -.c5:checked:disabled { - cursor: not-allowed; - border-color: #656d76; -} - -.c5:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c5:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c5:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid #0969da; - outline-offset: 2px; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c2 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c5 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
- - Legend - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-`; - -exports[`ChoiceFieldset renders with a success validation message 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c5 > input { - margin-left: 0; - margin-right: 0; -} - -.c7 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c9 { - margin-top: 16px; -} - -.c10 { - height: auto; - overflow: hidden; -} - -.c13 { - margin-right: 4px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c2 { - font-size: 16px; - padding: 0; -} - -.c8 { - font-weight: bold; - font-size: 14px; - display: block; - color: fg.default; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c11 { - -webkit-animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1); - animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1); -} - -.c12 { - font-size: 12px; - font-weight: bold; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: success.fg; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c12 a { - color: currentColor; - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c6 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c6:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); -} - -.c6:checked { - border-width: var(--base-size-4,4px); -} - -.c6:checked:disabled { - cursor: not-allowed; -} - -.c6:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: 2px; -} - -.c6:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c6:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: 2px; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c3 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c6 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
-
- - Legend - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-
-
- - - - You made the right selection - - -
-
-
-
-
-`; - -exports[`ChoiceFieldset renders with an error validation message 1`] = ` -.c0 { - margin: 0; - padding: 0; - border: none; -} - -.c1 { - margin-bottom: 16px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c5 > input { - margin-left: 0; - margin-right: 0; -} - -.c7 { - margin-left: 8px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c9 { - margin-top: 16px; -} - -.c10 { - height: auto; - overflow: hidden; -} - -.c13 { - margin-right: 4px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c2 { - font-size: 16px; - padding: 0; -} - -.c8 { - font-weight: bold; - font-size: 14px; - display: block; - color: fg.default; - cursor: pointer; - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.c11 { - -webkit-animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1); - animation: 170ms eGcHP cubic-bezier(0.44,0.74,0.36,1); -} - -.c12 { - font-size: 12px; - font-weight: bold; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: danger.fg; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c12 a { - color: currentColor; - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c6 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-style: solid; - border-width: 1px; - cursor: pointer; - display: grid; - height: var(--base-size-16,16px); - margin: 0; - margin-top: 0.125rem; - place-content: center; - position: relative; - width: var(--base-size-16,16px); - border-radius: var(--borderRadius-full,100vh); - -webkit-transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); - transition: background-color,border-color 80ms cubic-bezier(0.33,1,0.68,1); -} - -.c6:disabled { - background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); -} - -.c6:checked { - border-width: var(--base-size-4,4px); -} - -.c6:checked:disabled { - cursor: not-allowed; -} - -.c6:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: 2px; -} - -.c6:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c6:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: 2px; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; -} - -.c3 > li + li { - margin-top: 8px; -} - -@media (forced-colors:active) { - .c6 { - background-color: canvastext; - border-color: canvastext; - } -} - -
-
-
-
- - Legend - -
-
    -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    • -
-
-
-
-
- - - - You made the wrong selection - - -
-
-
-
-
-`; diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx deleted file mode 100644 index 47146864496..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import ChoiceInputField from '../ChoiceInputField' - -const ChoiceFieldCaption: React.FC> = ({children}) => ( - {children} -) - -export default ChoiceFieldCaption diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx deleted file mode 100644 index cbd039a47dc..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import ChoiceInputField from '../ChoiceInputField' - -const ChoiceFieldLabel: React.FC> = ({children}) => ( - {children} -) - -export default ChoiceFieldLabel diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx deleted file mode 100644 index 469ca189640..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react' -import {Box, useSSRSafeId} from '../..' -import createSlots from '../utils/create-slots' -import {FormValidationStatus} from '../../utils/types/FormValidationStatus' -import ValidationAnimationContainer from '../../_ValidationAnimationContainer' -import InputValidation from '../../_InputValidation' -import ChoiceFieldsetListItem from './ChoiceFieldsetListItem' -import ChoiceFieldsetDescription from './ChoiceFieldsetDescription' -import ChoiceFieldsetLegend from './ChoiceFieldsetLegend' -import ChoiceFieldsetList from './ChoiceFieldsetList' -import ChoiceFieldsetValidation from './ChoiceFieldsetValidation' - -export interface ChoiceFieldsetProps> { - children?: React.ReactNode - /** - * Whether the fieldset is NOT ready for user input - */ - disabled?: boolean - /** - * The unique identifier for this fieldset. Used to associate the validation text with the fieldset - * If an ID is not passed, one will be automatically generated - */ - id?: string - /** - * The unique identifier used to associate radio inputs with eachother - * If a name is not passed and the fieldset renders radio inputs, a name will be automatically generated - */ - name?: string - /** - * The callback that is called when a user toggles a choice on or off - */ - onSelect?: (selectedValues: string[]) => void - /** - * Whether this field must have a value for the user to complete their task - */ - required?: boolean - /** - * The selected values - */ - selected?: string[] - /** - * A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop, - * the associated validation message will be rendered in the correct style - */ - validationMap?: T - /** - * The key of the validation message to show - */ - validationResult?: keyof T -} - -export interface ChoiceFieldsetContext extends ChoiceFieldsetProps { - validationMessageId: string -} - -const {Slots, Slot} = createSlots(['Description', 'ChoiceList', 'Legend', 'Validation']) -export {Slot} - -const ChoiceFieldset = >({ - children, - disabled, - id, - name, - onSelect, - required, - selected, - validationMap, - validationResult, -}: ChoiceFieldsetProps) => { - const fieldsetId = useSSRSafeId(id) - const validationChildren: React.ReactElement[] | undefined | null = React.Children.map(children, child => - React.isValidElement(child) && child.type === ChoiceFieldsetValidation ? child : null, - )?.filter(Boolean) - const validationChildToRender = validationChildren?.find(child => child.props.validationKey === validationResult) - const validationMessageId = validationChildToRender ? `${fieldsetId}-validationMsg` : undefined - - return ( - - {slots => { - const isLegendVisible = React.isValidElement(slots.Legend) && slots.Legend.props.isVisible - - return ( -
- - {React.Children.toArray(children).filter( - child => React.isValidElement(child) && child.type !== ChoiceFieldsetValidation, - )} - - {slots.Legend} - {slots.Description} - - {slots.ChoiceList} - - {validationChildToRender && ( - - {validationMap && validationResult && validationMessageId && ( - - - {validationChildToRender} - - - )} - - )} -
- ) - }} - - ) -} - -export type {ChoiceFieldsetListProps} from './ChoiceFieldsetList' -export type {ChoiceFieldsetLegendProps} from './ChoiceFieldsetLegend' -export type {ChoiceFieldProps} from './ChoiceFieldsetListItem' -/** - * @deprecated Use `CheckboxGroup` or `RadioGroup` instead. See https://primer.style/react/CheckboxGroup and https://primer.style/react/RadioGroup for more info - */ -export default Object.assign(ChoiceFieldset, { - Description: ChoiceFieldsetDescription, - Item: ChoiceFieldsetListItem, - Legend: ChoiceFieldsetLegend, - List: ChoiceFieldsetList, - Validation: ChoiceFieldsetValidation, -}) diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx deleted file mode 100644 index 960b22d8464..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import {Text} from '../..' -import {ChoiceFieldsetContext, Slot} from './ChoiceFieldset' - -const ChoiceFieldsetDescription: React.FC> = ({children}) => ( - - {({disabled}: ChoiceFieldsetContext) => ( - - {children} - - )} - -) - -export default ChoiceFieldsetDescription diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx deleted file mode 100644 index ace09f02cb9..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import {Box} from '../..' -import VisuallyHidden from '../../_VisuallyHidden' -import {ChoiceFieldsetContext, Slot} from './ChoiceFieldset' - -export interface ChoiceFieldsetLegendProps { - /** - * Whether to visually hide the fieldset legend - */ - visuallyHidden?: boolean -} - -const ChoiceFieldsetLegend: React.FC> = ({ - children, - visuallyHidden, -}) => ( - - {({required, disabled}: ChoiceFieldsetContext) => ( - - {required ? ( - - {children} - * - - ) : ( - children - )} - - )} - -) - -export default ChoiceFieldsetLegend diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx deleted file mode 100644 index e1ef52dc8bc..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import {useSSRSafeId} from '../..' -import {get} from '../../constants' -import {Slot, ChoiceFieldsetContext} from './ChoiceFieldset' -import ChoiceFieldsetListContext from './ChoiceFieldsetListContext' - -export interface ChoiceFieldsetListProps { - /** - * Whether multiple items or a single item can be selected - */ - selectionVariant?: 'single' | 'multiple' -} - -const List = styled.ul` - display: flex; - flex-direction: column; - list-style: none; - margin: 0; - padding: 0; - - > li + li { - margin-top: ${get('space.2')}; - } -` - -const getSelectedCheckboxes = ( - value: string, - checked: boolean, - selectedValues: string[], - selectionVariant?: ChoiceFieldsetListProps['selectionVariant'], -): string[] => { - if (checked) { - return selectionVariant === 'multiple' ? [...selectedValues, value] : [value] - } - - return selectedValues.filter(selectedValue => selectedValue !== value) -} - -const ChoiceFieldsetList: React.FC> = ({ - selectionVariant = 'single', - children, -}) => { - const ssrSafeUniqueName = useSSRSafeId() - - return ( - - {({name, onSelect, disabled, selected = []}: ChoiceFieldsetContext) => { - return ( - { - const updatedSelections = getSelectedCheckboxes( - e.currentTarget.value, - e.currentTarget.checked, - selected, - selectionVariant, - ) - onSelect && onSelect(updatedSelections) - }, - selectionVariant, - }} - > - - {React.Children.map(children, (child, i) => ( -
  • {child}
    • - ))} -     -     - ) - }} -     - ) -} - -export default ChoiceFieldsetList diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetListContext.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListContext.tsx deleted file mode 100644 index 2413c2580ff..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetListContext.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {ChangeEventHandler, createContext} from 'react' - -const ChoiceFieldsetListContext = createContext<{ - disabled?: boolean - name: string - onChange: ChangeEventHandler - selected?: string[] - selectionVariant?: 'single' | 'multiple' -} | null>(null) - -export default ChoiceFieldsetListContext diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx deleted file mode 100644 index 6be6d7aa80e..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, {useContext} from 'react' -import {Checkbox, Radio, useSSRSafeId} from '../..' -import ChoiceInputField from '../ChoiceInputField' -import {ComponentProps} from '../../utils/types' -import ChoiceInputLeadingVisual from '../_ChoiceInputLeadingVisual' -import ChoiceFieldCaption from './ChoiceFieldCaption' -import ChoiceFieldLabel from './ChoiceFieldLabel' -import ChoiceFieldsetListContext from './ChoiceFieldsetListContext' - -export interface ChoiceFieldProps { - /** - * Whether the field is ready for user input - */ - disabled?: boolean - /** - * The unique identifier for this field. Used to associate the label, validation text, and caption text. - * If an ID is not provided, one will be automatically generated. - */ - id?: string - /** - * The value that is being selected - */ - value: string -} - -const ChoiceFieldsetListItem: React.FC> = ({ - children, - id, - disabled: disabledProp, - value, -}) => { - const choiceFieldsetListContext = useContext(ChoiceFieldsetListContext) - if (choiceFieldsetListContext === null) { - throw new Error('ChoiceFieldsetListContext returned null') - } - const {name, onChange, selected, disabled, selectionVariant} = choiceFieldsetListContext - const fieldId = useSSRSafeId(id) - const labelChild = React.Children.toArray(children).find( - child => React.isValidElement(child) && child.type === ChoiceFieldLabel, - ) - const otherValidChildren = React.Children.toArray(children).filter( - child => - React.isValidElement(child) && (child.type === ChoiceFieldCaption || child.type === ChoiceInputLeadingVisual), - ) - const ChoiceInput = selectionVariant === 'multiple' ? Checkbox : Radio - - return ( - - - {/* this ternary makes it possible for users to safely pass the label content directly as a child */} - {labelChild ? ( - // if was passed, we can just render the children as-is - children - ) : ( - // if was NOT passed, treat all the children except and as the label - <> - {children} - {otherValidChildren} - - )} - - ) -} - -export type ChoiceFieldComponentProps = ComponentProps -export default Object.assign(ChoiceFieldsetListItem, { - Caption: ChoiceFieldCaption, - Label: ChoiceFieldLabel, - LeadingVisual: ChoiceInputLeadingVisual, -}) diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx deleted file mode 100644 index 6307644d28a..00000000000 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' - -export interface ChoiceFieldsetValidationProps { - validationKey: string -} - -const ChoiceFieldsetValidation: React.FC> = ({children}) => ( - <>{children} -) - -export default ChoiceFieldsetValidation diff --git a/src/deprecated/ChoiceFieldset/index.ts b/src/deprecated/ChoiceFieldset/index.ts deleted file mode 100644 index a6f8344e959..00000000000 --- a/src/deprecated/ChoiceFieldset/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export {default} from './ChoiceFieldset' -export {default as Item} from './ChoiceFieldsetListItem' -export type {ChoiceFieldsetProps} from './ChoiceFieldset' diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index dcc82ae5c30..dd17d5247b8 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -8,7 +8,6 @@ // Deprecated in v35.0.0 on March 9, 2022 // TODO: We can remove these 6 months after release: September 10, 2022 -export {default as ChoiceFieldset, Item} from './ChoiceFieldset' export {default as ChoiceInputField} from './ChoiceInputField' export {default as Flex} from './Flex' export type {FlexProps} from './Flex' From c1ebb001692d70dcc7270fcbef4bfd82d34c9b1b Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 9 May 2023 10:42:54 +1000 Subject: [PATCH 04/16] Remove Flex --- docs/content/deprecated/ChoiceInputField.mdx | 162 ------------- docs/content/deprecated/Flex.md | 58 ----- docs/content/deprecated/InputField.mdx | 1 - .../src/@primer/gatsby-theme-doctocat/nav.yml | 4 - src/__tests__/Flex.test.tsx | 57 ----- .../__snapshots__/Flex.test.tsx.snap | 130 ---------- .../__snapshots__/exports.test.ts.snap | 3 - .../deprecated/ChoiceInputField.test.tsx | 224 ------------------ src/deprecated/ChoiceInputField.tsx | 144 ----------- src/deprecated/Flex.tsx | 15 -- src/deprecated/index.ts | 3 - 11 files changed, 801 deletions(-) delete mode 100644 docs/content/deprecated/ChoiceInputField.mdx delete mode 100644 docs/content/deprecated/Flex.md delete mode 100644 src/__tests__/Flex.test.tsx delete mode 100644 src/__tests__/__snapshots__/Flex.test.tsx.snap delete mode 100644 src/__tests__/deprecated/ChoiceInputField.test.tsx delete mode 100644 src/deprecated/ChoiceInputField.tsx delete mode 100644 src/deprecated/Flex.tsx diff --git a/docs/content/deprecated/ChoiceInputField.mdx b/docs/content/deprecated/ChoiceInputField.mdx deleted file mode 100644 index fc9cef58607..00000000000 --- a/docs/content/deprecated/ChoiceInputField.mdx +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ChoiceInputField -status: Deprecated -description: The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text. -source: https://github.com/primer/react/blob/main/src/ChoiceInputField.tsx -storybook: '/react/storybook?path=/story/forms-choiceinputfield--checkbox-input-field' ---- - -import {Checkbox, Radio} from '@primer/react' -import {MarkGithubIcon} from '@primer/octicons-react' - -## Deprecation - -Use [FormControl](/FormControl) instead. - -## Examples - -### Checkbox - -```jsx live deprecated - - Option one - - -``` - -### Radio - -```jsx live deprecated -
    - - Option one - - - - Option two - - -
    -``` - -### Disabled field - -```jsx live deprecated - - Option one - - -``` - -### With a caption - -```jsx live deprecated - - Option One - - Hint: the first and only option - -``` - -### With a LeadingVisual - -```jsx live deprecated -<> - - Option one - - - - - - - - Option two - - - - - This one has a caption - - -``` - -## Props - -### ChoiceInputField - -The container that handles the layout and passes the relevant IDs and ARIA attributes it's children. - -`ChoiceInputField.Label` and `ChoiceInputField.Input` are required children. - - - - - - - -### ChoiceInputField.Label - -A `ChoiceInputField.Label` must be passed, but it may be visually hidden. - - - - - -### ChoiceInputField.Caption - -If this field needs additional context, a `ChoiceInputField.Caption` may be used to render hint text. - - - - - -### ChoiceInputField.LeadingVisual - -If the selectable option would be easier to understand with a visual, the `ChoiceInputField.LeadingVisual` component may be used. - - - - - -## Status - - diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md deleted file mode 100644 index a272f1ad12b..00000000000 --- a/docs/content/deprecated/Flex.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Flex -status: Deprecated ---- - -The `Flex` component behaves the same as the `Box` component except that it has `display: flex` set by default. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated - - - Item 1 - - -``` - -### After - -```jsx deprecated - - - Item 1 - - -``` - -## Default example - -```jsx deprecated live - - - - Item 1 - - - Item 2 - - - Item 3 - - - -``` - -## System props - -Flex components get `FLEX`, `COMMON`, and `LAYOUT` system props. - -Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -`Flex` does not get any additional props other than the system props mentioned above. diff --git a/docs/content/deprecated/InputField.mdx b/docs/content/deprecated/InputField.mdx index 347afe1f3c1..735af07202e 100644 --- a/docs/content/deprecated/InputField.mdx +++ b/docs/content/deprecated/InputField.mdx @@ -272,5 +272,4 @@ A `InputField.Label` must be passed for the field to be accessible to assistive ## Related components -- [ChoiceInputField](/ChoiceInputField) - [TextInput](/TextInput) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 57ca4df1a8a..f89215b7dee 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -180,14 +180,10 @@ url: /deprecated/ActionMenu - title: Buttons (legacy) url: /deprecated/Buttons - - 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 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__/__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__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 4922e6808b4..cbb35b4e4db 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -109,13 +109,10 @@ exports[`@primer/react/decprecated should not update exports without a semver ch "ButtonOutline", "ButtonPrimary", "ButtonTableList", - "ChoiceFieldset", - "ChoiceInputField", "Dropdown", "DropdownButton", "DropdownMenu", "Fixed", - "Flex", "FormGroup", "Grid", "InputField", diff --git a/src/__tests__/deprecated/ChoiceInputField.test.tsx b/src/__tests__/deprecated/ChoiceInputField.test.tsx deleted file mode 100644 index c47de4a4c86..00000000000 --- a/src/__tests__/deprecated/ChoiceInputField.test.tsx +++ /dev/null @@ -1,224 +0,0 @@ -import React from 'react' -import {render} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' -import {Checkbox, Radio, SSRProvider} from '../../' -import ChoiceInputField from '../../deprecated/ChoiceInputField' -import {MarkGithubIcon} from '@primer/octicons-react' -expect.extend(toHaveNoViolations) - -const CHECKBOXINPUTFIELD_LABEL_TEXT = 'Option one' -const CHECKBOXINPUTFIELD_CAPTION_TEXT = 'Hint: a cool option' - -describe('ChoiceInputField', () => { - afterEach(() => { - jest.clearAllMocks() - }) - - describe('rendering', () => { - it('renders with a checkbox input', () => { - const {getByLabelText} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByLabelText(CHECKBOXINPUTFIELD_LABEL_TEXT) - - expect(input.getAttribute('type')).toBe('checkbox') - }) - it('renders with a radio input', () => { - const {getByLabelText} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByLabelText(CHECKBOXINPUTFIELD_LABEL_TEXT) - - expect(input.getAttribute('type')).toBe('radio') - }) - it('renders with a custom ID', () => { - const {getByLabelText} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByLabelText(CHECKBOXINPUTFIELD_LABEL_TEXT) - - expect(input.getAttribute('id')).toBe('customId') - }) - it('renders as disabled', () => { - const {getByLabelText} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByLabelText(CHECKBOXINPUTFIELD_LABEL_TEXT) - - expect(input.getAttribute('disabled')).not.toBeNull() - }) - it('renders with a caption', () => { - const {getByText} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - {CHECKBOXINPUTFIELD_CAPTION_TEXT} - - , - ) - - const caption = getByText(CHECKBOXINPUTFIELD_CAPTION_TEXT) - - expect(caption).toBeDefined() - }) - it('renders with a LeadingVisual', () => { - const {getByLabelText} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - - - - - , - ) - - const leadingVisual = getByLabelText('leadingVisualIcon') - - expect(leadingVisual).toBeDefined() - }) - }) - - describe('ARIA attributes', () => { - it('associates the label with the input', () => { - const {getByLabelText} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - - , - ) - - const inputNode = getByLabelText(CHECKBOXINPUTFIELD_LABEL_TEXT) - expect(inputNode).toBeDefined() - }) - it('associates caption text with the input', () => { - const fieldId = 'captionedInput' - const {getByLabelText, getByText} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - {CHECKBOXINPUTFIELD_CAPTION_TEXT} - - , - ) - - const inputNode = getByLabelText(CHECKBOXINPUTFIELD_LABEL_TEXT) - const captionNode = getByText(CHECKBOXINPUTFIELD_CAPTION_TEXT) - - expect(captionNode.getAttribute('id')).toBe(`${fieldId}-caption`) - expect(inputNode.getAttribute('aria-describedby')).toBe(`${fieldId}-caption`) - }) - }) - - describe('warnings', () => { - it('should warn users if they do not pass an input', async () => { - const consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation(() => {}) - render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - {CHECKBOXINPUTFIELD_CAPTION_TEXT} - - , - ) - - expect(consoleSpy).toHaveBeenCalledWith( - 'To correctly render this field with the correct ARIA attributes passed to the input, please pass the Checkbox or Radio component from @primer/react as a direct child of the ChoiceInputField component', - ) - }) - - it('should warn users if they pass an id directly to the input', async () => { - const consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation(() => {}) - render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - {CHECKBOXINPUTFIELD_CAPTION_TEXT} - - , - ) - - expect(consoleSpy).toHaveBeenCalledWith( - `instead of passing the 'id' prop directly to the checkbox input, it should be passed to the parent component, `, - ) - }) - - it('should warn users if they pass a `disabled` prop directly to the input', async () => { - const consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation(() => {}) - render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - {CHECKBOXINPUTFIELD_CAPTION_TEXT} - - , - ) - - expect(consoleSpy).toHaveBeenCalledWith( - `instead of passing the 'disabled' prop directly to the checkbox input, it should be passed to the parent component, `, - ) - }) - - it('should warn users if they pass a `required` prop directly to the input', async () => { - const consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation(() => {}) - render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - {CHECKBOXINPUTFIELD_CAPTION_TEXT} - - , - ) - - expect(consoleSpy).toHaveBeenCalledWith( - `instead of passing the 'required' prop directly to the checkbox input, it should be passed to the parent component, `, - ) - }) - }) - - it('should have no axe violations', async () => { - const {container} = render( - - - {CHECKBOXINPUTFIELD_LABEL_TEXT} - - {CHECKBOXINPUTFIELD_CAPTION_TEXT} - - , - ) - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) diff --git a/src/deprecated/ChoiceInputField.tsx b/src/deprecated/ChoiceInputField.tsx deleted file mode 100644 index 6a5bd7ec87f..00000000000 --- a/src/deprecated/ChoiceInputField.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import React from 'react' -import {Box, Checkbox, CheckboxProps, Radio, RadioProps, useSSRSafeId} from '..' -import {get} from '../constants' -import {Slots} from './InputField/slots' -import ChoiceInputLeadingVisual from './_ChoiceInputLeadingVisual' -import InputField, {Props as InputFieldProps} from './InputField/InputField' -import {FormValidationStatus} from '../utils/types/FormValidationStatus' -import InputFieldCaption from './InputField/_InputFieldCaption' - -export interface Props extends Pick { - /** - * Styles the field to visually communicate the result of form validation - */ - validationStatus?: FormValidationStatus -} - -const getInputToRender = (inputType: 'radio' | 'checkbox', children?: React.ReactNode) => { - const inputComponentMap = { - radio: Radio, - checkbox: Checkbox, - } - - return React.Children.toArray(children).find(child => - React.isValidElement(child) && child.type === inputComponentMap[inputType] ? child : null, - ) -} - -const ChoiceInputField: React.FC> = ({ - children, - disabled, - id: idProp, - validationStatus, -}) => { - const id = useSSRSafeId(idProp) - const captionChildren: React.ReactElement[] | undefined | null = React.Children.map(children, child => - React.isValidElement(child) && child.type === InputFieldCaption ? child : null, - )?.filter(Boolean) - const captionId = captionChildren?.length ? `${id}-caption` : undefined - const inputType = React.Children.toArray(children).some(child => - React.isValidElement(child) ? child.type === Checkbox : false, - ) - ? 'checkbox' - : 'radio' - const ChoiceInput = getInputToRender(inputType, children) - const choiceInputProps = React.isValidElement(ChoiceInput) ? ChoiceInput.props : undefined - - if (!ChoiceInput) { - // eslint-disable-next-line no-console - console.warn( - 'To correctly render this field with the correct ARIA attributes passed to the input, please pass the Checkbox or Radio component from @primer/react as a direct child of the ChoiceInputField component', - ) - } else { - if (choiceInputProps?.id) { - // eslint-disable-next-line no-console - console.warn( - `instead of passing the 'id' prop directly to the ${inputType} input, it should be passed to the parent component, `, - ) - } - - if (choiceInputProps?.disabled) { - // eslint-disable-next-line no-console - console.warn( - `instead of passing the 'disabled' prop directly to the ${inputType} input, it should be passed to the parent component, `, - ) - } - - if (choiceInputProps?.required) { - // eslint-disable-next-line no-console - console.warn( - `instead of passing the 'required' prop directly to the ${inputType} input, it should be passed to the parent component, `, - ) - } - } - - return ( - - {slots => { - return ( - - input': {marginLeft: 0, marginRight: 0}}}> - {React.isValidElement(ChoiceInput) && - React.cloneElement(ChoiceInput as React.ReactElement, { - id, - disabled, - ['aria-describedby']: captionId, - })} - {React.Children.toArray(children).filter( - child => - React.isValidElement(child) && - ![Checkbox, Radio].some(inputComponent => child.type === inputComponent), - )} - - {slots.LeadingVisual && ( - *': { - minWidth: slots.Caption ? get('fontSizes.4') : get('fontSizes.2'), - minHeight: slots.Caption ? get('fontSizes.4') : get('fontSizes.2'), - fill: 'currentColor', - }, - }} - ml={2} - > - {slots.LeadingVisual} - - )} - {(React.isValidElement(slots.Label) && !slots.Label.props.visuallyHidden) || slots.Caption ? ( - - {slots.Label} - {slots.Caption} - - ) : ( - <> - {slots.Label} - {slots.Caption} - - )} - - ) - }} - - ) -} - -const Label: React.FC> = ({children}) => ( - {children} -) - -/** - * @deprecated Use `FormControl` instead. See https://primer.style/react/FormControl for more info - */ -export default Object.assign(ChoiceInputField, { - Label, - Caption: InputField.Caption, - LeadingVisual: ChoiceInputLeadingVisual, -}) diff --git a/src/deprecated/Flex.tsx b/src/deprecated/Flex.tsx deleted file mode 100644 index 6bccea61a3c..00000000000 --- a/src/deprecated/Flex.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components' -import Box, {BoxProps} from '../Box' - -export type FlexProps = BoxProps - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -const Flex = styled(Box)`` - -Flex.defaultProps = { - display: 'flex', -} - -export default Flex diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index dd17d5247b8..fa2b54fb2c9 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -8,9 +8,6 @@ // Deprecated in v35.0.0 on March 9, 2022 // TODO: We can remove these 6 months after release: September 10, 2022 -export {default as ChoiceInputField} from './ChoiceInputField' -export {default as Flex} from './Flex' -export type {FlexProps} from './Flex' export {default as Grid} from './Grid' export type {GridProps} from './Grid' export {default as Position, Absolute, Fixed, Relative, Sticky} from './Position' From 63ca9d106f885d2e6ae40a92661df151c785966d Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 9 May 2023 10:44:45 +1000 Subject: [PATCH 05/16] Remove Grid --- docs/content/deprecated/Grid.md | 59 ------ src/__tests__/Grid.test.tsx | 81 -------- .../__snapshots__/Grid.test.tsx.snap | 178 ------------------ .../__snapshots__/exports.test.ts.snap | 1 - src/deprecated/Grid.tsx | 15 -- src/deprecated/index.ts | 2 - 6 files changed, 336 deletions(-) delete mode 100644 docs/content/deprecated/Grid.md delete mode 100644 src/__tests__/Grid.test.tsx delete mode 100644 src/__tests__/__snapshots__/Grid.test.tsx.snap delete mode 100644 src/deprecated/Grid.tsx diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md deleted file mode 100644 index d01036e31c5..00000000000 --- a/docs/content/deprecated/Grid.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Grid -status: Deprecated ---- - -Grid is a component that exposes grid system props. See the [CSS Tricks Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) to learn more about Grid Layout. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated - - - 1 - - - 2 - - -``` - -### After - -```jsx deprecated - - - 1 - - - 2 - - -``` - -## Default example - -```jsx deprecated live - - - 1 - - - 2 - - -``` - -## System props - -Grid components get `GRID`, `COMMON`, and `LAYOUT` system props. - -Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -`Grid` does not get any additional props other than the system props mentioned above. 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__/__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__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index cbb35b4e4db..9e52ad31735 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -114,7 +114,6 @@ exports[`@primer/react/decprecated should not update exports without a semver ch "DropdownMenu", "Fixed", "FormGroup", - "Grid", "InputField", "Item", "Label", diff --git a/src/deprecated/Grid.tsx b/src/deprecated/Grid.tsx deleted file mode 100644 index bd063c070de..00000000000 --- a/src/deprecated/Grid.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components' -import Box, {BoxProps} from '../Box' - -export type GridProps = BoxProps - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -const Grid = styled(Box)`` - -Grid.defaultProps = { - display: 'grid', -} - -export default Grid diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index fa2b54fb2c9..c3be941d6bd 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -8,8 +8,6 @@ // Deprecated in v35.0.0 on March 9, 2022 // TODO: We can remove these 6 months after release: September 10, 2022 -export {default as Grid} from './Grid' -export type {GridProps} from './Grid' export {default as Position, Absolute, Fixed, Relative, Sticky} from './Position' export type {PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps} from './Position' export {default as Dropdown} from './Dropdown' From 9beb198935969e8a259bc795701a2b36e804012f Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 9 May 2023 10:47:15 +1000 Subject: [PATCH 06/16] Remove Position --- .changeset/clever-wolves-move.md | 2 +- docs/content/deprecated/Position.md | 93 -------------- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 - src/__tests__/Position.test.tsx | 114 ------------------ .../__snapshots__/exports.test.ts.snap | 1 - src/deprecated/Position.tsx | 62 ---------- src/deprecated/index.ts | 2 - 7 files changed, 1 insertion(+), 275 deletions(-) delete mode 100644 docs/content/deprecated/Position.md delete mode 100644 src/__tests__/Position.test.tsx delete mode 100644 src/deprecated/Position.tsx diff --git a/.changeset/clever-wolves-move.md b/.changeset/clever-wolves-move.md index 9c80a74976d..1ca099e3484 100644 --- a/.changeset/clever-wolves-move.md +++ b/.changeset/clever-wolves-move.md @@ -3,4 +3,4 @@ --- Remove components from deprecated -- `BorderBox`, `ChoiceFieldset` +- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position` diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md deleted file mode 100644 index 6efa8d557af..00000000000 --- a/docs/content/deprecated/Position.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Position -status: Deprecated ---- - -The Position component is a wrapper component that gives the containing component css positioning abilities. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated -<> - ... - ... - ... - ... - ... - -``` - -### After - -```jsx deprecated -<> - ... - ... - ... - ... - ... - -``` - -## Default examples - -```jsx deprecated live - - Relative + Absolute - - - - rt - - - lt - - - rb - - - lb - - - bl - - - br - - - tl - - - tr - - - - - Sticky - - - - I'm sticky! - - - - Fixed -

    (see the bottom right of the screen)

    - - - I'm fixed to the bottom right. - -     -``` - -## System props - -Position components get `POSITION`, `LAYOUT`, `FLEX`, and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -Position does not get any additional props other than the system props mentioned above. diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index f89215b7dee..57a06ac06c2 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -192,8 +192,6 @@ url: /deprecated/InputField - title: Label url: /deprecated/Label - - title: Position - url: /deprecated/Position - title: SelectMenu url: /deprecated/SelectMenu - title: SideNav 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__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 9e52ad31735..67766ef3a03 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -117,7 +117,6 @@ exports[`@primer/react/decprecated should not update exports without a semver ch "InputField", "Item", "Label", - "Position", "Relative", "SelectMenu", "Sticky", diff --git a/src/deprecated/Position.tsx b/src/deprecated/Position.tsx deleted file mode 100644 index 2b3261e6f11..00000000000 --- a/src/deprecated/Position.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import Box from '../Box' -import {ComponentProps} from '../utils/types' - -type StyledPositionProps = {as?: React.ElementType} - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -const Position = styled(Box)`` - -export type PositionProps = ComponentProps - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -export default Position - -// Absolute -export type AbsoluteProps = Omit - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -export const Absolute = React.forwardRef((props: AbsoluteProps, ref) => { - return -}) -Absolute.displayName = 'Absolute' - -// Fixed -export type FixedProps = Omit - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -export const Fixed = React.forwardRef((props: AbsoluteProps, ref) => { - return -}) -Fixed.displayName = 'Fixed' - -// Relative -export type RelativeProps = Omit - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -export const Relative = React.forwardRef((props: RelativeProps, ref) => { - return -}) -Relative.displayName = 'Relative' - -// Sticky -export type StickyProps = Omit - -/** - * @deprecated Use the Box component instead (i.e. → ) - */ -export const Sticky = React.forwardRef(({top = 0, zIndex = 1, ...rest}: StickyProps, ref) => { - return -}) -Sticky.displayName = 'Sticky' diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index c3be941d6bd..f020478b98a 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -8,8 +8,6 @@ // Deprecated in v35.0.0 on March 9, 2022 // TODO: We can remove these 6 months after release: September 10, 2022 -export {default as Position, Absolute, Fixed, Relative, Sticky} from './Position' -export type {PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps} from './Position' export {default as Dropdown} from './Dropdown' export type { DropdownProps, From 04b236be41fdec76534f84133dedd699f9ba42bd Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 9 May 2023 10:49:02 +1000 Subject: [PATCH 07/16] Remove Dropdown --- .changeset/clever-wolves-move.md | 2 +- docs/content/deprecated/Dropdown.md | 72 ----- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 - src/__tests__/Dropdown.test.tsx | 52 ---- src/__tests__/Dropdown.types.test.tsx | 21 -- .../__snapshots__/Dropdown.test.tsx.snap | 247 ------------------ .../__snapshots__/exports.test.ts.snap | 1 - src/deprecated/Dropdown.tsx | 157 ----------- src/deprecated/index.ts | 8 - 9 files changed, 1 insertion(+), 561 deletions(-) delete mode 100644 docs/content/deprecated/Dropdown.md delete mode 100644 src/__tests__/Dropdown.test.tsx delete mode 100644 src/__tests__/Dropdown.types.test.tsx delete mode 100644 src/__tests__/__snapshots__/Dropdown.test.tsx.snap delete mode 100644 src/deprecated/Dropdown.tsx diff --git a/.changeset/clever-wolves-move.md b/.changeset/clever-wolves-move.md index 1ca099e3484..a1d7a817601 100644 --- a/.changeset/clever-wolves-move.md +++ b/.changeset/clever-wolves-move.md @@ -3,4 +3,4 @@ --- Remove components from deprecated -- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position` +- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position`, `Dropdown` diff --git a/docs/content/deprecated/Dropdown.md b/docs/content/deprecated/Dropdown.md deleted file mode 100644 index 54ca06b1953..00000000000 --- a/docs/content/deprecated/Dropdown.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Dropdown -status: Deprecated ---- - -## Deprecation - -Use [ActionMenu](/ActionMenu) instead. - ---- - -The Dropdown component is a lightweight context menu for housing navigation and actions. - -Use `Dropdown.Button` as the trigger for the dropdown, or use a custom `summary` element if you would like. **You must use a `summary` tag in order for the dropdown to behave properly!**. You should also add `aria-haspopup="true"` to custom dropdown triggers for accessibility purposes. You can use the `Dropdown.Caret` component to add a caret to a custom dropdown trigger. - -Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to this component to position the menu in relation to the Dropdown.Button. - -## Default example - -```jsx live deprecated - - Dropdown - - Item 1 - Item 2 - Item 3 - - -``` - -## With custom button - -```jsx live deprecated - - - Dropdown - - - - Item 1 - Item 2 - Item 3 - - -``` - -## Component props - -The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets. - -### Dropdown.Menu - -| Name | Type | Default | Description | -| :-------- | :---------------- | :-----: | :------------------------------------------------------------------------------------ | -| direction | String | 'sw' | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -### Dropdown.Button - -See https://primer.style/react/Buttons#component-props - -### Dropdown.Caret - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -### Dropdown.Item - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 57a06ac06c2..8521e04832f 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -180,8 +180,6 @@ url: /deprecated/ActionMenu - title: Buttons (legacy) url: /deprecated/Buttons - - title: Dropdown - url: /deprecated/Dropdown - title: DropdownMenu url: /deprecated/DropdownMenu - title: FormGroup 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__/__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__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 67766ef3a03..b8756fbc712 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -109,7 +109,6 @@ exports[`@primer/react/decprecated should not update exports without a semver ch "ButtonOutline", "ButtonPrimary", "ButtonTableList", - "Dropdown", "DropdownButton", "DropdownMenu", "Fixed", diff --git a/src/deprecated/Dropdown.tsx b/src/deprecated/Dropdown.tsx deleted file mode 100644 index 985adb69b25..00000000000 --- a/src/deprecated/Dropdown.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import Button, {ButtonProps} from './Button' -import {get} from '../constants' -import Details, {DetailsProps} from '../Details' -import getDirectionStyles from '../DropdownStyles' -import useDetails from '../hooks/useDetails' -import sx, {SxProp} from '../sx' -import {ComponentProps} from '../utils/types' - -const StyledDetails = styled(Details)` - position: relative; - display: inline-block; -` - -export type DropdownProps = DetailsProps - -const Dropdown = ({children, className, ...rest}: DropdownProps) => { - const {getDetailsProps} = useDetails({closeOnOutsideClick: true}) - return ( - - {children} - - ) -} - -export type DropdownButtonProps = ButtonProps - -const DropdownButton = ({children, ...rest}: DropdownButtonProps) => { - return ( - - ) -} - -const DropdownCaret = styled.div` - 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; - ${sx}; -` - -type StyledDropdownMenuProps = { - direction?: 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' -} & SxProp - -const DropdownMenu = styled.ul` - background-clip: padding-box; - background-color: ${get('colors.canvas.overlay')}; - border: 1px solid ${get('colors.border.default')}; - border-radius: ${get('radii.2')}; - box-shadow: ${get('shadows.shadow.large')}; - left: 0; - list-style: none; - margin-top: 2px; - padding: 5px 0 5px 0 !important; //TODO: fix this override on our markdown styles - position: absolute; - top: 100%; - width: 160px; - z-index: 100; - - &::before { - position: absolute; - display: inline-block; - content: ''; - } - - &::after { - position: absolute; - display: inline-block; - content: ''; - } - - &::before { - border: 8px solid transparent; - border-bottom-color: ${get('colors.canvas.overlay')}; - } - - &::after { - border: 7px solid transparent; - border-bottom-color: ${get('colors.canvas.overlay')}; - } - - // stylelint-disable-next-line selector-max-type - > ul { - list-style: none; - } - ${({direction = 'sw', ...rest}) => getDirectionStyles(rest.theme, direction)}; - ${sx}; -` - -const DropdownItem = styled.li` - display: block; - padding: ${get('space.1')} 10px ${get('space.1')} 15px; - overflow: hidden; - color: ${get('colors.fg.default')}; - text-overflow: ellipsis; - white-space: nowrap; - a { - color: ${get('colors.fg.default')}; - text-decoration: none; - display: block; - overflow: hidden; - color: ${get('colors.fg.default')}; - text-overflow: ellipsis; - white-space: nowrap; - } - - &:focus, - a:focus { - color: ${get('colors.fg.onEmphasis')}; - text-decoration: none; - background-color: ${get('colors.accent.emphasis')}; - } - - &:hover, - &:hover a { - color: ${get('colors.fg.onEmphasis')}; - text-decoration: none; - background-color: ${get('colors.accent.emphasis')}; - outline: none; - } - ${sx}; -` - -DropdownMenu.defaultProps = {direction: 'sw'} -DropdownMenu.displayName = 'Dropdown.Menu' - -DropdownItem.displayName = 'Dropdown.Item' - -DropdownButton.defaultProps = Button.defaultProps -DropdownButton.displayName = 'Dropdown.Button' - -DropdownCaret.displayName = 'Dropdown.Caret' - -Dropdown.defaultProps = Details.defaultProps - -export type DropdownCaretProps = ComponentProps -export type DropdownMenuProps = ComponentProps -export type DropdownItemProps = ComponentProps -/** - * @deprecated Use ActionMenu instead. See https://primer.style/react/ActionMenu for more details. - */ -export default Object.assign(Dropdown, { - Caret: DropdownCaret, - Menu: DropdownMenu, - Item: DropdownItem, - Button: DropdownButton, -}) diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index f020478b98a..8e3785e4edc 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -8,14 +8,6 @@ // Deprecated in v35.0.0 on March 9, 2022 // TODO: We can remove these 6 months after release: September 10, 2022 -export {default as Dropdown} from './Dropdown' -export type { - DropdownProps, - DropdownCaretProps, - DropdownButtonProps, - DropdownItemProps, - DropdownMenuProps, -} from './Dropdown' export {default as FormGroup} from './FormGroup' export type {FormGroupProps, FormGroupLabelProps} from './FormGroup' export {default as InputField} from './InputField' From ef61e90cc2fee7160b5e9f72b12238d883cfd038 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 9 May 2023 10:51:33 +1000 Subject: [PATCH 08/16] Remove FormGroup --- .changeset/clever-wolves-move.md | 2 +- docs/content/deprecated/FormGroup.md | 43 ------------------- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 - src/__tests__/FormGroup.types.test.tsx | 11 ----- .../__snapshots__/exports.test.ts.snap | 1 - src/__tests__/deprecated/FormGroup.test.tsx | 36 ---------------- .../__snapshots__/FormGroup.test.tsx.snap | 25 ----------- src/deprecated/FormGroup.tsx | 26 ----------- src/deprecated/index.ts | 2 - 9 files changed, 1 insertion(+), 147 deletions(-) delete mode 100644 docs/content/deprecated/FormGroup.md delete mode 100644 src/__tests__/FormGroup.types.test.tsx delete mode 100644 src/__tests__/deprecated/FormGroup.test.tsx delete mode 100644 src/__tests__/deprecated/__snapshots__/FormGroup.test.tsx.snap delete mode 100644 src/deprecated/FormGroup.tsx diff --git a/.changeset/clever-wolves-move.md b/.changeset/clever-wolves-move.md index a1d7a817601..f237e74b2e4 100644 --- a/.changeset/clever-wolves-move.md +++ b/.changeset/clever-wolves-move.md @@ -3,4 +3,4 @@ --- Remove components from deprecated -- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position`, `Dropdown` +- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position`, `Dropdown`, `FormGroup` diff --git a/docs/content/deprecated/FormGroup.md b/docs/content/deprecated/FormGroup.md deleted file mode 100644 index cb0a3143274..00000000000 --- a/docs/content/deprecated/FormGroup.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: FormGroup -status: Deprecated ---- - -Adds styles for multiple form elements used together. - -## Deprecation - -Use [FormControl](/FormControl) instead. - -## Default example - -```jsx live deprecated -<> - - Example text - - - - - Example text - - - -``` - -## Component props - -### FormGroup - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| as | String | `div` | Sets the HTML tag for the component | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -### FormGroup.Label - -| Name | Type | Default | Description | -| :------ | :---------------- | :-----: | :----------------------------------------------------------------------------- | -| as | String | `label` | Sets the HTML tag for the component | -| htmlFor | String | | The value of `htmlFor` needs to be the same as the `id` of the input it labels | -| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 8521e04832f..edf405f4aae 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -182,8 +182,6 @@ url: /deprecated/Buttons - title: DropdownMenu url: /deprecated/DropdownMenu - - title: FormGroup - url: /deprecated/FormGroup - title: Grid url: /deprecated/Grid - title: InputField 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__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index b8756fbc712..0495c705b2f 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -112,7 +112,6 @@ exports[`@primer/react/decprecated should not update exports without a semver ch "DropdownButton", "DropdownMenu", "Fixed", - "FormGroup", "InputField", "Item", "Label", diff --git a/src/__tests__/deprecated/FormGroup.test.tsx b/src/__tests__/deprecated/FormGroup.test.tsx deleted file mode 100644 index 9bbd2fbd160..00000000000 --- a/src/__tests__/deprecated/FormGroup.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' -import FormGroup from '../../deprecated/FormGroup' -import {behavesAsComponent, checkExports} from '../../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('FormGroup', () => { - behavesAsComponent({Component: FormGroup}) - - checkExports('deprecated/FormGroup', { - default: FormGroup, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender( - - Example text - - , - ) - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) - -describe('FormGroup.Label', () => { - behavesAsComponent({Component: FormGroup.Label}) - - it('should have no axe violations', async () => { - const {container} = HTMLRender(Example text) - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) 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; -} - -