Skip to content

Commit ee5fa1e

Browse files
TheSharpieOneTheSharpieOne
committed
feat(outline): Make outline a separate prop
The outline for buttons and cards is now it's own props separate from the color value. Based on #33 (comment)
1 parent f617dc5 commit ee5fa1e

8 files changed

Lines changed: 51 additions & 17 deletions

File tree

‎docs/lib/Home/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default () => {
2121
Easy to use React Bootstrap 4 components
2222
</p>
2323
<p>
24-
<Button color="danger-outline" href="https://github.com/reactstrap/reactstrap">View on Github</Button>
24+
<Button outline color="danger" href="https://github.com/reactstrap/reactstrap">View on Github</Button>
2525
<Button color="danger" tag={Link} to="/components/">View Components</Button>
2626
</p>
2727
</Col>

‎docs/lib/NotFound/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default () => {
1919
Can't find what you're looking for? <a href="https://github.com/reactstrap/reactstrap/issues/new">Open</a> up an issue.
2020
</p>
2121
<p>
22-
<Button color="danger-outline" className="m-r-1" tag={Link} to="/">Get Started</Button>
22+
<Button outline color="danger" className="m-r-1" tag={Link} to="/">Get Started</Button>
2323
<Button color="danger" tag={Link} to="/components">View Components</Button>
2424
</p>
2525
</Col>

‎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="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>
8+
<Button outline color="primary">primary</Button>
9+
<Button outline color="secondary">secondary</Button>
10+
<Button outline color="success">success</Button>
11+
<Button outline color="info">info</Button>
12+
<Button outline color="warning">warning</Button>
13+
<Button outline color="danger">danger</Button>
1414
</div>
1515
);
1616
}

‎docs/lib/examples/CardOutline.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,32 @@ import { Card, Button, CardTitle, CardText } from 'reactstrap';
44
const Example = (props) => {
55
return (
66
<div>
7-
<Card block color="outline-secondary">
7+
<Card block outline color="secondary">
88
<CardTitle>Special Title Treatment</CardTitle>
99
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
1010
<Button>Button</Button>
1111
</Card>
12-
<Card block color="outline-primary">
12+
<Card block outline color="primary">
1313
<CardTitle>Special Title Treatment</CardTitle>
1414
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
1515
<Button color="secondary">Button</Button>
1616
</Card>
17-
<Card block color="outline-success">
17+
<Card block outline color="success">
1818
<CardTitle>Special Title Treatment</CardTitle>
1919
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
2020
<Button color="secondary">Button</Button>
2121
</Card>
22-
<Card block color="outline-info">
22+
<Card block outline color="info">
2323
<CardTitle>Special Title Treatment</CardTitle>
2424
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
2525
<Button color="secondary">Button</Button>
2626
</Card>
27-
<Card block color="outline-warning">
27+
<Card block outline color="warning">
2828
<CardTitle>Special Title Treatment</CardTitle>
2929
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
3030
<Button color="secondary">Button</Button>
3131
</Card>
32-
<Card block color="outline-danger">
32+
<Card block outline color="danger">
3333
<CardTitle>Special Title Treatment</CardTitle>
3434
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
3535
<Button color="secondary">Button</Button>

‎src/Button.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const propTypes = {
66
block: PropTypes.bool,
77
color: PropTypes.string,
88
disabled: PropTypes.bool,
9+
outline: PropTypes.bool,
910
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
1011
onClick: PropTypes.func,
1112
size: PropTypes.string
@@ -39,6 +40,7 @@ class Button extends React.Component {
3940
block,
4041
className,
4142
color,
43+
outline,
4244
size,
4345
tag: Tag,
4446
...attributes
@@ -47,8 +49,8 @@ class Button extends React.Component {
4749
const classes = classNames(
4850
className,
4951
'btn',
50-
'btn-' + color,
51-
size ? 'btn-' + size : false,
52+
`btn${outline ? '-outline' : ''}-${color}`,
53+
size ? `btn-${size}` : false,
5254
block ? 'btn-block' : false,
5355
{ active, disabled: this.props.disabled }
5456
);

‎src/Card.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const propTypes = {
66
inverse: PropTypes.bool,
77
color: PropTypes.string,
88
block: PropTypes.bool,
9+
outline: PropTypes.bool,
910
className: PropTypes.any
1011
};
1112

@@ -19,6 +20,7 @@ const Card = (props) => {
1920
color,
2021
block,
2122
inverse,
23+
outline,
2224
tag: Tag,
2325
...attributes
2426
} = props;
@@ -27,7 +29,7 @@ const Card = (props) => {
2729
'card',
2830
inverse ? 'card-inverse' : false,
2931
block ? 'card-block' : false,
30-
color ? 'card-' + color : false
32+
color ? `card${outline ? '-outline' : ''}-${color}` : false
3133
);
3234

3335
return (

‎test/Button.spec.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,18 @@ describe('Button', () => {
3737
expect(wrapper.hasClass('btn-danger')).toBe(true);
3838
});
3939

40+
it('should render buttons with outline variant', () => {
41+
const wrapper = shallow(<Button outline>Default Button</Button>);
42+
43+
expect(wrapper.hasClass('btn-outline-primary')).toBe(true);
44+
});
45+
46+
it('should render buttons with outline variant with different colors', () => {
47+
const wrapper = shallow(<Button outline color="info">Default Button</Button>);
48+
49+
expect(wrapper.hasClass('btn-outline-info')).toBe(true);
50+
});
51+
4052
it('should render buttons at different sizes', () => {
4153
const small = shallow(<Button size="sm">Small Button</Button>);
4254
const large = shallow(<Button size="lg">Large Button</Button>);

‎test/Card.spec.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,24 @@ describe('Card', () => {
2020
expect(wrapper.hasClass('card-inverse')).toBe(true);
2121
});
2222

23+
it('should render with "outline" class when a color is provided', () => {
24+
const wrapper = shallow(<Card outline block color="primary">Yo!</Card>);
25+
26+
expect(wrapper.text()).toBe('Yo!');
27+
expect(wrapper.hasClass('card')).toBe(true);
28+
expect(wrapper.hasClass('card-block')).toBe(true);
29+
expect(wrapper.hasClass('card-outline-primary')).toBe(true);
30+
});
31+
32+
it('should not render with "outline" class when a color is not provided (no default)', () => {
33+
const wrapper = shallow(<Card outline block>Yo!</Card>);
34+
35+
expect(wrapper.text()).toBe('Yo!');
36+
expect(wrapper.hasClass('card')).toBe(true);
37+
expect(wrapper.hasClass('card-block')).toBe(true);
38+
expect(wrapper.html()).not.toContain('card-outline');
39+
});
40+
2341
it('should render additional classes', () => {
2442
const wrapper = shallow(<Card className="other">Yo!</Card>);
2543

0 commit comments

Comments
 (0)