Skip to content

Commit e826142

Browse files
dkolbaannschmfranzke
authored
refactor: guidelines 3.0 link style (#89)
* feat: 🎸 Link according to DBUX-3 spec BREAKING CHANGE: 🧨 Brace yourselves - all your links are belong to us 🔗 * fix: 🐛 Fix issues from review * fix: 🐛 Fix more issues from review * refactor: remove custom icons for links * refactor: updated colors and tonality * refactor: add globals * refactor: default style with arrows * docs(migrationGuide): update migrationGuide * fix: revert adding icons helper * Update migrationGuide.adoc * refactor: use color placeholder from latest base * Update link.scss * refactor: removed unused styles * Update link.scss Co-authored-by: Anna Schoderer <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]>
1 parent 7c1d5cb commit e826142

File tree

10 files changed

+122
-55
lines changed

10 files changed

+122
-55
lines changed

‎docs/migrationGuide.adoc

+7
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ We've remove the deprecated previous HTML implementation of the label by an `out
4343
- Integration of `data-icon-before` and `data-icon-after` property for enabling use of custom icons in input fields
4444
- Introducing new variations: `error`, `warning`, `success` and `information` following the new guidelines 3.0 color system
4545

46+
=== `link`
47+
48+
- Removed the ability for custom icons according to guidelines 3.0
49+
- Added `primary` as variant for highlighting links
50+
- Changed use of `data-variant` to use with `primary` and used `data-content` attribute for differentiation between `internal` and `external`
51+
- Font-size definition has moved to DB UI Base due to our `tonality` introduction (default and for `data-size=small`)
52+
4653
== DB UI Core 2.2.0 Migration Guide
4754

4855
=== progress element

‎source/_patterns/00-base/_init.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ nav,
4242
// General styles (TODO: most likely move those to DB UI Base)
4343
:root {
4444
--db-focus-outline-offset: 1px;
45-
--db-focus-outline-color: #2c95c4;
45+
--db-focus-outline-color: #0087b9;
46+
47+
--db-disabled-text-opacity: 0.5;
4648
}
4749

4850
// Focus styles

‎source/_patterns/01-elements/link/_link.hbs

+3-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
{{#if target}} target="{{ target }}"{{/if }}
1313
{{#if current}} aria-current="{{ current }}"{{/if }}
1414
{{#if size }} data-size="{{ size }}"{{/if }}
15-
{{#if icon}} data-icon="{{ icon }}"{{/if}}
16-
{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
17-
>{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }}
18-
</a>
15+
{{#if data-variant}} data-variant="{{ data-variant }}"{{/if}}
16+
{{#if data-content}} data-content="{{data-content}}"{{/if}}
17+
>{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }}</a>

‎source/_patterns/01-elements/link/_link.variables.scss

-5
This file was deleted.

‎source/_patterns/01-elements/link/enterprise/_link.variables.scss

Whitespace-only changes.

‎source/_patterns/01-elements/link/enterprise/link.scss

+39-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
1-
@import "link.variables";
1+
@use "@db-ui/base/build/scss/icon/icons.helpers" as *;
2+
23
@import "../link";
4+
5+
// Define the available icons
6+
.elm-link {
7+
&[rel] {
8+
--icon-font-family: var(--db-base-icon-font-family);
9+
--icon-font-size: var(--db-base-icon-font-size);
10+
}
11+
12+
&[rel="configuration"] {
13+
@include icon(glyph(settings), 24, "outline", $partial: $partial);
14+
}
15+
16+
&[rel="messages"] {
17+
@include icon(glyph(chat), 24, "outline", $partial: $partial);
18+
}
19+
20+
&[rel="account"] {
21+
@include icon(glyph(account), 24, "outline", $partial: $partial);
22+
}
23+
24+
&[rel="configuration"],
25+
&[rel="messages"],
26+
&[rel="account"] {
27+
&::before {
28+
// preventing an underlined icon on click
29+
display: inline-block;
30+
}
31+
}
32+
33+
&[data-size="small"] {
34+
&[rel] {
35+
@include icon-meta(20);
36+
// TODO: remove when icons are availabe in the correct size
37+
font-size: 16px;
38+
}
39+
}
40+
}

‎source/_patterns/01-elements/link/link.scss

+38-40
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
@use "@db-ui/base/build/scss/variables" as *;
2+
@use "@db-ui/base/build/scss/scaling-placeholder" as *;
3+
@use "@db-ui/base/build/scss/color-placeholder" as *;
24
@use "@db-ui/base/build/scss/helpers/functions" as *;
35
@use "@db-ui/base/build/scss/icon/icons.helpers" as *;
46

57
@import "../../../css/partials.meta";
6-
@import "link.variables";
78

89
.elm-link {
9-
border-radius: to-rem($pxValue: 4);
10+
color: var(--db-current-color, $db-colors-neutral-on-bg-enabled);
1011
display: inline-block;
12+
border-radius: to-rem($pxValue: 6);
1113

1214
// Link underline
13-
text-underline-offset: to-rem($pxValue: 3);
14-
text-underline-position: under;
15-
@supports (text-underline-offset: 3px) {
16-
text-underline-position: auto;
17-
}
15+
text-underline-position: from-font;
16+
text-decoration-thickness: to-rem($pxValue: 1);
17+
18+
// Changing color on hover should be animated by a transition
19+
transition: outline 0.06s, color $db-transition-color;
1820

19-
&:active {
20-
color: initial;
21+
&:hover {
22+
color: inherit;
2123
}
2224

2325
// "disabled" links
2426
&[aria-disabled="true"] {
25-
opacity: $link--disabled-opacity;
27+
opacity: var(--db-disabled-text-opacity, 0.5);
2628

2729
pointer-events: none;
2830

@@ -31,46 +33,42 @@
3133
}
3234
}
3335

34-
// Sizes
35-
&%size-Small {
36-
&:not(.is-icon-text-replace) {
37-
font-size: to-rem($pxValue: 14);
38-
}
39-
40-
&[rel],
41-
&[data-icon],
42-
&[data-icon-before] {
43-
@include icon-meta(20);
44-
}
45-
46-
&[data-icon-after]::after {
47-
@include icon-meta($size: 20, $position: "after");
48-
}
36+
&[data-content] {
37+
--icon-font-family: var(--db-base-icon-font-family);
38+
--icon-font-size: var(--db-base-icon-font-size);
4939
}
5040

51-
&[data-size="small"] {
52-
@extend %size-Small;
41+
&[data-content="internal"] {
42+
@include icon(glyph(link), 24, "outline", "after");
5343
}
5444

55-
// Define the available icons
56-
&[rel="configuration"] {
57-
@include icon(glyph(settings), 24, "outline", $partial: $partial);
45+
&[data-content="external"] {
46+
@include icon(glyph(link-external), 24, "outline", "after");
5847
}
5948

60-
&[rel="messages"] {
61-
@include icon(glyph(chat), 24, "outline", $partial: $partial);
49+
&[data-content="internal"],
50+
&[data-content="external"] {
51+
&::after {
52+
--icon-margin-before: var(--db-spacing-fixed-2xs);
53+
margin-top: -3px;
54+
}
55+
56+
&:focus-visible {
57+
outline-offset: var(--db-focus-outline-offset, 1px);
58+
}
6259
}
6360

64-
&[rel="account"] {
65-
@include icon(glyph(account), 24, "outline", $partial: $partial);
61+
&[data-variant="primary"] {
62+
@extend %db-primary-text-ia;
6663
}
6764

68-
&[rel="configuration"],
69-
&[rel="messages"],
70-
&[rel="account"] {
71-
&::before {
72-
// preventing an underlined icon on click
73-
display: inline-block;
65+
// data-size=small is defined by tonality in "@db-ui/base/build/scss/tonality"
66+
&[data-size="small"] {
67+
&[data-content="internal"],
68+
&[data-content="external"] {
69+
&::after {
70+
--icon-margin-before: var(--db-spacing-fixed-3xs);
71+
}
7472
}
7573
}
7674
}

‎source/_patterns/01-elements/link/links.hbs

+6-4
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@
88
{{/unless }}
99

1010
<p class="{{ styleModifier }}">
11-
{{> elements-link href='#' value='Teaser link' }}
11+
{{> elements-link href='#' value='Teaser link Primary' data-variant="primary" data-content='internal'}}
1212
</p>
13+
1314
<p class="{{ styleModifier }}">
14-
{{> elements-link href='#' value='Teaser link' icon='settings' }}
15+
{{> elements-link href='#' value='Teaser link (disabled)' disabled='true' data-content='internal'}}
1516
</p>
17+
1618
<p class="{{ styleModifier }}">
17-
{{> elements-link href='#' value='Teaser link (disabled)' disabled='true' }}
19+
{{> elements-link href='#' value='Teaser link Internal (Default)' data-content='internal' size=size }}
1820
</p>
1921
<p class="{{ styleModifier }}">
20-
{{> elements-link href='#' value='Teaser Link (disabled)' icon-after='account' disabled='true' size=size }}
22+
{{> elements-link href='#' value='External link External' data-content='external' size=size }}
2123
</p>

‎source/_patterns/01-elements/link/tonality.hbs

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
<p class="db-ui-functional">
3+
{{> elements-link href='#' value='Internal link functional' data-content='internal' }}
4+
{{> elements-link href='#' value='External link functional' data-content='external' }}
5+
{{> elements-link href='#' value='Internal link functional small' data-content='internal' size="small" }}
6+
{{> elements-link href='#' value='External link functional small' data-content='external' size="small" }}
7+
</p>
8+
9+
10+
<p class="db-ui-regular">
11+
{{> elements-link href='#' value='Internal link regular (Default)' data-content='internal' }}
12+
{{> elements-link href='#' value='External link regular (Default)' data-content='external' }}
13+
{{> elements-link href='#' value='Internal link regular (Default) small' data-content='internal' size="small" }}
14+
{{> elements-link href='#' value='External link regular (Default) small' data-content='external' size="small" }}
15+
</p>
16+
17+
18+
19+
<p class="db-ui-expressive">
20+
{{> elements-link href='#' value='Internal link expressive' data-content='internal' }}
21+
{{> elements-link href='#' value='External link expressive' data-content='external' }}
22+
{{> elements-link href='#' value='Internal link expressive small' data-content='internal' size="small" }}
23+
{{> elements-link href='#' value='External link expressive small' data-content='external' size="small" }}
24+
</p>

‎source/css/enterprise/db-ui-core.scss

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ $partial: false;
1919
@use "db-ui-core.variables" as *;
2020

2121
@use "@db-ui/base/build/scss/tonality" as *;
22+
@use "@db-ui/base/build/scss/color-placeholder" as *;
2223

2324
@use "../../_patterns/00-base/init.global" as *;
2425
@use "../../_patterns/00-base/init" as *;
@@ -33,6 +34,7 @@ $partial: false;
3334

3435
:root {
3536
@extend %db-ui-functional;
37+
@extend %db-bg-neutral-0;
3638
}
3739

3840
// ELEMENTS

0 commit comments

Comments
 (0)