feat: added size prop to button component (#2070)

* feat: added size prop to button component * fix: changed examples in button component * docs: add documentation to button component * fix: fixed spinnerMap in button component Co-authored-by: YulyGP <71304589+YulyGP@users.noreply.github.com>
nexxtway · Dec 30, 2020 · fd9807b · fd9807b
1 parent be6c752
commit fd9807b
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 35 deletions.
diff --git a/src/components/Button/content.js b/src/components/Button/content.js
@@ -16,12 +16,18 @@ const variantMap = {
     'border-filled': 'base',
 };
 
-export default function Content({ label, children, variant, isLoading }) {
+const spinnerMap = { small: 'x-small', medium: 'small', large: 'medium' };
+
+export default function Content({ label, children, variant, isLoading, size }) {
     if (isLoading) {
         return (
             <StyledContent>
                 <ButtonContent label={label}>{children}</ButtonContent>
-                <StyledSpinner isVisible={isLoading} variant={variantMap[variant]} size="small" />
+                <StyledSpinner
+                    isVisible={isLoading}
+                    variant={variantMap[variant]}
+                    size={spinnerMap[size]}
+                />
             </StyledContent>
         );
     }
@@ -43,11 +49,13 @@ Content.propTypes = {
         'border-filled',
     ]),
     isLoading: PropTypes.bool,
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
 Content.defaultProps = {
     label: undefined,
     children: null,
     variant: 'neutral',
     isLoading: false,
+    size: 'medium',
 };
diff --git a/src/components/Button/index.d.ts b/src/components/Button/index.d.ts
@@ -31,6 +31,7 @@ export interface ButtonProps extends BaseProps {
     form?: string;
     id?: string;
     isLoading?: boolean;
+    size?: 'small' | 'medium' | 'large';
 }
 
 declare const Button: ComponentType<ButtonProps>;

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -73,6 +73,7 @@ export default class Button extends Component {
             onKeyDown,
             form,
             className,
+            size,
         } = this.props;
 
         return (
@@ -100,8 +101,9 @@ export default class Button extends Component {
                 onKeyDown={onKeyDown}
                 form={form}
                 ref={this.buttonRef}
+                size={size}
             >
-                <Content variant={variant} label={label} isLoading={isLoading}>
+                <Content variant={variant} label={label} isLoading={isLoading} size={size}>
                     {children}
                 </Content>
             </StyledButton>
@@ -173,6 +175,8 @@ Button.propTypes = {
     id: PropTypes.string,
     /** If it is set to true, then a loading symbol is displayed. */
     isLoading: PropTypes.bool,
+    /** The size of the button. Valid values are small, and large. This value defaults to medium. */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
 Button.defaultProps = {
@@ -199,4 +203,5 @@ Button.defaultProps = {
     ariaControls: undefined,
     ariaExpanded: undefined,
     form: undefined,
+    size: 'medium',
 };
diff --git a/src/components/Button/readme.md b/src/components/Button/readme.md
@@ -1,4 +1,5 @@
-##### base buttons
+# Buttons variant
+##### Buttons change color according to the variant applied to them. In the examples below, you can find all the variants that we offer you.
 
 ```js
 import React from 'react';
@@ -8,28 +9,8 @@ import { Button } from 'react-rainbow-components';
         <Button variant="base" label="Button Base" className="rainbow-m-around_medium" />
         <Button label="Button Outline Brand" variant="outline-brand" className="rainbow-m-around_medium" />
         <Button label="Button Border" variant="border" className="rainbow-m-around_medium" />
-    </div>
-```
-
-##### simple buttons
-
-```js
-import React from 'react';
-import { Button } from 'react-rainbow-components';
-
-    <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
         <Button label="Button Neutral" variant="neutral" className="rainbow-m-around_medium" />
         <Button label="Button Border Filled" variant="border-filled" className="rainbow-m-around_medium" />
-    </div>
-```
-
-##### button variants
-
-```js
-import React from 'react';
-import { Button } from 'react-rainbow-components';
-
-    <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
         <Button
             label="Button Brand"
             onClick={() => alert('clicked!')}
@@ -46,7 +27,8 @@ import { Button } from 'react-rainbow-components';
     </div>
 ```
 
-##### button shaded
+# Buttons with shaded variant
+##### The appearance of a button can be changed by implementing the shaded variant, so the whole section will appear with a shadow around it.
 
 ```js
 import React from 'react';
@@ -62,21 +44,22 @@ import { Button } from 'react-rainbow-components';
         />
         <Button
             shaded
-            label="Button Success"
-            onBlur={() => alert('blurred!')}
-            variant="success"
+            label="Button Neutral"
+            variant="neutral"
             className="rainbow-m-around_medium"
         />
         <Button
             shaded
-            label="Button Destructive"
-            variant="destructive"
+            label="Button Border Filled"
+            onBlur={() => alert('blurred!')}
+            variant="border-filled"
             className="rainbow-m-around_medium"
         />
     </div>
 ```
 
-##### buttons with icon
+# Buttons with icons
+##### Icons can be added to buttons and combined or not with text, as you can see in the examples below.
 
 ```js
 import React from 'react';
@@ -102,7 +85,8 @@ import { faCoffee, faCheck, faArrowRight } from '@fortawesome/free-solid-svg-ico
     </div>
 ```
 
-##### disabled buttons
+# Buttons disabled
+##### Buttons can be displayed as disabled. With the `disabled` prop, all the functionalities will be deactivated.
 
 ```js
 import React from 'react';
@@ -125,7 +109,8 @@ import { Button } from 'react-rainbow-components';
     </div>
 ```
 
-##### buttons inverse
+# Buttons inverse
+##### If you want to use a button on a dark background, we suggest you implement the inverse variant.
 
 ```js
 import React from 'react';
@@ -144,7 +129,8 @@ import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
     </InverseContainer>
 ```
 
-##### buttons loadings
+# Buttons with loading state
+##### The loading state is build-in in the button. Use `isLoading` prop.
 
 ```js
 import React from 'react';
@@ -166,3 +152,17 @@ import { Button } from 'react-rainbow-components';
         <Button isLoading label="Button Brand" variant="brand" className="rainbow-m-around_medium" />
     </div>
 ```
+
+# Buttons of different sizes
+##### If you need to resize your button, you can do so using the `size` prop.
+
+```js
+import React from 'react';
+import { Button } from 'react-rainbow-components';
+
+    <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
+        <Button variant="brand" label="Button Small" className="rainbow-m-around_medium" size='small'/>
+        <Button label="Button Medium" variant="brand" className="rainbow-m-around_medium" size="medium"/>
+        <Button label="Button Large" variant="brand" className="rainbow-m-around_medium" size='large'/>
+    </div>
+```
diff --git a/src/components/Button/styled/button.js b/src/components/Button/styled/button.js
@@ -1,6 +1,10 @@
 /* eslint-disable indent */
 import styled from 'styled-components';
-import { FONT_SIZE_HEADING_SMALL } from '../../../styles/fontSizes';
+import {
+    FONT_SIZE_HEADING_SMALL,
+    FONT_SIZE_TEXT_MEDIUM,
+    FONT_SIZE_HEADING_MEDIUM,
+} from '../../../styles/fontSizes';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 import { COLOR_WHITE, COLOR_GRAY_3, COLOR_DARK_1 } from '../../../styles/colors';
 import { lighten } from '../../../styles/helpers/color';
@@ -63,6 +67,22 @@ const StyledButton = attachThemeAttrs(styled.button).attrs(props => {
         text-decoration: none;
     }
 
+    ${props =>
+        props.size === 'large' &&
+        `
+            padding: 0 1.2rem;
+            line-height: 3.275rem;
+            font-size: ${FONT_SIZE_HEADING_MEDIUM};;
+        `};
+
+    ${props =>
+        props.size === 'small' &&
+        `
+            padding: 0 0.8rem;
+            line-height: 1.775rem;
+            font-size: ${FONT_SIZE_TEXT_MEDIUM};
+        `};
+
     &:hover,
     &:focus {
         color: ${props => props.palette.brand.dark};