Pad internal button elements to correctly space out icons, etc.
This commit is contained in:
parent
e1340518a5
commit
428fee266b
2 changed files with 16 additions and 1 deletions
|
@ -35,6 +35,10 @@ const StyledButton = styled.button`
|
|||
background-color: ${prop('buttonDisabledColorBackground')};
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: ${remSize(8)};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -58,6 +62,7 @@ const Button = ({
|
|||
Button.defaultProps = {
|
||||
disabled: false,
|
||||
href: null,
|
||||
label: null,
|
||||
to: null,
|
||||
type: 'button',
|
||||
};
|
||||
|
@ -79,7 +84,7 @@ Button.propTypes = {
|
|||
/*
|
||||
* An ARIA Label used for accessibility
|
||||
*/
|
||||
label: PropTypes.string.isRequired,
|
||||
label: PropTypes.string,
|
||||
/**
|
||||
* Specifying a to URL will use a react-router Link
|
||||
*/
|
||||
|
|
|
@ -34,3 +34,13 @@ export const AnchorButton = () => (
|
|||
export const ReactRouterLink = () => (
|
||||
<Button to="./somewhere" label="submit">Actually a Link</Button>
|
||||
);
|
||||
|
||||
export const InternalElementMargin = () => (
|
||||
<Button>
|
||||
<span>Internal</span>
|
||||
<span>elements</span>
|
||||
<span>have</span>
|
||||
<span>right</span>
|
||||
<span>margins</span>
|
||||
</Button>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue