feat(atoms): add rounded and squared buttons

8base · Jul 17, 2018 · cf08ea8 · cf08ea8
1 parent bd2187e
commit cf08ea8
Showing 1 changed file with 40 additions and 7 deletions.
diff --git a/src/atoms/Button/Button.js b/src/atoms/Button/Button.js
@@ -18,6 +18,10 @@ type ButtonProps = {|
   loading?: boolean,
  /** then true when disable button */
   disabled?: boolean,
+ /** then button is squared */
+  squared?: boolean,
+ /** then button is rounded */
+  rounded?: boolean,
   /** possible button types */
   type?: 'submit' | 'button',
   /** possible button colors */
@@ -28,6 +32,18 @@ type ButtonProps = {|
   size?: 'sm' | 'md' | 'lg',
 |};
 
+const BUTTON_HEIGHT_BY_SIZE = {
+  sm: '3rem',
+  md: '4rem',
+  lg: '5rem',
+};
+
+const DEFAULT_MODIFIERS = {
+  variant: 'raised',
+  color: 'primary',
+  size: 'md',
+};
+
 const name = 'button';
 
 const spinner = keyframes`
@@ -55,17 +71,17 @@ const theme = createTheme(name, (colors: *): * => ({
   modifiers: {
     size: {
       sm: {
-        height: '3rem',
+        height: BUTTON_HEIGHT_BY_SIZE.sm,
         padding: '0 2rem',
         borderRadius: '.5rem',
       },
       md: {
-        height: '4rem',
+        height: BUTTON_HEIGHT_BY_SIZE.md,
         padding: '0 4rem',
         borderRadius: '.5rem',
       },
       lg: {
-        height: '5rem',
+        height: BUTTON_HEIGHT_BY_SIZE.lg,
         padding: '0 6rem',
         borderRadius: '.5rem',
       },
@@ -83,11 +99,15 @@ const theme = createTheme(name, (colors: *): * => ({
     stretch: {
       width: '100%',
     },
+    squared: {
+      padding: '0',
+    },
+    rounded: {
+      borderRadius: '5rem',
+    },
   },
   defaults: {
-    variant: 'raised',
-    color: 'primary',
-    size: 'md',
+    ...DEFAULT_MODIFIERS,
   },
 }));
 
@@ -160,6 +180,17 @@ const getBorderColor = (props: ButtonProps) => {
   }
 };
 
+const getSquaredStyle = (props: ButtonProps) => {
+  if (props.squared) {
+    return {
+      width: BUTTON_HEIGHT_BY_SIZE[props.size || DEFAULT_MODIFIERS.size],
+      height: BUTTON_HEIGHT_BY_SIZE[props.size || DEFAULT_MODIFIERS.size],
+    };
+  }
+
+  return {};
+};
+
 const StyledTag = createStyledTag(name, props => ({
   outline: 'none',
   textAlign: 'center',
@@ -170,6 +201,8 @@ const StyledTag = createStyledTag(name, props => ({
 
   ...getThemeStyle(props, name).button,
 
+  ...getSquaredStyle(props),
+
   borderStyle: 'solid',
   borderWidth: '1px',
   borderColor: getBorderColor(props),
@@ -182,7 +215,7 @@ const StyledTag = createStyledTag(name, props => ({
 class Button extends Component<ButtonProps> {
   static defaultProps = {
     ...theme[name].defaults,
-    size: 'md',
+    ...DEFAULT_MODIFIERS,
   };
 
   onClick = (event: *) => {