Skip to content

Docs: Remove drafts silliness from examples#1785

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siddharthkp merged 18 commits into from
Jan 31, 2022
Merged

Docs: Remove drafts silliness from examples #1785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
432176e
use doctocat from #332
siddharthkp Jan 11, 2022
4c38478
make live-code a function
siddharthkp Jan 11, 2022
f2393bc
update docs
siddharthkp Jan 11, 2022
ef35e47
can make code inline now :)
siddharthkp Jan 11, 2022
452352d
jsx instead of javascript
siddharthkp Jan 11, 2022
f29bec7
Make the variable for adding drafts to scope more explicit
siddharthkp Jan 14, 2022
2f66352
Bring changes from 1778
siddharthkp Jan 14, 2022
4cb7e09
Add drafts to nav
siddharthkp Jan 14, 2022
b954f84
Merge branch 'main' into siddharth/docs-dynamic-drafts-scope
siddharthkp Jan 14, 2022
abe8af6
disable eslint/no-redeclare for code blocks
siddharthkp Jan 14, 2022
de695a8
revert explicit scope flag :)
siddharthkp Jan 19, 2022
ac88543
update gatsby-theme-doctocat
siddharthkp Jan 19, 2022
d2e7b4d
Merge branch 'main' into siddharth/docs-dynamic-drafts-scope
siddharthkp Jan 19, 2022
fe26d64
Merge branch 'main' into siddharth/docs-dynamic-drafts-scope
siddharthkp Jan 19, 2022
625d0c5
Merge branch 'main' into siddharth/docs-dynamic-drafts-scope
siddharthkp Jan 31, 2022
485aa2c
sync lockfile
siddharthkp Jan 31, 2022
07c9ad0
fix bad merge
siddharthkp Jan 31, 2022
0c93480
make live-scope a function
siddharthkp Jan 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -130,7 +130,8 @@
"jsx-a11y/label-has-for": 0,
"@typescript-eslint/no-unnecessary-condition": 0,
"@typescript-eslint/no-unused-vars": 0,
"primer-react/no-deprecated-colors": ["error", {"skipImportCheck": true}]
"primer-react/no-deprecated-colors": ["error", {"skipImportCheck": true}],
"no-redeclare": 0

@siddharthkpsiddharthkpJan 14, 2022•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added this for code blocks so that we can write this block ⬇️ without adding a // eslint-ignore inside the code block

// ESMimport{ActionList}from'@primer/react/lib-esm/drafts'// or commonjs:import{ActionList}from'@primer/react/lib/drafts'

}
}
]
Expand Down
216 changes: 96 additions & 120 deletions docs/content/drafts/ActionList2.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -43,163 +43,139 @@ import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code
</Box>

```js
import {ActionList} from '@primer/react/drafts'
// ESM
import {ActionList} from '@primer/react/lib-esm/drafts'
// or commonjs:
import {ActionList} from '@primer/react/lib/drafts'
Comment thread
siddharthkp marked this conversation as resolved.
```

## Examples

### Minimal example

```javascript live noinline
// import {ActionList} from '@primer/react/drafts'
const {ActionList} = drafts // ignore docs silliness; import like that ↑

render(
<ActionList>
<ActionList.Item>New file</ActionList.Item>
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Edit file</ActionList.Item>
<ActionList.Divider />
<ActionList.Item variant="danger">Delete file</ActionList.Item>
</ActionList>
)
```jsx live drafts
<ActionList>
<ActionList.Item>New file</ActionList.Item>
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Edit file</ActionList.Item>
<ActionList.Divider />
<ActionList.Item variant="danger">Delete file</ActionList.Item>
</ActionList>
```

### With leading visual

Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area.

<!-- prettier-ignore -->
```javascript live noinline
// import {ActionList} from '@primer/react/drafts'
const {ActionList} = drafts // ignore docs silliness; import like that ↑
```jsx live drafts
<ActionList>
<ActionList.Item>
<ActionList.LeadingVisual><LinkIcon /></ActionList.LeadingVisual>
github.com/primer
</ActionList.Item>
<ActionList.Item variant="danger">
<ActionList.LeadingVisual><AlertIcon /></ActionList.LeadingVisual>
4 vulnerabilities
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual><Avatar src="https://github.com/mona.png" /></ActionList.LeadingVisual>
mona
</ActionList.Item>
</ActionList>

render(
<ActionList>
<ActionList.Item>
<ActionList.LeadingVisual><LinkIcon /></ActionList.LeadingVisual>
github.com/primer
</ActionList.Item>
<ActionList.Item variant="danger">
<ActionList.LeadingVisual><AlertIcon /></ActionList.LeadingVisual>
4 vulnerabilities
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual><Avatar src="https://github.com/mona.png" /></ActionList.LeadingVisual>
mona
</ActionList.Item>
</ActionList>
)
```

### With trailing visual

Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does.

```javascript live noinline
// import {ActionList} from '@primer/react/drafts'
const {ActionList} = drafts // ignore docs silliness; import like that ↑

render(
<ActionList>
<ActionList.Item>
New file
<ActionList.TrailingVisual>⌘ + N</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
Copy link
<ActionList.TrailingVisual>⌘ + C</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
Edit file
<ActionList.TrailingVisual>⌘ + E</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item variant="danger">
Delete file
<ActionList.TrailingVisual>⌫</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
)
```jsx live drafts
<ActionList>
<ActionList.Item>
New file
<ActionList.TrailingVisual>⌘ + N</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
Copy link
<ActionList.TrailingVisual>⌘ + C</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item>
Edit file
<ActionList.TrailingVisual>⌘ + E</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item variant="danger">
Delete file
<ActionList.TrailingVisual>⌫</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
```

### With description and dividers

Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present.

```javascript live noinline
// import {ActionList} from '@primer/react/drafts'
const {ActionList} = drafts // ignore docs silliness; import like that ↑

render(
<ActionList showDividers>
<ActionList.Item>
<ActionList.LeadingVisual>
<Avatar src="https://github.com/mona.png" />
</ActionList.LeadingVisual>
mona
<ActionList.Description>Monalisa Octocat</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<Avatar src="https://github.com/hubot.png" />
</ActionList.LeadingVisual>
hubot
<ActionList.Description>Hubot</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<Avatar src="https://github.com/primer-css.png" />
</ActionList.LeadingVisual>
primer-css
<ActionList.Description>GitHub Design Systems Bot</ActionList.Description>
</ActionList.Item>
</ActionList>
)
```jsx live drafts
<ActionList showDividers>
<ActionList.Item>
<ActionList.LeadingVisual>
<Avatar src="https://github.com/mona.png" />
</ActionList.LeadingVisual>
mona
<ActionList.Description>Monalisa Octocat</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<Avatar src="https://github.com/hubot.png" />
</ActionList.LeadingVisual>
hubot
<ActionList.Description>Hubot</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<Avatar src="https://github.com/primer-css.png" />
</ActionList.LeadingVisual>
primer-css
<ActionList.Description>GitHub Design Systems Bot</ActionList.Description>
</ActionList.Item>
</ActionList>
```

### With links

When you want to add links to the List instead of actions, use `ActionList.LinkItem`

<!-- prettier-ignore -->
```javascript live noinline
// import {ActionList} from '@primer/react/drafts'
const {ActionList} = drafts // ignore docs silliness; import like that ↑

render(
<ActionList>
<ActionList.LinkItem href="https://github.com/primer">
<ActionList.LeadingVisual>
<LinkIcon />
</ActionList.LeadingVisual>
github/primer
</ActionList.LinkItem>
<ActionList.LinkItem as={ReactRouterLink} to="/">
<ActionList.LeadingVisual>
<LawIcon />
</ActionList.LeadingVisual>
MIT License
</ActionList.LinkItem>
<ActionList.LinkItem
href="https://github.com/primer/react/stargazers"
target="_blank"
rel="noopener noreferrer"
>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
1.4k stars
</ActionList.LinkItem>
</ActionList>
)
```jsx live drafts
<ActionList>
<ActionList.LinkItem href="https://github.com/primer">
<ActionList.LeadingVisual>
<LinkIcon />
</ActionList.LeadingVisual>
github/primer
</ActionList.LinkItem>
<ActionList.LinkItem as={ReactRouterLink} to="/">
<ActionList.LeadingVisual>
<LawIcon />
</ActionList.LeadingVisual>
MIT License
</ActionList.LinkItem>
<ActionList.LinkItem
href="https://github.com/primer/react/stargazers"
target="_blank"
rel="noopener noreferrer"
>
<ActionList.LeadingVisual>
<StarIcon />
</ActionList.LeadingVisual>
1.4k stars
</ActionList.LinkItem>
</ActionList>
```

### With groups

```javascript live noinline
// import {ActionList} from '@primer/react/drafts'
const {ActionList} = drafts // ignore docs silliness; import like that ↑

```javascript live noinline drafts
const SelectFields = () => {
const [options, setOptions] = React.useState([
{text: 'Status', selected: true},
Expand Down
Loading