-
Notifications
You must be signed in to change notification settings - Fork 842
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EuiListGroupItem] Add external prop (#7352)
Co-authored-by: Cee Chen <constance.chen@elastic.co>
- Loading branch information
Showing
13 changed files
with
209 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| - Updated `EuiListGroupItem` to render an external icon and screen reader affordance for links with `target` set to to `_blank` | ||
| - Updated `EuiListGroupItem` with a new `external` prop, which allows enabling or disabling the new external link icon |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { render } from '../../test/rtl'; | ||
| import { shouldRenderCustomStyles } from '../../test/internal'; | ||
|
|
||
| import { EuiExternalLinkIcon } from './external_link_icon'; | ||
|
|
||
| // Note - the icon is not actually text, but it's mocked as such | ||
| describe('EuiExternalLinkIcon', () => { | ||
| shouldRenderCustomStyles(<EuiExternalLinkIcon external={true} />); | ||
|
|
||
| it('always renders the icon if `external` is true', () => { | ||
| const { container } = render(<EuiExternalLinkIcon external={true} />); | ||
| expect(container).toMatchInlineSnapshot(` | ||
| <div> | ||
| <span | ||
| class="emotion-EuiExternalLinkIcon" | ||
| data-euiicon-type="popout" | ||
| > | ||
| External link | ||
| </span> | ||
| </div> | ||
| `); | ||
| }); | ||
|
|
||
| describe('target="_blank"', () => { | ||
| it('renders the icon by default, along with screen reader text', () => { | ||
| const { container } = render(<EuiExternalLinkIcon target="_blank" />); | ||
| expect(container).toMatchInlineSnapshot(` | ||
| <div> | ||
| <span | ||
| class="emotion-EuiExternalLinkIcon" | ||
| data-euiicon-type="popout" | ||
| > | ||
| External link | ||
| </span> | ||
| <span | ||
| class="emotion-euiScreenReaderOnly" | ||
| > | ||
| (opens in a new tab or window) | ||
| </span> | ||
| </div> | ||
| `); | ||
| }); | ||
|
|
||
| it('hides the icon if `external` is false, but still shows the screen reader text', () => { | ||
| const { container } = render( | ||
| <EuiExternalLinkIcon target="_blank" external={false} /> | ||
| ); | ||
| expect(container).toMatchInlineSnapshot(` | ||
| <div> | ||
| <span | ||
| class="emotion-euiScreenReaderOnly" | ||
| > | ||
| (opens in a new tab or window) | ||
| </span> | ||
| </div> | ||
| `); | ||
| }); | ||
| }); | ||
|
|
||
| it('renders nothing if neither external nor target="_blank" are set', () => { | ||
| const { container } = render(<EuiExternalLinkIcon />); | ||
| expect(container).toMatchInlineSnapshot(`<div />`); | ||
| }); | ||
|
|
||
| it('allows configuring the icon props', () => { | ||
| const { getByTestSubject } = render( | ||
| <EuiExternalLinkIcon | ||
| external={true} | ||
| data-test-subj="test" | ||
| size="xl" | ||
| color="text" | ||
| /> | ||
| ); | ||
| expect(getByTestSubject('test')).toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import React, { FunctionComponent, AnchorHTMLAttributes } from 'react'; | ||
|
|
||
| import { useEuiTheme } from '../../services'; | ||
| import { logicalStyle } from '../../global_styling'; | ||
| import { EuiIcon, EuiIconProps } from '../icon'; | ||
| import { EuiI18n, useEuiI18n } from '../i18n'; | ||
| import { EuiScreenReaderOnly } from '../accessibility'; | ||
|
|
||
| /** | ||
| * DRY util for indicating external links both via icon and to | ||
| * screen readers. Used internally by at EuiLink and EuiListGroupItem | ||
| */ | ||
|
|
||
| export type EuiExternalLinkIconProps = { | ||
| target?: AnchorHTMLAttributes<HTMLAnchorElement>['target']; | ||
| /** | ||
| * Set to true to show an icon indicating that it is an external link; | ||
| * Defaults to true if `target="_blank"` | ||
| */ | ||
| external?: boolean; | ||
| }; | ||
|
|
||
| export const EuiExternalLinkIcon: FunctionComponent< | ||
| EuiExternalLinkIconProps & Partial<EuiIconProps> | ||
| > = ({ target, external, ...rest }) => { | ||
| const { euiTheme } = useEuiTheme(); | ||
|
|
||
| const showExternalLinkIcon = | ||
| (target === '_blank' && external !== false) || external === true; | ||
|
|
||
| const iconAriaLabel = useEuiI18n( | ||
| 'euiExternalLinkIcon.ariaLabel', | ||
| 'External link' | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| {showExternalLinkIcon && ( | ||
| <EuiIcon | ||
| css={logicalStyle('margin-left', euiTheme.size.xs)} | ||
| aria-label={iconAriaLabel} | ||
| size="s" | ||
| type="popout" | ||
| {...rest} | ||
| /> | ||
| )} | ||
| {target === '_blank' && ( | ||
| <EuiScreenReaderOnly> | ||
| <span> | ||
| <EuiI18n | ||
| token="euiExternalLinkIcon.newTarget.screenReaderOnlyText" | ||
| default="(opens in a new tab or window)" | ||
| /> | ||
| </span> | ||
| </EuiScreenReaderOnly> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.