From 6fbb1a747666d61e4695641216426ad6c987d7c8 Mon Sep 17 00:00:00 2001
From: Samuel Galson <samgalson@gmail.com>
Date: Thu, 1 Feb 2018 10:58:15 +0000
Subject: [PATCH] refactor(ui): refactor Button and PlainButton
---
packages/ui/src/atoms/Button.js | 63 ++++++++++++++-----
packages/ui/src/atoms/Button.md | 21 +++++--
packages/ui/src/molecules/PlainButton.js | 15 +----
.../ui/src/molecules/PlainButton.local.scss | 21 -------
4 files changed, 68 insertions(+), 52 deletions(-)
delete mode 100644 packages/ui/src/molecules/PlainButton.local.scss
diff --git a/packages/ui/src/atoms/Button.js b/packages/ui/src/atoms/Button.js
index cf010417d..72a106f98 100644
--- a/packages/ui/src/atoms/Button.js
+++ b/packages/ui/src/atoms/Button.js
@@ -1,7 +1,7 @@
import React from 'react'
import styled from 'styled-components'
-const BaseButton = styled.button.attrs({
+const BaseStandardButton = styled.button.attrs({
type: 'button',
})`
background: #ddd;
@@ -25,19 +25,20 @@ const BaseButton = styled.button.attrs({
transform: scale(0.8);
}
- & ::after {
+ &::after {
animation: 1s warning;
opacity: 1;
}
`
-const PrimaryButton = BaseButton.extend`
+const PrimaryStandardButton = BaseStandardButton.extend`
background-color: var(--color-primary);
border: 2px solid transparent;
border-bottom: 4px solid var(--color-primary);
color: white;
- &:hover {
+ &:hover,
+ &:focus {
background: white;
border: 2px solid var(--color-primary);
border-bottom: 4px solid var(--color-primary);
@@ -46,16 +47,11 @@ const PrimaryButton = BaseButton.extend`
}
&:focus {
- background: white;
- border: 2px solid var(--color-primary);
- border-bottom: 4px solid var(--color-primary);
box-shadow: 0 2px 0 0 var(--color-primary);
- color: var(--color-primary);
- outline: 1px solid transparent;
}
`
-const DisabledButton = BaseButton.extend.attrs({
+const DisabledStandardButton = BaseStandardButton.extend.attrs({
disabled: true,
})`
background: white;
@@ -87,14 +83,51 @@ const DisabledButton = BaseButton.extend.attrs({
}
`
-const Button = ({ children, disabled, primary, ...props }) => {
- if (disabled) {
- return <DisabledButton {...props}>{children}</DisabledButton>
+const plainButtonOverrides = `
+ background: none;
+ border: 0;
+ border-bottom: 2px solid #777;
+ font-style: italic;
+ letter-spacing: 0;
+ padding: 0;
+ text-transform: none;
+
+ &:hover,
+ &:focus {
+ background: transparent;
+ border: 0;
+ border-bottom: 2px solid var(--color-primary);
+ color: var(--color-primary);
+ }
+
+ &:active {
+ transform: scale(0.99);
+ }
+`
+
+const DisabledPlainButton = DisabledStandardButton.extend`
+ ${plainButtonOverrides};
+`
+const BasePlainButton = BaseStandardButton.extend`
+ ${plainButtonOverrides};
+`
+
+const Button = ({ children, disabled, primary, plain, ...props }) => {
+ if (!plain && disabled) {
+ return (
+ <DisabledStandardButton {...props}>{children}</DisabledStandardButton>
+ )
}
if (primary) {
- return <PrimaryButton {...props}>{children}</PrimaryButton>
+ return <PrimaryStandardButton {...props}>{children}</PrimaryStandardButton>
+ }
+ if (plain && disabled) {
+ return <DisabledPlainButton {...props}>{children}</DisabledPlainButton>
+ }
+ if (plain) {
+ return <BasePlainButton {...props}>{children}</BasePlainButton>
}
- return <BaseButton {...props}>{children}</BaseButton>
+ return <BaseStandardButton {...props}>{children}</BaseStandardButton>
}
export default Button
diff --git a/packages/ui/src/atoms/Button.md b/packages/ui/src/atoms/Button.md
index a7871d1b7..57752f890 100644
--- a/packages/ui/src/atoms/Button.md
+++ b/packages/ui/src/atoms/Button.md
@@ -1,18 +1,31 @@
-A button.
+A standard button.
```js
-
<Button>Save</Button>
```
-A button can be disabled.
+A standard button can be disabled.
```js
<Button disabled>Save</Button>
```
-A button can be marked as the "primary" action.
+A standard button can be marked as the "primary" action.
```js
<Button primary>Save</Button>
```
+
+A button can also be "plain" style.
+
+```js
+<Button plain>Plain button</Button>
+```
+
+Or be "plain" style and "disabled".
+
+```js
+<Button plain disabled>
+ Plain button
+</Button>
+```
diff --git a/packages/ui/src/molecules/PlainButton.js b/packages/ui/src/molecules/PlainButton.js
index dc7179090..7efee5f10 100644
--- a/packages/ui/src/molecules/PlainButton.js
+++ b/packages/ui/src/molecules/PlainButton.js
@@ -1,21 +1,12 @@
import React from 'react'
-import classnames from 'classnames'
import Button from '../atoms/Button'
-import classes from './PlainButton.local.scss'
-const PlainButton = ({
- className,
- children,
- type,
- disabled,
- primary,
- onClick,
-}) => (
+const PlainButton = ({ className, children, type, disabled, onClick }) => (
<Button
- className={classnames(classes.root, className)}
+ className={className}
disabled={disabled}
onClick={onClick}
- primary={primary}
+ plain
type={type}
>
{children}
diff --git a/packages/ui/src/molecules/PlainButton.local.scss b/packages/ui/src/molecules/PlainButton.local.scss
deleted file mode 100644
index 2b1967481..000000000
--- a/packages/ui/src/molecules/PlainButton.local.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.root.root {
- background: none;
- border: 0;
- border-bottom: 2px solid #777;
- font-style: italic;
- letter-spacing: 0;
- padding: 0;
- text-transform: none;
-}
-
-.root.root:hover,
-.root.root:focus {
- background: transparent;
- border: 0;
- border-bottom: 2px solid var(--color-primary);
- color: var(--color-primary);
-}
-
-.root.root:active {
- transform: scale(0.99);
-}
--
GitLab