diff --git a/.changeset/clever-wolves-move.md b/.changeset/clever-wolves-move.md new file mode 100644 index 00000000000..05364569593 --- /dev/null +++ b/.changeset/clever-wolves-move.md @@ -0,0 +1,8 @@ +--- +'@primer/react': major +--- + +Remove components from deprecated +- `BorderBox`, `ChoiceFieldset`, `Flex`, `Grid`, `Position`, `Dropdown`, `FormGroup`, `SelectMenu`, `InputField`, `Label` + + diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png index fdeebeeca8e..c152e5c5d8a 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png index 206c9fdee93..6e711aa48e1 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png index 7f3cd873533..0b52cb4f626 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png index 84a8ee5eb19..656bcd2534a 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png index 7a41f7bbced..a32f0a60545 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png index 4b97a787344..f90f2b48c9b 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png index dc44b19c2a8..26e2433389b 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png index 60888a7584b..32e20ef61d2 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png index fa326405f39..2d76b77114d 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png index ef3405ff00c..6d9130c6c30 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png index c389f91118f..dcee55bc552 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png index 7cfbadc35f4..4ef1c697943 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png index 0f8554b7c0d..58c62afa2f3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png index 5d7e558b547..d1415e9f51d 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png index 1b22a1769b5..febba64f9dd 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png index 506fa9c893e..2a1f423d698 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png index 441c59c371d..79b2e14a740 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png index 0df30828280..084987b0dc8 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png differ diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md deleted file mode 100644 index 151a410d746..00000000000 --- a/docs/content/deprecated/BorderBox.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: BorderBox -status: Deprecated ---- - -BorderBox is a Box component with a border. When no `borderColor` is present, the component defaults to a primary border. - -## Deprecation - -Use [Box](/Box) instead. - -### Before - -```jsx deprecated -Item 1 -``` - -### After - -```jsx deprecated - - Item 1 - -``` - -## Default example - -```jsx live deprecated -This is a BorderBox -``` - -Note that `BorderBox` has default props set for `borderWidth`, `borderStyle`, and `borderColor`. This means that you cannot use `border={0} borderBottom={1}` or similar patterns; instead, use individual properties like `borderWidth={0} borderBottomWidth={1}`. - -## System props - -BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. - -## Component props - -| Prop name | Type | Default | Description | -| :----------- | :--------------- | :---------------------------: | :------------------------------------------------------------ | -| borderWidth | String | '1px' | Sets the border, use theme values or provide your own. | -| borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. | -| borderColor | String | 'border.primary' (from theme) | Sets the border color, use theme values or provide your own. | -| borderRadius | String or Number | 2 (from theme) | Sets the border radius, use theme values or provide your own. | -| boxShadow | String | | Sets box shadow, use theme values or provide your own. | diff --git a/docs/content/deprecated/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/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/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/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/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/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/docs/content/deprecated/InputField.mdx b/docs/content/deprecated/InputField.mdx deleted file mode 100644 index 347afe1f3c1..00000000000 --- a/docs/content/deprecated/InputField.mdx +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: InputField -status: Deprecated -description: The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text. -source: https://github.com/primer/react/blob/main/src/InputField/InputField.tsx -storybook: '/react/storybook?path=/story/forms-inputfield--text-input-field' ---- - -import {TextInputWithTokens, Autocomplete, Select} from '@primer/react' - -## Deprecation - -Use [FormControl](/FormControl) instead. - -## Examples - -### Basic - -```jsx live deprecated - - Name - - -``` - -### Required - -```jsx live deprecated - - Name - - -``` - -### Disabled - -```jsx live deprecated - - Name - - -``` - -### Using different input components - -```javascript live noinline deprecated -const TextInputWithTokensExample = () => { - const [tokens, setTokens] = React.useState([ - {text: 'zero', id: 0}, - {text: 'one', id: 1}, - {text: 'two', id: 2}, - ]) - const onTokenRemove = tokenId => { - setTokens(tokens.filter(token => token.id !== tokenId)) - } - - return ( - * + *': { - marginTop: 4, - }, - }} - > - - TextInputWithTokens - - - - Autocomplete - - - - - - - - - Select - - - - ) -} - -render(TextInputWithTokensExample) -``` - -### With a visually hidden label - - - -Every input must have a corresponding label to be accessible to assistive technology. That's why you'd use `InputField` instead of using [`TextInput`](/TextInput) directly. - -`InputField` also provides an interface for showing a hint text caption and a validation message, and associating those with the input for assistive technology. - - - -```jsx live deprecated - - Name - - -``` - -### With a caption - -```jsx live deprecated - - Name - - Hint: your first name - -``` - -### With validation - -```javascript live noinline deprecated -const ValidationExample = () => { - const [value, setValue] = React.useState('mona lisa') - const [validationResult, setValidationResult] = React.useState() - const doesValueContainSpaces = inputValue => /\s/g.test(inputValue) - const handleInputChange = e => { - setValue(e.currentTarget.value) - } - - React.useEffect(() => { - if (doesValueContainSpaces(value)) { - setValidationResult('noSpaces') - } else if (value) { - setValidationResult('validName') - } - }, [value]) - - return ( - - GitHub handle - - GitHub handles cannot contain spaces - Valid name - With or without "@". For example "monalisa" or "@monalisa" - - ) -} - -render(ValidationExample) -``` - -## Props - -### InputField - -The container that handles the layout and passes the relevant IDs and ARIA attributes it's children. - - - - - - - - - - -### InputField.Label - -A `InputField.Label` must be passed for the field to be accessible to assistive technology, but it may be visually hidden. - - - - - -### InputField.Caption - -`InputField.Caption` may be used to render hint text for fields that require additional context. - - - - - -### InputField.Validation - -`InputField.Validation` may be used to render contextual validation information if the field was flagged during validation. - - - - - - -## Component status - - - -## Related components - -- [ChoiceInputField](/ChoiceInputField) -- [TextInput](/TextInput) diff --git a/docs/content/deprecated/Label.mdx b/docs/content/deprecated/Label.mdx deleted file mode 100644 index 99e3b054a54..00000000000 --- a/docs/content/deprecated/Label.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Label (legacy) -description: Use Label components to add contextual metadata to a design. -status: Deprecated -source: https://github.com/primer/react/blob/main/src/Label.tsx -componentId: legacy_label ---- - -## Deprecation - -Use the new [Label](/Label) instead. - -## Example - -```jsx live deprecated -<> - - - - - - - - - - - - -``` - -## Props - - - - - - - - -## Status - - 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/content/deprecated/SelectMenu.md b/docs/content/deprecated/SelectMenu.md deleted file mode 100644 index e1bc0fd38ce..00000000000 --- a/docs/content/deprecated/SelectMenu.md +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: SelectMenu -status: Deprecated ---- - -## Deprecation - -Use [ActionMenu](/ActionMenu) instead. - ---- - -The `SelectMenu` components are a suite of components which can be combined together to make several different variations of our GitHub select menu. At it's most basic form, a select menu is comprised of a `SelectMenu` wrapper, which contains a `summary` component of your choice and a `Select.Modal` which contains the select menu content. Use `SelectMenu.List` to wrap items in the select menu, and `SelectMenu.Item` to wrap each item. - -Several additional components exist to provide even more functionality: `SelectMenu.Header`, `SelectMenu.Filter`, `SelectMenu.Tabs`, `SelectMenu.TabPanel` `SelectMenu.Footer` and `SelectMenu.Divider`. - -## Basic Example - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - -``` - -## SelectMenu - -Main wrapper component for select menu. - -```jsx deprecated -{/* all other sub components are wrapped here*/} -``` - -### Component Props - -| Name | Type | Default | Description | -| :--------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- | -| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. | -| ref | React ref | | ref to pass down to SelectMenu component | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.MenuContext - -SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider). - -### Values available on MenuContext - -| Name | Type | Description | -| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | -| selectedTab | string | The currently selected tab | -| setSelectedTab | function | Used to update the currently selected tab state | -| open | boolean | State for open/closed status of the menu modal | -| setOpen | function | Used to update the `open` state | -| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value use the `initialTab` prop on `SelectMenu`. | - -### Example Usage - -```jsx deprecated -import {SelectMenu, Button} from '@primer/react' -import React, {useContext} from 'react' - -const MyMenu = () => ( - - - content - -) - -// note that we can only use the context in components that are already wrapped by SelectMenu (and thus the Context.Provider) -const MyButton = () => { - const menuContext = useContext(SelectMenu.MenuContext) - - return -} -``` - -## SelectMenu.Modal - -Used to wrap the content in a `SelectMenu`. - -```jsx deprecated -{/* all menu content is wrapped in the modal*/} -``` - -### Right-aligned modal - -Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly. - -```jsx deprecated live - - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - - -``` - -### Component Props - -| Prop name | Type | Default | Description | -| :-------- | :---------------- | :------ | ------------------------------------------------- | -| align | String | 'left' | Use `right` to align the select menu to the right | -| width | String or Number | 300px | Sets the modal width | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.List - -Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessibility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. - -```jsx deprecated -{/* all menu list items are wrapped in the list*/} -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Item - -Individual items in a select menu. SelectMenu.Item renders an anchor tag by default, you'll need to make sure to provide the appropriate `href`. - -You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component. - -```jsx deprecated - - {/* wraps an individual list item*/} - -``` - -### Component Props - -| Name | Type | Default | Description | -| :------- | :---------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| selected | boolean | | Used to apply styles to the selected items in the list. | -| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Filter - -Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item. - -```jsx deprecated live - - - - Filter by Project - - - Primer React bugs - Primer React roadmap - More Options - Project 3 - Project 4 - - - -``` - -### Component Props - -SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets. - -| Name | Type | Default | Description | -| :---- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------- | -| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Tabs - -Use `SelectMenu.Tabs` to wrap the tab navigation and `SelectMenu.Tab` for each tab in the navigation. - -`SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`. - -To set one of the tabs to be open by default, use `initialTab` on the main `SelectMenu` component. Otherwise, the first tab will be shown by default. - -Each `Select.Menu` tab will need to have an `index` prop. The first tab should be at index `0`, the second at index `1` and so forth. The `index` prop is used to show the first tab by default. - -If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`. - -```jsx deprecated live - - - - Projects - - - - - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - Project 2 - - Showing 3 of 3 - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Tab - -Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `index` prop to correspond to the order the tab is in. The `tabName` prop should correspond to the `tabName` set on the `SelectMenu.TabPanel`. - -The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks. - -```jsx deprecated -<> - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- | -| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | -| index | Number | | The index at which the tab is in the list of tabs | -| onClick | Function | | Function to be called when the tab is clicked. Optional. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.TabPanel - -Wraps the content for each tab. Make sure to use the `tabName` prop to identify each tab panel with the correct tab in the tab navigation. - -**Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary. - -```jsx deprecated -{/* Wraps content for each tab */} -``` - -### Component Props - -| Name | Type | Default | Description | -| :------ | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- | -| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Divider - -Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - More Options - Project 3 - Project 4 - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Footer - -Use a `SelectMenu.Footer` to add content to the bottom of the select menu. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.Header - -Use a `SelectMenu.Header` to add a header to the top of the select menu content. - -```jsx deprecated live - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | - -## SelectMenu.LoadingAnimation - -Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the SelectMenu. - -**Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state. - -```jsx deprecated live - - - - Projects - - {true ? ( - - ) : ( - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - Use ⌥ + click/return to exclude labels. - - )} - - -``` - -### Component Props - -| Name | Type | Default | Description | -| :--- | :---------------- | :-----: | :----------------------------------- | -| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index d6ef3c6b2c8..0cc74a68f49 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -108,7 +108,7 @@ Primer React includes TypeScript support and ships with its own typings. You wil Once installed, you can import components and their prop type interfaces from the `@primer/react` package: ```typescript -import {BorderBox, BorderBoxProps} from '@primer/react' +import {Button, ButtonProps} from '@primer/react' ``` ### Fixing "Duplicate identifier 'FormData'" diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 70d6f95fef9..e1c13da496a 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -174,35 +174,13 @@ url: /deprecated/ActionList - title: ActionMenu (legacy) url: /deprecated/ActionMenu - - title: BorderBox - url: /deprecated/BorderBox - title: Buttons (legacy) url: /deprecated/Buttons - - title: ChoiceFieldset - url: /deprecated/ChoiceFieldset - - title: ChoiceInputField - url: /deprecated/ChoiceInputField - - title: Dropdown - url: /deprecated/Dropdown - title: DropdownMenu url: /deprecated/DropdownMenu - title: FilteredSearch url: /deprecated/FilteredSearch - title: FilterList url: /deprecated/FilterList - - title: Flex - url: /deprecated/Flex - - title: FormGroup - url: /deprecated/FormGroup - - title: Grid - url: /deprecated/Grid - - title: InputField - url: /deprecated/InputField - - title: Label - url: /deprecated/Label - - title: Position - url: /deprecated/Position - - title: SelectMenu - url: /deprecated/SelectMenu - title: SideNav url: /deprecated/SideNav diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx index eb356a83ebd..9c6178004e3 100644 --- a/src/TextInput/TextInput.tsx +++ b/src/TextInput/TextInput.tsx @@ -51,7 +51,7 @@ export type TextInputNonPassthroughProps = { export type TextInputProps = Merge, TextInputNonPassthroughProps> -// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input +// using forwardRef is important so that other components can autofocus the input const TextInput = React.forwardRef( ( { diff --git a/src/__tests__/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__/Dropdown.test.tsx b/src/__tests__/Dropdown.test.tsx deleted file mode 100644 index 08af8c9fa43..00000000000 --- a/src/__tests__/Dropdown.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react' -import {Dropdown} from '../deprecated' -import {behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('Dropdown', () => { - behavesAsComponent({Component: Dropdown, toRender: () => Hello!}) - - checkExports('deprecated/Dropdown', { - default: Dropdown, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) - -describe('Dropdown.Item', () => { - behavesAsComponent({ - Component: Dropdown.Item, - toRender: () => Hello!, - }) -}) - -describe('Dropdown.Button', () => { - behavesAsComponent({ - Component: Dropdown.Button, - toRender: () => Hello!, - }) -}) - -describe('Dropdown.Caret', () => { - behavesAsComponent({Component: Dropdown.Caret}) -}) - -describe('Dropdown.Menu', () => { - behavesAsComponent({ - Component: Dropdown.Menu, - toRender: () => ( - -
  • 1
    • -
  • 2
    • -
  • 3
    • -     - ), - }) -}) diff --git a/src/__tests__/Dropdown.types.test.tsx b/src/__tests__/Dropdown.types.test.tsx deleted file mode 100644 index 06402f96573..00000000000 --- a/src/__tests__/Dropdown.types.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import Dropdown from '../deprecated/Dropdown' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - return ( - <> - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - - ) -} diff --git a/src/__tests__/Flex.test.tsx b/src/__tests__/Flex.test.tsx deleted file mode 100644 index 750eeb44c89..00000000000 --- a/src/__tests__/Flex.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react' -import {Flex} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('Flex', () => { - behavesAsComponent({Component: Flex}) - - checkExports('deprecated/Flex', { - default: Flex, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('gets display: flex by default', () => { - expect(render()).toHaveStyleRule('display', 'flex') - }) - - it('respects flexWrap', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects flexDirection', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects justifyContent', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects alignItems', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects alignContent', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects display', () => { - expect(render()).toHaveStyleRule('display', 'inline-flex') - }) - - it('respects responsive display', () => { - expect(render()).toMatchSnapshot() - }) - - it('renders a div by default', () => { - expect(render().type).toEqual('div') - }) -}) diff --git a/src/__tests__/FormGroup.types.test.tsx b/src/__tests__/FormGroup.types.test.tsx deleted file mode 100644 index c35f16d3bd1..00000000000 --- a/src/__tests__/FormGroup.types.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import FormGroup from '../deprecated/FormGroup' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - // @ts-expect-error system props should not be accepted - return -} diff --git a/src/__tests__/Grid.test.tsx b/src/__tests__/Grid.test.tsx deleted file mode 100644 index aa227cef5d5..00000000000 --- a/src/__tests__/Grid.test.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react' -import {Grid} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('Grid', () => { - behavesAsComponent({Component: Grid}) - - checkExports('deprecated/Grid', { - default: Grid, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('gets display: grid by default', () => { - expect(render()).toHaveStyleRule('display', 'grid') - }) - - it('respects gridGap', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridColumnGap', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridRowGap', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridColumn', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridRow', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridArea', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridAutoFlow', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridAutoRows', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridAutoColumns', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridTemplateColumns', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridTemplateRows', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects gridTemplateAreas', () => { - expect(render()).toMatchSnapshot() - }) - - it('respects responsive display', () => { - expect(render()).toMatchSnapshot() - }) - - it('renders a div by default', () => { - expect(render().type).toEqual('div') - }) -}) diff --git a/src/__tests__/Position.test.tsx b/src/__tests__/Position.test.tsx deleted file mode 100644 index 304f0a45170..00000000000 --- a/src/__tests__/Position.test.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React from 'react' -import {Box} from '..' -import {Position, Absolute, Fixed, Relative, Sticky} from '../deprecated' -import {render, behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('position components', () => { - describe('Absolute', () => { - behavesAsComponent({Component: Absolute}) - - checkExports('deprecated/Position', { - default: Position, - Absolute, - Fixed, - Relative, - Sticky, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('sets position: absolute', () => { - expect(render()).toHaveStyleRule('position', 'absolute') - }) - - it('can render other components with the as prop', () => { - const result = render( - , - ) - expect(result).toHaveStyleRule('position', 'absolute') - expect(result).toHaveStyleRule('border-width', '1px') - expect(result).toHaveStyleRule('border-style', 'solid') - }) - }) - - describe('Fixed', () => { - behavesAsComponent({Component: Fixed}) - - it('respects the "as" prop', () => { - expect(render().type).toEqual('span') - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('sets position: fixed', () => { - expect(render()).toHaveStyleRule('position', 'fixed') - }) - - it('can render other components with the as prop', () => { - const result = render( - , - ) - expect(result).toHaveStyleRule('position', 'fixed') - expect(result).toHaveStyleRule('border-width', '1px') - expect(result).toHaveStyleRule('border-style', 'solid') - }) - }) - - describe('Relative', () => { - behavesAsComponent({Component: Relative}) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('sets position: relative', () => { - expect(render()).toHaveStyleRule('position', 'relative') - }) - - it('can render other components with the as prop', () => { - const result = render( - , - ) - expect(result).toHaveStyleRule('position', 'relative') - expect(result).toHaveStyleRule('border-width', '1px') - expect(result).toHaveStyleRule('border-style', 'solid') - }) - }) - - describe('Sticky', () => { - behavesAsComponent({Component: Sticky}) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('sets position: sticky', () => { - expect(render()).toHaveStyleRule('position', 'sticky') - }) - - it('can render other components with the as prop', () => { - const result = render( - , - ) - expect(result).toHaveStyleRule('position', 'sticky') - expect(result).toHaveStyleRule('border-width', '1px') - expect(result).toHaveStyleRule('border-style', 'solid') - }) - }) -}) diff --git a/src/__tests__/SelectMenu.test.tsx b/src/__tests__/SelectMenu.test.tsx deleted file mode 100644 index a6fd21bdd48..00000000000 --- a/src/__tests__/SelectMenu.test.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import {render as HTMLRender} from '@testing-library/react' -import userEvent from '@testing-library/user-event' -import React from 'react' -import {SelectMenu, Button} from '../deprecated' -import {render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing' -import {axe} from 'jest-axe' -import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../deprecated/SelectMenu' - -const BasicSelectMenu = ({ - onClick, - as, - align = 'left', -}: { - onClick?: SelectMenuItemProps['onClick'] - // eslint-disable-next-line @typescript-eslint/no-explicit-any - as?: any - align?: SelectMenuModalProps['align'] -}) => { - return ( - - - - - - Primer Components bugs - - - Primer Components roadmap - - stuff - Project 3 - Project 4 - footer - - - - ) -} - -const MenuWithTabs = ({onClick}: {onClick?: SelectMenuTabProps['onClick']}) => { - return ( - - - - - - - - - Primer Components bugs - Primer Components roadmap - Project 3 - Project 4 - - - Project 2 - - Showing 3 of 3 - - - ) -} - -describe('SelectMenu', () => { - checkExports('deprecated/SelectMenu', { - default: SelectMenu, - }) - - for (const Comp of [ - SelectMenu.List, - SelectMenu.Divider, - SelectMenu.Filter, - SelectMenu.Item, - SelectMenu.List, - SelectMenu.Modal, - SelectMenu.Tabs, - SelectMenu.Tab, - SelectMenu.TabPanel, - SelectMenu.Header, - ]) { - it('sets a valid displayName', () => { - expect(Comp.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX) - }) - } - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) - - it('does not allow the "as" prop on SelectMenu', () => { - const {container} = HTMLRender() - expect(container.firstElementChild?.tagName).toBe('DETAILS') - }) - - it('shows correct initial tab', () => { - const testInstance = renderRoot() - // `findByProps` is a method on the renderer, not testing-library - // eslint-disable-next-line testing-library/await-async-query - expect(testInstance.findByProps({'aria-selected': true}).props.children).toBe('Organization') - }) - - it('clicking on a tab opens the tab', async () => { - const user = userEvent.setup() - const {getByRole} = HTMLRender() - - await user.click(getByRole('tab', {name: 'Repository'})) - - expect(getByRole('tab', {name: 'Repository'})).toHaveAttribute('aria-selected', 'true') - }) - - it('selected items have aria-checked', () => { - const testInstance = renderRoot() - // `findByProps` is a method on the renderer, not testing-library - // eslint-disable-next-line testing-library/await-async-query - expect(testInstance.findByProps({'aria-checked': true}).props.children[1]).toBe('Primer Components bugs') - }) - - it('clicking on a list item calls user provided onClick handler', async () => { - const user = userEvent.setup() - const onClick = jest.fn() - const {getByRole} = HTMLRender() - - await user.click(getByRole('menuitemcheckbox', {name: 'Primer Components roadmap'})) - - expect(onClick).toHaveBeenCalledTimes(1) - }) - - it('clicking on a tab calls user provided onClick handler', async () => { - const user = userEvent.setup() - const onClick = jest.fn() - const {getByRole} = HTMLRender() - - await user.click(getByRole('tab', {name: 'Repository'})) - - expect(onClick).toHaveBeenCalledTimes(1) - }) - - it('clicking on an item closes the modal', async () => { - const user = userEvent.setup() - const {container, getByRole} = HTMLRender() - - await user.click(getByRole('menuitemcheckbox', {name: 'Primer Components roadmap'})) - - expect(container.firstElementChild).not.toHaveAttribute('open') - }) - - it('right-aligned modal has right: 0px', () => { - expect(render()).toMatchSnapshot() - }) -}) diff --git a/src/__tests__/SelectMenu.types.test.tsx b/src/__tests__/SelectMenu.types.test.tsx deleted file mode 100644 index 66e57ddef0b..00000000000 --- a/src/__tests__/SelectMenu.types.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import SelectMenu from '../deprecated/SelectMenu' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - return ( - <> - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - {/* @ts-expect-error system props should not be accepted */} - - - ) -} diff --git a/src/__tests__/__snapshots__/BorderBox.test.tsx.snap b/src/__tests__/__snapshots__/BorderBox.test.tsx.snap deleted file mode 100644 index 804d86dac97..00000000000 --- a/src/__tests__/__snapshots__/BorderBox.test.tsx.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BorderBox renders consistently 1`] = ` -.c0 { - border-width: 1px; - border-style: solid; - border-color: #d0d7de; - border-radius: 6px; -} - -
    -`; diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap deleted file mode 100644 index 5fc9fbc3644..00000000000 --- a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ /dev/null @@ -1,247 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Dropdown renders consistently 1`] = ` -.c0 { - position: relative; - display: inline-block; -} - -.c0 > summary { - list-style: none; -} - -.c0 > summary::-webkit-details-marker { - display: none; -} - -
    - Hello! -
    -`; - -exports[`Dropdown.Button renders consistently 1`] = ` -.c0 { - position: relative; - display: inline-block; - padding: 6px 16px; - font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-radius: 6px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - font-size: 14px; - color: #24292f; - background-color: #f6f8fa; - border: 1px solid rgba(31,35,40,0.15); - box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); -} - -.c0:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:focus { - outline: none; -} - -.c0:disabled { - cursor: default; -} - -.c0:disabled svg { - opacity: 0.6; -} - -.c0:hover { - background-color: #f3f4f6; - border-color: rgba(31,35,40,0.15); -} - -.c0:focus { - outline: solid 2px #0969da; -} - -.c0:active { - background-color: hsla(220,14%,94%,1); -} - -.c0:disabled { - color: #8c959f; - background-color: #f6f8fa; - border-color: rgba(31,35,40,0.15); -} - -.c1 { - border: 4px solid transparent; - margin-left: 12px; - border-top-color: currentcolor; - border-bottom-width: 0; - content: ''; - display: inline-block; - height: 0; - vertical-align: middle; - width: 0; -} - - - Hello! -
    -
     -`; - -exports[`Dropdown.Caret renders consistently 1`] = ` -.c0 { - border: 4px solid transparent; - margin-left: 12px; - border-top-color: currentcolor; - border-bottom-width: 0; - content: ''; - display: inline-block; - height: 0; - vertical-align: middle; - width: 0; -} - -
    -`; - -exports[`Dropdown.Item renders consistently 1`] = ` -.c0 { - display: block; - padding: 4px 10px 4px 15px; - overflow: hidden; - color: #1F2328; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 a { - color: #1F2328; - -webkit-text-decoration: none; - text-decoration: none; - display: block; - overflow: hidden; - color: #1F2328; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0:focus, -.c0 a:focus { - color: #ffffff; - -webkit-text-decoration: none; - text-decoration: none; - background-color: #0969da; -} - -.c0:hover, -.c0:hover a { - color: #ffffff; - -webkit-text-decoration: none; - text-decoration: none; - background-color: #0969da; - outline: none; -} - -
  • - Hello! -
    • -`; - -exports[`Dropdown.Menu renders consistently 1`] = ` -.c0 { - background-clip: padding-box; - background-color: #ffffff; - border: 1px solid #d0d7de; - border-radius: 6px; - box-shadow: 0 8px 24px rgba(140,149,159,0.2); - left: 0; - list-style: none; - margin-top: 2px; - padding: 5px 0 5px 0 !important; - position: absolute; - top: 100%; - width: 160px; - z-index: 100; - right: 0; - left: auto; -} - -.c0::before { - position: absolute; - display: inline-block; - content: ''; -} - -.c0::after { - position: absolute; - display: inline-block; - content: ''; -} - -.c0::before { - border: 8px solid transparent; - border-bottom-color: #ffffff; -} - -.c0::after { - border: 7px solid transparent; - border-bottom-color: #ffffff; -} - -.c0 > ul { - list-style: none; -} - -.c0::before { - top: -16px; - right: 9px; - left: auto; -} - -.c0::after { - top: -14px; - right: 10px; - left: auto; -} - -
      -
    • - 1 -
      • -
    • - 2 -
      • -
    • - 3 -
      • -
    -`; diff --git a/src/__tests__/__snapshots__/Flex.test.tsx.snap b/src/__tests__/__snapshots__/Flex.test.tsx.snap deleted file mode 100644 index 1059519e3ac..00000000000 --- a/src/__tests__/__snapshots__/Flex.test.tsx.snap +++ /dev/null @@ -1,130 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Flex renders consistently 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -
    -`; - -exports[`Flex respects alignContent 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-content: start; - -ms-flex-line-pack: start; - align-content: start; -} - -
    -`; - -exports[`Flex respects alignItems 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: start; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: start; -} - -
    -`; - -exports[`Flex respects flexDirection 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -
    -`; - -exports[`Flex respects flexWrap 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} - -
    -`; - -exports[`Flex respects justifyContent 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: start; - -ms-flex-pack: start; - justify-content: start; -} - -
    -`; - -exports[`Flex respects responsive display 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -@media screen and (min-width:544px) { - .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - } -} - -
    -`; diff --git a/src/__tests__/__snapshots__/Grid.test.tsx.snap b/src/__tests__/__snapshots__/Grid.test.tsx.snap deleted file mode 100644 index dceeb157bc1..00000000000 --- a/src/__tests__/__snapshots__/Grid.test.tsx.snap +++ /dev/null @@ -1,178 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Grid renders consistently 1`] = ` -.c0 { - display: grid; -} - -
    -`; - -exports[`Grid respects gridArea 1`] = ` -.c0 { - display: grid; - grid-area: sidebar; -} - -
    -`; - -exports[`Grid respects gridAutoColumns 1`] = ` -.c0 { - display: grid; - grid-auto-columns: 1fr; -} - -
    -`; - -exports[`Grid respects gridAutoFlow 1`] = ` -.c0 { - display: grid; - grid-auto-flow: row; -} - -
    -`; - -exports[`Grid respects gridAutoRows 1`] = ` -.c0 { - display: grid; - grid-auto-rows: 1fr; -} - -
    -`; - -exports[`Grid respects gridColumn 1`] = ` -.c0 { - display: grid; - grid-column: 1 / 2; -} - -
    -`; - -exports[`Grid respects gridColumnGap 1`] = ` -.c0 { - display: grid; - grid-column-gap: 8px; -} - -
    -`; - -exports[`Grid respects gridGap 1`] = ` -.c0 { - display: grid; - grid-gap: 4px; -} - -
    -`; - -exports[`Grid respects gridRow 1`] = ` -.c0 { - display: grid; - grid-row: 1 / 2; -} - -
    -`; - -exports[`Grid respects gridRowGap 1`] = ` -.c0 { - display: grid; - grid-row-gap: 8px; -} - -
    -`; - -exports[`Grid respects gridTemplateAreas 1`] = ` -.c0 { - display: grid; - grid-template-areas: sidebar main; -} - -
    -`; - -exports[`Grid respects gridTemplateColumns 1`] = ` -.c0 { - display: grid; - grid-template-columns: 200px 1fr; -} - -
    -`; - -exports[`Grid respects gridTemplateRows 1`] = ` -.c0 { - display: grid; - grid-template-rows: 200px 1fr; -} - -
    -`; - -exports[`Grid respects responsive display 1`] = ` -.c0 { - display: grid; -} - -@media screen and (min-width:544px) { - .c0 { - display: inline-grid; - } -} - -
    -`; diff --git a/src/__tests__/__snapshots__/Position.test.tsx.snap b/src/__tests__/__snapshots__/Position.test.tsx.snap deleted file mode 100644 index 5bcd50ad24c..00000000000 --- a/src/__tests__/__snapshots__/Position.test.tsx.snap +++ /dev/null @@ -1,44 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`position components Absolute renders consistently 1`] = ` -.c0 { - position: absolute; -} - -
    -`; - -exports[`position components Fixed renders consistently 1`] = ` -.c0 { - position: fixed; -} - -
    -`; - -exports[`position components Relative renders consistently 1`] = ` -.c0 { - position: relative; -} - -
    -`; - -exports[`position components Sticky renders consistently 1`] = ` -.c0 { - top: 0; - z-index: 1; - position: -webkit-sticky; - position: sticky; -} - -
    -`; diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap deleted file mode 100644 index 3fd7842da9c..00000000000 --- a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap +++ /dev/null @@ -1,471 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SelectMenu right-aligned modal has right: 0px 1`] = ` -.c1 { - position: relative; - display: inline-block; - padding: 6px 16px; - font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-radius: 6px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - font-size: 14px; - color: #24292f; - background-color: #f6f8fa; - border: 1px solid rgba(31,35,40,0.15); - box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); -} - -.c1:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c1:focus { - outline: none; -} - -.c1:disabled { - cursor: default; -} - -.c1:disabled svg { - opacity: 0.6; -} - -.c1:hover { - background-color: #f3f4f6; - border-color: rgba(31,35,40,0.15); -} - -.c1:focus { - outline: solid 2px #0969da; -} - -.c1:active { - background-color: hsla(220,14%,94%,1); -} - -.c1:disabled { - color: #8c959f; - background-color: #f6f8fa; - border-color: rgba(31,35,40,0.15); -} - -.c6 { - padding: 4px 16px; - margin: 0; - font-size: 12px; - font-weight: 600; - color: #656d76; - background-color: #f6f8fa; - border-bottom: 1px solid hsla(210,18%,87%,1); -} - -.c7 { - margin-top: -1px; - padding: 8px 16px; - font-size: 12px; - color: #656d76; - text-align: center; - border-top: 1px solid hsla(210,18%,87%,1); -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 16px; - overflow: hidden; - text-align: left; - cursor: pointer; - background-color: #ffffff; - border: 0; - border-bottom: 1px solid hsla(210,18%,87%,1); - color: #656d76; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 12px; - font-family: inherit; - width: 100%; -} - -.c5:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c5:focus { - outline: none; -} - -.c5[hidden] { - display: none !important; -} - -.c5 .SelectMenu-icon { - width: 16px; - margin-right: 8px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.c5 .SelectMenu-selected-icon { - visibility: hidden; - -webkit-transition: -webkit-transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear; - -webkit-transition: transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear; - transition: transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); -} - -.c5[aria-checked='true'] { - font-weight: 500; - color: #1F2328; -} - -.c5[aria-checked='true'] .SelectMenu-selected-icon { - visibility: visible; - -webkit-transition: -webkit-transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear; - -webkit-transition: transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear; - transition: transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.c4 { - position: relative; - padding: 0; - margin: 0; - -webkit-flex: auto; - -ms-flex: auto; - flex: auto; - overflow-x: hidden; - overflow-y: auto; - background-color: #ffffff; - -webkit-overflow-scrolling: touch; -} - -.c3 { - position: relative; - z-index: 99; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - max-height: 66%; - margin: auto 0; - overflow: hidden; - pointer-events: auto; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #ffffff; - border-radius: 6px; - box-shadow: 0 1px 0 rgba(31,35,40,0.04); - -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards; - animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards; - width: 300px; -} - -.c2 { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 99; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 16px; - pointer-events: none; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - content: ''; - background-color: rgba(31,35,40,0.5); -} - -.c0 > summary { - list-style: none; -} - -.c0 > summary::before { - display: none; -} - -.c0 > summary::-webkit-details-marker { - display: none; -} - -@media (min-width:544px) { - .c7 { - padding: 4px 8px; - } -} - -@media (min-width:544px) { - .c5 { - padding-top: 8px; - padding-bottom: 8px; - } -} - -@media (hover:hover) { - .c5:hover, - .c5:active, - .c5:focus { - background-color: rgba(234,238,242,0.5); - } -} - -@media (hover:none) { - .c5 { - -webkit-tap-highlight-color: rgba(175,184,193,0.5); - } - - .c5:focus, - .c5:active { - background-color: #f6f8fa; - } -} - -@media (hover:hover) { - .c4 .SelectMenuTab:focus { - background-color: #b6e3ff; - } - - .c4 .SelectMenuTab:not([aria-checked='true']):hover { - color: #1F2328; - background-color: #f6f8fa; - } - - .c4 .SelectMenuTab:not([aria-checked='true']):active { - color: #1F2328; - background-color: #f6f8fa; - } -} - -@media (min-width:544px) { - .c3 { - height: auto; - max-height: 350px; - margin: 4px 0 16px 0; - font-size: 12px; - border: 1px solid #d0d7de; - border-radius: 6px; - box-shadow: 0 1px 0 rgba(31,35,40,0.04); - } -} - -@media (min-width:544px) { - .c2::before { - display: none; - } -} - -@media (min-width:544px) { - .c2 { - position: absolute; - top: auto; - right: 0; - bottom: auto; - left: auto; - padding: 0; - } -} - -
    - - Projects - - -
    -`; diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 7bf9432ec5d..377b1c321ef 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -98,10 +98,8 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` exports[`@primer/react/decprecated should not update exports without a semver change 1`] = ` [ - "Absolute", "ActionList", "ActionMenu", - "BorderBox", "Button", "ButtonClose", "ButtonDanger", @@ -109,24 +107,10 @@ exports[`@primer/react/decprecated should not update exports without a semver ch "ButtonOutline", "ButtonPrimary", "ButtonTableList", - "ChoiceFieldset", - "ChoiceInputField", - "Dropdown", "DropdownButton", "DropdownMenu", "FilterList", "FilteredSearch", - "Fixed", - "Flex", - "FormGroup", - "Grid", - "InputField", - "Item", - "Label", - "Position", - "Relative", - "SelectMenu", - "Sticky", ] `; 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/ChoiceInputField.test.tsx b/src/__tests__/deprecated/ChoiceInputField.test.tsx deleted file mode 100644 index 116bcf60e48..00000000000 --- a/src/__tests__/deprecated/ChoiceInputField.test.tsx +++ /dev/null @@ -1,225 +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} - - - {/* eslint-disable-next-line github/a11y-aria-label-is-well-formatted */} - - - - , - ) - - 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/__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/InputField.test.tsx b/src/__tests__/deprecated/InputField.test.tsx deleted file mode 100644 index 5a6fcae7cef..00000000000 --- a/src/__tests__/deprecated/InputField.test.tsx +++ /dev/null @@ -1,236 +0,0 @@ -import React from 'react' -import {render} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' -import {Autocomplete, SSRProvider, TextInput, TextInputWithTokens} from '../../' -import InputField from '../../deprecated/InputField' -expect.extend(toHaveNoViolations) - -const TEXTINPUTFIELD_LABEL_TEXT = 'Name' -const TEXTINPUTFIELD_LABEL_TEXT_WITH_ASTERISK = 'Name *' -const TEXTINPUTFIELD_CAPTION_TEXT = 'Hint: your first name' -const TEXTINPUTFIELD_SUCCESS_TEXT = 'This name is valid' -const TEXTINPUTFIELD_ERROR_TEXT = 'This name is invalid' - -describe('InputField', () => { - describe('snapshots', () => { - it('renders with a hidden label', () => { - const {getByLabelText, getByText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByLabelText(TEXTINPUTFIELD_LABEL_TEXT) - const label = getByText(TEXTINPUTFIELD_LABEL_TEXT) - - expect(input).toBeDefined() - expect(label).toBeDefined() - }) - it('renders with a custom ID', () => { - const {getByLabelText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByLabelText(TEXTINPUTFIELD_LABEL_TEXT) - - expect(input.getAttribute('id')).toBe('customId') - }) - it('renders as disabled', () => { - const {getByLabelText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByLabelText(TEXTINPUTFIELD_LABEL_TEXT) - - expect(input.getAttribute('disabled')).not.toBeNull() - }) - it('renders as required', () => { - const {getByRole} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByRole('textbox', {name: TEXTINPUTFIELD_LABEL_TEXT_WITH_ASTERISK}) - - expect(input.getAttribute('required')).not.toBeNull() - }) - it('renders with a caption', () => { - const {getByText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - {TEXTINPUTFIELD_CAPTION_TEXT} - - , - ) - - const caption = getByText(TEXTINPUTFIELD_CAPTION_TEXT) - - expect(caption).toBeDefined() - }) - it('renders with a successful validation message', () => { - const {getByText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - {TEXTINPUTFIELD_SUCCESS_TEXT} - - , - ) - - const validationMessage = getByText(TEXTINPUTFIELD_SUCCESS_TEXT) - - expect(validationMessage).toBeDefined() - }) - it('renders with an error validation message', () => { - const {getByText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - {TEXTINPUTFIELD_ERROR_TEXT} - - , - ) - - const validationMessage = getByText(TEXTINPUTFIELD_ERROR_TEXT) - - expect(validationMessage).toBeDefined() - }) - it('renders with the input as a TextInputWithTokens', () => { - const onRemoveMock = jest.fn() - const {getByLabelText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - - , - ) - - const input = getByLabelText(TEXTINPUTFIELD_LABEL_TEXT) - - expect(input).toBeDefined() - }) - it('renders with the input as an Autocomplete', () => { - const {getByLabelText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - - - - , - ) - - const input = getByLabelText(TEXTINPUTFIELD_LABEL_TEXT) - - expect(input).toBeDefined() - }) - }) - - describe('ARIA attributes', () => { - it('associates the label with the input', () => { - const {getByLabelText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - - , - ) - - const inputNode = getByLabelText(TEXTINPUTFIELD_LABEL_TEXT) - expect(inputNode).toBeDefined() - }) - it('associates caption text with the input', () => { - const fieldId = 'captionedInput' - const {getByLabelText, getByText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - {TEXTINPUTFIELD_CAPTION_TEXT} - - , - ) - - const inputNode = getByLabelText(TEXTINPUTFIELD_LABEL_TEXT) - const captionNode = getByText(TEXTINPUTFIELD_CAPTION_TEXT) - - expect(captionNode.getAttribute('id')).toBe(`${fieldId}-caption`) - expect(inputNode.getAttribute('aria-describedby')).toBe(`${fieldId}-caption`) - }) - it('associates validation text with the input', () => { - const fieldId = 'validatedInput' - const {getByLabelText, getByText} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - {TEXTINPUTFIELD_SUCCESS_TEXT} - - , - ) - - const inputNode = getByLabelText(TEXTINPUTFIELD_LABEL_TEXT) - const validationNode = getByText(TEXTINPUTFIELD_SUCCESS_TEXT) - - expect(validationNode.getAttribute('id')).toBe(`${fieldId}-validationMsg`) - expect(inputNode.getAttribute('aria-describedby')).toBe(`${fieldId}-validationMsg`) - }) - }) - - it('should have no axe violations', async () => { - const {container} = render( - - - {TEXTINPUTFIELD_LABEL_TEXT} - - {TEXTINPUTFIELD_CAPTION_TEXT} - - , - ) - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) diff --git a/src/__tests__/deprecated/Label.test.tsx b/src/__tests__/deprecated/Label.test.tsx deleted file mode 100644 index 108eb2c51d5..00000000000 --- a/src/__tests__/deprecated/Label.test.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' -import Label from '../../deprecated/Label' -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('Label', () => { - behavesAsComponent({Component: Label}) - - checkExports('deprecated/Label', { - default: Label, - }) - - it('renders a ', () => { - expect(render(