Skip to content

Commit 3f50ef5

Browse files
mperrottirezrahsiddharthkpcolebemispksjce
authored
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>
1 parent 77e123f commit 3f50ef5

28 files changed

+68
-241
lines changed

‎.changeset/seven-hornets-jam.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Adds button element selector to FilteredSearch button styles

‎docs/content/CheckboxGroup.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: CheckboxGroup
3+
componentId: checkbox_group
34
description: Renders a set of checkboxes to let users make one or more selections from a short list of options
45
status: Alpha
56
source: https://github.com/primer/react/blob/main/src/CheckboxGroup/CheckboxGroup.tsx

‎docs/content/Dialog2.mdx renamed to ‎docs/content/Dialog.mdx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
2-
title: Dialog v2
2+
title: Dialog
3+
componentId: dialog
34
status: Alpha
45
---
56

@@ -53,7 +54,7 @@ By default, the Dialog component implements the design and interactions defined
5354
<>
5455
<Button onClick={openDialog}>Open</Button>
5556
{isOpen && (
56-
<Dialog2
57+
<Dialog
5758
title="Dialog example"
5859
subtitle={
5960
<>
@@ -64,7 +65,7 @@ By default, the Dialog component implements the design and interactions defined
6465
onClose={closeDialog}
6566
>
6667
<Text fontFamily="sans-serif">Some content</Text>
67-
</Dialog2>
68+
</Dialog>
6869
)}
6970
</>
7071
)

‎docs/content/FilteredSearch.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
1212

1313
```jsx live
1414
<FilteredSearch>
15-
<Dropdown>
16-
<Dropdown.Button>Filter</Dropdown.Button>
17-
<Dropdown.Menu direction="sw">
18-
<Dropdown.Item>Item 1</Dropdown.Item>
19-
<Dropdown.Item>Item 2</Dropdown.Item>
20-
<Dropdown.Item>Item 3</Dropdown.Item>
21-
</Dropdown.Menu>
22-
</Dropdown>
15+
<ActionMenu>
16+
<ActionMenu.Button as="summary">Filter</ActionMenu.Button>
17+
<ActionMenu.Overlay>
18+
<ActionList direction="sw">
19+
<ActionList.Item>Item 1</ActionList.Item>
20+
<ActionList.Item>Item 2</ActionList.Item>
21+
<ActionList.Item>Item 3</ActionList.Item>
22+
</ActionList>
23+
</ActionMenu.Overlay>
24+
</ActionMenu>
2325
<TextInput icon={SearchIcon} />
2426
</FilteredSearch>
2527
```

‎docs/content/IconButton.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: IconButton
3+
componentId: icon_button
34
status: Alpha
45
source: https://github.com/primer/react/tree/main/src/Button2
56
storybook: '/react/storybook?path=/story/composite-components-button2'

‎docs/content/LinkButton.mdx

Lines changed: 0 additions & 107 deletions
This file was deleted.

‎docs/content/PageLayout.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: PageLayout
3+
componentId: page_layout
34
status: Alpha
45
# description: TODO
56
source: https://github.com/primer/react/tree/main/src/PageLayout

‎docs/content/Popover.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import {Popover} from '@primer/react'
1414

1515
```jxs live
1616
<Box position="relative">
17-
<Text textAlign="center" display="block">
18-
<ButtonPrimary>Hello!</ButtonPrimary>
19-
</Text>
17+
<Box justifyContent="center" display="flex">
18+
<Button variant="primary">Hello!</Button>
19+
</Box>
2020
2121
<Popover relative open={true} caret="top">
2222
<Popover.Content sx={{mt: 2}}>

‎docs/content/RadioGroup.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: RadioGroup
3+
componentId: radio_group
34
description: Renders a set of radio inputs to let users make a single selection from a short list of options
45
status: Alpha
56
source: https://github.com/primer/react/blob/main/src/RadioGroup/RadioGroup.tsx

‎docs/content/SelectPanel.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ function DemoComponent() {
4545
return (
4646
<SelectPanel
4747
renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
48-
<DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
48+
<Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
4949
{children || 'Select Labels'}
50-
</DropdownButton>
50+
</Button>
5151
)}
5252
placeholderText="Filter Labels"
5353
open={open}

‎docs/content/SubNav.md

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -48,20 +48,22 @@ This ensures that the NavLink gets `activeClassName='selected'`
4848
```jsx live
4949
<SubNav aria-label="Main">
5050
<FilteredSearch>
51-
<Dropdown>
52-
<Dropdown.Button>Filter</Dropdown.Button>
53-
<Dropdown.Menu direction="sw">
54-
<Dropdown.Item>
55-
<a href="#">Item 1</a>
56-
</Dropdown.Item>
57-
<Dropdown.Item>
58-
<a href="#">Item 2</a>
59-
</Dropdown.Item>
60-
<Dropdown.Item>
61-
<a href="#">Item 3</a>
62-
</Dropdown.Item>
63-
</Dropdown.Menu>
64-
</Dropdown>
51+
<ActionMenu>
52+
<ActionMenu.Button>Filter</ActionMenu.Button>
53+
<ActionMenu.Overlay>
54+
<ActionList direction="sw">
55+
<ActionList.Item>
56+
<a href="#">Item 1</a>
57+
</ActionList.Item>
58+
<ActionList.Item>
59+
<a href="#">Item 2</a>
60+
</ActionList.Item>
61+
<ActionList.Item>
62+
<a href="#">Item 3</a>
63+
</ActionList.Item>
64+
</ActionList>
65+
</ActionMenu.Overlay>
66+
</ActionMenu>
6567
<TextInput type="search" icon={SearchIcon} width={320} />
6668
</FilteredSearch>
6769
<SubNav.Links>

‎docs/content/deprecated/ActionList.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
2-
componentId: action_list
3-
title: ActionList
2+
title: ActionList (legacy)
43
status: Deprecated
54
source: https://github.com/primer/react/tree/main/src/deprecated/ActionList
65
---

‎docs/content/deprecated/ActionMenu.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
2-
componentId: action_menu
3-
title: ActionMenu
2+
title: ActionMenu (legacy)
43
status: Deprecated
54
source: https://github.com/primer/react/tree/main/src/deprecated/ActionMenu.tsx
65
---

‎docs/content/deprecated/BorderBox.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
componentId: border_box
32
title: BorderBox
43
status: Deprecated
54
---

‎docs/content/deprecated/Buttons.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
2-
componentId: button
3-
title: Button
2+
title: Button (legacy)
43
status: deprecated
54
source: https://github.com/primer/react/blob/main/src/Button
65
storybook: '/react/storybook?path=/story/composite-components-button--default-button'

‎docs/content/deprecated/ChoiceInputField.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
componentId: choiceInputField
32
title: ChoiceInputField
43
status: Deprecated
54
description: The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional hint text.

‎docs/content/deprecated/Dialog.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
title: Dialog
2+
title: Dialog (legacy)
33
status: Deprecated
44
---
55

66
## Deprecation
77

8-
Use [Dialog2](/Dialog2) instead.
8+
Use the [new version of Dialog](/Dialog) instead.
99

1010
**Before**
1111

@@ -23,7 +23,7 @@ Use [Dialog2](/Dialog2) instead.
2323
```jsx deprecated
2424
{
2525
open && (
26-
<Dialog2
26+
<Dialog
2727
title="Dialog example"
2828
subtitle={
2929
<>
@@ -34,13 +34,11 @@ Use [Dialog2](/Dialog2) instead.
3434
onClose={() => setOpen(false)}
3535
>
3636
<Text fontFamily="sans-serif">Some content</Text>
37-
</Dialog2>
37+
</Dialog>
3838
)
3939
}
4040
```
4141

42-
import State from '../../components/State'
43-
4442
The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
4543

4644
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:
111109
</Text>
112110
<Box display="flex" mt={3} justifyContent="flex-end">
113111
<Button sx={{mr: 1}}>Cancel</Button>
114-
<ButtonDanger>Delete</ButtonDanger>
112+
<Button variant="danger">Delete</Button>
115113
</Box>
116114
</Box>
117115
</Dialog>

‎docs/content/deprecated/DropdownMenu.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
componentId: dropdown_menu
32
title: DropdownMenu
43
status: Deprecated
54
---

‎docs/content/deprecated/Flex.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
componentId: flex
32
title: Flex
43
status: Deprecated
54
---

‎docs/content/deprecated/FormGroup.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
componentId: form_group
32
title: FormGroup
43
status: Deprecated
54
---

‎docs/content/deprecated/Grid.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
componentId: grid
32
title: Grid
43
status: Deprecated
54
---

‎docs/content/deprecated/InputField.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
componentId: inputField
32
title: InputField
43
status: Deprecated
54
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Label
2+
title: Label (legacy)
33
description: Use Label components to add contextual metadata to a design.
44
status: Deprecated
55
source: https://github.com/primer/react/blob/main/src/Label.tsx

‎docs/content/deprecated/Position.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
---
2-
componentId: position
32
title: Position
43
status: Deprecated
54
---

0 commit comments

Comments
 (0)