Permalink
Browse files

feat(Button): Adds joined prop to allow Button within Buttons to not …

…be joined

BREAKING CHANGE: Buttons - to retain same joined behaviour, add the "joined" prop.
  • Loading branch information...
HHogg committed Oct 1, 2018
1 parent 26ace79 commit cb89a3caf0144cea25e8b435eb3cadfce6fdfd49
Showing with 27 additions and 6 deletions.
  1. +5 −1 site/components/Components/Button.js
  2. +1 −1 site/components/Landing/Landing.js
  3. +1 −1 src/Button/Button.css
  4. +20 −3 src/Button/Buttons.js
@@ -8,7 +8,11 @@ import ComponentPropsTable from '../Component/ComponentPropsTable';
export default class ComponentButton extends Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
Buttons: {
joined: true,
},
};
}

render() {
@@ -43,7 +43,7 @@ export default class Landing extends Component {
</Flex>

<Base margin="x16">
<Buttons margin="x3">
<Buttons joined margin="x3">
<Button onClick={ () => push('/guides/getting-started') }>
Getting Started
</Button>
@@ -85,7 +85,7 @@
}
}

.Buttons > .Button--outline:not(:last-child) {
.Buttons--joined > .Button--outline:not(:last-child) {
border-right-width: 0;

&.Button--active,
@@ -1,12 +1,29 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import Flex from '../Flex/Flex';

export default class Buttons extends Component {
static propTypes = {
/** Spacing applied between child Button items, values are global spacing variables. */
gutter: PropTypes.oneOf(['x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12', 'x16']),
/**
* Configures the children Buttons to be joined together.
*/
joined: PropTypes.bool,
};

render() {
const { gutter, joined, ...rest } = this.props;
const classes = classnames('Buttons', {
'Buttons--joined': joined,
});

return (
<Flex { ...this.props }
className="Buttons"
direction="horizontal" />
<Flex { ...rest }
className={ classes }
direction="horizontal"
gutter={ joined ? null : (gutter || 'x1') } />
);
}
}

0 comments on commit cb89a3c

Please sign in to comment.