From a38c2160e676a02dd92a836944bfbe287b70c83f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Thu, 26 Oct 2017 13:24:07 -0300 Subject: [PATCH 1/7] Use color instead of type, across the board. --- docs/src/views/badge/badge.js | 12 +++---- docs/src/views/badge/badge_with_icon.js | 2 +- docs/src/views/button/button.js | 24 ++++++------- docs/src/views/button/button_empty.js | 36 +++++++++---------- docs/src/views/button/button_icon.js | 4 +-- docs/src/views/call_out/danger.js | 2 +- docs/src/views/call_out/success.js | 2 +- docs/src/views/call_out/warning.js | 2 +- src/components/badge/badge.js | 17 +++++---- src/components/button/button.js | 13 +++---- .../button/button_empty/button_empty.js | 13 +++---- .../button/button_icon/button_icon.js | 12 +++---- src/components/call_out/call_out.js | 12 +++---- .../context_menu/context_menu_item.js | 1 + .../context_menu/context_menu_panel.js | 1 + .../expression/expression_item_button.js | 1 + .../header_section_item_button.js | 8 ++++- .../key_pad_menu/key_pad_menu_item.js | 1 + src/components/link/link.js | 5 ++- src/components/side_nav/side_nav.js | 1 + src/components/table/table_header_button.js | 1 + src/components/table/table_header_cell.js | 1 + src/components/tabs/tab.js | 1 + src/components/toast/toast.js | 11 +++--- 24 files changed, 104 insertions(+), 79 deletions(-) diff --git a/docs/src/views/badge/badge.js b/docs/src/views/badge/badge.js index 8e00c0fc8b0..63aaedb5088 100644 --- a/docs/src/views/badge/badge.js +++ b/docs/src/views/badge/badge.js @@ -6,37 +6,37 @@ import { export default () => (
- + Default    - + Primary    - + Secondary    - + Accent    - + Warning    - + Danger
diff --git a/docs/src/views/badge/badge_with_icon.js b/docs/src/views/badge/badge_with_icon.js index f99f62a19d8..c815493616a 100644 --- a/docs/src/views/badge/badge_with_icon.js +++ b/docs/src/views/badge/badge_with_icon.js @@ -12,7 +12,7 @@ export default () => (    - + Secondary diff --git a/docs/src/views/button/button.js b/docs/src/views/button/button.js index 6dad5225b39..cff9730dd36 100644 --- a/docs/src/views/button/button.js +++ b/docs/src/views/button/button.js @@ -43,7 +43,7 @@ export default () => (

window.alert('Button clicked')} > Secondary @@ -52,7 +52,7 @@ export default () => (    window.alert('Button clicked')} > @@ -62,7 +62,7 @@ export default () => (    window.alert('Button clicked')} > @@ -72,7 +72,7 @@ export default () => (    window.alert('Button clicked')} @@ -83,7 +83,7 @@ export default () => (

window.alert('Button clicked')} > Warning @@ -92,7 +92,7 @@ export default () => (    window.alert('Button clicked')} > @@ -102,7 +102,7 @@ export default () => (    window.alert('Button clicked')} > @@ -112,7 +112,7 @@ export default () => (    window.alert('Button clicked')} @@ -123,7 +123,7 @@ export default () => (

window.alert('Button clicked')} > Danger @@ -132,7 +132,7 @@ export default () => (    window.alert('Button clicked')} > @@ -142,7 +142,7 @@ export default () => (    window.alert('Button clicked')} > @@ -152,7 +152,7 @@ export default () => (    window.alert('Button clicked')} diff --git a/docs/src/views/button/button_empty.js b/docs/src/views/button/button_empty.js index 43170740ecc..42e67ddbae8 100644 --- a/docs/src/views/button/button_empty.js +++ b/docs/src/views/button/button_empty.js @@ -64,7 +64,7 @@ export default () => (

window.alert('Button clicked')} > Danger @@ -73,7 +73,7 @@ export default () => (    window.alert('Button clicked')} > @@ -83,7 +83,7 @@ export default () => (

window.alert('Button clicked')} iconType="arrowDown" > @@ -93,7 +93,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" @@ -104,7 +104,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" iconSide="right" @@ -115,7 +115,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" @@ -127,7 +127,7 @@ export default () => (

window.alert('Button clicked')} > Text @@ -136,7 +136,7 @@ export default () => (    window.alert('Button clicked')} > @@ -146,7 +146,7 @@ export default () => (

window.alert('Button clicked')} iconType="arrowDown" > @@ -156,7 +156,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" @@ -167,7 +167,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" iconSide="right" @@ -178,7 +178,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" @@ -190,7 +190,7 @@ export default () => (

window.alert('Button clicked')} isDisabled > @@ -200,7 +200,7 @@ export default () => (    window.alert('Button clicked')} isDisabled @@ -211,7 +211,7 @@ export default () => (

window.alert('Button clicked')} iconType="arrowDown" isDisabled @@ -222,7 +222,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" @@ -234,7 +234,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" iconSide="right" @@ -246,7 +246,7 @@ export default () => (    window.alert('Button clicked')} iconType="arrowDown" diff --git a/docs/src/views/button/button_icon.js b/docs/src/views/button/button_icon.js index a0be44273c3..b223adaf2b5 100644 --- a/docs/src/views/button/button_icon.js +++ b/docs/src/views/button/button_icon.js @@ -13,14 +13,14 @@ export default () => ( window.alert('Button clicked')} iconType="arrowRight" /> window.alert('Button clicked')} iconType="arrowRight" /> diff --git a/docs/src/views/call_out/danger.js b/docs/src/views/call_out/danger.js index 9392a04e0b2..ab4403e3485 100644 --- a/docs/src/views/call_out/danger.js +++ b/docs/src/views/call_out/danger.js @@ -8,7 +8,7 @@ import { export default () => (

diff --git a/docs/src/views/call_out/success.js b/docs/src/views/call_out/success.js index 8590a897d64..a5d3eb47673 100644 --- a/docs/src/views/call_out/success.js +++ b/docs/src/views/call_out/success.js @@ -8,7 +8,7 @@ import { export default () => (

diff --git a/docs/src/views/call_out/warning.js b/docs/src/views/call_out/warning.js index 9105932ad32..50257c938a7 100644 --- a/docs/src/views/call_out/warning.js +++ b/docs/src/views/call_out/warning.js @@ -8,7 +8,7 @@ import { export default () => (

diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js index 2d0f268f296..6a1798111f9 100644 --- a/src/components/badge/badge.js +++ b/src/components/badge/badge.js @@ -7,7 +7,7 @@ import { EuiIcon, } from '../icon'; -const typesToClassNameMap = { +const colorToClassNameMap = { default: 'euiBadge--default', primary: 'euiBadge--primary', secondary: 'euiBadge--secondary', @@ -16,7 +16,7 @@ const typesToClassNameMap = { danger: 'euiBadge--danger', }; -export const TYPES = Object.keys(typesToClassNameMap); +export const COLORS = Object.keys(colorToClassNameMap); const iconSideToClassNameMap = { left: '', @@ -25,8 +25,13 @@ const iconSideToClassNameMap = { export const ICON_SIDES = Object.keys(iconSideToClassNameMap); -export const EuiBadge = ({ children, type, iconType, iconSide, className, ...rest }) => { - const classes = classNames('euiBadge', typesToClassNameMap[type], iconSideToClassNameMap[iconSide], className); +export const EuiBadge = ({ children, color, iconType, iconSide, className, ...rest }) => { + const classes = classNames( + 'euiBadge', + colorToClassNameMap[color], + iconSideToClassNameMap[iconSide], + className + ); let optionalIcon = null; if (iconType) { @@ -55,10 +60,10 @@ EuiBadge.propTypes = { className: PropTypes.string, iconType: PropTypes.oneOf(ICON_TYPES), iconSide: PropTypes.string, - type: PropTypes.string, + color: PropTypes.string, }; EuiBadge.defaultProps = { - type: 'default', + color: 'default', iconSide: 'left', }; diff --git a/src/components/button/button.js b/src/components/button/button.js index b6e69084719..b59d164fb91 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -8,7 +8,7 @@ import { EuiIcon, } from '../icon'; -const typeToClassNameMap = { +const colorToClassNameMap = { primary: 'euiButton--primary', secondary: 'euiButton--secondary', warning: 'euiButton--warning', @@ -16,7 +16,7 @@ const typeToClassNameMap = { ghost: 'euiButton--ghost', }; -export const TYPES = Object.keys(typeToClassNameMap); +export const COLORS = Object.keys(typeToClassNameMap); const sizeToClassNameMap = { small: 'euiButton--small', @@ -37,7 +37,7 @@ export const EuiButton = ({ className, iconType, iconSide, - type, + color, size, fill, isDisabled, @@ -46,7 +46,7 @@ export const EuiButton = ({ const classes = classNames( 'euiButton', - typeToClassNameMap[type], + colorToClassNameMap[color], sizeToClassNameMap[size], iconSideToClassNameMap[iconSide], className, @@ -89,13 +89,14 @@ EuiButton.propTypes = { iconType: PropTypes.oneOf(ICON_TYPES), iconSide: PropTypes.oneOf(ICON_SIDES), fill: PropTypes.bool, - type: PropTypes.oneOf(TYPES), + color: PropTypes.oneOf(COLORS), size: PropTypes.oneOf(SIZES), isDisabled: PropTypes.bool, }; EuiButton.defaultProps = { + type: 'button', iconSide: 'left', - type: 'primary', + color: 'primary', fill: false, }; diff --git a/src/components/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js index 8d7c298d578..0cd2b6142db 100644 --- a/src/components/button/button_empty/button_empty.js +++ b/src/components/button/button_empty/button_empty.js @@ -7,7 +7,7 @@ import { EuiIcon, } from '../../icon'; -const typeToClassNameMap = { +const colorToClassNameMap = { primary: 'euiButtonEmpty--primary', danger: 'euiButtonEmpty--danger', disabled: 'euiButtonEmpty--disabled', @@ -15,7 +15,7 @@ const typeToClassNameMap = { ghost: 'euiButtonEmpty--ghost', }; -export const TYPES = Object.keys(typeToClassNameMap); +export const COLORS = Object.keys(colorToClassNameMap); const sizeToClassNameMap = { small: 'euiButtonEmpty--small', @@ -43,7 +43,7 @@ export const EuiButtonEmpty = ({ className, iconType, iconSide, - type, + color, size, flush, isDisabled, @@ -52,7 +52,7 @@ export const EuiButtonEmpty = ({ const classes = classNames( 'euiButtonEmpty', - typeToClassNameMap[type], + colorToClassNameMap[color], sizeToClassNameMap[size], iconSideToClassNameMap[iconSide], flushTypeToClassNameMap[flush], @@ -92,13 +92,14 @@ EuiButtonEmpty.propTypes = { className: PropTypes.string, iconType: PropTypes.oneOf(ICON_TYPES), iconSide: PropTypes.oneOf(ICON_SIDES), - type: PropTypes.oneOf(TYPES), + type: PropTypes.oneOf(COLORS), size: PropTypes.oneOf(SIZES), flush: PropTypes.oneOf(FLUSH_TYPES), isDisabled: PropTypes.bool, }; EuiButtonEmpty.defaultProps = { + type: 'button', iconSide: 'left', - type: 'primary', + color: 'primary', }; diff --git a/src/components/button/button_icon/button_icon.js b/src/components/button/button_icon/button_icon.js index 847d79d6a56..55f17b99094 100644 --- a/src/components/button/button_icon/button_icon.js +++ b/src/components/button/button_icon/button_icon.js @@ -7,27 +7,26 @@ import { EuiIcon, } from '../../icon'; -const typeToClassNameMap = { +const colorToClassNameMap = { primary: 'euiButtonIcon--primary', danger: 'euiButtonIcon--danger', disabled: 'euiButtonIcon--disabled', ghost: 'euiButtonIcon--ghost', }; -export const TYPES = Object.keys(typeToClassNameMap); - +export const COLORS = Object.keys(colorToClassNameMap); export const EuiButtonIcon = ({ className, iconType, - type, + color, isDisabled, ...rest, }) => { const classes = classNames( 'euiButtonIcon', - typeToClassNameMap[type], + colorToClassNameMap[color], className, ); @@ -65,5 +64,6 @@ EuiButtonIcon.propTypes = { }; EuiButtonIcon.defaultProps = { - type: 'primary', + type: 'button', + color: 'primary', }; diff --git a/src/components/call_out/call_out.js b/src/components/call_out/call_out.js index f2dc3697d58..f96cbe0d4ef 100644 --- a/src/components/call_out/call_out.js +++ b/src/components/call_out/call_out.js @@ -12,17 +12,17 @@ import { EuiText, } from '..'; -const typeToClassNameMap = { +const colorToClassNameMap = { info: 'euiCallOut--info', success: 'euiCallOut--success', warning: 'euiCallOut--warning', danger: 'euiCallOut--danger', }; -export const TYPES = Object.keys(typeToClassNameMap); +export const COLORS = Object.keys(colorToClassNameMap); -export const EuiCallOut = ({ title, type, iconType, children, className, ...rest }) => { - const classes = classNames('euiCallOut', typeToClassNameMap[type], className); +export const EuiCallOut = ({ title, color, iconType, children, className, ...rest }) => { + const classes = classNames('euiCallOut', colorToClassNameMap[color], className); let headerIcon; @@ -67,9 +67,9 @@ export const EuiCallOut = ({ title, type, iconType, children, className, ...rest EuiCallOut.propTypes = { title: PropTypes.node, iconType: PropTypes.oneOf(ICON_TYPES), - type: PropTypes.oneOf(TYPES), + color: PropTypes.oneOf(COLORS), }; EuiCallOut.defaultProps = { - type: 'info', + color: 'info', }; diff --git a/src/components/context_menu/context_menu_item.js b/src/components/context_menu/context_menu_item.js index 548e13939c6..2fa8cf05b7c 100644 --- a/src/components/context_menu/context_menu_item.js +++ b/src/components/context_menu/context_menu_item.js @@ -52,6 +52,7 @@ export const EuiContextMenuItem = ({ return (