From fd9807bd5fd30df6aca330079f90e129c6a77421 Mon Sep 17 00:00:00 2001
From: Andy Montalvo <59586600+amontalvof@users.noreply.github.com>
Date: Wed, 30 Dec 2020 11:23:48 -0600
Subject: [PATCH] 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>
---
src/components/Button/content.js | 12 ++++-
src/components/Button/index.d.ts | 1 +
src/components/Button/index.js | 7 ++-
src/components/Button/readme.md | 62 +++++++++++++-------------
src/components/Button/styled/button.js | 22 ++++++++-
5 files changed, 69 insertions(+), 35 deletions(-)
diff --git a/src/components/Button/content.js b/src/components/Button/content.js
index 02e876cde..0a1a8de4e 100644
--- 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 (
{children}
-
+
);
}
@@ -43,6 +49,7 @@ Content.propTypes = {
'border-filled',
]),
isLoading: PropTypes.bool,
+ size: PropTypes.oneOf(['small', 'medium', 'large']),
};
Content.defaultProps = {
@@ -50,4 +57,5 @@ Content.defaultProps = {
children: null,
variant: 'neutral',
isLoading: false,
+ size: 'medium',
};
diff --git a/src/components/Button/index.d.ts b/src/components/Button/index.d.ts
index 2cd1ec306..0d2b1db12 100644
--- 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;
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index af243b355..071513e7b 100644
--- 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}
>
-
+
{children}
@@ -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
index de6c57a6c..cc53dafcc 100644
--- 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';
-
-```
-
-##### simple buttons
-
-```js
-import React from 'react';
-import { Button } from 'react-rainbow-components';
-
-
-
-```
-
-##### button variants
-
-```js
-import React from 'react';
-import { Button } from 'react-rainbow-components';
-
-
```
-##### 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';
/>