From 37435ff1a24e68126982fee65db2fa39816eed7d Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 26 Jul 2021 16:50:19 -0400 Subject: [PATCH 1/7] [EuiLink] Increased font weight to match buttons - Increased text underline weight on focus - Removed low-contrast focus background - Added `:visited` and `:target` styling (All mainly affecting Amsterdam) --- src/components/header/_header_logo.scss | 2 -- src/components/link/_index.scss | 3 ++- src/components/link/_link.scss | 23 +++++++------------ src/components/link/_variables.scss | 11 +++++++++ src/global_styling/mixins/_index.scss | 1 + .../mixins/_link.scss} | 0 .../global_styling/mixins/_button.scss | 2 +- .../global_styling/mixins/_index.scss | 1 + .../global_styling/mixins/_link.scss | 16 +++++++++++++ .../global_styling/variables/_buttons.scss | 1 + 10 files changed, 41 insertions(+), 19 deletions(-) create mode 100644 src/components/link/_variables.scss rename src/{components/link/_mixins.scss => global_styling/mixins/_link.scss} (100%) create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_link.scss 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..892666561872 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,18 @@ $euiLinkColors: ( color: $color; &:hover, - &:focus { - color: darken($color, 10%); + &:focus, + &:target { text-decoration: underline; } + &:visited { + color: darken($color, 10%); + } + &:focus { @include euiFocusBackground($color); - @include euiFocusRing(null, 0); + @include euiFocusRing(null, 'outer'); } } } 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/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..2210558d4632 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/mixins/_link.scss @@ -0,0 +1,16 @@ +@mixin euiLink { + @include euiFocusRing(null, 'outer'); + text-align: left; + font-weight: $euiButtonFontWeight; + + &:hover, + &:focus { + text-decoration: underline; + } + + &:focus { + // 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; From a8497ac0c0f27edfd4ada5b483a16c7ab1d42e73 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 26 Jul 2021 17:58:24 -0400 Subject: [PATCH 2/7] =?UTF-8?q?Fix=20some=20broken=20links=20=F0=9F=A4=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-docs/src/views/badge/badge_href.js | 8 ++++---- src-docs/src/views/button/button_as_link.js | 12 ++++++------ src-docs/src/views/form_controls/display_toggles.js | 2 +- .../views/markdown_editor/markdown_editor_errors.js | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) 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/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 From 401f025658277373fbb8d9f2756e0034e08e95de Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 26 Jul 2021 18:10:12 -0400 Subject: [PATCH 3/7] Fixing up docs --- src-docs/src/views/link/link.js | 65 ++----------- src-docs/src/views/link/link_color.js | 34 +++++++ src-docs/src/views/link/link_disable.js | 27 +++--- src-docs/src/views/link/link_example.js | 104 ++++++++++++++------- src-docs/src/views/link/link_external.js | 22 +++++ src-docs/src/views/link/link_validation.js | 10 +- 6 files changed, 150 insertions(+), 112 deletions(-) create mode 100644 src-docs/src/views/link/link_color.js create mode 100644 src-docs/src/views/link/link_external.js 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..49e2f1d3c353 --- /dev/null +++ b/src-docs/src/views/link/link_color.js @@ -0,0 +1,34 @@ +import React from 'react'; + +import { EuiLink, EuiText } from '../../../../src/components'; + +export default () => ( + +
    +
  • + Primary (default) +
    • +
  • + Subdued +
    • +
  • + Success +
    • +
  • + Accent +
    • +
  • + Danger +
    • +
  • + Warning +
    • +
  • + Text +
    • +
  • + 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} -

+

))} - + ); }; From 160ff471cfdf62bbf4e11df8604ebd3d3338ae7e Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 26 Jul 2021 18:39:04 -0400 Subject: [PATCH 4/7] Remove `:target` fix `ghost` --- src-docs/src/views/link/link_color.js | 40 +++++++++++++-------------- src/components/link/_link.scss | 9 ++++-- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src-docs/src/views/link/link_color.js b/src-docs/src/views/link/link_color.js index 49e2f1d3c353..9558c675e89f 100644 --- a/src-docs/src/views/link/link_color.js +++ b/src-docs/src/views/link/link_color.js @@ -2,30 +2,28 @@ import React from 'react'; import { EuiLink, EuiText } from '../../../../src/components'; +const links = [ + 'primary', + 'subdued', + 'success', + 'accent', + 'warning', + 'danger', + 'text', +]; + export default () => (
    -
  • - Primary (default) -
    • -
  • - Subdued -
    • -
  • - Success -
    • -
  • - Accent -
    • -
  • - Danger -
    • -
  • - Warning -
    • -
  • - Text -
    • + {links.map((value) => ( +
  • + + {value.charAt(0).toUpperCase() + value.slice(1)} + +
    • + ))}
  • Ghost
    • diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss index 892666561872..755cf6de4665 100644 --- a/src/components/link/_link.scss +++ b/src/components/link/_link.scss @@ -22,13 +22,18 @@ text-decoration: underline; } - &:visited { + &:target { color: darken($color, 10%); } &:focus { - @include euiFocusBackground($color); @include euiFocusRing(null, 'outer'); + + @if ($name == 'ghost') { + background-color: shade($color, $euiFocusTransparencyPercent); + } @else { + @include euiFocusBackground($color); + } } } } From 4ff3eaaf88cd7dd63fbdb3d536e52b39f432362b Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 26 Jul 2021 18:47:22 -0400 Subject: [PATCH 5/7] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 86d744b50bb2..3f461cb7762d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ - Fixed border-radius in `EuiCard.selectable`'s button ([#4954](https://github.com/elastic/eui/pull/4954)) - Updated styles for `EuiKeyPadMenuItem` ([#4950](https://github.com/elastic/eui/pull/4950)) +- Updated styles for `EuiLink` ([#4979](https://github.com/elastic/eui/pull/4979)) **Breaking changes** From 5fc154c0cd0d53aafd7caa2d4a1cc2c125ee6fdb Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 27 Jul 2021 09:59:36 -0400 Subject: [PATCH 6/7] Fix Safari and re-use mixin in text styles --- src/components/text/_text.scss | 13 +------------ .../eui-amsterdam/global_styling/mixins/_link.scss | 2 +- 2 files changed, 2 insertions(+), 13 deletions(-) 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/themes/eui-amsterdam/global_styling/mixins/_link.scss b/src/themes/eui-amsterdam/global_styling/mixins/_link.scss index 2210558d4632..1a6b802276be 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_link.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_link.scss @@ -1,5 +1,4 @@ @mixin euiLink { - @include euiFocusRing(null, 'outer'); text-align: left; font-weight: $euiButtonFontWeight; @@ -9,6 +8,7 @@ } &:focus { + @include euiFocusRing(null, 'outer'); // sass-lint:disable-block no-misspelled-properties no-important text-decoration-thickness: $euiBorderWidthThick !important; background: transparent !important; From fd00abcf37a354e28dd05e7ba720da3cf5b4c211 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 27 Jul 2021 17:04:09 -0400 Subject: [PATCH 7/7] Update CHANGELOG.md --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f461cb7762d..eb86c8656970 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,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)) @@ -33,7 +37,6 @@ - Fixed border-radius in `EuiCard.selectable`'s button ([#4954](https://github.com/elastic/eui/pull/4954)) - Updated styles for `EuiKeyPadMenuItem` ([#4950](https://github.com/elastic/eui/pull/4950)) -- Updated styles for `EuiLink` ([#4979](https://github.com/elastic/eui/pull/4979)) **Breaking changes**