Skip to content

Commit 03d5d19

Browse files
kyletsangkyletsang
authored
docs: clean up examples (#6853)
1 parent 02c915a commit 03d5d19

19 files changed

+122
-232
lines changed

‎www/docs/components/overlays.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ compliant.
104104

105105
Hover over the links below to see tooltips.
106106

107-
<CodeBlock language="jsx" live>
107+
<CodeBlock language="jsx" live noInline>
108108
{TooltipInCopy}
109109
</CodeBlock>
110110

‎www/docs/examples/Button/Active.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ function ActiveExample() {
55
<>
66
<Button variant="primary" size="lg" active>
77
Primary button
8-
</Button>{' '}
8+
</Button>
99
<Button variant="secondary" size="lg" active>
1010
Button
1111
</Button>

‎www/docs/examples/Button/Disabled.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ function DisabledExample() {
55
<>
66
<Button variant="primary" size="lg" disabled>
77
Primary button
8-
</Button>{' '}
8+
</Button>
99
<Button variant="secondary" size="lg" disabled>
1010
Button
11-
</Button>{' '}
11+
</Button>
1212
<Button href="#" variant="secondary" size="lg" disabled>
1313
Link
1414
</Button>

‎www/docs/examples/Button/OutlineTypes.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import Button from 'react-bootstrap/Button';
33
function OutlineTypesExample() {
44
return (
55
<>
6-
<Button variant="outline-primary">Primary</Button>{' '}
7-
<Button variant="outline-secondary">Secondary</Button>{' '}
8-
<Button variant="outline-success">Success</Button>{' '}
9-
<Button variant="outline-warning">Warning</Button>{' '}
10-
<Button variant="outline-danger">Danger</Button>{' '}
11-
<Button variant="outline-info">Info</Button>{' '}
12-
<Button variant="outline-light">Light</Button>{' '}
6+
<Button variant="outline-primary">Primary</Button>
7+
<Button variant="outline-secondary">Secondary</Button>
8+
<Button variant="outline-success">Success</Button>
9+
<Button variant="outline-warning">Warning</Button>
10+
<Button variant="outline-danger">Danger</Button>
11+
<Button variant="outline-info">Info</Button>
12+
<Button variant="outline-light">Light</Button>
1313
<Button variant="outline-dark">Dark</Button>
1414
</>
1515
);

‎www/docs/examples/Button/Sizes.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ import Button from 'react-bootstrap/Button';
33
function SizesExample() {
44
return (
55
<>
6-
<div className="mb-2">
6+
<div className="d-flex gap-2 mb-2">
77
<Button variant="primary" size="lg">
88
Large button
9-
</Button>{' '}
9+
</Button>
1010
<Button variant="secondary" size="lg">
1111
Large button
1212
</Button>
1313
</div>
14-
<div>
14+
<div className="d-flex gap-2">
1515
<Button variant="primary" size="sm">
1616
Small button
17-
</Button>{' '}
17+
</Button>
1818
<Button variant="secondary" size="sm">
1919
Small button
2020
</Button>

‎www/docs/examples/Button/TagTypes.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import Button from 'react-bootstrap/Button';
33
function TagTypesExample() {
44
return (
55
<>
6-
<Button href="#">Link</Button> <Button type="submit">Button</Button>{' '}
7-
<Button as="input" type="button" value="Input" />{' '}
8-
<Button as="input" type="submit" value="Submit" />{' '}
6+
<Button href="#">Link</Button> <Button type="submit">Button</Button>
7+
<Button as="input" type="button" value="Input" />
8+
<Button as="input" type="submit" value="Submit" />
99
<Button as="input" type="reset" value="Reset" />
1010
</>
1111
);

‎www/docs/examples/Button/Types.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import Button from 'react-bootstrap/Button';
33
function TypesExample() {
44
return (
55
<>
6-
<Button variant="primary">Primary</Button>{' '}
7-
<Button variant="secondary">Secondary</Button>{' '}
8-
<Button variant="success">Success</Button>{' '}
9-
<Button variant="warning">Warning</Button>{' '}
10-
<Button variant="danger">Danger</Button>{' '}
11-
<Button variant="info">Info</Button>{' '}
12-
<Button variant="light">Light</Button>{' '}
6+
<Button variant="primary">Primary</Button>
7+
<Button variant="secondary">Secondary</Button>
8+
<Button variant="success">Success</Button>
9+
<Button variant="warning">Warning</Button>
10+
<Button variant="danger">Danger</Button>
11+
<Button variant="info">Info</Button>
12+
<Button variant="light">Light</Button>
1313
<Button variant="dark">Dark</Button>
1414
<Button variant="link">Link</Button>
1515
</>

‎www/docs/examples/ButtonGroup/Toolbar.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ function ToolbarExample() {
99
<>
1010
<ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">
1111
<ButtonGroup className="me-2" aria-label="First group">
12-
<Button variant="secondary">1</Button>{' '}
13-
<Button variant="secondary">2</Button>{' '}
14-
<Button variant="secondary">3</Button>{' '}
12+
<Button variant="secondary">1</Button>
13+
<Button variant="secondary">2</Button>
14+
<Button variant="secondary">3</Button>
1515
<Button variant="secondary">4</Button>
1616
</ButtonGroup>
1717
<InputGroup>
@@ -30,9 +30,9 @@ function ToolbarExample() {
3030
aria-label="Toolbar with Button groups"
3131
>
3232
<ButtonGroup aria-label="First group">
33-
<Button variant="secondary">1</Button>{' '}
34-
<Button variant="secondary">2</Button>{' '}
35-
<Button variant="secondary">3</Button>{' '}
33+
<Button variant="secondary">1</Button>
34+
<Button variant="secondary">2</Button>
35+
<Button variant="secondary">3</Button>
3636
<Button variant="secondary">4</Button>
3737
</ButtonGroup>
3838
<InputGroup>

‎www/docs/examples/ButtonGroup/ToolbarBasic.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@ function ToolbarBasicExample() {
66
return (
77
<ButtonToolbar aria-label="Toolbar with button groups">
88
<ButtonGroup className="me-2" aria-label="First group">
9-
<Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}
9+
<Button>1</Button>
10+
<Button>2</Button>
11+
<Button>3</Button>
1012
<Button>4</Button>
1113
</ButtonGroup>
1214
<ButtonGroup className="me-2" aria-label="Second group">
13-
<Button>5</Button> <Button>6</Button> <Button>7</Button>
15+
<Button>5</Button>
16+
<Button>6</Button>
17+
<Button>7</Button>
1418
</ButtonGroup>
1519
<ButtonGroup aria-label="Third group">
1620
<Button>8</Button>

‎www/docs/examples/Card/Group.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ function GroupExample() {
2323
<Card.Title>Card title</Card.Title>
2424
<Card.Text>
2525
This card has supporting text below as a natural lead-in to
26-
additional content.{' '}
26+
additional content.
2727
</Card.Text>
2828
</Card.Body>
2929
<Card.Footer>

‎www/docs/examples/Card/WithHeaderAndQuote.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ function WithHeaderAndQuoteExample() {
77
<Card.Body>
88
<blockquote className="blockquote mb-0">
99
<p>
10-
{' '}
1110
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
12-
posuere erat a ante.{' '}
11+
posuere erat a ante.
1312
</p>
1413
<footer className="blockquote-footer">
1514
Someone famous in <cite title="Source Title">Source Title</cite>

‎www/docs/examples/Dropdown/ButtonCustom.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function ButtonCustomExample() {
1616
<Dropdown.Divider />
1717
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
1818
</Dropdown.Menu>
19-
</Dropdown>{' '}
19+
</Dropdown>
2020
<Dropdown as={ButtonGroup}>
2121
<Button variant="info">mix it up style-wise</Button>
2222
<Dropdown.Toggle split variant="success" id="dropdown-custom-2" />

‎www/docs/examples/Dropdown/ButtonSizes.js

+32-35
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,38 @@ import SplitButton from 'react-bootstrap/SplitButton';
66
function ButtonSizesExample() {
77
return (
88
<>
9-
<div className="mb-2">
10-
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
11-
<DropdownType
12-
as={ButtonGroup}
13-
key={idx}
14-
id={`dropdown-button-drop-${idx}`}
15-
size="lg"
16-
title="Drop large"
17-
>
18-
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
19-
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
20-
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
21-
<Dropdown.Divider />
22-
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
23-
</DropdownType>
24-
))}
25-
</div>
26-
<div>
27-
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
28-
<DropdownType
29-
as={ButtonGroup}
30-
key={idx}
31-
id={`dropdown-button-drop-${idx}`}
32-
size="sm"
33-
variant="secondary"
34-
title="Drop small"
35-
>
36-
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
37-
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
38-
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
39-
<Dropdown.Divider />
40-
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
41-
</DropdownType>
42-
))}
43-
</div>
9+
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
10+
<DropdownType
11+
as={ButtonGroup}
12+
key={idx}
13+
id={`dropdown-button-drop-${idx}`}
14+
size="lg"
15+
title="Drop large"
16+
>
17+
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
18+
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
19+
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
20+
<Dropdown.Divider />
21+
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
22+
</DropdownType>
23+
))}
24+
25+
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
26+
<DropdownType
27+
as={ButtonGroup}
28+
key={idx}
29+
id={`dropdown-button-drop-${idx}`}
30+
size="sm"
31+
variant="secondary"
32+
title="Drop small"
33+
>
34+
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
35+
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
36+
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
37+
<Dropdown.Divider />
38+
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
39+
</DropdownType>
40+
))}
4441
</>
4542
);
4643
}

‎www/docs/examples/Dropdown/DropDirections.js

+37-41
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,47 @@ import Dropdown from 'react-bootstrap/Dropdown';
22
import DropdownButton from 'react-bootstrap/DropdownButton';
33
import SplitButton from 'react-bootstrap/SplitButton';
44

5-
function DropDirectioExample() {
5+
function DropDirectionExample() {
66
return (
77
<>
8-
<div className="mb-2">
9-
{['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
10-
(direction) => (
11-
<DropdownButton
12-
as={ButtonGroup}
13-
key={direction}
14-
id={`dropdown-button-drop-${direction}`}
15-
drop={direction}
16-
variant="secondary"
17-
title={` Drop ${direction} `}
18-
>
19-
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
20-
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
21-
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
22-
<Dropdown.Divider />
23-
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
24-
</DropdownButton>
25-
),
26-
)}
27-
</div>
8+
{['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
9+
(direction) => (
10+
<DropdownButton
11+
as={ButtonGroup}
12+
key={direction}
13+
id={`dropdown-button-drop-${direction}`}
14+
drop={direction}
15+
variant="secondary"
16+
title={`Drop ${direction}`}
17+
>
18+
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
19+
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
20+
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
21+
<Dropdown.Divider />
22+
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
23+
</DropdownButton>
24+
),
25+
)}
2826

29-
<div>
30-
{['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
31-
(direction) => (
32-
<SplitButton
33-
key={direction}
34-
id={`dropdown-button-drop-${direction}`}
35-
drop={direction}
36-
variant="secondary"
37-
title={`Drop ${direction}`}
38-
>
39-
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
40-
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
41-
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
42-
<Dropdown.Divider />
43-
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
44-
</SplitButton>
45-
),
46-
)}
47-
</div>
27+
{['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
28+
(direction) => (
29+
<SplitButton
30+
key={direction}
31+
id={`dropdown-button-drop-${direction}`}
32+
drop={direction}
33+
variant="secondary"
34+
title={`Drop ${direction}`}
35+
>
36+
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
37+
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
38+
<Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
39+
<Dropdown.Divider />
40+
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
41+
</SplitButton>
42+
),
43+
)}
4844
</>
4945
);
5046
}
5147

52-
export default DropDirectioExample;
48+
export default DropDirectionExample;

0 commit comments

Comments
 (0)