Update release notes and add deprecation notices for SelectMenu and D…

…ropdown (#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
primer · Feb 25, 2022 · 1ea9593 · 1ea9593
1 parent 1776a3b
commit 1ea9593
Show file tree

Hide file tree

Showing 12 changed files with 370 additions and 71 deletions.
diff --git a/.changeset/smooth-cameras-prove.md b/.changeset/smooth-cameras-prove.md
@@ -1,5 +1,257 @@
 ---
-"@primer/react": major
+'@primer/react': major
 ---
 
-Move deprecated components to deprecated folder
+### SelectMenu
+
+⚠️ `SelectMenu` has been deprecated. Please use `ActionMenu` instead.
+
+<table>
+<tr>
+<th> Before </th> <th> After </th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<SelectMenu>
+  <Button as="summary">Projects</Button>
+  <SelectMenu.Modal>
+    <SelectMenu.Header>Projects</SelectMenu.Header>
+    <SelectMenu.List>
+      <SelectMenu.Item href="#">Primer React bugs</SelectMenu.Item>
+      <SelectMenu.Item href="#">Primer React roadmap</SelectMenu.Item>
+      <SelectMenu.Item href="#">Project 3</SelectMenu.Item>
+      <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
+    </SelectMenu.List>
+  </SelectMenu.Modal>
+</SelectMenu>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionMenu>
+  <ActionMenu.Button>Projects</ActionMenu.Button>
+  <ActionMenu.Overlay>
+    <ActionList showDividers>
+      <ActionList.Group title="Projects">
+        <ActionList.Item>Primer React bugs</ActionList.Item>
+        <ActionList.Item>Primer React roadmap</ActionList.Item>
+        <ActionList.Item>Project three</ActionList.Item>
+        <ActionList.Item>Project four</ActionList.Item>
+      </ActionList.Group>
+    </ActionList>
+  </ActionMenu.Overlay>
+</ActionMenu>
+```
+
+</td>
+</tr>
+</table>
+
+See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples.
+
+### Dropdown
+
+⚠️ `Dropdown` has been deprecated. Please use `ActionMenu` instead.
+
+<table>
+<tr>
+<th> Before </th> <th> After </th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+const fieldTypes = [
+  {leadingVisual: TypographyIcon, text: 'Text'},
+  {leadingVisual: NumberIcon, text: 'Number'},
+];
+
+const [selectedItem, setSelectedItem] = React.useState()
+
+<DropdownMenu
+  renderAnchor={({children, ...anchorProps}) => (
+    <ButtonInvisible {...anchorProps}>
+      {children}
+    </ButtonInvisible>
+  )}
+  placeholder="Select a field type"
+  items={fieldTypes}
+  selectedItem={selectedItem}
+  onChange={() => setSelectedIndex(index)}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+const fieldTypes = [
+  {icon: <TypographyIcon/>, name: 'Text'},
+  {icon: <NumberIcon/>, name: 'Number'},
+];
+
+const [selectedItem, setSelectedItem] = React.useState()
+
+<ActionMenu>
+  <ActionMenu.Button>{selectedItem ? selectedItem.name : 'Select a field type'}</ActionMenu.Button>
+  <ActionMenu.Overlay>
+     <ActionList selectionVariant="single">
+      {fieldTypes.map(field => (
+        <ActionList.Item onSelect={() => setSelectedItem(field)} key={field.name}>
+           <ActionList.LeadingVisual>{field.icon}</ActionList.LeadingVisual>
+           {field.name}
+         </ActionList.Item>
+     <ActionList>
+  </ActionMenu.Overlay>
+<ActionMenu>
+```
+
+</td>
+</tr>
+</table>
+
+See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples.
+
+### Flex
+
+⚠️ `Flex` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead.
+
+<table>
+<tr>
+<th> Before </th> <th> After </th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<Flex flexWrap="nowrap">
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
+    Item 1
+  </Box>
+</Flex>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<Box display="flex" flexWrap="nowrap">
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
+    Item 1
+  </Box>
+</Box>
+```
+
+</td>
+</tr>
+</table>
+
+### Grid
+
+⚠️ `Grid` has been deprecated. Please use `ActionMenu` instead.
+
+<table>
+<tr>
+<th> Before </th> <th> After </th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}>
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
+    1
+  </Box>
+  <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
+    2
+  </Box>
+</Grid>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<Box display="grid" gridTemplateColumns="repeat(2, auto)" gridGap={3}>
+  <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
+    1
+  </Box>
+  <Box p={3} color="fg.onEmphasis" bg="attention.emphasis">
+    2
+  </Box>
+</Box>
+```
+
+</td>
+</tr>
+</table>
+
+### BorderBox
+
+⚠️ `BorderBox` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead.
+
+<table>
+<tr>
+<th> Before </th> <th> After </th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<BorderBox>Item 1</BorderBox>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
+  Item 1
+</Box>
+```
+
+</td>
+</tr>
+</table>
+
+### Position
+
+⚠️ `Position` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead.
+
+<table>
+<tr>
+<th> Before </th> <th> After </th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<>
+  <Position position="absolute">...</Position>
+  <Absolute>...</Absolute>
+  <Relative>...</Relative>
+  <Fixed>...</Fixed>
+  <Sticky>...</Sticky>
+</>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<>
+  <Box position="absolute">...</Box>
+  <Box position="absolute">...</Box>
+  <Box position="relative">...</Box>
+  <Box position="fixed">...</Box>
+  <Box position="sticky">...</Box>
+</>
+```
+
+</td>
+</tr>
+</table>
diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md
@@ -12,21 +12,21 @@ Use [Box](/Box) instead.
 
 **Before**
 
-```jsx
+```jsx deprecated
 <BorderBox>Item 1</BorderBox>
 ```
 
 **After**
 
-```jsx
+```jsx deprecated
 <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
   Item 1
 </Box>
 ```
 
 ## Default example
 
-```jsx live
+```jsx live deprecated
 <BorderBox>This is a BorderBox</BorderBox>
 ```
 

diff --git a/docs/content/deprecated/Dialog.md b/docs/content/deprecated/Dialog.md
@@ -9,7 +9,7 @@ Use [Dialog2](/Dialog2) instead.
 
 **Before**
 
-```jsx
+```jsx deprecated
 <Dialog isOpen={open} onDismiss={() => setOpen(false)} aria-labelledby="header-id">
   <Dialog.Header id="header-id">Title</Dialog.Header>
   <Box p={3}>
@@ -20,7 +20,7 @@ Use [Dialog2](/Dialog2) instead.
 
 **After**
 
-```jsx
+```jsx deprecated
 {
   open && (
     <Dialog2
@@ -59,7 +59,7 @@ If you're running into z-index issues or are rendering the component inside of a
 
 ### Examples
 
-```jsx live
+```jsx deprecated live
 <State default={false}>
   {([isOpen, setIsOpen]) => {
     const returnFocusRef = React.useRef(null)
@@ -87,7 +87,7 @@ If you're running into z-index issues or are rendering the component inside of a
 
 You can also pass any non-text content into the header:
 
-```jsx live
+```jsx deprecated live
 <State default={false}>
   {([isOpen, setIsOpen]) => {
     const returnFocusRef = React.useRef(null)

diff --git a/docs/content/deprecated/Dropdown.md b/docs/content/deprecated/Dropdown.md
@@ -5,7 +5,7 @@ status: Deprecated
 
 ## Deprecation
 
-Use [DropdownMenu](/DropdownMenu) instead.
+Use [ActionMenu](/ActionMenu) instead.
 
 ---
 
@@ -17,7 +17,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi
 
 ## Default example
 
-```jsx live
+```jsx live deprecated
 <Dropdown>
   <Dropdown.Button>Dropdown</Dropdown.Button>
   <Dropdown.Menu direction="sw">
@@ -30,7 +30,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi
 
 ## With custom button
 
-```jsx live
+```jsx live deprecated
 <Dropdown>
   <summary>
     Dropdown

diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md
@@ -12,7 +12,7 @@ Use [Box](/Box) instead.
 
 **Before**
 
-```jsx
+```jsx deprecated
 <Flex flexWrap="nowrap">
   <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
     Item 1
@@ -22,7 +22,7 @@ Use [Box](/Box) instead.
 
 **After**
 
-```jsx
+```jsx deprecated
 <Box display="flex" flexWrap="nowrap">
   <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">
     Item 1
@@ -32,7 +32,7 @@ Use [Box](/Box) instead.
 
 ## Default example
 
-```jsx live
+```jsx deprecated live
 <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" width={300} height={300} borderRadius={0}>
   <Flex flexWrap="nowrap">
     <Box p={3} color="fg.onEmphasis" bg="accent.emphasis">