Skip to content

Commit 13aec68

Browse files
siddharthkpsiddharthkp
committed
Docs: change import to lib-esm, show import in examples
1 parent 6404152 commit 13aec68

File tree

6 files changed

+165
-97
lines changed

6 files changed

+165
-97
lines changed

‎docs/content/drafts/ActionList2.mdx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,15 @@ import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code
4343
</Box>
4444

4545
```js
46-
import {ActionList} from '@primer/react/drafts'
46+
import {ActionList} from '@primer/react/lib-esm/drafts'
4747
```
4848

4949
## Examples
5050

5151
### Minimal example
5252

5353
```javascript live noinline
54-
// import {ActionList} from '@primer/react/drafts'
54+
// import {ActionList} from '@primer/react/lib-esm/drafts'
5555
const {ActionList} = drafts // ignore docs silliness; import like that ↑
5656

5757
render(
@@ -71,7 +71,7 @@ Leading visuals are optional and appear at the start of an item. They can be oct
7171

7272
<!-- prettier-ignore -->
7373
```javascript live noinline
74-
// import {ActionList} from '@primer/react/drafts'
74+
// import {ActionList} from '@primer/react/lib-esm/drafts'
7575
const {ActionList} = drafts // ignore docs silliness; import like that ↑
7676

7777
render(
@@ -97,7 +97,7 @@ render(
9797
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.
9898
9999
```javascript live noinline
100-
// import {ActionList} from '@primer/react/drafts'
100+
// import {ActionList} from '@primer/react/lib-esm/drafts'
101101
const {ActionList} = drafts // ignore docs silliness; import like that ↑
102102
103103
render(
@@ -127,7 +127,7 @@ render(
127127
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.
128128

129129
```javascript live noinline
130-
// import {ActionList} from '@primer/react/drafts'
130+
// import {ActionList} from '@primer/react/lib-esm/drafts'
131131
const {ActionList} = drafts // ignore docs silliness; import like that ↑
132132

133133
render(
@@ -163,7 +163,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
163163

164164
<!-- prettier-ignore -->
165165
```javascript live noinline
166-
// import {ActionList} from '@primer/react/drafts'
166+
// import {ActionList} from '@primer/react/lib-esm/drafts'
167167
const {ActionList} = drafts // ignore docs silliness; import like that ↑
168168

169169
render(
@@ -197,7 +197,7 @@ render(
197197
### With groups
198198
199199
```javascript live noinline
200-
// import {ActionList} from '@primer/react/drafts'
200+
// import {ActionList} from '@primer/react/lib-esm/drafts'
201201
const {ActionList} = drafts // ignore docs silliness; import like that ↑
202202
203203
const SelectFields = () => {

‎docs/content/drafts/ActionMenu2.mdx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import {Props} from '../../src/props'
4343
<br />
4444

4545
```js
46-
import {ActionMenu} from '@primer/react/drafts'
46+
import {ActionMenu} from '@primer/react/lib-esm/drafts'
4747
```
4848

4949
<br />
@@ -57,7 +57,7 @@ import {ActionMenu} from '@primer/react/drafts'
5757
&nbsp;
5858

5959
```javascript live noinline
60-
// import {ActionMenu, ActionList} from '@primer/react/drafts'
60+
// import {ActionMenu, ActionList} from '@primer/react/lib-esm/drafts'
6161
const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
6262

6363
render(
@@ -84,7 +84,7 @@ You can choose to have a different _anchor_ for the Menu dependending on the app
8484
&nbsp;
8585

8686
```javascript live noinline
87-
// import {ActionMenu, ActionList} from '@primer/react/drafts'
87+
// import {ActionMenu, ActionList} from '@primer/react/lib-esm/drafts'
8888
const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
8989

9090
render(
@@ -124,7 +124,7 @@ render(
124124
### With Groups
125125

126126
```javascript live noinline
127-
// import {ActionMenu, ActionList} from '@primer/react/drafts'
127+
// import {ActionMenu, ActionList} from '@primer/react/lib-esm/drafts'
128128
const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
129129

130130
render(
@@ -195,7 +195,7 @@ render(
195195
To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`. Make sure you add `aria-expanded` and `aria-haspopup` to the external anchor:
196196

197197
```javascript live noinline
198-
// import {ActionMenu, ActionList} from '@primer/react/drafts'
198+
// import {ActionMenu, ActionList} from '@primer/react/lib-esm/drafts'
199199
const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
200200

201201
const Example = () => {
@@ -231,7 +231,7 @@ render(<Example />)
231231
To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`:
232232

233233
```javascript live noinline
234-
// import {ActionMenu, ActionList} from '@primer/react/drafts'
234+
// import {ActionMenu, ActionList} from '@primer/react/lib-esm/drafts'
235235
const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
236236

237237
const handleEscape = () => alert('you hit escape!')

‎docs/content/drafts/Button2.mdx

Lines changed: 86 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -16,96 +16,126 @@ import {Button, IconButton, LinkButton} from '@primer/react/drafts'
1616
### Installation
1717

1818
```js
19-
import {Button} from '@primer/react/drafts'
19+
import {Button} from '@primer/react/lib-esm/drafts'
2020
```
2121

2222
### Default button
2323

2424
This is the default variant for the `Button` component.
2525

26-
```jsx live
27-
<drafts.Button>Default</drafts.Button>
26+
```javascript live noinline
27+
// import {Button} from '@primer/react/lib-esm/drafts'
28+
const {Button} = drafts // ignore docs silliness; import like that ↑
29+
30+
render(<Button>Default</Button>)
2831
```
2932

3033
### Danger button
3134

3235
The `danger` variant of `Button` is used to warn users about potentially destructive actions
3336

34-
```jsx live
35-
<drafts.Button variant="danger">Danger</drafts.Button>
37+
```javascript live noinline
38+
// import {Button} from '@primer/react/lib-esm/drafts'
39+
const {Button} = drafts // ignore docs silliness; import like that ↑
40+
41+
render(<Button variant="danger">Danger</Button>)
3642
```
3743

3844
### Outline button
3945

4046
The `outline` variant of `Button` is typically used as a secondary button
4147

42-
```jsx live
43-
<drafts.Button variant="outline">Outline</drafts.Button>
48+
```javascript live noinline
49+
// import {Button} from '@primer/react/lib-esm/drafts'
50+
const {Button} = drafts // ignore docs silliness; import like that ↑
51+
52+
render(<Button variant="outline">Outline</Button>)
4453
```
4554

4655
### Invisible button
4756

4857
The `invisible` variant of `Button` indicates that the action is a low priority one.
4958

50-
```jsx live
51-
<drafts.Button variant="invisible">Invisible</drafts.Button>
59+
```javascript live noinline
60+
// import {Button} from '@primer/react/lib-esm/drafts'
61+
const {Button} = drafts // ignore docs silliness; import like that ↑
62+
63+
render(<Button variant="invisible">Invisible</Button>)
5264
```
5365

5466
### Different sized buttons
5567

5668
`Button` component supports three different sizes. `small`, `medium`, `large`.
5769

58-
```jsx live
59-
<>
60-
<drafts.Button size="small">Search</drafts.Button>
61-
<drafts.Button sx={{mt: 2}}>Search</drafts.Button>
62-
<drafts.Button sx={{mt: 2}} size="large">
63-
Search
64-
</drafts.Button>
65-
</>
70+
```javascript live noinline
71+
// import {Button} from '@primer/react/lib-esm/drafts'
72+
const {Button} = drafts // ignore docs silliness; import like that ↑
73+
74+
render(
75+
<>
76+
<Button size="small">Search</Button>
77+
<Button sx={{mt: 2}}>Search</Button>
78+
<Button sx={{mt: 2}} size="large">
79+
Search
80+
</Button>
81+
</>
82+
)
6683
```
6784

6885
### Appending an icon
6986

7087
We can place an inside the `Button` in either the leading or the trailing position to enhance the visual context.
7188
It is recommended to use an octicon here.
7289

73-
```jsx live
74-
<>
75-
<drafts.Button leadingIcon={SearchIcon}>Search</drafts.Button>
76-
<drafts.Button trailingIcon={SearchIcon} sx={{mt: 2}}>
77-
Search
78-
</drafts.Button>
79-
<drafts.Button leadingIcon={SearchIcon} trailingIcon={CheckIcon} sx={{mt: 2}}>
80-
Search
81-
</drafts.Button>
82-
</>
90+
```javascript live noinline
91+
// import {Button} from '@primer/react/lib-esm/drafts'
92+
const {Button} = drafts // ignore docs silliness; import like that ↑
93+
94+
render(
95+
<>
96+
<Button leadingIcon={SearchIcon}>Search</Button>
97+
<Button trailingIcon={SearchIcon} sx={{mt: 2}}>
98+
Search
99+
</Button>
100+
<Button leadingIcon={SearchIcon} trailingIcon={CheckIcon} sx={{mt: 2}}>
101+
Search
102+
</Button>
103+
</>
104+
)
83105
```
84106

85107
### Icon only button
86108

87109
A separate component called `IconButton` is used if the action shows only an icon with no text. This button will remain square in shape.
88110

89-
```jsx live
90-
<drafts.IconButton icon={SearchIcon}>Search</drafts.IconButton>
111+
```javascript live noinline
112+
// import {Button} from '@primer/react/lib-esm/drafts'
113+
const {Button, IconButton} = drafts // ignore docs silliness; import like that ↑
114+
115+
render(<IconButton icon={SearchIcon}>Search</IconButton>)
91116
```
92117

93118
### Different sized icon buttons
94119

95120
`IconButton` also supports the three different sizes. `small`, `medium`, `large`.
96121

97-
```jsx live
98-
<>
99-
<drafts.IconButton icon={SearchIcon} size="small">
100-
Search
101-
</drafts.IconButton>
102-
<drafts.IconButton sx={{ml: 2}} icon={SearchIcon}>
103-
Search
104-
</drafts.IconButton>
105-
<drafts.IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
106-
Search
107-
</drafts.IconButton>
108-
</>
122+
```javascript live noinline
123+
// import {Button} from '@primer/react/lib-esm/drafts'
124+
const {Button, IconButton} = drafts // ignore docs silliness; import like that ↑
125+
126+
render(
127+
<>
128+
<IconButton icon={SearchIcon} size="small">
129+
Search
130+
</IconButton>
131+
<IconButton sx={{ml: 2}} icon={SearchIcon}>
132+
Search
133+
</IconButton>
134+
<IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
135+
Search
136+
</IconButton>
137+
</>
138+
)
109139
```
110140

111141
### Counter component
@@ -114,20 +144,28 @@ A common use case for primer is a button with a counter component which shows th
114144
We provide `Button.Counter` as a composite component which requires you to provide a number as child.
115145
The counter will match the `variant` styles of the parent button.
116146

117-
```jsx live
118-
<drafts.Button>
119-
Watch
120-
<drafts.Button.Counter>1</drafts.Button.Counter>
121-
</drafts.Button>
147+
```javascript live noinline
148+
// import {Button} from '@primer/react/lib-esm/drafts'
149+
const {Button} = drafts // ignore docs silliness; import like that ↑
150+
151+
render(
152+
<Button>
153+
Watch
154+
<Button.Counter>1</Button.Counter>
155+
</Button>
156+
)
122157
```
123158

124159
### Styling a button
125160

126161
A button can be styled in an appropriate manner using the `sx` prop. This maybe to change width, or to add margins etc.
127162
Here's an example of a block button which takes 100% of available width. Checkout [styled-system](https://styled-system.com/) to see what you can send in an `sx` prop.
128163

129-
```jsx live
130-
<drafts.Button sx={{width: '100%'}}>Block</drafts.Button>
164+
```javascript live noinline
165+
// import {Button} from '@primer/react/lib-esm/drafts'
166+
const {Button} = drafts // ignore docs silliness; import like that ↑
167+
168+
render(<Button sx={{width: '100%'}}>Block</Button>)
131169
```
132170

133171
## API reference

‎docs/content/drafts/IconButton.mdx

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,41 @@ import {ComponentChecklist} from '../../src/component-checklist'
1414
### Installation
1515

1616
```js
17-
import {IconButton} from '@primer/react/drafts'
17+
import {IconButton} from '@primer/react/lib-esm/drafts'
1818
```
1919

2020
### Icon only button
2121

2222
A separate component called `IconButton` is used if the action shows only an icon with no text. This button will remain square in shape.
2323

24-
```jsx live
25-
<drafts.IconButton icon={SearchIcon}>Search</drafts.IconButton>
24+
```javascript live noinline
25+
// import {IconButton} from '@primer/react/lib-esm/drafts'
26+
const {IconButton} = drafts // ignore docs silliness; import like that ↑
27+
28+
render(<IconButton icon={SearchIcon}>Search</IconButton>)
2629
```
2730

2831
### Different sized icon buttons
2932

3033
`IconButton` also supports the three different sizes. `small`, `medium`, `large`.
3134

32-
```jsx live
33-
<>
34-
<drafts.IconButton icon={SearchIcon} size="small">
35-
Search
36-
</drafts.IconButton>
37-
<drafts.IconButton sx={{ml: 2}} icon={SearchIcon}>
38-
Search
39-
</drafts.IconButton>
40-
<drafts.IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
41-
Search
42-
</drafts.IconButton>
43-
</>
35+
```javascript live noinline
36+
// import {IconButton} from '@primer/react/lib-esm/drafts'
37+
const {IconButton} = drafts // ignore docs silliness; import like that ↑
38+
39+
render(
40+
<>
41+
<IconButton icon={SearchIcon} size="small">
42+
Search
43+
</IconButton>
44+
<IconButton sx={{ml: 2}} icon={SearchIcon}>
45+
Search
46+
</IconButton>
47+
<IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
48+
Search
49+
</IconButton>
50+
</>
51+
)
4452
```
4553

4654
## API reference

0 commit comments

Comments
 (0)