From a8f49bd8dc423a0bd385157377bf1f9036bc2ecf Mon Sep 17 00:00:00 2001 From: Josh Dover Date: Fri, 9 Aug 2019 10:00:43 -0500 Subject: [PATCH 1/3] Allow href and onClick in ListGroupItem --- CHANGELOG.md | 1 + .../list_group_item.test.js.snap | 32 +++++++++---------- src/components/list_group/list_group_item.js | 19 ++++++----- .../list_group/list_group_item.test.js | 22 ++++++------- 4 files changed, 38 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a804c3c1d24..8bb2bb75bc5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Converted `EuiFacetButton` to TypeScript ([#2226](https://github.com/elastic/eui/pull/2226)) - Adds an optional `onClear` prop to the the `EuiDatePicker` component ([#2235](https://github.com/elastic/eui/pull/2235)) +- Allow `onClick` and `href` props on `ListGroupItem` ([#1933](https://github.com/elastic/eui/pull/1933)) **Bug fixes** diff --git a/src/components/list_group/__snapshots__/list_group_item.test.js.snap b/src/components/list_group/__snapshots__/list_group_item.test.js.snap index 26fc39e957d..3881ae91b0d 100644 --- a/src/components/list_group/__snapshots__/list_group_item.test.js.snap +++ b/src/components/list_group/__snapshots__/list_group_item.test.js.snap @@ -49,6 +49,22 @@ exports[`EuiListGroupItem props extraAction is rendered 1`] = ` `; +exports[`EuiListGroupItem props href and onClick is rendered 1`] = ` +
  • + + + +
    • +`; + exports[`EuiListGroupItem props href is rendered 1`] = `
    • `; - -exports[`EuiListGroupItem throws an warning if both onClick and href are provided but still renders 1`] = ` -
  • - - - -
    • -`; diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js index c24f1e74217..aece24d777d 100644 --- a/src/components/list_group/list_group_item.js +++ b/src/components/list_group/list_group_item.js @@ -99,17 +99,15 @@ export const EuiListGroupItem = ({ if (href && !isDisabled) { itemContent = ( - + {iconNode} {labelContent} ); - - if (onClick) { - console.warn( - 'Both `href` and `onClick` were passed to EuiListGroupItem but only one can exist. The `href` was used.' - ); - } } else if ((href && isDisabled) || onClick) { itemContent = ( @@ -136,8 +229,7 @@ export const EuiListGroupItem = ({ anchorClassName="euiListGroupItem__tooltip" content={label} position="right" - delay="long" - size="s"> + delay="long"> {itemContent} @@ -153,76 +245,3 @@ export const EuiListGroupItem = ({ return {itemContent}; }; - -EuiListGroupItem.propTypes = { - className: PropTypes.string, - - /** - * Set the size of the label text - */ - size: PropTypes.oneOf(SIZES), - - /** - * Content to be displyed in the list item - */ - label: PropTypes.node.isRequired, - - /** - * Apply styles indicating an item is active - */ - isActive: PropTypes.bool, - - /** - * Apply styles indicating an item is disabled - */ - isDisabled: PropTypes.bool, - - /** - * Make the list item label a link. - * While permitted, `href` and `onClick` should not be used together in most cases and may create problems. - */ - href: PropTypes.string, - - /** - * Adds `EuiIcon` of `EuiIcon.type` - */ - iconType: IconPropType, - - /** - * Custom node to pass as the icon. Cannot be used in conjunction - * with `iconType`. - */ - icon: PropTypes.element, - - /** - * Display tooltip on list item - */ - showToolTip: PropTypes.bool, - - /** - * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required; - * pass `alwaysShow` if you don't want the default behavior of only showing on hover - */ - extraAction: PropTypes.shape({ - iconType: IconPropType.isRequired, - alwaysShow: PropTypes.bool, - }), - - /** - * Make the list item label a button. - * While permitted, `href` and `onClick` should not be used together in most cases and may create problems. - */ - onClick: PropTypes.func, - - /** - * Allow link text to wrap - */ - wrapText: PropTypes.bool, -}; - -EuiListGroupItem.defaultProps = { - isActive: false, - isDisabled: false, - size: 'm', - showToolTip: false, -}; From fb93a3b7b6a42c5d53f6731c719a07931808f815 Mon Sep 17 00:00:00 2001 From: Josh Dover Date: Tue, 13 Aug 2019 15:12:44 -0500 Subject: [PATCH 3/3] PR comments --- CHANGELOG.md | 2 +- src/components/list_group/list_group_item.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 846ab702343..30d46e0ce4a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ - Converted `EuiFacetButton` to TypeScript ([#2226](https://github.com/elastic/eui/pull/2226)) - Adds an optional `onClear` prop to the the `EuiDatePicker` component ([#2235](https://github.com/elastic/eui/pull/2235)) -- Allow `onClick` and `href` props on `EuiListGroupItem` and convert to TypeScript ([#1933](https://github.com/elastic/eui/pull/1933)) +- Added support for `onClick` and `href` props on `EuiListGroupItem` and converted to TypeScript ([#1933](https://github.com/elastic/eui/pull/1933)) **Bug fixes** diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx index 6d6bb72a89b..9600cfeea64 100644 --- a/src/components/list_group/list_group_item.tsx +++ b/src/components/list_group/list_group_item.tsx @@ -44,12 +44,12 @@ export type EuiListGroupItemProps = CommonProps & HTMLAttributes > & { /** - * Set the size of the label text + * Size of the label text */ size?: ItemSize; /** - * Set the size of the label text + * Content to be displayed in the list item */ label: ReactNode;