r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Pad internal button elements to correctly space out icons, etc.

Browse source
This commit is contained in:
Andrew Nicolaou 2020-04-26 11:31:45 +02:00
parent e1340518a5
commit 428fee266b
2 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/common/Button.jsx
View file

@ -35,6 +35,10 @@ const StyledButton = styled.button`
background-color: ${prop('buttonDisabledColorBackground')}; background-color: ${prop('buttonDisabledColorBackground')};
cursor: not-allowed; cursor: not-allowed;
} }
> *:not(:last-child) {
margin-right: ${remSize(8)};
}
} }
`; `;
@ -58,6 +62,7 @@ const Button = ({
Button.defaultProps = { Button.defaultProps = {
disabled: false, disabled: false,
href: null, href: null,
label: null,
to: null, to: null,
type: 'button', type: 'button',
}; };
@ -79,7 +84,7 @@ Button.propTypes = {
/* /*
* An ARIA Label used for accessibility * An ARIA Label used for accessibility
*/ */
label: PropTypes.string.isRequired, label: PropTypes.string,
/** /**
* Specifying a to URL will use a react-router Link * Specifying a to URL will use a react-router Link
*/ */

10
client/common/Button.stories.jsx
View file

@ -34,3 +34,13 @@ export const AnchorButton = () => (
export const ReactRouterLink = () => ( export const ReactRouterLink = () => (
<Button to="./somewhere" label="submit">Actually a Link</Button> <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>
);