From b5f9b3e4ec13ced5fc9f08c29625acab2ef12d9a Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 12 Mar 2020 11:06:08 +0530 Subject: [PATCH 1/9] fixed errors --- CHANGELOG.md | 1 + .../badge/__snapshots__/badge.test.tsx.snap | 10 ++-- src/components/badge/badge.tsx | 48 ++++++++++++++----- 3 files changed, 42 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04ca018c2f7..96b086d0797 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- `EuiBadge` allows for `href` ([#2987](https://github.com/elastic/eui/pull/2987)) - Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987)) - Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978)) - Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957)) diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap index 187c4527013..a83f6adf5c2 100644 --- a/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -59,19 +59,19 @@ exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = ` exports[`EuiBadge is rendered with iconOnClick provided 1`] = ` - Content - + `; diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index 295769f688d..3bd3de94ac6 100644 --- a/src/components/badge/badge.tsx +++ b/src/components/badge/badge.tsx @@ -4,6 +4,7 @@ import React, { HTMLAttributes, MouseEventHandler, ReactNode, + Ref, } from 'react'; import classNames from 'classnames'; import { CommonProps, ExclusiveUnion, keysOf, PropsOf } from '../common'; @@ -26,6 +27,11 @@ type WithButtonProps = { onClickAriaLabel: AriaAttributes['aria-label']; } & Omit, 'onClick' | 'color'>; +interface WithAnchorProps { + href: string; + target?: string; +} + type WithSpanProps = Omit, 'onClick' | 'color'>; interface WithIconOnClick { @@ -66,7 +72,10 @@ export type EuiBadgeProps = { closeButtonProps?: Partial>; } & CommonProps & ExclusiveUnion & - ExclusiveUnion; + ExclusiveUnion< + ExclusiveUnion, + WithSpanProps + >; // TODO - replace with variables once https://github.com/elastic/eui/issues/2731 is closed const colorInk = '#000'; @@ -108,6 +117,8 @@ export const EuiBadge: FunctionComponent = ({ onClickAriaLabel, iconOnClickAriaLabel, closeButtonProps, + href, + target, ...rest }) => { checkValidColor(color); @@ -172,6 +183,19 @@ export const EuiBadge: FunctionComponent = ({ 'euiBadge__icon', closeButtonProps && closeButtonProps.className ); + const Element = href && !isDisabled ? 'a' : 'button'; + const relObj: { + href?: string; + target?: string; + onClick?: MouseEventHandler; + } = {}; + + if (href && !isDisabled) { + relObj.href = href; + relObj.target = target; + } else if (onClick) { + relObj.onClick = onClick; + } let optionalIcon: ReactNode = null; if (iconType) { @@ -209,46 +233,46 @@ export const EuiBadge: FunctionComponent = ({ ); } - if (onClick && iconOnClick) { + if (iconOnClick) { return ( {(ref, innerText) => ( - + )} {optionalIcon} ); - } else if (onClick) { + } else if (onClick || href) { return ( {(ref, innerText) => ( - + )} ); From c03e56f42a1f3d9032e33261ff64aa0f71748b6e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 12 Mar 2020 11:24:05 +0530 Subject: [PATCH 2/9] updated changelog --- CHANGELOG.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 96b086d0797..4743c8ab463 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,15 +1,11 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- `EuiBadge` allows for `href` ([#2987](https://github.com/elastic/eui/pull/2987)) -- Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987)) -- Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978)) -- Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957)) -- Added `showOnFocus` prop to `EuiScreenReaderOnly` to force display on keyboard focus ([#2976](https://github.com/elastic/eui/pull/2976)) -- Added `EuiSkipLink` component ([#2976](https://github.com/elastic/eui/pull/2976)) -- Created `EuiBadgeGroup` component ([#2921](https://github.com/elastic/eui/pull/2921)) -- Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928)) -- Added `gutterSize` prop to `EuiListGroup` ([#2980](https://github.com/elastic/eui/pull/2980)) -- Added `color` prop to `EuiListGroupItem` and updated size style ([#2980](https://github.com/elastic/eui/pull/2980)) +- Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043)) +- Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039)) +- `EuiBadge` allows for `href` ([#3009](https://github.com/elastic/eui/pull/3009)) +- Removed `role` attribute from `EuiImage`([#3036](https://github.com/elastic/eui/pull/3036)) +- Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003)) +- Added `onColumnResize` prop to `EuiDataGrid` of type `EuiDataGridOnColumnResizeHandler` that gets called when column changes it's size ([#2963](https://github.com/elastic/eui/pull/2963)) **Bug Fixes** From a463ca6187ed6e8e32e28e3fb69242c4fc532a9d Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 12 Mar 2020 11:34:51 +0530 Subject: [PATCH 3/9] Update CHANGELOG.md --- CHANGELOG.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4743c8ab463..5361c376ee8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,15 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043)) -- Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039)) - `EuiBadge` allows for `href` ([#3009](https://github.com/elastic/eui/pull/3009)) -- Removed `role` attribute from `EuiImage`([#3036](https://github.com/elastic/eui/pull/3036)) -- Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003)) -- Added `onColumnResize` prop to `EuiDataGrid` of type `EuiDataGridOnColumnResizeHandler` that gets called when column changes it's size ([#2963](https://github.com/elastic/eui/pull/2963)) +- Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987)) +- Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978)) +- Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957)) +- Added `showOnFocus` prop to `EuiScreenReaderOnly` to force display on keyboard focus ([#2976](https://github.com/elastic/eui/pull/2976)) +- Added `EuiSkipLink` component ([#2976](https://github.com/elastic/eui/pull/2976)) +- Created `EuiBadgeGroup` component ([#2921](https://github.com/elastic/eui/pull/2921)) +- Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928)) +- Added `gutterSize` prop to `EuiListGroup` ([#2980](https://github.com/elastic/eui/pull/2980)) +- Added `color` prop to `EuiListGroupItem` and updated size style ([#2980](https://github.com/elastic/eui/pull/2980)) **Bug Fixes** From 8b884cd55bfbc460602565cc9bf08550927af5df Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 13 Mar 2020 02:33:36 +0530 Subject: [PATCH 4/9] added preview in docs-section --- src-docs/src/views/badge/badge_button.js | 12 +++++++++ src-docs/src/views/badge/badge_example.js | 30 +++++++++++++++++++++++ 2 files changed, 42 insertions(+) diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js index 2d65989cbff..4ed142c57be 100644 --- a/src-docs/src/views/badge/badge_button.js +++ b/src-docs/src/views/badge/badge_button.js @@ -41,5 +41,17 @@ export default () => ( onClick on both text and icon within badge + + window.alert('Badge clicked')} + onClickAriaLabel="Example of disabled button badge" + iconOnClick={() => window.alert('Disabled badge clicked')} + iconOnClickAriaLabel="Example of disabled button badge" + data-test-sub="testExample4"> + disabled button badge + + ); diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 39d9b972990..a89378bdc54 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -71,6 +71,16 @@ const badgeButtonSnippet = [ `, ]; +import BadgeHref from './badge_href'; +const badgeHrefSource = require('!!raw-loader!./badge_href'); +const badgeHrefHtml = renderToHtml(BadgeHref); +const badgeHrefSnippet = [ + ` + + + + + href on text within badge + + + + + an anchor badge with target=blank + + + + window.alert('Icon inside badge clicked')} + iconOnClickAriaLabel="Example of onClick event for icon within the anchor" + data-test-sub="testExample5"> + href on both text and icon within badge + + + + window.alert('Icon inside badge clicked')} + iconOnClickAriaLabel="Example disabled anchor" + data-test-sub="testExample5"> + disabled anchor badge + + + +); From c89da0173c14fdc6d68e0e98635d1681ce9acc84 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Fri, 13 Mar 2020 19:22:12 -0400 Subject: [PATCH 7/9] Fixing anchor and disabled styles, updating example (#2) Thanks @cchaos --- src-docs/src/views/badge/badge_example.js | 12 ++++---- src-docs/src/views/badge/badge_href.js | 34 ++++++----------------- src/components/badge/_badge.scss | 3 +- src/components/badge/badge.tsx | 2 +- 4 files changed, 16 insertions(+), 35 deletions(-) diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index a89378bdc54..07adb3511fa 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -74,12 +74,7 @@ const badgeButtonSnippet = [ import BadgeHref from './badge_href'; const badgeHrefSource = require('!!raw-loader!./badge_href'); const badgeHrefHtml = renderToHtml(BadgeHref); -const badgeHrefSnippet = [ - ` - - ']; import BadgeTruncate from './badge_truncate'; const badgeTruncateSource = require('!!raw-loader!./badge_truncate'); @@ -201,7 +196,10 @@ export const BadgeExample = { ], text: (
-

Badges can have href attributes also the target attribute.

+

+ Badges can also be made to render anchor tags by passing an{' '} + href. +

), snippet: badgeHrefSnippet, diff --git a/src-docs/src/views/badge/badge_href.js b/src-docs/src/views/badge/badge_href.js index a50089bf432..d06ee4c2964 100644 --- a/src-docs/src/views/badge/badge_href.js +++ b/src-docs/src/views/badge/badge_href.js @@ -9,46 +9,28 @@ import { export default () => ( - - href on text within badge + + badge as an anchor - - an anchor badge with target=blank + + anchor with target specified window.alert('Icon inside badge clicked')} - iconOnClickAriaLabel="Example of onClick event for icon within the anchor" - data-test-sub="testExample5"> - href on both text and icon within badge + iconOnClickAriaLabel="Example of onClick event for icon within the anchor"> + anchor with an icon and iconOnClick - window.alert('Icon inside badge clicked')} - iconOnClickAriaLabel="Example disabled anchor" - data-test-sub="testExample5"> + disabled anchor badge diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index d998f6060e1..ecfd6c7e712 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -22,8 +22,8 @@ &.euiBadge-isDisabled { // sass-lint:disable-block no-important // Using !important to override inline styles + color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2) !important; background-color: $euiButtonColorDisabled !important; - color: $euiButtonColorDisabledText !important; } &:focus-within { @@ -46,6 +46,7 @@ text-align: inherit; font-weight: inherit; line-height: inherit; + color: inherit; &:disabled { cursor: not-allowed; diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index 3bd3de94ac6..afb32f5d2c7 100644 --- a/src/components/badge/badge.tsx +++ b/src/components/badge/badge.tsx @@ -171,7 +171,7 @@ export const EuiBadge: FunctionComponent = ({ const classes = classNames( 'euiBadge', { - 'euiBadge-isClickable': onClick && !iconOnClick, + 'euiBadge-isClickable': (onClick || href) && !iconOnClick, 'euiBadge-isDisabled': isDisabled, 'euiBadge--hollow': color === 'hollow', }, From 987891ce61e73d8ad1a2ba5c8923eec786a6f311 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Sat, 14 Mar 2020 05:05:19 +0530 Subject: [PATCH 8/9] added tests --- .../badge/__snapshots__/badge.test.tsx.snap | 40 +++++++++++++++++++ src/components/badge/badge.test.tsx | 24 +++++++++++ src/components/badge/badge.tsx | 8 ++-- 3 files changed, 69 insertions(+), 3 deletions(-) diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap index a83f6adf5c2..98dbc15297a 100644 --- a/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -38,6 +38,46 @@ exports[`EuiBadge is rendered 1`] = ` `; +exports[`EuiBadge is rendered with href provided 1`] = ` + + + + Content + + + +`; + +exports[`EuiBadge is rendered with iconOnClick and href provided 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = ` { expect(component).toMatchSnapshot(); }); + test('is rendered with href provided', () => { + const component = render( + + Content + + ); + + expect(component).toMatchSnapshot(); + }); + test('is rendered with iconOnClick provided', () => { const component = render( { expect(component).toMatchSnapshot(); }); + test('is rendered with iconOnClick and href provided', () => { + const component = render( + + Content + + ); + + expect(component).toMatchSnapshot(); + }); + describe('props', () => { describe('iconType', () => { it('is rendered', () => { diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx index afb32f5d2c7..9f9bd6d9ce3 100644 --- a/src/components/badge/badge.tsx +++ b/src/components/badge/badge.tsx @@ -27,10 +27,10 @@ type WithButtonProps = { onClickAriaLabel: AriaAttributes['aria-label']; } & Omit, 'onClick' | 'color'>; -interface WithAnchorProps { +type WithAnchorProps = { href: string; target?: string; -} +} & Omit, 'href' | 'color'>; type WithSpanProps = Omit, 'onClick' | 'color'>; @@ -187,7 +187,9 @@ export const EuiBadge: FunctionComponent = ({ const relObj: { href?: string; target?: string; - onClick?: MouseEventHandler; + onClick?: + | ((event: React.MouseEvent) => void) + | ((event: React.MouseEvent) => void); } = {}; if (href && !isDisabled) { From 4164936d8f43a991fbca0a212f977fda47fdecba Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Sat, 14 Mar 2020 21:49:39 +0530 Subject: [PATCH 9/9] Update CHANGELOG.md Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c80a9f22f3d..9ff0dc982b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- `EuiBadge` allows for `href` ([#3009](https://github.com/elastic/eui/pull/3009)) +- Added `href` prop to `EuiBadge` ([#3009](https://github.com/elastic/eui/pull/3009)) - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007)) - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043)) - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039))