v35 component doc page fixes (#1942)

* 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>

.changeset/seven-hornets-jam.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds button element selector to FilteredSearch button styles

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

docs/content/Dialog2.mdx → 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>
         )}
       </>
     )

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>
 ```

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'

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

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}}>

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

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}

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>

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
 ---

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
 ---

docs/content/deprecated/BorderBox.md

@@ -1,5 +1,4 @@
 ---
-componentId: border_box
 title: BorderBox
 status: Deprecated
 ---

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'

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.

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>

docs/content/deprecated/DropdownMenu.mdx

@@ -1,5 +1,4 @@
 ---
-componentId: dropdown_menu
 title: DropdownMenu
 status: Deprecated
 ---

docs/content/deprecated/Flex.md

@@ -1,5 +1,4 @@
 ---
-componentId: flex
 title: Flex
 status: Deprecated
 ---

docs/content/deprecated/FormGroup.md

@@ -1,5 +1,4 @@
 ---
-componentId: form_group
 title: FormGroup
 status: Deprecated
 ---

docs/content/deprecated/Grid.md

@@ -1,5 +1,4 @@
 ---
-componentId: grid
 title: Grid
 status: Deprecated
 ---

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.

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

docs/content/deprecated/Position.md

@@ -1,5 +1,4 @@
 ---
-componentId: position
 title: Position
 status: Deprecated
 ---