diff --git a/.changeset/actionlist2-actionmenu2-prefix-types.md b/.changeset/actionlist2-actionmenu2-prefix-types.md new file mode 100644 index 00000000000..b7d4cd11224 --- /dev/null +++ b/.changeset/actionlist2-actionmenu2-prefix-types.md @@ -0,0 +1,21 @@ +--- +'@primer/react': major +--- + +`ActionList2` exported types are now prefixed with `ActionList`: + +``` +ListProps → ActionListProps +GroupProps → ActionListGroupProps +ItemProps → ActionListItemProps +DescriptionProps → ActionListDescriptionProps +LeadingVisualProps → ActionListLeadingVisualProps, +TrailingVisualProps → ActionListTrailingVisualProps +``` + +`ActionMenu2` exported types are now prefixed with `ActionMenu`: + +``` +MenuButtonProps → ActionMenuButtonProps +MenuAnchorProps → ActionMenuAnchorProps +``` diff --git a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md new file mode 100644 index 00000000000..8aa0e6f82e0 --- /dev/null +++ b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md @@ -0,0 +1,154 @@ +--- +'@primer/react': major +--- + +### ActionList + +ActionList has been rewritten with a composable API, design updates and accessibility fixes. + +See full list of props and examples: https://primer.style/react/ActionList + + + + + + + + + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + + New file + Copy link + Edit file + + Delete file + +``` + +
+ +```jsx + , + text: 'mona', + description: 'Monalisa Octocat', + descriptionVariant: 'block' + }, + { + key: '2', + leadingVisual: GearIcon, + text: 'View Settings', + trailingVisual: ArrowRightIcon + } + ]} +/> +``` + + + +```jsx + + + + + + github/primer + + + + + + mona + Monalisa Octocat + + + + + + View settings + + + + + +``` + +
+ +```jsx + +``` + + + +```jsx + + + repo:github/github + + + + + Table + Board Description> + + + + View settings + +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {ActionList} from '@primer/react/deprecated' +``` + +You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. diff --git a/.changeset/empty-pillows-hunt.md b/.changeset/empty-pillows-hunt.md new file mode 100644 index 00000000000..922ed22e895 --- /dev/null +++ b/.changeset/empty-pillows-hunt.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Prepare library for `v35` diff --git a/.changeset/hip-buses-peel.md b/.changeset/hip-buses-peel.md new file mode 100644 index 00000000000..8f801600bcd --- /dev/null +++ b/.changeset/hip-buses-peel.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Adds CheckboxGroup and RadioGroup components to replace the ChoiceFieldset component diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md new file mode 100644 index 00000000000..e29b04bf45b --- /dev/null +++ b/.changeset/nervous-pets-sleep.md @@ -0,0 +1,116 @@ +--- +'@primer/react': major +--- + +![image](https://user-images.githubusercontent.com/2313998/155632630-60822d7b-6053-480d-925d-cea4d3b04919.png) + +The `CheckboxGroup` and `RadioGroup` components will be used to deprecate the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`. + +`CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology. + + + + + + + + + +
Before After
+ +```jsx +import {ChoiceFieldset} from "@primer/react"; + +// Multi-select + + Prefered Primer component interface + + + Figma library + Primer CSS + Primer React components + Primer ViewComponents + + + +// Single select + + Prefered Primer component interface + + + Figma library + Primer CSS + Primer React components + Primer ViewComponents + + + +``` + + + +```jsx +import {FormGroup, Checkbox} from "@primer/react"; + +// Multi-select + + Prefered Primer component interface + + + Figma + + + + CSS + + + + Primer React components + + + + Primer ViewComponents + + + +// Single select + + Prefered Primer component interface + + + Figma + + + + CSS + + + + Primer React components + + + + Primer ViewComponents + + +``` + +
+ + + + + +
Migration steps to CheckboxGroup and RadioGroup
+ +Upgrade to the new `CheckboxGroup` and `RadioGroup` components by referring to the examples in our documentation: [CheckboxGroup](https://primer.style/react/CheckboxGroup), [RadioGroup](https://primer.style/react/RadioGroup). + +or + +Continue using the deprecated `ChoiceFieldset` component : + +```js +import {ChoiceFieldset} from '@primer/react/deprecated' // change your import statements +``` + +
diff --git a/.changeset/odd-apes-guess.md b/.changeset/odd-apes-guess.md new file mode 100644 index 00000000000..e15f28b4809 --- /dev/null +++ b/.changeset/odd-apes-guess.md @@ -0,0 +1,12 @@ +--- +"@primer/react": major +--- + +`PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. + +To upgrade, rewrite your imports accordingly: + +```diff +- import {PageLayout} from '@primer/react/drafts' ++ import {PageLayout} from '@primer/react' +``` diff --git a/.changeset/smooth-cameras-prove.md b/.changeset/smooth-cameras-prove.md new file mode 100644 index 00000000000..9b6fbdbdc47 --- /dev/null +++ b/.changeset/smooth-cameras-prove.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +Move deprecated components to deprecated folder diff --git a/deprecated/package.json b/deprecated/package.json new file mode 100644 index 00000000000..e7a211fd303 --- /dev/null +++ b/deprecated/package.json @@ -0,0 +1,9 @@ +{ + "_comment1": "this is required only for typescript. once this is fixed https://github.com/microsoft/TypeScript/issues/33079 we can remove this hack", + "name": "@primer/react/deprecated", + "types": "../lib-esm/deprecated/index.d.ts", + "main": "../lib-esm/deprecated/index.js", + "type": "module", + "sideEffects": false + } + \ No newline at end of file diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index 7eb5066cca2..be09bd7efee 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -3,98 +3,447 @@ componentId: action_list title: ActionList status: Alpha source: https://github.com/primer/react/tree/main/src/ActionList +storybook: '/react/storybook?path=/story/composite-components-actionlist' +description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu. --- -An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`. +import {Avatar} from '@primer/react' +import {ActionList} from '@primer/react' +import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' +import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' -## Minimal example + + + + + + + github.com/primer + + A React implementation of GitHub's Primer Design System + + + + + + + mona + Monalisa Octocat + + + + + + 4 vulnerabilities + + + + + + + +```js +import {ActionList} from '@primer/react' +``` + +## Examples + +### Minimal example ```jsx live - + + New file + Copy link + Edit file + + Delete file + ``` -## Example with grouped items +### With leading visual + +Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area. + ```jsx live - + + + + github.com/primer + + + + 4 vulnerabilities + + + + mona + + + ``` -## Example with custom item renderer - -```jsx - - }, - { - text: 'React Router link', - renderItem: props => - }, - { - text: 'NextJS style', - renderItem: props => ( - - - - ) - } - ]} -/> +### With trailing visual + +Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does. + +```jsx live + + + New file + ⌘ + N + + + Copy link + ⌘ + C + + + Edit file + ⌘ + E + + + Delete file + ⌫ + + +``` + +### With description and dividers + +Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present. + +```jsx live + + + + + + mona + Monalisa Octocat + + + + + + hubot + Hubot + + + + + + primer-css + GitHub Design Systems Bot + + +``` + +### With links + +When you want to add links to the List instead of actions, use `ActionList.LinkItem` + + +```jsx live + + + + + + github/primer + + + + + + MIT License + + + + + + 1.4k stars + + +``` + +### With groups + +```javascript live noinline +const SelectFields = () => { + const [options, setOptions] = React.useState([ + {text: 'Status', selected: true}, + {text: 'Stage', selected: true}, + {text: 'Assignee', selected: true}, + {text: 'Team', selected: true}, + {text: 'Estimate', selected: false}, + {text: 'Due Date', selected: false} + ]) + + const visibleOptions = options.filter(option => option.selected) + const hiddenOptions = options.filter(option => !option.selected) + + const toggle = text => { + setOptions( + options.map(option => { + if (option.text === text) option.selected = !option.selected + return option + }) + ) + } + + return ( + + + {visibleOptions.map(option => ( + toggle(option.text)}> + {option.text} + + ))} + + + {hiddenOptions.map((option, index) => ( + toggle(option.text)}> + {option.text} + + ))} + {hiddenOptions.length === 0 && No hidden fields} + + + ) +} + +render() ``` ## Props -| Name | Type | Default | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ | -| items | `(ItemProps & Omit, keyof ItemProps>) \| ((Partial & {renderItem: RenderItemFn}) & {key?: Key})` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | -| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | -| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | -| showItemDividers | `boolean` | `false` | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider` | +### ActionList + + + + + inset children are offset (vertically and horizontally) from list edges.{' '} + full children are flush (vertically and horizontally) with list edges + + } + /> + + + AriaRole + } + description={ + <> + ARIA role describing the function of the list. listbox and{' '} + menu are a common values. + + } + /> + + + +### ActionList.Item + + + + + danger indicates that the item is destructive. + + } + /> + + + + AriaRole + } + description={ + <> + ARIA role describing the function of the item. option is a common value. + + } + /> + + + +### ActionList.LinkItem + + + + MDN + } + /> + + +### ActionList.LeadingVisual + + + + + + +### ActionList.TrailingVisual + + + + + + +### ActionList.Description + + + + + inline descriptions are positioned beside primary text. block{' '} + descriptions are positioned below primary text. + + } + /> + + + +### ActionList.Group + + + + + + + inline descriptions are positioned beside primary text. block{' '} + descriptions are positioned below primary text. + + } + /> + + Set selectionVariant at the group level. + + } + /> + AriaRole + } + description={ + <> + ARIA role describing the function of the list inside the group. listbox and{' '} + menu are a common values. + + } + /> + + + +## Status + + + +## Further reading + +- [Interface guidelines: Action List](https://primer.style/design/components/action-list) + +## Related components + +- [ActionMenu](/drafts/ActionMenu2) +- [DropdownMenu](/DropdownMenu) +- [SelectPanel](/SelectPanel) diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx new file mode 100644 index 00000000000..61198cd488c --- /dev/null +++ b/docs/content/CheckboxGroup.mdx @@ -0,0 +1,317 @@ +--- +title: CheckboxGroup +description: A `CheckboxGroup` is used to render a set of checkboxes to let users select one or more options +status: Alpha +source: https://github.com/primer/react/blob/main/src/CheckboxGroup/CheckboxGroup.tsx +storybook: '/react/storybook/?path=/story/forms-checkboxgroup-examples--basic' +--- + +import {CheckboxGroup, Checkbox, Box} from '@primer/components' +import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' +import {ComponentChecklist} from '../src/component-checklist' + +## Examples + +### Basic + +```jsx live + + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + + +``` + +### Using onChange handlers + +```javascript live noinline +const WithOnChangeHandlers = () => { + const [selectedCheckboxValues, setSelectedCheckboxValues] = React.useState(['one', 'two']) + const [lastSelectedCheckboxValue, setLastSelectedCheckboxValue] = React.useState() + + const handleCheckboxGroupChange = (selectedValues, e) => { + setSelectedCheckboxValues(selectedValues) + setLastSelectedCheckboxValue(e.currentTarget.value) + } + + const handleChoiceOneChange = e => { + alert('Choice one has its own handler') + } + + return ( + + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + + + {Boolean(selectedCheckboxValues.length) && ( +
The selected checkbox values are {selectedCheckboxValues.join(', ')}
+ )} + {Boolean(lastSelectedCheckboxValue) &&
The last affected checkbox value is {lastSelectedCheckboxValue}
} + + ) +} + +render() +``` + +### Disabled + +```jsx live + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + +``` + +### Required + +```jsx live + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + +``` + +### With validation + +```jsx live + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + Your choices are wrong + +``` + +### With caption + +```jsx live + + Choices + You can pick any or all of these choices + + + Choice one + + + + Choice two + + + + Choice three + + +``` + +### A visually hidden label + +```jsx live + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + +``` + +### With an external label + +```jsx live +<> + + Choices + + + + + Choice one + + + + Choice two + + + + Choice three + + + +``` + +## Props + +### CheckboxGroup + + + + + + + The unique identifier for this input group. Used to associate the label, validation text, and caption text.{' '} +
You may want a custom ID to make it easier to select elements in integration tests. + + } + /> + + + + + +### CheckboxGroup.Label + +A title for the set of choices. If a `CheckboxGroup.Label` is not passed as a child, you must pass the external title's ID to the `aria-describedby` prop on `CheckboxGroup` + + + + + + +### CheckboxGroup.Description + + + + + + +### CheckboxGroup.Validation + +If the user's selection has been flagged during validation, `CheckboxGroup.Validation` may be used to render contextual validation information to help the user complete their task + + + + + + + +## Status + + diff --git a/docs/content/ChoiceFieldset.mdx b/docs/content/ChoiceFieldset.mdx index fa2e9755183..b82b9ce7633 100644 --- a/docs/content/ChoiceFieldset.mdx +++ b/docs/content/ChoiceFieldset.mdx @@ -1,6 +1,6 @@ --- title: ChoiceFieldset -status: Alpha +status: Deprecated source: https://github.com/primer/react/blob/main/src/ChoiceFieldset/ChoiceFieldset.tsx storybook: '/react/storybook/?path=/story/forms-choicefieldset--radio-group' --- @@ -11,11 +11,15 @@ import {ComponentChecklist} from '../src/component-checklist' 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 +```jsx live deprecated Color mode @@ -29,7 +33,7 @@ A `ChoiceFieldset` is a controlled component that is used to render a related se ### Using an onSelect handler -```javascript live noinline +```javascript live noinline deprecated const WithOnSelectHandler = () => { const [selectedChoices, setSelectedChoices] = React.useState([]) const choices = [ @@ -90,7 +94,7 @@ render() ### Checkbox group -```jsx live +```jsx live deprecated Prefered Primer component interface @@ -105,7 +109,7 @@ render() ### Disabled -```jsx live +```jsx live deprecated Color mode @@ -119,7 +123,7 @@ render() ### Required -```jsx live +```jsx live deprecated Color mode @@ -133,7 +137,7 @@ render() ### With pre-selected choices -```jsx live +```jsx live deprecated Prefered Primer component interface @@ -148,7 +152,7 @@ render() ### With validation -```javascript live noinline +```javascript live noinline deprecated const choices = [ { value: 'figma', @@ -218,7 +222,7 @@ render() ### A visually hidden legend -```jsx live +```jsx live deprecated Color mode @@ -232,7 +236,7 @@ render() ### With a ChoiceFieldset.Description -```jsx live +```jsx live deprecated Notification preferences @@ -267,7 +271,7 @@ render() ### With one disabled item -```jsx live +```jsx live deprecated Color mode @@ -283,7 +287,7 @@ render() ### Items with a caption and a leading visual -```jsx live +```jsx live deprecated Notification preferences diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx index 28660dde034..7be8334832a 100644 --- a/docs/content/FormControl.mdx +++ b/docs/content/FormControl.mdx @@ -7,7 +7,18 @@ source: https://github.com/primer/react/blob/main/src/FormControl/FormControl.ts storybook: '/react/storybook?path=/story/forms-inputfield--text-input-field' --- -import {FormControl, TextInputWithTokens, Autocomplete, Select, Textarea, Checkbox, Radio, Text} from '@primer/react' +import { + FormControl, + TextInputWithTokens, + Autocomplete, + Select, + Textarea, + Checkbox, + CheckboxGroup, + Radio, + RadioGroup, + Text +} from '@primer/react' import {MarkGithubIcon} from '@primer/octicons-react' ## Examples @@ -83,27 +94,38 @@ render(DifferentInputs) ### With checkbox and radio inputs ```jsx live - -
+ + + Checkboxes + + + Checkbox one + - Checkbox option one - + + Checkbox two - Checkbox option two - + + Checkbox three -
-
+ + + + Radios - Radio option one - + + Radio one - Radio option two - + + Radio two -
+ + + Radio three + + ``` @@ -280,8 +302,8 @@ A `FormControl.Label` must be passed for the field to be accessible to assistive diff --git a/docs/content/drafts/PageLayout.mdx b/docs/content/PageLayout.mdx similarity index 97% rename from docs/content/drafts/PageLayout.mdx rename to docs/content/PageLayout.mdx index a04cfc87307..64d439c49d3 100644 --- a/docs/content/drafts/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -7,7 +7,7 @@ storybook: https://primer.style/react/storybook?path=/story/layout-pagelayout--p --- ```js -import {PageLayout} from '@primer/react/drafts' +import {PageLayout} from '@primer/react' ``` ## Examples @@ -20,7 +20,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### Default -```jsx live drafts +```jsx live @@ -39,7 +39,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### With dividers -```jsx live drafts +```jsx live @@ -58,7 +58,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### With pane on left -```jsx live drafts +```jsx live @@ -77,7 +77,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### With condensed spacing -```jsx live drafts +```jsx live @@ -96,7 +96,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo ### Without header or footer -```jsx live drafts +```jsx live diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx new file mode 100644 index 00000000000..e81af8f35df --- /dev/null +++ b/docs/content/RadioGroup.mdx @@ -0,0 +1,316 @@ +--- +title: RadioGroup +description: A `RadioGroup` is used to render a set of radio inputs to let users select a single option +status: Alpha +source: https://github.com/primer/react/blob/main/src/RadioGroup/RadioGroup.tsx +storybook: '/react/storybook/?path=/story/forms-radiogroup-examples--basic' +--- + +import {RadioGroup, Radio, Box} from '@primer/components' +import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' +import {ComponentChecklist} from '../src/component-checklist' + +## Examples + +### Basic + +```jsx live + + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + + +``` + +### Using onChange handlers + +```javascript live noinline +const WithOnChangeHandlers = () => { + const [selectedRadioValue, setSelectedCheckboxValues] = React.useState('two') + const [selectedRadioId, setSelectedRadioId] = React.useState() + + const handleRadioGroupChange = (selectedValue, e) => { + setSelectedCheckboxValues(selectedValue) + setSelectedRadioId(e.currentTarget.id) + } + + const handleChoiceOneChange = e => { + alert('Choice one has its own handler') + } + + return ( + + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + + + {selectedRadioValue &&
The selected radio value is {selectedRadioValue}
} + {selectedRadioId &&
The last selected radio ID is {selectedRadioId}
} + + ) +} + +render() +``` + +### Disabled + +```jsx live + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + +``` + +### Required + +```jsx live + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + +``` + +### With validation + +```jsx live + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + Your choices are wrong + +``` + +### With caption + +```jsx live + + Choices + You can pick any of these choices + + + Choice one + + + + Choice two + + + + Choice three + + +``` + +### A visually hidden label + +```jsx live + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + +``` + +### With an external label + +```jsx live +<> + + Choices + + + + + Choice one + + + + Choice two + + + + Choice three + + + +``` + +## Props + +### RadioGroup + + + + + + + The unique identifier for this input group. Used to associate the label, validation text, and caption text.{' '} +
You may want a custom ID to make it easier to select elements in integration tests. + + } + /> + + + + + + +### RadioGroup.Label + +A title for the set of choices. If a `RadioGroup.Label` is not passed as a child, you must pass the external title's ID to the `aria-describedby` prop on `RadioGroup` + + + + + + +### RadioGroup.Description + + + + + + +### RadioGroup.Validation + +If the user's selection has been flagged during validation, `RadioGroup.Validation` may be used to render contextual validation information to help the user complete their task + + + + + + + +## Status + + diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx new file mode 100644 index 00000000000..1bcf8880fc0 --- /dev/null +++ b/docs/content/deprecated/ActionList.mdx @@ -0,0 +1,136 @@ +--- +componentId: action_list +title: ActionList +status: Deprecated +source: https://github.com/primer/react/tree/main/src/deprecated/ActionList +--- + +An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`. + +## Deprecation + +Use [new version of ActionList](/ActionList) with composable API, design updates and accessibility fixes. + +**Before** + +```jsx + +``` + +**After** + +```jsx + + New file + Copy link + Edit file + + Delete file + +``` + +Or continue using deprecated API: + +```js +import {ActionList} from '@primer/react/deprecated' +``` + +## Minimal example + +```jsx live deprecated + +``` + +## Example with grouped items + +```jsx live deprecated + +``` + +## Example with custom item renderer + +```jsx deprecated + + }, + { + text: 'React Router link', + renderItem: props => + }, + { + text: 'NextJS style', + renderItem: props => ( + + + + ) + } + ]} +/> +``` + +## Props + +| Name | Type | Default | Description | +| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ | +| items | `(ItemProps & Omit, keyof ItemProps>) \| ((Partial & {renderItem: RenderItemFn}) & {key?: Key})` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | +| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | +| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | +| showItemDividers | `boolean` | `false` | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider` | diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md index 45a206fd88e..2be97d6e22a 100644 --- a/docs/content/deprecated/BorderBox.md +++ b/docs/content/deprecated/BorderBox.md @@ -12,13 +12,13 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated Item 1 ``` **After** -```jsx +```jsx deprecated Item 1 @@ -26,7 +26,7 @@ Use [Box](/Box) instead. ## Default example -```jsx live +```jsx live deprecated This is a BorderBox ``` diff --git a/docs/content/deprecated/Dialog.md b/docs/content/deprecated/Dialog.md index aafa7065703..dcd79b30623 100644 --- a/docs/content/deprecated/Dialog.md +++ b/docs/content/deprecated/Dialog.md @@ -9,7 +9,7 @@ Use [Dialog2](/Dialog2) instead. **Before** -```jsx +```jsx deprecated setOpen(false)} aria-labelledby="header-id"> Title @@ -20,7 +20,7 @@ Use [Dialog2](/Dialog2) instead. **After** -```jsx +```jsx deprecated { open && ( {([isOpen, setIsOpen]) => { const returnFocusRef = React.useRef(null) @@ -87,7 +87,7 @@ If you're running into z-index issues or are rendering the component inside of a You can also pass any non-text content into the header: -```jsx live +```jsx deprecated live {([isOpen, setIsOpen]) => { const returnFocusRef = React.useRef(null) diff --git a/docs/content/deprecated/Dropdown.md b/docs/content/deprecated/Dropdown.md index b53bb11d42a..f08fd426d2f 100644 --- a/docs/content/deprecated/Dropdown.md +++ b/docs/content/deprecated/Dropdown.md @@ -5,7 +5,7 @@ status: Deprecated ## Deprecation -Use [DropdownMenu](/DropdownMenu) instead. +Use [ActionMenu](/ActionMenu) instead. --- @@ -17,7 +17,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## Default example -```jsx live +```jsx live deprecated Dropdown @@ -30,7 +30,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## With custom button -```jsx live +```jsx live deprecated Dropdown diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md index 67e7fa385b7..5ad6838dfc8 100644 --- a/docs/content/deprecated/Flex.md +++ b/docs/content/deprecated/Flex.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated Item 1 @@ -22,7 +22,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated Item 1 @@ -32,7 +32,7 @@ Use [Box](/Box) instead. ## Default example -```jsx live +```jsx deprecated live diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md index 305bed992be..905630fe9e7 100644 --- a/docs/content/deprecated/Grid.md +++ b/docs/content/deprecated/Grid.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated 1 @@ -25,7 +25,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated 1 @@ -38,7 +38,7 @@ Use [Box](/Box) instead. ## Default example -```jsx live +```jsx deprecated live 1 diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md index 74212be10fa..fb2006117ca 100644 --- a/docs/content/deprecated/Position.md +++ b/docs/content/deprecated/Position.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated <> ... ... @@ -24,7 +24,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated <> ... ... @@ -36,7 +36,7 @@ Use [Box](/Box) instead. ## Default examples -```jsx live +```jsx deprecated live Relative + Absolute diff --git a/docs/content/deprecated/SelectMenu.md b/docs/content/deprecated/SelectMenu.md index faea3452588..b6fbea07843 100644 --- a/docs/content/deprecated/SelectMenu.md +++ b/docs/content/deprecated/SelectMenu.md @@ -3,13 +3,19 @@ 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 live +```jsx deprecated live @@ -28,7 +34,7 @@ Several additional components exist to provide even more functionality: `SelectM Main wrapper component for select menu. -```jsx +```jsx deprecated {/* all other sub components are wrapped here*/} ``` @@ -56,7 +62,7 @@ SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.ht ### Example Usage -```jsx +```jsx deprecated import {SelectMenu, Button} from `@primer/react` import React, {useContext} from 'react' @@ -83,7 +89,7 @@ const MyButton = () => { Used to wrap the content in a `SelectMenu`. -```jsx +```jsx deprecated {/* all menu content is wrapped in the modal*/} ``` @@ -91,7 +97,7 @@ Used to wrap the content in a `SelectMenu`. 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 live +```jsx deprecated live @@ -120,7 +126,7 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility 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 +```jsx deprecated {/* all menu list items are wrapped in the list*/} ``` @@ -136,7 +142,7 @@ Individual items in a select menu. SelectMenu.Item renders an anchor tag by defa 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 +```jsx deprecated {/* wraps an individual list item*/} @@ -154,7 +160,7 @@ You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#t 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 live +```jsx deprecated live @@ -192,7 +198,7 @@ Each `Select.Menu` tab will need to have an `index` prop. The first tab should b If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`. -```jsx live +```jsx deprecated live @@ -227,7 +233,7 @@ Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the ` The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks. -```jsx +```jsx deprecated <> @@ -249,7 +255,7 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify **Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary. -```jsx +```jsx deprecated {/* Wraps content for each tab */} ``` @@ -264,7 +270,7 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`. -```jsx live +```jsx deprecated live @@ -290,7 +296,7 @@ Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.Lis Use a `SelectMenu.Footer` to add content to the bottom of the select menu. -```jsx live +```jsx deprecated live @@ -316,7 +322,7 @@ Use a `SelectMenu.Footer` to add content to the bottom of the select menu. Use a `SelectMenu.Header` to add a header to the top of the select menu content. -```jsx live +```jsx deprecated live @@ -344,7 +350,7 @@ Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the Sel **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 live +```jsx deprecated live diff --git a/docs/content/drafts/ActionList2.mdx b/docs/content/drafts/ActionList2.mdx deleted file mode 100644 index bf842be1fe6..00000000000 --- a/docs/content/drafts/ActionList2.mdx +++ /dev/null @@ -1,449 +0,0 @@ ---- -componentId: action_list2 -title: ActionList v2 -status: Alpha -source: https://github.com/primer/react/tree/main/src/ActionList2 -storybook: '/react/storybook?path=/story/composite-components-actionlist2' -description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu. ---- - -import {Avatar} from '@primer/react' -import {ActionList} from '@primer/react/drafts' -import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' -import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' - - - - - - - - github.com/primer - - A React implementation of GitHub's Primer Design System - - - - - - - mona - Monalisa Octocat - - - - - - 4 vulnerabilities - - - - - - - -```js -import {ActionList} from '@primer/react/drafts' -``` - -## Examples - -### Minimal example - -```jsx live drafts - - New file - Copy link - Edit file - - Delete file - -``` - -### With leading visual - -Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area. - - -```jsx live drafts - - - - github.com/primer - - - - 4 vulnerabilities - - - - mona - - - -``` - -### With trailing visual - -Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does. - -```jsx live drafts - - - New file - ⌘ + N - - - Copy link - ⌘ + C - - - Edit file - ⌘ + E - - - Delete file - ⌫ - - -``` - -### With description and dividers - -Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present. - -```jsx live drafts - - - - - - mona - Monalisa Octocat - - - - - - hubot - Hubot - - - - - - primer-css - GitHub Design Systems Bot - - -``` - -### With links - -When you want to add links to the List instead of actions, use `ActionList.LinkItem` - - -```jsx live drafts - - - - - - github/primer - - - - - - MIT License - - - - - - 1.4k stars - - -``` - -### With groups - -```javascript live noinline drafts -const SelectFields = () => { - const [options, setOptions] = React.useState([ - {text: 'Status', selected: true}, - {text: 'Stage', selected: true}, - {text: 'Assignee', selected: true}, - {text: 'Team', selected: true}, - {text: 'Estimate', selected: false}, - {text: 'Due Date', selected: false} - ]) - - const visibleOptions = options.filter(option => option.selected) - const hiddenOptions = options.filter(option => !option.selected) - - const toggle = text => { - setOptions( - options.map(option => { - if (option.text === text) option.selected = !option.selected - return option - }) - ) - } - - return ( - - - {visibleOptions.map(option => ( - toggle(option.text)}> - {option.text} - - ))} - - - {hiddenOptions.map((option, index) => ( - toggle(option.text)}> - {option.text} - - ))} - {hiddenOptions.length === 0 && No hidden fields} - - - ) -} - -render() -``` - -## Props - -### ActionList - - - - - inset children are offset (vertically and horizontally) from list edges.{' '} - full children are flush (vertically and horizontally) with list edges - - } - /> - - - AriaRole - } - description={ - <> - ARIA role describing the function of the list. listbox and{' '} - menu are a common values. - - } - /> - - - -### ActionList.Item - - - - - danger indicates that the item is destructive. - - } - /> - - - - AriaRole - } - description={ - <> - ARIA role describing the function of the item. option is a common value. - - } - /> - - - -### ActionList.LinkItem - - - - MDN - } - /> - - -### ActionList.LeadingVisual - - - - - - -### ActionList.TrailingVisual - - - - - - -### ActionList.Description - - - - - inline descriptions are positioned beside primary text. block{' '} - descriptions are positioned below primary text. - - } - /> - - - -### ActionList.Group - - - - - - - inline descriptions are positioned beside primary text. block{' '} - descriptions are positioned below primary text. - - } - /> - - Set selectionVariant at the group level. - - } - /> - AriaRole - } - description={ - <> - ARIA role describing the function of the list inside the group. listbox and{' '} - menu are a common values. - - } - /> - - - -## Status - - - -## Further reading - -- [Interface guidelines: Action List](https://primer.style/design/components/action-list) - -## Related components - -- [ActionMenu](/drafts/ActionMenu2) -- [DropdownMenu](/DropdownMenu) -- [SelectPanel](/SelectPanel) diff --git a/docs/content/drafts/ActionMenu2.mdx b/docs/content/drafts/ActionMenu2.mdx index 4ccc9b3c5a3..5a1af58d8da 100644 --- a/docs/content/drafts/ActionMenu2.mdx +++ b/docs/content/drafts/ActionMenu2.mdx @@ -7,8 +7,8 @@ storybook: '/react/storybook?path=/story/composite-components-actionmenu2' description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. --- -import {Box, Avatar} from '@primer/react' -import {ActionMenu, ActionList} from '@primer/react/drafts' +import {Box, Avatar, ActionList} from '@primer/react' +import {ActionMenu} from '@primer/react/drafts' import {Props} from '../../src/props'
@@ -306,7 +306,7 @@ render( | Name | Type | Default | Description | | :--------------------------------------- | :-------------------- | :-----------------: | :-------------------------------------------------------------------------------------------- | -| children\* | `React.ReactElement[] | React.ReactElement` | Required. Recommended: [`ActionList`](/drafts/ActionList2) | +| children\* | `React.ReactElement[] | React.ReactElement` | Required. Recommended: [`ActionList`](/ActionList) | | [OverlayProps](/Overlay#component-props) | - | - | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component. | ## Status @@ -336,6 +336,6 @@ render( ## Related components -- [ActionList](/drafts/ActionList2) +- [ActionList](/ActionList) - [SelectPanel](/SelectPanel) - [Button](/drafts/Button2) diff --git a/docs/content/drafts/DropdownMenu2.mdx b/docs/content/drafts/DropdownMenu2.mdx index 68cd522aa1e..8d517f5facb 100644 --- a/docs/content/drafts/DropdownMenu2.mdx +++ b/docs/content/drafts/DropdownMenu2.mdx @@ -7,8 +7,8 @@ storybook: '/react/storybook?path=/story/composite-components-dropdownmenu2' description: Use DropdownMenu to select a single option from a list of menu options. --- -import {Box, Avatar} from '@primer/react' -import {DropdownMenu, ActionList} from '@primer/react/drafts' +import {Box, Avatar, ActionList} from '@primer/react' +import {DropdownMenu} from '@primer/react/drafts' import {Props} from '../../src/props' import State from '../../components/State' import {CalendarIcon, IterationsIcon, NumberIcon, SingleSelectIcon, TypographyIcon} from '@primer/octicons-react' @@ -312,7 +312,7 @@ Use `DropdownMenu` to select an option from a small list. If you’re looking fo description={ <> Recommended:{' '} - + ActionList @@ -359,6 +359,6 @@ Use `DropdownMenu` to select an option from a small list. If you’re looking fo ## Related components -- [ActionList](/drafts/ActionList2) +- [ActionList](/ActionList) - [ActionMenu](/ActionMenu2) - [SelectPanel](/SelectPanel) diff --git a/docs/package-lock.json b/docs/package-lock.json index 5aa240cad2d..bd8cfbb80b1 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -8,7 +8,7 @@ "name": "docs", "version": "1.0.0", "dependencies": { - "@primer/gatsby-theme-doctocat": "^3.2.0", + "@primer/gatsby-theme-doctocat": "^3.2.1", "@primer/octicons-react": "^16.1.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", @@ -2719,69 +2719,28 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/@primer/behaviors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.1.0.tgz", + "integrity": "sha512-Ej2OUc3ZIFaR7WwIUqESO1DTzmpb7wc8xbTVRT9s52jZQDjN7g5iljoK3ocYZm+BIAcKn3MvcwB42hEk4Ga4xQ==" + }, "node_modules/@primer/component-metadata": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.4.1.tgz", "integrity": "sha512-iy5ZEeIRN6pFFG7px2ruuA726yVB/n4lsgM3msfdg9qJzfS9qE2JCqq2OuvQ+yXUTxb3JKROaDSH403kdpFR4Q==" }, - "node_modules/@primer/components": { - "version": "30.3.0", - "resolved": "https://registry.npmjs.org/@primer/components/-/components-30.3.0.tgz", - "integrity": "sha512-5W2WQtTzBsGE12+SIcc49RlosgkoamFDMkwNh5kKuQq1Ni9fXjxfWQaykh8CaWydcywMfnZbPcESKnuu+KfLZQ==", - "deprecated": "@primer/components has been renamed @primer/react. Use @primer/react instead.", - "dependencies": { - "@primer/octicons-react": "^13.0.0", - "@primer/primitives": "4.8.1", - "@radix-ui/react-polymorphic": "0.0.14", - "@react-aria/ssr": "3.1.0", - "@styled-system/css": "5.1.5", - "@styled-system/props": "5.1.5", - "@styled-system/theme-get": "5.1.2", - "@types/history": "4.7.8", - "@types/styled-components": "5.1.11", - "@types/styled-system": "5.1.12", - "@types/styled-system__css": "5.0.16", - "@types/styled-system__theme-get": "5.0.1", - "classnames": "2.3.1", - "color2k": "1.2.4", - "deepmerge": "4.2.2", - "focus-visible": "5.2.0", - "styled-system": "5.1.5" - }, - "peerDependencies": { - "react": "^17.0.0", - "react-dom": "^17.0.0", - "styled-components": "4.x || 5.x" - } - }, - "node_modules/@primer/components/node_modules/@primer/octicons-react": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz", - "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==", - "engines": { - "node": ">=8" - }, - "peerDependencies": { - "react": ">=15" - } - }, - "node_modules/@primer/components/node_modules/@primer/primitives": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.8.1.tgz", - "integrity": "sha512-mgr6+EKpn4DixuhLt3drk7QmNQO8M7RYONWovg1nkV7p56jklhDLfZmp1luLUee37eQGAxx3ToStL6gqINFjnQ==" - }, "node_modules/@primer/gatsby-theme-doctocat": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.0.tgz", - "integrity": "sha512-C/8X4xHKWmVf+TKlzWzvj65+BRbcTv6rWr1VoiFQsf6hQacEvzxe6BiTvuvZTFQ+P7Ei1TWKPnTOGbqg0VUSnw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.1.tgz", + "integrity": "sha512-fwt/gttBmy8cwH2MaSb+/CQayytiRzxvLc9L7QoqxBUsEHkqiqkzjNX46TK+tv+Ntzs/pKyacR5yqXVN5GtfOw==", "dependencies": { "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@mdx-js/mdx": "^1.0.21", "@mdx-js/react": "^1.0.21", "@primer/component-metadata": "^0.4.0", - "@primer/components": "^30.0.0", "@primer/octicons-react": "^16.0.0", + "@primer/react": "^34.5.0", "@styled-system/theme-get": "^5.0.12", "@testing-library/jest-dom": "^4.1.0", "@testing-library/react": "^9.1.3", @@ -2849,6 +2808,56 @@ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.1.0.tgz", "integrity": "sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ==" }, + "node_modules/@primer/react": { + "version": "34.6.0", + "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz", + "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==", + "dependencies": { + "@primer/behaviors": "1.1.0", + "@primer/octicons-react": "16.1.1", + "@primer/primitives": "7.1.1", + "@radix-ui/react-polymorphic": "0.0.14", + "@react-aria/ssr": "3.1.0", + "@styled-system/css": "5.1.5", + "@styled-system/props": "5.1.5", + "@styled-system/theme-get": "5.1.2", + "@types/styled-components": "5.1.11", + "@types/styled-system": "5.1.12", + "@types/styled-system__css": "5.0.16", + "@types/styled-system__theme-get": "5.0.1", + "classnames": "2.3.1", + "color2k": "1.2.4", + "deepmerge": "4.2.2", + "focus-visible": "5.2.0", + "history": "5.0.0", + "styled-system": "5.1.5" + }, + "engines": { + "node": ">=12", + "npm": ">=7" + }, + "peerDependencies": { + "react": "^17.0.0", + "react-dom": "^17.0.0", + "styled-components": "4.x || 5.x" + } + }, + "node_modules/@primer/react/node_modules/@primer/octicons-react": { + "version": "16.1.1", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/@primer/react/node_modules/@primer/primitives": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz", + "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw==" + }, "node_modules/@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", @@ -3310,11 +3319,6 @@ "@types/unist": "*" } }, - "node_modules/@types/history": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" - }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -14726,6 +14730,14 @@ "node": "*" } }, + "node_modules/history": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz", + "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -28408,8 +28420,7 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", - "requires": {} + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" } } }, @@ -28767,8 +28778,7 @@ "@mdx-js/react": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", - "requires": {} + "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" }, "@mdx-js/util": { "version": "1.6.22", @@ -28867,60 +28877,28 @@ } } }, + "@primer/behaviors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.1.0.tgz", + "integrity": "sha512-Ej2OUc3ZIFaR7WwIUqESO1DTzmpb7wc8xbTVRT9s52jZQDjN7g5iljoK3ocYZm+BIAcKn3MvcwB42hEk4Ga4xQ==" + }, "@primer/component-metadata": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.4.1.tgz", "integrity": "sha512-iy5ZEeIRN6pFFG7px2ruuA726yVB/n4lsgM3msfdg9qJzfS9qE2JCqq2OuvQ+yXUTxb3JKROaDSH403kdpFR4Q==" }, - "@primer/components": { - "version": "30.3.0", - "resolved": "https://registry.npmjs.org/@primer/components/-/components-30.3.0.tgz", - "integrity": "sha512-5W2WQtTzBsGE12+SIcc49RlosgkoamFDMkwNh5kKuQq1Ni9fXjxfWQaykh8CaWydcywMfnZbPcESKnuu+KfLZQ==", - "requires": { - "@primer/octicons-react": "^13.0.0", - "@primer/primitives": "4.8.1", - "@radix-ui/react-polymorphic": "0.0.14", - "@react-aria/ssr": "3.1.0", - "@styled-system/css": "5.1.5", - "@styled-system/props": "5.1.5", - "@styled-system/theme-get": "5.1.2", - "@types/history": "4.7.8", - "@types/styled-components": "5.1.11", - "@types/styled-system": "5.1.12", - "@types/styled-system__css": "5.0.16", - "@types/styled-system__theme-get": "5.0.1", - "classnames": "2.3.1", - "color2k": "1.2.4", - "deepmerge": "4.2.2", - "focus-visible": "5.2.0", - "styled-system": "5.1.5" - }, - "dependencies": { - "@primer/octicons-react": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz", - "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==", - "requires": {} - }, - "@primer/primitives": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.8.1.tgz", - "integrity": "sha512-mgr6+EKpn4DixuhLt3drk7QmNQO8M7RYONWovg1nkV7p56jklhDLfZmp1luLUee37eQGAxx3ToStL6gqINFjnQ==" - } - } - }, "@primer/gatsby-theme-doctocat": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.0.tgz", - "integrity": "sha512-C/8X4xHKWmVf+TKlzWzvj65+BRbcTv6rWr1VoiFQsf6hQacEvzxe6BiTvuvZTFQ+P7Ei1TWKPnTOGbqg0VUSnw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.1.tgz", + "integrity": "sha512-fwt/gttBmy8cwH2MaSb+/CQayytiRzxvLc9L7QoqxBUsEHkqiqkzjNX46TK+tv+Ntzs/pKyacR5yqXVN5GtfOw==", "requires": { "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@mdx-js/mdx": "^1.0.21", "@mdx-js/react": "^1.0.21", "@primer/component-metadata": "^0.4.0", - "@primer/components": "^30.0.0", "@primer/octicons-react": "^16.0.0", + "@primer/react": "^34.5.0", "@styled-system/theme-get": "^5.0.12", "@testing-library/jest-dom": "^4.1.0", "@testing-library/react": "^9.1.3", @@ -28970,19 +28948,54 @@ "@primer/octicons-react": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.2.0.tgz", - "integrity": "sha512-943t5kkVRt+/hxVnKS27xweUp4lXFxwJaTrsit1C1xBB4kqdjzmYGpU84zwKsNyyV2Ch7may3umKjbI/mFBPPQ==", - "requires": {} + "integrity": "sha512-943t5kkVRt+/hxVnKS27xweUp4lXFxwJaTrsit1C1xBB4kqdjzmYGpU84zwKsNyyV2Ch7may3umKjbI/mFBPPQ==" }, "@primer/primitives": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.1.0.tgz", "integrity": "sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ==" }, + "@primer/react": { + "version": "34.6.0", + "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz", + "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==", + "requires": { + "@primer/behaviors": "1.1.0", + "@primer/octicons-react": "16.1.1", + "@primer/primitives": "7.1.1", + "@radix-ui/react-polymorphic": "0.0.14", + "@react-aria/ssr": "3.1.0", + "@styled-system/css": "5.1.5", + "@styled-system/props": "5.1.5", + "@styled-system/theme-get": "5.1.2", + "@types/styled-components": "5.1.11", + "@types/styled-system": "5.1.12", + "@types/styled-system__css": "5.0.16", + "@types/styled-system__theme-get": "5.0.1", + "classnames": "2.3.1", + "color2k": "1.2.4", + "deepmerge": "4.2.2", + "focus-visible": "5.2.0", + "history": "5.0.0", + "styled-system": "5.1.5" + }, + "dependencies": { + "@primer/octicons-react": { + "version": "16.1.1", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==" + }, + "@primer/primitives": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz", + "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw==" + } + } + }, "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", - "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==", - "requires": {} + "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==" }, "@react-aria/ssr": { "version": "3.1.0", @@ -29387,11 +29400,6 @@ "@types/unist": "*" } }, - "@types/history": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" - }, "@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -29958,8 +29966,7 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", - "requires": {} + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" }, "acorn-walk": { "version": "6.2.0", @@ -29994,14 +30001,12 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "requires": {} + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "alphanum-sort": { "version": "1.0.2", @@ -30528,8 +30533,7 @@ "babel-plugin-remove-graphql-queries": { "version": "2.16.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz", - "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==", - "requires": {} + "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==" }, "babel-plugin-styled-components": { "version": "2.0.2", @@ -32592,8 +32596,7 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", - "requires": {} + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" }, "csso": { "version": "4.2.0", @@ -33224,8 +33227,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -33249,8 +33251,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -33972,8 +33973,7 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", - "requires": {} + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" }, "eslint-scope": { "version": "5.1.1", @@ -35754,8 +35754,7 @@ "babel-plugin-remove-graphql-queries": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz", - "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==", - "requires": {} + "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==" }, "braces": { "version": "3.0.2", @@ -37496,8 +37495,7 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", - "requires": {} + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" } } }, @@ -37957,14 +37955,12 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", - "requires": {} + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", - "requires": {} + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" }, "gray-matter": { "version": "4.0.3", @@ -38224,6 +38220,14 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==" }, + "history": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz", + "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -38480,8 +38484,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "ieee754": { "version": "1.2.1", @@ -39227,8 +39230,7 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", - "requires": {} + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" }, "isstream": { "version": "0.1.2", @@ -39653,8 +39655,7 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "requires": {} + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" }, "jest-regex-util": { "version": "24.9.0", @@ -40721,8 +40722,7 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", - "requires": {} + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" }, "methods": { "version": "1.1.2", @@ -42035,32 +42035,27 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", - "requires": {} + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", - "requires": {} + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", - "requires": {} + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", - "requires": {} + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "requires": {} + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" }, "postcss-loader": { "version": "5.3.0", @@ -42186,8 +42181,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -42225,8 +42219,7 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", - "requires": {} + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -42597,8 +42590,7 @@ "prism-react-renderer": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz", - "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==", - "requires": {} + "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==" }, "prismjs": { "version": "1.26.0", @@ -42983,8 +42975,7 @@ "react-docgen-typescript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz", - "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==", - "requires": {} + "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==" }, "react-dom": { "version": "17.0.1", @@ -43065,8 +43056,7 @@ "react-frame-component": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.3.tgz", - "integrity": "sha512-4PurhctiqnmC1F5prPZ+LdsalH7pZ3SFA5xoc0HBe8mSHctdLLt4Cr2WXfXOoajHBYq/yiipp9zOgx+vy8GiEA==", - "requires": {} + "integrity": "sha512-4PurhctiqnmC1F5prPZ+LdsalH7pZ3SFA5xoc0HBe8mSHctdLLt4Cr2WXfXOoajHBYq/yiipp9zOgx+vy8GiEA==" }, "react-helmet": { "version": "5.2.1", @@ -43171,8 +43161,7 @@ "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", - "requires": {} + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" }, "react-style-singleton": { "version": "2.1.1", @@ -45331,8 +45320,7 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "requires": {} + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, "subscriptions-transport-ws": { "version": "0.9.19", @@ -46557,8 +46545,7 @@ "use-callback-ref": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", - "requires": {} + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" }, "use-sidecar": { "version": "1.0.5", diff --git a/docs/package.json b/docs/package.json index 0346db00bfa..65bc766c8a2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,7 @@ "npm": ">=7" }, "dependencies": { - "@primer/gatsby-theme-doctocat": "^3.2.0", + "@primer/gatsby-theme-doctocat": "^3.2.1", "@primer/octicons-react": "^16.1.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index d8ee2ede36d..84a3d8c83fe 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -33,6 +33,7 @@ import { } from '@primer/octicons-react' import * as primerComponents from '@primer/react' import * as drafts from '@primer/react/drafts' +import * as deprecated from '@primer/react/deprecated' import {Placeholder} from '@primer/react/Placeholder' import React from 'react' import {AnchoredOverlay} from '../../../../src/AnchoredOverlay' @@ -51,6 +52,7 @@ export default function resolveScope(metastring) { ...doctocatComponents, ...primerComponents, ...(metastring.includes('drafts') ? drafts : {}), + ...deprecated, ReactRouterLink, State, CheckIcon, diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 9584bf38cf0..b19d2f81678 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -35,6 +35,8 @@ # url: /useOverlay - title: Components children: + - title: ActionList + url: /ActionList - title: Autocomplete url: /Autocomplete - title: Avatar @@ -53,10 +55,8 @@ url: /Buttons - title: Checkbox url: /Checkbox - # Temporarily hiding ChoiceFieldset because the API - # is being refactored with breaking changes - # - title: ChoiceFieldset - # url: /ChoiceFieldset + - title: CheckboxGroup + url: /CheckboxGroup - title: CircleBadge url: /CircleBadge - title: CircleOcticon @@ -87,6 +87,8 @@ url: /Overlay - title: Pagehead url: /Pagehead + - title: PageLayout + url: /PageLayout - title: Pagination url: /Pagination - title: PointerBox @@ -99,6 +101,8 @@ url: /ProgressBar - title: Radio url: /Radio + - title: RadioGroup + url: /RadioGroup - title: Select url: /Select - title: SelectPanel @@ -141,8 +145,6 @@ url: /drafts/LinkButton - title: IconButton url: /drafts/IconButton - - title: ActionList v2 - url: /drafts/ActionList2 - title: ActionMenu v2 url: /drafts/ActionMenu2 - title: Deprecated @@ -163,3 +165,5 @@ url: /FormGroup - title: SelectMenu url: /deprecated/SelectMenu + - title: ActionList + url: /deprecated/ActionList diff --git a/package-lock.json b/package-lock.json index 2a8634b87cf..43c3bdd8a8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@primer/react", - "version": "34.5.0", + "version": "34.6.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@primer/react", - "version": "34.5.0", + "version": "34.6.0", "license": "MIT", "dependencies": { "@primer/behaviors": "1.1.0", diff --git a/package.json b/package.json index 35cc8dcd0e4..986a6b2b706 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,19 @@ "exports": { ".": { "node": "./lib/index.js", + "require": "./lib/index.js", "default": "./lib-esm/index.js" }, "./drafts": { "node": "./lib/drafts/index.js", + "require": "./lib/drafts/index.js", "default": "./lib-esm/drafts/index.js" }, + "./deprecated": { + "node": "./lib/deprecated/index.js", + "require": "./lib/deprecated/index.js", + "default": "./lib-esm/deprecated/index.js" + }, "./lib-esm/*": { "node": [ "./lib/*.js", diff --git a/src/ActionList2/ActionListContainerContext.tsx b/src/ActionList/ActionListContainerContext.tsx similarity index 100% rename from src/ActionList2/ActionListContainerContext.tsx rename to src/ActionList/ActionListContainerContext.tsx diff --git a/src/ActionList2/Description.tsx b/src/ActionList/Description.tsx similarity index 100% rename from src/ActionList2/Description.tsx rename to src/ActionList/Description.tsx diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx index 0513b60f1ce..e286448eb42 100644 --- a/src/ActionList/Divider.tsx +++ b/src/ActionList/Divider.tsx @@ -1,25 +1,29 @@ import React from 'react' -import styled from 'styled-components' +import Box from '../Box' import {get} from '../constants' - -export const StyledDivider = styled.div` - height: 1px; - background: ${get('colors.border.muted')}; - margin-top: calc(${get('space.2')} - 1px); - margin-bottom: ${get('space.2')}; -` +import {Theme} from '../ThemeProvider' +import {SxProp, merge} from '../sx' /** * Visually separates `Item`s or `Group`s in an `ActionList`. */ -export function Divider(): JSX.Element { - return -} -/** - * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract, - * so it can be used inline in an `ActionList`’s `items` prop. - * In other words, `items={[ActionList.Divider]}` is supported as a concise - * alternative to `items={[{renderItem: () => }]}`. - */ -Divider.renderItem = Divider +export const Divider: React.FC = ({sx = {}}) => { + return ( +