diff --git a/changelogs/upcoming/7352.md b/changelogs/upcoming/7352.md new file mode 100644 index 00000000000..0ae57cf1474 --- /dev/null +++ b/changelogs/upcoming/7352.md @@ -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 diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js index b34bad0618f..76a23f0b8d0 100644 --- a/src-docs/src/views/list_group/list_group_example.js +++ b/src-docs/src/views/list_group/list_group_example.js @@ -79,6 +79,17 @@ export const ListGroupExample = { isActive and isDisabled{' '} properties.

+

+ If your link is external or will open in a new tab, you can manually{' '} + set the external property. However, just like{' '} + with the{' '} + + EuiLink + {' '} + component, setting{' '} + {'target="_blank"'} defaults to{' '} + {'external={true}'}. +

As is done in this example, the EuiListGroup{' '} component can also accept an array of items via the{' '} diff --git a/src-docs/src/views/list_group/list_group_links.tsx b/src-docs/src/views/list_group/list_group_links.tsx index 34fb9abeaee..283c4597e2d 100644 --- a/src-docs/src/views/list_group/list_group_links.tsx +++ b/src-docs/src/views/list_group/list_group_links.tsx @@ -26,9 +26,10 @@ const myContent = [ iconType: 'copyClipboard', }, { - label: 'Fifth link', - href: '#/display/list-group', + label: 'Fifth link will open in new tab', + href: 'http://www.elastic.co', iconType: 'crosshairs', + target: '_blank', }, ]; diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap index caea9f2b9c8..3b583eae7e1 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap +++ b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_link.test.tsx.snap @@ -20,13 +20,13 @@ exports[`EuiCollapsibleNavLink renders a link 1`] = ` > Link External link (opens in a new tab or window) diff --git a/src/components/link/__snapshots__/link.test.tsx.snap b/src/components/link/__snapshots__/link.test.tsx.snap index 0cbb30de8b8..226cb0a1f84 100644 --- a/src/components/link/__snapshots__/link.test.tsx.snap +++ b/src/components/link/__snapshots__/link.test.tsx.snap @@ -7,21 +7,6 @@ exports[`EuiLink accent is rendered 1`] = ` /> `; -exports[`EuiLink allows for target and external to be controlled independently 1`] = ` - - - (opens in a new tab or window) - - -`; - exports[`EuiLink button respects the type property 1`] = `