Skip to content

Commit f617dc5

Browse files
TheSharpieOneeddywashere
TheSharpieOne
authored and
eddywashere
committed
feat(bootstrap): update for v4 alpha 3
BREAKING CHANGE: Components were updated for v4 alpha 3 - Button outline class change from `.{variant}-outline` to `.outline-{variant}`. - label is now tag and all of the label variants are now tag variants. - Cards now have an outline variant.
1 parent 897e14a commit f617dc5

17 files changed

Lines changed: 168 additions & 116 deletions

‎docs/lib/Components/CardPage.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import CardHeaderFooterExample from '../examples/CardHeaderFooter';
1111
import CardImageCapsExample from '../examples/CardImageCaps';
1212
import CardImageOverlayExample from '../examples/CardImageOverlay';
1313
import CardBackgroundsExample from '../examples/CardBackgrounds';
14+
import CardOutlineExample from '../examples/CardOutline';
1415
import CardGroupsExample from '../examples/CardGroups';
1516
import CardDecksExample from '../examples/CardDecks';
1617
import CardColumnsExample from '../examples/CardColumns';
@@ -23,6 +24,7 @@ const CardHeaderFooterExampleSource = require('!!raw!../examples/CardHeaderFoote
2324
const CardImageCapsExampleSource = require('!!raw!../examples/CardImageCaps.jsx');
2425
const CardImageOverlayExampleSource = require('!!raw!../examples/CardImageOverlay.jsx');
2526
const CardBackgroundsExampleSource = require('!!raw!../examples/CardBackgrounds.jsx');
27+
const CardOutlineExampleSource = require('!!raw!../examples/CardOutline.jsx');
2628
const CardGroupsExampleSource = require('!!raw!../examples/CardGroups.jsx');
2729
const CardDecksExampleSource = require('!!raw!../examples/CardDecks.jsx');
2830
const CardColumnsExampleSource = require('!!raw!../examples/CardColumns.jsx');
@@ -195,6 +197,15 @@ CardTitle.propTypes = {
195197
{CardBackgroundsExampleSource}
196198
</PrismCode>
197199
</pre>
200+
<h3>Outline variants</h3>
201+
<div className="docs-example">
202+
<CardOutlineExample />
203+
</div>
204+
<pre>
205+
<PrismCode className="language-jsx">
206+
{CardOutlineExampleSource}
207+
</PrismCode>
208+
</pre>
198209
<h3>Groups</h3>
199210
<div className="docs-example">
200211
<CardGroupsExample />

docs/lib/Components/LabelsPage.jsx renamed to docs/lib/Components/TagsPage.jsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,47 @@ import React from 'react';
33
import { PrismCode } from 'react-prism';
44
import Helmet from 'react-helmet';
55

6-
import LabelExample from '../examples/Label';
7-
const LabelExampleSource = require('!!raw!../examples/Label.jsx');
6+
import TagExample from '../examples/Tag';
7+
const TagExampleSource = require('!!raw!../examples/Tag.jsx');
88

9-
import LabelPillsExample from '../examples/LabelPills';
10-
const LabelPillsExampleSource = require('!!raw!../examples/LabelPills.jsx');
9+
import TagPillsExample from '../examples/TagPills';
10+
const TagPillsExampleSource = require('!!raw!../examples/TagPills.jsx');
1111

12-
import LabelVariationsExample from '../examples/LabelVariations';
13-
const LabelVariationsExampleSource = require('!!raw!../examples/LabelVariations.jsx');
12+
import TagVariationsExample from '../examples/TagVariations';
13+
const TagVariationsExampleSource = require('!!raw!../examples/TagVariations.jsx');
1414

15-
export default class LabelsPage extends React.Component {
15+
export default class TagsPage extends React.Component {
1616
render() {
1717
return (
1818
<div>
19-
<Helmet title="Labels"/>
20-
<h3>Labels</h3>
19+
<Helmet title="Tags"/>
20+
<h3>Tags</h3>
2121
<hr/>
2222
<p>Scale to parent</p>
2323
<div className="docs-example">
24-
<LabelExample/>
24+
<TagExample/>
2525
</div>
2626
<pre>
2727
<PrismCode className="language-jsx">
28-
{LabelExampleSource}
28+
{TagExampleSource}
2929
</PrismCode>
3030
</pre>
3131
<h3>Variations</h3>
3232
<div className="docs-example">
33-
<LabelVariationsExample/>
33+
<TagVariationsExample/>
3434
</div>
3535
<pre>
3636
<PrismCode className="language-jsx">
37-
{LabelVariationsExampleSource}
37+
{TagVariationsExampleSource}
3838
</PrismCode>
3939
</pre>
4040
<h3>Pills</h3>
4141
<div className="docs-example">
42-
<LabelPillsExample/>
42+
<TagPillsExample/>
4343
</div>
4444
<pre>
4545
<PrismCode className="language-jsx">
46-
{LabelPillsExampleSource}
46+
{TagPillsExampleSource}
4747
</PrismCode>
4848
</pre>
4949
</div>

‎docs/lib/Components/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ class Components extends React.Component {
3636
to: '/components/dropdowns/'
3737
},
3838
{
39-
name: 'Labels',
40-
to: '/components/labels/'
39+
name: 'Tags',
40+
to: '/components/tags/'
4141
},
4242
{
4343
name: 'Card',

‎docs/lib/examples/ButtonOutline.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ export default class Example extends React.Component {
55
render() {
66
return (
77
<div>
8-
<Button color="primary-outline">primary</Button>
9-
<Button color="secondary-outline">secondary</Button>
10-
<Button color="success-outline">success</Button>
11-
<Button color="info-outline">info</Button>
12-
<Button color="warning-outline">warning</Button>
13-
<Button color="danger-outline">danger</Button>
8+
<Button color="outline-primary">primary</Button>
9+
<Button color="outline-secondary">secondary</Button>
10+
<Button color="outline-success">success</Button>
11+
<Button color="outline-info">info</Button>
12+
<Button color="outline-warning">warning</Button>
13+
<Button color="outline-danger">danger</Button>
1414
</div>
1515
);
1616
}

‎docs/lib/examples/CardOutline.jsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import { Card, Button, CardTitle, CardText } from 'reactstrap';
3+
4+
const Example = (props) => {
5+
return (
6+
<div>
7+
<Card block color="outline-secondary">
8+
<CardTitle>Special Title Treatment</CardTitle>
9+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
10+
<Button>Button</Button>
11+
</Card>
12+
<Card block color="outline-primary">
13+
<CardTitle>Special Title Treatment</CardTitle>
14+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
15+
<Button color="secondary">Button</Button>
16+
</Card>
17+
<Card block color="outline-success">
18+
<CardTitle>Special Title Treatment</CardTitle>
19+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
20+
<Button color="secondary">Button</Button>
21+
</Card>
22+
<Card block color="outline-info">
23+
<CardTitle>Special Title Treatment</CardTitle>
24+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
25+
<Button color="secondary">Button</Button>
26+
</Card>
27+
<Card block color="outline-warning">
28+
<CardTitle>Special Title Treatment</CardTitle>
29+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
30+
<Button color="secondary">Button</Button>
31+
</Card>
32+
<Card block color="outline-danger">
33+
<CardTitle>Special Title Treatment</CardTitle>
34+
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
35+
<Button color="secondary">Button</Button>
36+
</Card>
37+
</div>
38+
);
39+
};
40+
41+
export default Example;

‎docs/lib/examples/Label.jsx‎

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

‎docs/lib/examples/LabelPills.jsx‎

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

‎docs/lib/examples/LabelVariations.jsx‎

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

‎docs/lib/examples/Tag.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { Tag } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<div>
8+
<h1>Heading <Tag>New</Tag></h1>
9+
<h2>Heading <Tag>New</Tag></h2>
10+
<h3>Heading <Tag>New</Tag></h3>
11+
<h4>Heading <Tag>New</Tag></h4>
12+
<h5>Heading <Tag>New</Tag></h5>
13+
<h6>Heading <Tag>New</Tag></h6>
14+
</div>
15+
);
16+
}
17+
}

‎docs/lib/examples/TagPills.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { Tag } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<div>
8+
<Tag color="default" pill>default</Tag>
9+
<Tag color="primary" pill>primary</Tag>
10+
<Tag color="success" pill>success</Tag>
11+
<Tag color="info" pill>info</Tag>
12+
<Tag color="warning" pill>warning</Tag>
13+
<Tag color="danger" pill>danger</Tag>
14+
</div>
15+
);
16+
}
17+
}

0 commit comments

Comments
 (0)