Merge branch 'main' into fix-textinput-types

Author: colebemis

.changeset/seven-hornets-jam.md

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

.changeset/stupid-terms-hang.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Bump primer/primitives to `7.5.1`

.changeset/yellow-planes-decide.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add disabled color and backgroundColor to Button.Counter

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 renamed to 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/LinkButton.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/PageLayout.mdx

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