Next major (#1910)

* prepare integration branch * Move deprecated components to deprecated folder (#1881) * prepare integration branch * Move deprecated components to deprecated folder * Add subpath exports for deprecated * Fix up the docs * Remove dialog and formgroup components * Fix up all the tests * Create smooth-cameras-prove.md Co-authored-by: Reza Rahman <rezrah@github.com> * Prefix component with types exported from ActionList2 and ActionMenu2 (#1883) * prefix component name to types * add changeset * Update .changeset/actionlist2-actionmenu2-prefix-types.md Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: Cole Bemis <colebemis@github.com> * Export PageLayout from main bundle (#1882) * Export PageLayout from main bundle * Create odd-apes-guess.md * Add PageLayout to sidenav * Update .changeset/odd-apes-guess.md Co-authored-by: Rez <rezrah@github.com> * Update PageLayout docs Co-authored-by: Rez <rezrah@github.com> * Update release notes and add deprecation notices for SelectMenu and Dropdown (#1887) * chore: add deprecation notices for SelectMenu and Dropdown * fix: deprecated metadata scope in docs * docs: update release notes for Flex and BorderBox * docs: update release notes for Position * chore: add deprecated scope to jsx snippets * chore: add release notes for Dropdown deprecation * chore: add Grid release notes * update release notes * Deprecate ActionMenu v1 & Promote drafts/ActionMenu v2 (#1895) * Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * Deprecate ActionMenu - part 1 * Deprecate ActionMenu - part 2 * Promote drafts/ActionMenu2 to main/ActionMenu * Add changelog * Add @deprecated on deprecated/ActionMenu * docs fixed! * Revert "Deprecate ActionMenu v1 & Promote drafts/ActionMenu v2 (#1895)" (#1896) This reverts commit f366604. * Deprecate ActionList v1 & Promote drafts/ActionList v2 (#1893) * Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * changelog oopsie * fix docs copy * Add @deprecated on deprecated/ActionList * oopsie on the link * PR feedback on deprecation message * Deprecate ActionMenu v1 & Promote drafts/ActionMenu v2 (#1897) * Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * Deprecate ActionMenu - part 1 * Deprecate ActionMenu - part 2 * Promote drafts/ActionMenu2 to main/ActionMenu * Add changelog * Add @deprecated on deprecated/ActionMenu * docs fixed! * reorder deprecated components alphabetically * Update deprecation message * Fix missing icon that only broke on this PR for some reason * Deprecate DropdownMenu v1 + Remove DropdownMenu v2 (#1898) * Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * Deprecate ActionMenu - part 1 * Deprecate ActionMenu - part 2 * Promote drafts/ActionMenu2 to main/ActionMenu * Add changelog * Add @deprecated on deprecated/ActionMenu * docs fixed! * reorder deprecated components alphabetically * Update deprecation message * Fix missing icon that only broke on this PR for some reason * Deprecate DropdownMenu * Use deprecated Dropdown for theme switcher * Delete drafts/DropdownMenu2 * Add changelog * remove debug statement :) * Fix code examples in changeset (#1901) * Update .changeset/deprecate-actionlistv1-promote-actionlistv2.md * Add linebreaks to changesets * Button deprecation (#1908) * Move old button to deprecated * Move Button2 to main bundle * Add migration docs * More changes from the checklist * More deprecation * Update tests * Add deprecated details * Create many-roses-hammer.md * Update .changeset/many-roses-hammer.md Co-authored-by: Rez <rezrah@github.com> * Update many-roses-hammer.md * Update many-roses-hammer.md * Update many-roses-hammer.md Co-authored-by: Rez <rezrah@github.com> * Deprecate components replaced by FormControl (#1888) * moves InputField to deprecated package * adds jsdoc comments for deprecation * adds changeset * fixes bad autoformatting in changeset * fixes import path in test file * addresses PR feedback * fixes FormGroup import in test * addresses PR feedback * moves tests to depreacted directory * removes docs header image * fixes bad formatting in changelog markdown * Revert "fix merge conflicts with main" This reverts commit 363bb07, reversing changes made to f94dcd3. * Deprecate ChoiceFieldset and ChoiceInputField (#1900) * deprecates ChoiceFieldset and ChoiceInputField * update import paths in tests * addresses more PR feedback * fixes bad imports in docs * updates outdated story and test * moves components to deprecated directory * fixes broken docs pages * fixes bad formatting in changelog markdown * minor tweaks * moves deprecated notation for ChoiceInputField * Deprecate legacy Label component (#1889) * moves Label to deprecated bundle * graduates Label2 to main bundle * cleanup * adds changeset * fixes tests * update legacy label snapshots * Update .changeset/heavy-points-marry.md Co-authored-by: Rez <rezrah@github.com> * Update docs/content/Label.mdx Co-authored-by: Rez <rezrah@github.com> * addresses pr feedback * adds Label back to sidebar * updates tests, removes docs header image * removes docs header image * fixes tests * resets changed test Co-authored-by: Rez <rezrah@github.com> * Move remaining deprecated components to src/deprecated (#1917) * Move deprecated components to src/deprecated * Fix imports for tests * Various fixes for v35 (#1916) * chore: ad-hoc fixes for next-major branch * fix #1912 docs error * docs: remove reference to system props * Create changeset-for-1917.md (#1919) * Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay (#1921) * Allow ActionMenu.Overlay to pass through align prop to AnchoredOverlay * Add align prop to docs * Fix AnchoredOverlay docs * add changeset * ActionMenu.Button: Fix spacing between text and caret (#1922) * Fix spacing between Text and caret for ActionMenu.Button * Improve changelog * fix margin after design review * unrelated change * Update ActionMenu docs (#1931) * Button: Update active styles + use them for aria-expanded (#1915) * Add aria-expanded styles for Button * update default button active styles * update snapshot for button * Create healthy-dots-chew.md * fix broken test following main merging conflict resolution * Fixes for v35 (#1934) * fix ActioMenu story * backfill missing exports in root index * fix package-lock * add changeset * v35: Remove type aliases for ActionList (#1937) * Replace aliases for ActionList types * export types for LinkItem * update selection types * Next major changeset edits (#1939) * Remove unnecessary changesets * Edit changesets * Fixes for v35 (#1938) * add missing root exports * fix invalid export * add missing fragments to changesets (#1940) * Update changeset examples (#1941) * Fix table in changeset * Add missing comma * Fix grid changeset * Update button changeset Co-authored-by: Reza Rahman <rezrah@github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Pavithra Kodmad <pksjce@github.com> Co-authored-by: Mike Perrotti <mperrotti@github.com>
primer · Mar 9, 2022 · e1e8d47 · e1e8d47
1 parent 32b9693
commit e1e8d47
Show file tree

Hide file tree

Showing 235 changed files with 7,996 additions and 7,528 deletions.
diff --git a/.changeset/actionlist2-actionmenu2-prefix-types.md 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/actionmenu-add-align-prop.md b/.changeset/actionmenu-add-align-prop.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay
diff --git a/.changeset/actionmenu-button-caret-spacing.md b/.changeset/actionmenu-button-caret-spacing.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu.Button: Fix spacing between text and caret
diff --git a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md
@@ -0,0 +1,155 @@
+---
+'@primer/react': major
+---
+<br />
+
+### 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
+
+<table>
+<tr>
+<th> Before (v34)</th> <th> After (v35)</th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<ActionList
+  items={[
+    {text: 'New file'},
+    {text: 'Copy link'},
+    {text: 'Edit file'},
+    ActionList.Divider,
+    {text: 'Delete file', variant: 'danger'}
+  ]}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionList>
+  <ActionList.Item>New file</ActionList.Item>
+  <ActionList.Item>Copy link</ActionList.Item>
+  <ActionList.Item>Edit file</ActionList.Item>
+  <ActionList.Divider />
+  <ActionList.Item variant="danger">Delete file</ActionList.Item>
+</ActionList>
+```
+
+</td>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<ActionList
+  showItemDividers
+  items={[
+    {
+      key: '0',
+      leadingVisual: LinkIcon,
+      text: 'github/primer'
+    },
+    {
+      key: '1',
+      leadingVisual: () => <Avatar src="https://github.com/mona.png" />,
+      text: 'mona',
+      description: 'Monalisa Octocat',
+      descriptionVariant: 'block'
+    },
+    {
+      key: '2',
+      leadingVisual: GearIcon,
+      text: 'View Settings',
+      trailingVisual: ArrowRightIcon
+    }
+  ]}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionList showDividers>
+  <ActionList.Item>
+    <ActionList.LeadingVisual>
+      <LinkIcon />
+    </ActionList.LeadingVisual>
+    github/primer
+  </ActionList.Item>
+  <ActionList.Item>
+    <ActionList.LeadingVisual>
+      <Avatar src="https://github.com/mona.png" />
+    </ActionList.LeadingVisual>
+    mona
+    <ActionList.Description variant="block">Monalisa Octocat</ActionList.Description>
+  </ActionList.Item>
+  <ActionList.Item>
+    <ActionList.LeadingVisual>
+      <GearIcon />
+    </ActionList.LeadingVisual>
+    View settings
+    <ActionList.TrailingVisual>
+      <ArrowRightIcon />
+    </ActionList.TrailingVisual>
+  </ActionList.Item>
+</ActionList>
+```
+
+</td>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<ActionList
+  groupMetadata={[
+    {groupId: '0', header: {title: 'Live query'}},
+    {groupId: '1', header: {title: 'Layout'}}
+  ]}
+  items={[
+    {key: '0', text: 'repo:github/github', groupId: '0'},
+    {key: '1', text: 'Table', groupId: '1'},
+    {key: '2', text: 'Board', groupId: '1'},
+    {key: '3', text: 'View settings'}
+  ]}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionList>
+  <ActionList.Group title="Live query">
+    <ActionList.Item>repo:github/github</ActionList.Item>
+  </ActionList.Group>
+  <ActionList.Divider />
+
+  <ActionList.Group title="Layout">
+    <ActionList.Item>Table</ActionList.Item>
+    <ActionList.Item>Board Description</ActionList.Item>
+  </ActionList.Group>
+  <ActionList.Divider />
+
+  <ActionList.Item>View settings</ActionList.Item>
+</ActionList>
+```
+
+</td>
+</tr>
+</table>
+
+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/deprecate-actionmenuv1-promote-actionmenuv2.md b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md
@@ -0,0 +1,71 @@
+---
+'@primer/react': major
+---
+
+<br />
+
+### ActionMenu
+
+ActionMenu has been rewritten with a composable API, design updates and accessibility fixes.
+
+See full list of props and examples: https://primer.style/react/ActionMenu
+
+Main changes:
+
+1. Instead of using `items` prop, use `ActionList` inside `ActionMenu`
+2. Instead of using `anchorContent` on `ActionMenu`, use `ActionMenu.Button` with `children`
+3. Instead of using `onAction` prop on `ActionMenu`, use `onSelect` prop on `ActionList.Item`
+4. Instead of using `groupMetadata` on `ActionMenu`, use `ActionList.Group`
+5. Instead of `overlayProps` on `ActionMenu`, use `ActionMenu.Overlay`
+
+<table>
+<tr>
+<th> Before (v34)</th> <th> After (v35)</th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<ActionMenu
+  anchorContent="Menu"
+  onAction={fn}
+  items={[
+    {text: 'New file'},
+    {text: 'Copy link'},
+    {text: 'Edit file'},
+    ActionMenu.Divider,
+    {text: 'Delete file', variant: 'danger'}
+  ]}
+  overlayProps={{width: 'small'}}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionMenu>
+  <ActionMenu.Button>Menu</ActionMenu.Button>
+  <ActionMenu.Overlay width="small">
+    <ActionList>
+      <ActionList.Item onSelect={fn}>New file</ActionList.Item>
+      <ActionList.Item>Copy link</ActionList.Item>
+      <ActionList.Item>Edit file</ActionList.Item>
+      <ActionList.Divider />
+      <ActionList.Item variant="danger">Delete file</ActionList.Item>
+    </ActionList>
+  </ActionMenu.Overlay>
+</ActionMenu>
+```
+
+</td>
+</tr>
+</table>
+
+To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
+
+```js
+import {ActionMenu} 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/deprecate-dropdownmenu.md b/.changeset/deprecate-dropdownmenu.md
@@ -0,0 +1,109 @@
+---
+'@primer/react': major
+---
+
+<br />
+
+### DropdownMenu
+
+DropdownMenu has been deprecated in favor of ActionMenu with ActionList
+
+See example with selection: https://primer.style/react/ActionMenu#with-selection
+
+Migration guide:
+
+1. Instead of using `items` prop, use `ActionList` inside `ActionMenu`
+2. Use `selectionVariant="single"` on `ActionList` to set the right semantics for selection
+3. Instead of using `selectedItem` prop, use `selected` prop on `ActionList.Item`
+4. Instead of using `renderAnchor` and `placeholder` props on `DropdownMenu`, use `ActionMenu.Button` or `ActionMenu.Anchor`
+5. Instead of using `onChange` prop on `DropdownMenu`, use `onSelect` prop on `ActionList.Item`
+6. Instead of using `groupMetadata` on `DropdownMenu`, use `ActionList.Group`
+7. Instead of `overlayProps` on `DropdownMenu`, use `ActionMenu.Overlay`
+
+<table>
+<tr>
+<th> Before (v34)</th> <th> After (v35)</th>
+</tr>
+<tr>
+<td valign="top">
+
+```js
+const fieldTypes = [
+  {key: 0, text: 'Text'},
+  {key: 1, text: 'Number'},
+  {key: 3, text: 'Date'},
+  {key: 4, text: 'Single select'},
+  {key: 5, text: 'Iteration'}
+]
+
+const Example = () => {
+  const [selectedType, setSelectedType] = React.useState()
+
+  return (
+    <DropdownMenu
+      renderAnchor={({children, ...anchorProps}) => (
+        <ButtonInvisible {...anchorProps}>
+          {children} <GearIcon />
+        </ButtonInvisible>
+      )}
+      placeholder="Field type"
+      items={fieldTypes}
+      selectedItem={selectedType}
+      onChange={setSelectedType}
+      overlayProps={{width: 'medium'}}
+    />
+  )
+}
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+const fieldTypes = [
+  {id: 0, text: 'Text'},
+  {id: 1, text: 'Number'},
+  {id: 3, text: 'Date'},
+  {id: 4, text: 'Single select'},
+  {id: 5, text: 'Iteration'}
+]
+
+const Example = () => {
+  const [selectedType, setSelectedType] = React.useState()
+
+  render(
+    <ActionMenu>
+      <ActionMenu.Button aria-label="Select field type">{selectedType.name || 'Field type'}</ActionMenu.Button>
+      <ActionMenu.Overlay width="medium">
+        <ActionList selectionVariant="single">
+          {fieldTypes.map(type => (
+            <ActionList.Item
+              key={type.id}
+              selected={type.id === selectedType.id}
+              onSelect={() => setSelectedType(type)}
+            >
+              {type.name}
+            </ActionList.Item>
+          ))}
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  )
+}
+```
+
+</td>
+</tr>
+</table>
+
+To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
+
+```js
+import {DropdownMenu} from '@primer/react/deprecated'
+```
+
+You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
+
+### drafts/DropdownMenu2
+
+DropdownMenu2 has been removed in favor of ActionMenu with ActionList
diff --git a/.changeset/healthy-dots-chew.md b/.changeset/healthy-dots-chew.md
@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+---
+
+- Update styles for default variant of Button's active state
+- Use active state for Button when it is used to open an Overlay