Merge branch 'master' into improve-chart

nexxtway · Feb 2, 2021 · 17c60ff · 17c60ff
2 parents f939cd5 + 36e84e6
commit 17c60ff
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 115 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: nexxtway
diff --git a/src/components/Button/index.d.ts b/src/components/Button/index.d.ts
@@ -10,12 +10,12 @@ export interface ButtonProps extends BaseProps {
     type?: ButtonType;
     disabled?: boolean;
     tabIndex?: number | string;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
-    onFocus?: (event: FocusEvent<HTMLElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLElement>) => void;
-    onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLButtonElement>) => void;
     ariaHaspopup?: boolean;
     ariaControls?: string;
     ariaExpanded?: boolean;

diff --git a/src/components/ButtonIcon/index.d.ts b/src/components/ButtonIcon/index.d.ts
@@ -11,13 +11,13 @@ export interface ButtonIconProps extends BaseProps {
     disabled?: boolean;
     tabIndex?: number | string;
     tooltip?: ReactNode;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    onMouseDown?: (event: MouseEvent<HTMLElement>) => void;
-    onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
-    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
-    onFocus?: (event: FocusEvent<HTMLElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
     assistiveText?: string;
     ariaControls?: string;
     ariaExpanded?: boolean;

diff --git a/src/components/ButtonIcon/index.js b/src/components/ButtonIcon/index.js
@@ -7,7 +7,7 @@ import InternalTooltip from '../InternalTooltip';
 import useDefaultTooltipConnector from '../InternalTooltip/hooks/useDefaultTooltipConnector';
 
 /**
- * Buttons Icons provide the user with visual iconography that
+ * ButtonIcons provide the user with a visual iconography that
  * is typically used to invoke an event or action.
  */
 const ButtonIcon = React.forwardRef((props, ref) => {
@@ -173,7 +173,7 @@ ButtonIcon.propTypes = {
     disabled: PropTypes.bool,
     /** Specifies the tab order of an element (when the tab button is used for navigating). */
     tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /** Text to show when pointer is over the button */
+    /** Text to show when pointer is over the button. */
     tooltip: PropTypes.node,
     /** The action that will be run when the button is clicked. */
     onClick: PropTypes.func,

diff --git a/src/components/ButtonIcon/readme.md b/src/components/ButtonIcon/readme.md
@@ -1,121 +1,85 @@
-##### button icon base
+# ButtonIcons variants
+##### ButtonIcons change color according to the variant provided. In the examples below, you can find all the variants that we offer you.
 
 ```js
 import React from 'react';
 import { ButtonIcon } from 'react-rainbow-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-regular-svg-icons';
-import { faSlidersH, faSignal, faRedo, faTimes } from '@fortawesome/free-solid-svg-icons';
 
     <div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
         <div className="rainbow-p-right_large">
-            <ButtonIcon size="large" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon variant="base" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon size="medium" icon={<FontAwesomeIcon icon={faSlidersH} />} />
+            <ButtonIcon variant="outline-brand" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon size="small" icon={<FontAwesomeIcon icon={faSignal} />} />
+            <ButtonIcon variant="border" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon size="x-small" icon={<FontAwesomeIcon icon={faRedo} />} />
-        </div>
-        <ButtonIcon size="xx-small" icon={<FontAwesomeIcon icon={faTimes} />} />
-    </div>
-```
-
-##### button icon border
-
-```js
-import React from 'react';
-import { ButtonIcon } from 'react-rainbow-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faStar } from '@fortawesome/free-regular-svg-icons';
-import {
-    faTrashAlt,
-    faPencilAlt,
-    faLocationArrow,
-    faArrowDown,
-} from '@fortawesome/free-solid-svg-icons';
-
-    <div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
-        <div className="rainbow-p-right_large">
-            <ButtonIcon variant="border" size="large" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon variant="neutral" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon
-                variant="border"
-                size="medium"
-                icon={<FontAwesomeIcon icon={faLocationArrow} />}
-            />
+            <ButtonIcon variant="border-filled" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon variant="border" size="small" icon={<FontAwesomeIcon icon={faPencilAlt} />} />
+            <ButtonIcon variant="brand" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon variant="border" size="x-small" icon={<FontAwesomeIcon icon={faTrashAlt} />} />
+            <ButtonIcon variant="success" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
-        <ButtonIcon variant="border" size="xx-small" icon={<FontAwesomeIcon icon={faArrowDown} />} />
+        <ButtonIcon variant="destructive" icon={<FontAwesomeIcon icon={faStar} />} />
     </div>
 ```
 
-##### button icon outline-brand
+# ButtonIcons with shaded variant
+##### The appearance of a ButtonIcon can be changed by implementing the shaded variant, so the whole section will appear with a shadow around it.
 
 ```js
 import React from 'react';
 import { ButtonIcon } from 'react-rainbow-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-regular-svg-icons';
-import {
-    faTrashAlt,
-    faPencilAlt,
-    faLocationArrow,
-    faArrowDown,
-} from '@fortawesome/free-solid-svg-icons';
 
     <div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
         <div className="rainbow-p-right_large">
-            <ButtonIcon variant="outline-brand" size="large" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon shaded variant="border-filled" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon variant="outline-brand" size="medium" icon={<FontAwesomeIcon icon={faLocationArrow} />}/>
+            <ButtonIcon shaded variant="neutral" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon variant="outline-brand" size="small" icon={<FontAwesomeIcon icon={faPencilAlt} />} />
+            <ButtonIcon shaded variant="brand" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon variant="outline-brand" size="x-small" icon={<FontAwesomeIcon icon={faTrashAlt} />} />
+            <ButtonIcon shaded variant="success" icon={<FontAwesomeIcon icon={faStar} />} />
+        </div>
+        <div className="rainbow-p-right_large">
+            <ButtonIcon shaded variant="destructive" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
-        <ButtonIcon variant="outline-brand" size="xx-small" icon={<FontAwesomeIcon icon={faArrowDown} />} />
     </div>
 ```
 
-##### button icon filled
+# ButtonIcons inverse
+##### If you want to use a ButtonIcon on a dark background, we suggest you implement the inverse variant.
 
 ```js
 import React from 'react';
 import { ButtonIcon } from 'react-rainbow-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-regular-svg-icons';
 
-    <div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
-        <div className="rainbow-p-right_large">
-            <ButtonIcon variant="border-filled" icon={<FontAwesomeIcon icon={faStar} />} />
-        </div>
-        <div className="rainbow-p-right_large">
-            <ButtonIcon variant="brand" icon={<FontAwesomeIcon icon={faStar} />} />
-        </div>
-        <div className="rainbow-p-right_large">
-            <ButtonIcon variant="success" icon={<FontAwesomeIcon icon={faStar} />} />
-        </div>
+    <InverseContainer className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
         <div className="rainbow-p-right_large">
-            <ButtonIcon variant="destructive" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon variant="border-inverse" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
-        <ButtonIcon variant="neutral" icon={<FontAwesomeIcon icon={faStar} />} />
-    </div>
+        <ButtonIcon variant="inverse" icon={<FontAwesomeIcon icon={faStar} />} />
+    </InverseContainer>
 ```
 
-##### button icon shaded
+# ButtonIcons of different sizes
+##### If you need to resize your ButtonIcon, you can do so using the `size` prop.
 
 ```js
 import React from 'react';
@@ -125,24 +89,25 @@ import { faStar } from '@fortawesome/free-regular-svg-icons';
 
     <div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
         <div className="rainbow-p-right_large">
-            <ButtonIcon shaded variant="border-filled" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon variant="border" size="large" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon shaded variant="neutral" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon variant="border" size="medium" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon shaded variant="brand" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon variant="border" size="small" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon shaded variant="success" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon variant="border" size="x-small" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
         <div className="rainbow-p-right_large">
-            <ButtonIcon shaded variant="destructive" icon={<FontAwesomeIcon icon={faStar} />} />
+            <ButtonIcon variant="border" size="xx-small" icon={<FontAwesomeIcon icon={faStar} />} />
         </div>
     </div>
 ```
 
-##### button icon disabled
+# ButtonIcons disabled
+##### ButtonIcons can be displayed as disabled. With the `disabled` prop, all the functionalities will be deactivated.
 
 ```js
 import React from 'react';
@@ -161,7 +126,8 @@ import { faStar } from '@fortawesome/free-regular-svg-icons';
     </div>
 ```
 
-##### button icon with tooltip
+# ButtonIcons with tooltip
+##### If you want to show a tooltip with additional information about your ButtonIcon, just set the `tooltip` prop with the content you want.
 
 ```js
 import React from 'react';
@@ -191,19 +157,3 @@ import {
         <ButtonIcon variant="border-filled" size="medium" tooltip="Arrow down" icon={<FontAwesomeIcon icon={faArrowDown} />} />
     </div>
 ```
-
-##### button icon inverse
-
-```js
-import React from 'react';
-import { ButtonIcon } from 'react-rainbow-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faStar } from '@fortawesome/free-regular-svg-icons';
-
-    <InverseContainer className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
-        <div className="rainbow-p-right_large">
-            <ButtonIcon variant="border-inverse" icon={<FontAwesomeIcon icon={faStar} />} />
-        </div>
-        <ButtonIcon variant="inverse" icon={<FontAwesomeIcon icon={faStar} />} />
-    </InverseContainer>
-```
diff --git a/src/components/CheckboxToggle/index.d.ts b/src/components/CheckboxToggle/index.d.ts
@@ -6,10 +6,10 @@ export interface CheckboxToggleProps extends BaseProps {
     name?: string;
     value?: boolean;
     disabled?: boolean;
-    onChange?: (event: ChangeEvent<HTMLElement>) => void;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    onFocus?: (event: FocusEvent<HTMLElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     id?: string;
     labelAlignment?: 'left' | 'right';
 }

diff --git a/src/components/RadioButtonGroup/index.d.ts b/src/components/RadioButtonGroup/index.d.ts
@@ -8,7 +8,7 @@ export interface RadioButtonGroupProps extends BaseProps {
     name?: string;
     value?: string;
     variant?: 'default' | 'inverse' | 'brand';
-    onChange?: (event: ChangeEvent<HTMLElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     required?: boolean;
     options?: RadioOption[];
     error?: ReactNode;

diff --git a/src/components/RadioGroup/index.d.ts b/src/components/RadioGroup/index.d.ts
@@ -7,7 +7,7 @@ export interface RadioGroupProps extends BaseProps {
     hideLabel?: boolean;
     name?: string;
     value?: string;
-    onChange?: (event: ChangeEvent<HTMLElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     required?: boolean;
     options?: RadioOption[];
     error?: ReactNode;

diff --git a/src/components/Select/index.d.ts b/src/components/Select/index.d.ts
@@ -11,10 +11,10 @@ export interface SelectProps extends BaseProps {
     label?: ReactNode;
     name?: string;
     value?: string | number;
-    onChange?: (event: ChangeEvent<HTMLElement>) => void;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    onFocus?: (event: FocusEvent<HTMLElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     bottomHelpText?: ReactNode;
     error?: ReactNode;
     required?: boolean;

diff --git a/src/components/Slider/index.d.ts b/src/components/Slider/index.d.ts
@@ -12,10 +12,10 @@ export interface SliderProps extends BaseProps {
     step?: string | number;
     error?: ReactNode;
     disabled?: boolean;
-    onChange?: (event: ChangeEvent<HTMLElement>) => void;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    onFocus?: (event: FocusEvent<HTMLElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
 }
 
 declare const Slider: ComponentType<SliderProps>;