primer · mperrotti · Mar 16, 2022 · Feb 21, 2022 · Feb 23, 2022 · Feb 23, 2022
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds button element selector to FilteredSearch button styles
@@ -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

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

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

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

@@ -1,5 +1,6 @@
 ---
 title: PageLayout
+componentId: page_layout
 status: Alpha
 # description: TODO
 source: https://github.com/primer/react/tree/main/src/PageLayout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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