v35 component doc page fixes (#1942)

mperrotti · rezrah · siddharthkp · web-flow · commit 3f50ef543b8c · 2022-03-16T11:29:11.000-04:00
* 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 * rms deprecated components and layout tweaks * updates snaps * adds changeset * Update title and componentId of deprecated components * Add missing component ids * Remove link button docs * Update dialog props * Update nav.yml * Update live code scope Co-authored-by: Reza Rahman <rezrah@github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: Pavithra Kodmad <pksjce@github.com>
diff --git a/.changeset/seven-hornets-jam.md b/.changeset/seven-hornets-jam.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds button element selector to FilteredSearch button styles
diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx
@@ -1,5 +1,6 @@
 ---
 title: CheckboxGroup
+componentId: checkbox_group
 description: Renders a set of checkboxes to let users make one or more selections from a short list of options
 status: Alpha
 source: https://github.com/primer/react/blob/main/src/CheckboxGroup/CheckboxGroup.tsx
diff --git a/docs/content/Dialog.mdx b/docs/content/Dialog.mdx
@@ -1,5 +1,6 @@
 ---
-title: Dialog v2
+title: Dialog
+componentId: dialog
 status: Alpha
 ---
 
@@ -53,7 +54,7 @@ By default, the Dialog component implements the design and interactions defined
       <>
         <Button onClick={openDialog}>Open</Button>
         {isOpen && (
-          <Dialog2
+          <Dialog
             title="Dialog example"
             subtitle={
               <>
@@ -64,7 +65,7 @@ By default, the Dialog component implements the design and interactions defined
             onClose={closeDialog}
           >
             <Text fontFamily="sans-serif">Some content</Text>
-          </Dialog2>
+          </Dialog>
         )}
       </>
     )
diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md
@@ -12,14 +12,16 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
 
 ```jsx live
 <FilteredSearch>
-  <Dropdown>
-    <Dropdown.Button>Filter</Dropdown.Button>
-    <Dropdown.Menu direction="sw">
-      <Dropdown.Item>Item 1</Dropdown.Item>
-      <Dropdown.Item>Item 2</Dropdown.Item>
-      <Dropdown.Item>Item 3</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
+  <ActionMenu>
+    <ActionMenu.Button as="summary">Filter</ActionMenu.Button>
+    <ActionMenu.Overlay>
+      <ActionList direction="sw">
+        <ActionList.Item>Item 1</ActionList.Item>
+        <ActionList.Item>Item 2</ActionList.Item>
+        <ActionList.Item>Item 3</ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
   <TextInput icon={SearchIcon} />
 </FilteredSearch>
 ```
diff --git a/docs/content/IconButton.mdx b/docs/content/IconButton.mdx
@@ -1,5 +1,6 @@
 ---
 title: IconButton
+componentId: icon_button
 status: Alpha
 source: https://github.com/primer/react/tree/main/src/Button2
 storybook: '/react/storybook?path=/story/composite-components-button2'
diff --git a/docs/content/LinkButton.mdx b/docs/content/LinkButton.mdx
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
@@ -1,5 +1,6 @@
 ---
 title: PageLayout
+componentId: page_layout
 status: Alpha
 # description: TODO
 source: https://github.com/primer/react/tree/main/src/PageLayout
diff --git a/docs/content/Popover.md b/docs/content/Popover.md
@@ -14,9 +14,9 @@ import {Popover} from '@primer/react'
 
 ```jxs live
 <Box position="relative">
-  <Text textAlign="center" display="block">
-    <ButtonPrimary>Hello!</ButtonPrimary>
-  </Text>
+  <Box justifyContent="center" display="flex">
+    <Button variant="primary">Hello!</Button>
+  </Box>
 
   <Popover relative open={true} caret="top">
     <Popover.Content sx={{mt: 2}}>
diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx
@@ -1,5 +1,6 @@
 ---
 title: RadioGroup
+componentId: radio_group
 description: Renders a set of radio inputs to let users make a single selection from a short list of options
 status: Alpha
 source: https://github.com/primer/react/blob/main/src/RadioGroup/RadioGroup.tsx
diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
@@ -45,9 +45,9 @@ function DemoComponent() {
   return (
     <SelectPanel
       renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-        <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+        <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
           {children || 'Select Labels'}
-        </DropdownButton>
+        </Button>
       )}
       placeholderText="Filter Labels"
       open={open}
diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md
@@ -48,20 +48,22 @@ This ensures that the NavLink gets `activeClassName='selected'`
 ```jsx live
 <SubNav aria-label="Main">
   <FilteredSearch>
-    <Dropdown>
-      <Dropdown.Button>Filter</Dropdown.Button>
-      <Dropdown.Menu direction="sw">
-        <Dropdown.Item>
-          <a href="#">Item 1</a>
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <a href="#">Item 2</a>
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <a href="#">Item 3</a>
-        </Dropdown.Item>
-      </Dropdown.Menu>
-    </Dropdown>
+    <ActionMenu>
+      <ActionMenu.Button>Filter</ActionMenu.Button>
+      <ActionMenu.Overlay>
+        <ActionList direction="sw">
+          <ActionList.Item>
+            <a href="#">Item 1</a>
+          </ActionList.Item>
+          <ActionList.Item>
+            <a href="#">Item 2</a>
+          </ActionList.Item>
+          <ActionList.Item>
+            <a href="#">Item 3</a>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
     <TextInput type="search" icon={SearchIcon} width={320} />
   </FilteredSearch>
   <SubNav.Links>
diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: action_list
-title: ActionList
+title: ActionList (legacy)
 status: Deprecated
 source: https://github.com/primer/react/tree/main/src/deprecated/ActionList
 ---
diff --git a/docs/content/deprecated/ActionMenu.mdx b/docs/content/deprecated/ActionMenu.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: action_menu
-title: ActionMenu
+title: ActionMenu (legacy)
 status: Deprecated
 source: https://github.com/primer/react/tree/main/src/deprecated/ActionMenu.tsx
 ---
diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md
@@ -1,5 +1,4 @@
 ---
-componentId: border_box
 title: BorderBox
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Buttons.mdx b/docs/content/deprecated/Buttons.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: button
-title: Button
+title: Button (legacy)
 status: deprecated
 source: https://github.com/primer/react/blob/main/src/Button
 storybook: '/react/storybook?path=/story/composite-components-button--default-button'
diff --git a/docs/content/deprecated/ChoiceInputField.mdx b/docs/content/deprecated/ChoiceInputField.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: choiceInputField
 title: ChoiceInputField
 status: Deprecated
 description: The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional  hint text.
diff --git a/docs/content/deprecated/Dialog.md b/docs/content/deprecated/Dialog.md
@@ -1,11 +1,11 @@
 ---
-title: Dialog
+title: Dialog (legacy)
 status: Deprecated
 ---
 
 ## Deprecation
 
-Use [Dialog2](/Dialog2) instead.
+Use the [new version of Dialog](/Dialog) instead.
 
 **Before**
 
@@ -23,7 +23,7 @@ Use [Dialog2](/Dialog2) instead.
 ```jsx deprecated
 {
   open && (
-    <Dialog2
+    <Dialog
       title="Dialog example"
       subtitle={
         <>
@@ -34,13 +34,11 @@ Use [Dialog2](/Dialog2) instead.
       onClose={() => setOpen(false)}
     >
       <Text fontFamily="sans-serif">Some content</Text>
-    </Dialog2>
+    </Dialog>
   )
 }
 ```
 
-import State from '../../components/State'
-
 The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
 
 You'll need to manage the `isOpen` state in a wrapper component of your own and pass in a function to be used to close the Dialog. For documentation purposes only we've created a mock `State` to handle this, but you should handle the state in the component you consume `Dialog` in or in a wrapper component.
@@ -111,7 +109,7 @@ You can also pass any non-text content into the header:
             </Text>
             <Box display="flex" mt={3} justifyContent="flex-end">
               <Button sx={{mr: 1}}>Cancel</Button>
-              <ButtonDanger>Delete</ButtonDanger>
+              <Button variant="danger">Delete</Button>
             </Box>
           </Box>
         </Dialog>
diff --git a/docs/content/deprecated/DropdownMenu.mdx b/docs/content/deprecated/DropdownMenu.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: dropdown_menu
 title: DropdownMenu
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md
@@ -1,5 +1,4 @@
 ---
-componentId: flex
 title: Flex
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/FormGroup.md b/docs/content/deprecated/FormGroup.md
@@ -1,5 +1,4 @@
 ---
-componentId: form_group
 title: FormGroup
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md
@@ -1,5 +1,4 @@
 ---
-componentId: grid
 title: Grid
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/InputField.mdx b/docs/content/deprecated/InputField.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: inputField
 title: InputField
 status: Deprecated
 description: The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text.
diff --git a/docs/content/deprecated/Label.mdx b/docs/content/deprecated/Label.mdx
@@ -1,5 +1,5 @@
 ---
-title: Label
+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
diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md
@@ -1,5 +1,4 @@
 ---
-componentId: position
 title: Position
 status: Deprecated
 ---
diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
diff --git a/src/FilteredSearch.tsx b/src/FilteredSearch.tsx
diff --git a/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap b/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/react': minor
 +---
++
 +Adds button element selector to FilteredSearch button styles