diff --git a/CHANGELOG.md b/CHANGELOG.md index 7dd3f984830..acd3806ae8a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ # [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `0.0.13`. +- EuiButton, EuiButtonEmpty and EuiButtonIcon can now take an `href` [(#316)](https://github.com/elastic/eui/pull/316) + +**Bug fixes** + +- Set `EuiFlexGroup` to `flex-grow: 1` to be more friendly with IE11 [(#315)](https://github.com/elastic/eui/pull/315) # [`0.0.13`](https://github.com/elastic/eui/tree/v0.0.13) diff --git a/src-docs/src/views/button/button_as_link.js b/src-docs/src/views/button/button_as_link.js new file mode 100644 index 00000000000..1b523936f21 --- /dev/null +++ b/src-docs/src/views/button/button_as_link.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { + EuiButton, + EuiButtonEmpty, + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, +} from '../../../../src/components'; + +export default () => ( + + + + Link to elastic.co + + + + + + Link to elastic.co + + + + + + +); diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index c32360513b7..15931bacc48 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -34,6 +34,10 @@ import ButtonGhost from './button_ghost'; const buttonGhostSource = require('!!raw-loader!./button_ghost'); const buttonGhostHtml = renderToHtml(ButtonGhost); +import ButtonAsLink from './button_as_link'; +const buttonAsLinkSource = require('!!raw-loader!./button_as_link'); +const buttonAsLinkHtml = renderToHtml(ButtonAsLink); + export const ButtonExample = { title: 'Button', sections: [{ @@ -52,6 +56,22 @@ export const ButtonExample = {

), demo: - ); + if (href) { + return ( + + + {buttonIcon} + {children} + + + ); + } else { + return ( + + ); + } }; EuiButton.propTypes = { @@ -92,6 +111,8 @@ EuiButton.propTypes = { color: PropTypes.oneOf(COLORS), size: PropTypes.oneOf(SIZES), isDisabled: PropTypes.bool, + href: checkHrefAndOnClick, + onClick: PropTypes.func, }; EuiButton.defaultProps = { diff --git a/src/components/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js index 9fede0adee0..0bbcf1f4531 100644 --- a/src/components/button/button_empty/button_empty.js +++ b/src/components/button/button_empty/button_empty.js @@ -2,6 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import checkHrefAndOnClick from '../../../services/prop_types/check_href_and_onclick'; + import { ICON_TYPES, EuiIcon, @@ -48,6 +50,8 @@ export const EuiButtonEmpty = ({ size, flush, isDisabled, + href, + onClick, ...rest }) => { @@ -74,18 +78,34 @@ export const EuiButtonEmpty = ({ ); } - return ( - - ); + if (href) { + return ( + + + {buttonIcon} + {children} + + + ); + } else { + return ( + + ); + } }; EuiButtonEmpty.propTypes = { @@ -97,6 +117,8 @@ EuiButtonEmpty.propTypes = { size: PropTypes.oneOf(SIZES), flush: PropTypes.oneOf(FLUSH_TYPES), isDisabled: PropTypes.bool, + href: checkHrefAndOnClick, + onClick: PropTypes.func, }; EuiButtonEmpty.defaultProps = { diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss index 30ea1ded2df..ed773e7d030 100644 --- a/src/components/button/button_icon/_button_icon.scss +++ b/src/components/button/button_icon/_button_icon.scss @@ -6,6 +6,7 @@ box-shadow: none; height: $euiSizeL; width: $euiSizeL; + line-height: $euiSizeL; border-radius: $euiBorderRadius; // Account for border. diff --git a/src/components/button/button_icon/button_icon.js b/src/components/button/button_icon/button_icon.js index dbffc1df706..ac4373a1641 100644 --- a/src/components/button/button_icon/button_icon.js +++ b/src/components/button/button_icon/button_icon.js @@ -2,6 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import checkHrefAndOnClick from '../../../services/prop_types/check_href_and_onclick'; + import { ICON_TYPES, EuiIcon, @@ -37,6 +39,8 @@ export const EuiButtonIcon = ({ iconType, color, isDisabled, + href, + onClick, ...rest }) => { @@ -60,15 +64,28 @@ export const EuiButtonIcon = ({ ); } - return ( - - ); + if (href) { + return ( + + {buttonIcon} + + ); + } else { + return ( + + ); + } }; EuiButtonIcon.propTypes = { @@ -78,6 +95,8 @@ EuiButtonIcon.propTypes = { color: PropTypes.oneOf(COLORS), isDisabled: PropTypes.bool, 'aria-label': accessibleButtonIcon, + href: checkHrefAndOnClick, + onClick: PropTypes.func, }; EuiButtonIcon.defaultProps = { diff --git a/src/services/prop_types/check_href_and_onclick.js b/src/services/prop_types/check_href_and_onclick.js new file mode 100644 index 00000000000..b655947cff4 --- /dev/null +++ b/src/services/prop_types/check_href_and_onclick.js @@ -0,0 +1,8 @@ +export default function checkHrefAndOnClick(props, propName, componentName) { + if (props.href && props.onClick) { + throw new Error( + `${componentName} must either specify an href property (if it should be a link) ` + + `or an onClick property (if it should be a button), but not both.` + ); + } +}