diff --git a/CHANGELOG.md b/CHANGELOG.md index 472340d0f9a3..8a9f2847cd77 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,10 @@ - Fixed filter count of 0 in `EuiSearchBar` ([#4977](https://github.com/elastic/eui/pull/4977)) +**Theme: Amsterdam** + +- Updated styles for `EuiLink` ([#4979](https://github.com/elastic/eui/pull/4979)) + ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0) - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940)) diff --git a/src-docs/src/views/badge/badge_href.js b/src-docs/src/views/badge/badge_href.js index 34e33a7100cd..d60959c2b38b 100644 --- a/src-docs/src/views/badge/badge_href.js +++ b/src-docs/src/views/badge/badge_href.js @@ -9,19 +9,19 @@ import { export default () => ( - + badge as an anchor - + anchor with target specified {}} @@ -30,7 +30,7 @@ export default () => ( - + disabled anchor badge diff --git a/src-docs/src/views/button/button_as_link.js b/src-docs/src/views/button/button_as_link.js index 804fea3ab312..cdfc7a91be42 100644 --- a/src-docs/src/views/button/button_as_link.js +++ b/src-docs/src/views/button/button_as_link.js @@ -12,18 +12,18 @@ export default () => ( - Link to elastic.co + Link to elastic.co - + Link to elastic.co @@ -32,20 +32,20 @@ export default () => ( - + Disabled link - + Disabled empty link compressed{' '} - + diff --git a/src-docs/src/views/link/link.js b/src-docs/src/views/link/link.js index 023a5ef91e89..520c25a1b6c0 100644 --- a/src-docs/src/views/link/link.js +++ b/src-docs/src/views/link/link.js @@ -5,75 +5,22 @@ import { EuiCode, EuiLink, EuiText } from '../../../../src/components'; export default () => (

- Open the{' '} - - Elastic website - {' '} - in a new tab. Setting target=“_blank” also - defaults to {'external={true}'}. -

-

- This{' '} - - link - {' '} - has the external prop set to true. + A simple EuiLink used within a + paragraph of text.

- This link is actually a {}}>button with - an onClick handler. + This is actually a {}}>button with an + onClick handler.

Here is an example of a{' '} { - e.preventDefault(); - }}> + href="https://github.com/elastic/eui/blob/master/wiki/react-router.md#how-react-router-works" + onClick={() => {}}> link {' '} with both an href and an onClick{' '} handler.

-

Links can be colored as well.

-
    -
  • - - subdued - -
    • -
  • - - success - -
    • -
  • - - accent - -
    • -
  • - - danger - -
    • -
  • - - warning - -
    • -
  • - - text - -
    • -
  • - - - ghost - - -
    • -
); diff --git a/src-docs/src/views/link/link_color.js b/src-docs/src/views/link/link_color.js new file mode 100644 index 000000000000..9558c675e89f --- /dev/null +++ b/src-docs/src/views/link/link_color.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { EuiLink, EuiText } from '../../../../src/components'; + +const links = [ + 'primary', + 'subdued', + 'success', + 'accent', + 'warning', + 'danger', + 'text', +]; + +export default () => ( + +
    + {links.map((value) => ( +
  • + + {value.charAt(0).toUpperCase() + value.slice(1)} + +
    • + ))} +
  • + Ghost +
    • +
+ +); diff --git a/src-docs/src/views/link/link_disable.js b/src-docs/src/views/link/link_disable.js index f72757ca548d..227e5681d293 100644 --- a/src-docs/src/views/link/link_disable.js +++ b/src-docs/src/views/link/link_disable.js @@ -2,21 +2,23 @@ import React, { useState } from 'react'; import { EuiLink, EuiSwitch, - EuiSpacer, EuiTextColor, + EuiHorizontalRule, + EuiText, } from '../../../../src/components'; export const LinkDisable = () => { const [disableLink, setDisableLink] = useState(true); return ( -
+ setDisableLink(!disableLink)} /> - +

This{' '} {}}> @@ -28,14 +30,15 @@ export const LinkDisable = () => { {' '} in it.

- - - When links are disabled, they inherit the{' '} - {}}> - color - {' '} - of surrounding text. - -
+

+ + When links are disabled, they inherit the{' '} + {}}> + color + {' '} + of surrounding text. + +

+ ); }; diff --git a/src-docs/src/views/link/link_example.js b/src-docs/src/views/link/link_example.js index 93a83c6caa25..6814ec533cc8 100644 --- a/src-docs/src/views/link/link_example.js +++ b/src-docs/src/views/link/link_example.js @@ -1,6 +1,5 @@ import React from 'react'; - -import { renderToHtml } from '../../services'; +import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../components'; @@ -8,27 +7,20 @@ import { EuiCode, EuiLink } from '../../../../src/components'; import linkConfig from './playground'; -import Link from './link'; -import { LinkDisable } from './link_disable'; -import { LinkValidation } from './link_validation'; - +import LinkDemo from './link'; const linkSource = require('!!raw-loader!./link'); -const linkHtml = renderToHtml(Link); +import LinkExternal from './link_external'; +const linkExternalSource = require('!!raw-loader!./link_external'); + +import LinkColor from './link_color'; +const linkColorSource = require('!!raw-loader!./link_color'); + +import { LinkDisable } from './link_disable'; const linkDisableSource = require('!!raw-loader!./link_disable'); -const linkDisableHtml = renderToHtml(LinkDisable); +import { LinkValidation } from './link_validation'; const linkValidationSource = require('!!raw-loader!./link_validation'); -const linkValidationHtml = renderToHtml(LinkValidation); - -const linkSnippet = [ - ` -`, - ` - - -`, -]; export const LinkExample = { title: 'Link', @@ -39,23 +31,69 @@ export const LinkExample = { type: GuideSectionTypes.JS, code: linkSource, }, + ], + text: ( +

+ EuiLink is any anchor or button element that is + designed to display nicely within a block of text. It also provides + more anchor-specific styling onto links and makes sure they are + accessible. +

+ ), + props: { EuiLink }, + snippet: '', + demo: , + playground: linkConfig, + }, + { + title: 'External links', + source: [ + { + type: GuideSectionTypes.JS, + code: linkExternalSource, + }, + ], + text: ( +

+ Setting {'target="_blank"'} defaults + to {'external={true}'}. This adds an + icon indicator instructing users that a new window will open. You can + also manually apply this icon in case you handle the target behavior + by other means. +

+ ), + props: { EuiLink }, + demo: , + snippet: [ + ` + +`, + ` + +`, + ], + }, + { + title: 'Coloring links', + source: [ { - type: GuideSectionTypes.HTML, - code: linkHtml, + type: GuideSectionTypes.JS, + code: linkColorSource, }, ], text: (

- EuiLink will apply the correct styling onto links and - make sure they are accessible. Links can be passed a color. Note that - the ghost type should only be used on dark - backgrounds (regardless of theming). It will always create a white - link. + Like any other button component, + links can be passed a color. Note that the{' '} + ghost type should only be used on dark backgrounds + (regardless of theming) as it will always create a white link.

), props: { EuiLink }, - snippet: linkSnippet, - demo: , + demo: , + snippet: ` + +`, }, { title: 'Disabled links', @@ -64,10 +102,6 @@ export const LinkExample = { type: GuideSectionTypes.JS, code: linkDisableSource, }, - { - type: GuideSectionTypes.HTML, - code: linkDisableHtml, - }, ], text: (

@@ -80,6 +114,9 @@ export const LinkExample = { ), props: { EuiLink }, demo: , + snippet: ` + +`, }, { title: 'Link validation', @@ -88,10 +125,6 @@ export const LinkExample = { type: GuideSectionTypes.JS, code: linkValidationSource, }, - { - type: GuideSectionTypes.HTML, - code: linkValidationHtml, - }, ], text: (

@@ -112,5 +145,4 @@ export const LinkExample = { demo: , }, ], - playground: linkConfig, }; diff --git a/src-docs/src/views/link/link_external.js b/src-docs/src/views/link/link_external.js new file mode 100644 index 000000000000..0da5ad2d595c --- /dev/null +++ b/src-docs/src/views/link/link_external.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { EuiCode, EuiLink, EuiText } from '../../../../src/components'; + +export default () => ( + +

+ Open the{' '} + + Elastic website + {' '} + in a new tab. +

+

+ This{' '} + + link + {' '} + has the external prop set to true. +

+ +); diff --git a/src-docs/src/views/link/link_validation.js b/src-docs/src/views/link/link_validation.js index 39a683258920..ec38a0942921 100644 --- a/src-docs/src/views/link/link_validation.js +++ b/src-docs/src/views/link/link_validation.js @@ -1,5 +1,5 @@ import React from 'react'; -import { EuiLink } from '../../../../src/components'; +import { EuiLink, EuiText } from '../../../../src/components'; const urls = [ 'https://elastic.co', @@ -12,14 +12,14 @@ const urls = [ export const LinkValidation = () => { return ( - <> + {urls.map((url) => ( -
+

{url} -

+

))} - + ); }; diff --git a/src-docs/src/views/markdown_editor/markdown_editor_errors.js b/src-docs/src/views/markdown_editor/markdown_editor_errors.js index cc55929697a9..71daeb9b1cd3 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_errors.js +++ b/src-docs/src/views/markdown_editor/markdown_editor_errors.js @@ -45,7 +45,7 @@ export default () => { className="euiFormRow__text"> Utilize error text or{' '} - EuiFormRow + EuiFormRow {' '} for more permanent error feedback diff --git a/src/components/header/_header_logo.scss b/src/components/header/_header_logo.scss index d311c89a1da3..662c6d24736b 100644 --- a/src/components/header/_header_logo.scss +++ b/src/components/header/_header_logo.scss @@ -1,5 +1,3 @@ -@import '../link/mixins'; - .euiHeaderLogo { @include euiLink; diff --git a/src/components/link/_index.scss b/src/components/link/_index.scss index 4327553d24b2..b7a80a4a5023 100644 --- a/src/components/link/_index.scss +++ b/src/components/link/_index.scss @@ -1,2 +1,3 @@ -@import 'mixins'; +@import 'variables'; + @import 'link'; diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss index 4bc6782b7514..755cf6de4665 100644 --- a/src/components/link/_link.scss +++ b/src/components/link/_link.scss @@ -1,15 +1,3 @@ -$euiLinkColors: ( - subdued: $euiTextSubduedColor, - primary: $euiColorPrimaryText, - secondary: $euiColorSecondaryText, - success: $euiColorSuccessText, - accent: $euiColorAccentText, - warning: $euiColorWarningText, - danger: $euiColorDangerText, - text: $euiTextColor, - ghost: $euiColorGhost, -); - .euiLink { @include euiLink; @@ -18,6 +6,7 @@ $euiLinkColors: ( } &.euiLink-disabled { + font-weight: inherit; text-decoration: none; cursor: default; } @@ -28,14 +17,23 @@ $euiLinkColors: ( color: $color; &:hover, - &:focus { - color: darken($color, 10%); + &:focus, + &:target { text-decoration: underline; } + &:target { + color: darken($color, 10%); + } + &:focus { - @include euiFocusBackground($color); - @include euiFocusRing(null, 0); + @include euiFocusRing(null, 'outer'); + + @if ($name == 'ghost') { + background-color: shade($color, $euiFocusTransparencyPercent); + } @else { + @include euiFocusBackground($color); + } } } } diff --git a/src/components/link/_variables.scss b/src/components/link/_variables.scss new file mode 100644 index 000000000000..c788b830796a --- /dev/null +++ b/src/components/link/_variables.scss @@ -0,0 +1,11 @@ +$euiLinkColors: ( + subdued: $euiTextSubduedColor, + primary: $euiColorPrimaryText, + secondary: $euiColorSecondaryText, + success: $euiColorSuccessText, + accent: $euiColorAccentText, + warning: $euiColorWarningText, + danger: $euiColorDangerText, + text: $euiTextColor, + ghost: $euiColorGhost, +); diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss index 49107c0f9cd4..f8ce49e4b081 100644 --- a/src/components/text/_text.scss +++ b/src/components/text/_text.scss @@ -172,18 +172,7 @@ // Style anchors that don't have a class. This prevents overwriting "buttons" // and other stylized elements passed in. a:not([class]) { - color: $euiLinkColor; - - &:hover, - &:focus { - color: darken($euiLinkColor, 10%); - text-decoration: underline; - } - - &:focus { - @include euiFocusBackground($euiLinkColor); - @include euiFocusRing; - } + @include euiLink; } img { diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index bec84abc99f5..9589c3d60d5a 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -11,6 +11,7 @@ @import 'form'; @import 'header'; @import 'loading'; +@import 'link'; @import 'panel'; @import 'popover'; @import 'range'; diff --git a/src/components/link/_mixins.scss b/src/global_styling/mixins/_link.scss similarity index 100% rename from src/components/link/_mixins.scss rename to src/global_styling/mixins/_link.scss diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss index 510c54e1ee4b..82662791e838 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss @@ -4,7 +4,7 @@ @include euiFontSize; @include euiButtonFocus; - font-weight: $euiFontWeightMedium; + font-weight: $euiButtonFontWeight; text-decoration: none; transition: background-color $euiAnimSpeedNormal ease-in-out, border-color $euiAnimSpeedNormal ease-in-out; outline-offset: -1px; diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss index 9b3f4154ceb8..db3617b9f681 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss @@ -16,6 +16,7 @@ @import 'form'; @import '../../../../global_styling/mixins/header'; @import '../../../../global_styling/mixins/loading'; +@import 'link'; @import '../../../../global_styling/mixins/panel'; @import 'panel'; @import '../../../../global_styling/mixins/popover'; diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_link.scss b/src/themes/eui-amsterdam/global_styling/mixins/_link.scss new file mode 100644 index 000000000000..1a6b802276be --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/mixins/_link.scss @@ -0,0 +1,16 @@ +@mixin euiLink { + text-align: left; + font-weight: $euiButtonFontWeight; + + &:hover, + &:focus { + text-decoration: underline; + } + + &:focus { + @include euiFocusRing(null, 'outer'); + // sass-lint:disable-block no-misspelled-properties no-important + text-decoration-thickness: $euiBorderWidthThick !important; + background: transparent !important; + } +} diff --git a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss index 941f092f8781..f42b0c3264cb 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss +++ b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss @@ -1,3 +1,4 @@ $euiButtonColorDisabled: $euiColorDisabled; $euiButtonColorDisabledText: $euiColorDisabledText; $euiButtonDefaultTransparency: .8; +$euiButtonFontWeight: $euiFontWeightMedium;