Skip to content

refactor: guidelines 3.0 link style #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Jan 12, 2023
Merged

refactor: guidelines 3.0 link style #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
74609c1
feat: 🎸 Link according to DBUX-3 spec
dkolba Oct 12, 2022
cbdc37b
fix: 🐛 Fix issues from review
dkolba Nov 9, 2022
e24100f
fix: 🐛 Fix more issues from review
dkolba Nov 9, 2022
a8647f7
refactor: remove custom icons for links
annsch Dec 8, 2022
005c3fe
refactor: updated colors and tonality
annsch Dec 8, 2022
c5c5d44
refactor: add globals
annsch Dec 8, 2022
ce448e0
refactor: default style with arrows
annsch Dec 8, 2022
9a747ad
docs(migrationGuide): update migrationGuide
annsch Dec 8, 2022
8103d9e
fix: revert adding icons helper
annsch Dec 8, 2022
9d3d15d
Update migrationGuide.adoc
mfranzke Dec 12, 2022
7eb7eba
Merge branch 'dbux-3' into feat-dbswc-323-link
mfranzke Dec 13, 2022
c2d7167
Merge branch 'dbux-3' into feat-dbswc-323-link
mfranzke Dec 16, 2022
b263efa
Merge branch 'dbux-3' into feat-dbswc-323-link
annsch Jan 6, 2023
3e0135f
refactor: use color placeholder from latest base
annsch Jan 6, 2023
99f933f
Update link.scss
mfranzke Jan 7, 2023
56ca01c
Merge branch 'dbux-3' into feat-dbswc-323-link
mfranzke Jan 11, 2023
6912f57
refactor: removed unused styles
annsch Jan 12, 2023
64f13e7
Merge branch 'feat-dbswc-323-link' of https://github.com/db-ui/core i…
annsch Jan 12, 2023
02605f3
Update link.scss
mfranzke Jan 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/migrationGuide.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,13 @@ We've remove the deprecated previous HTML implementation of the label by an `out
- Integration of `data-icon-before` and `data-icon-after` property for enabling use of custom icons in input fields
- Introducing new variations: `error`, `warning`, `success` and `information` following the new guidelines 3.0 color system

=== `link`

- Removed the ability for custom icons according to guidelines 3.0
- Added `primary` as variant for highlighting links
- Changed use of `data-variant` to use with `primary` and used `data-content` attribute for differentiation between `internal` and `external`
- Font-size definition has moved to DB UI Base due to our `tonality` introduction (default and for `data-size=small`)

== DB UI Core 2.2.0 Migration Guide

=== progress element
Expand Down
4 changes: 3 additions & 1 deletion source/_patterns/00-base/_init.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ nav,
// General styles (TODO: most likely move those to DB UI Base)
:root {
--db-focus-outline-offset: 1px;
--db-focus-outline-color: #2c95c4;
--db-focus-outline-color: #0087b9;

--db-disabled-text-opacity: 0.5;
}

// Focus styles
Expand Down
7 changes: 3 additions & 4 deletions source/_patterns/01-elements/link/_link.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
{{#if target}} target="{{ target }}"{{/if }}
{{#if current}} aria-current="{{ current }}"{{/if }}
{{#if size }} data-size="{{ size }}"{{/if }}
{{#if icon}} data-icon="{{ icon }}"{{/if}}
{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
>{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }}
</a>
{{#if data-variant}} data-variant="{{ data-variant }}"{{/if}}
{{#if data-content}} data-content="{{data-content}}"{{/if}}
>{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }}</a>
5 changes: 0 additions & 5 deletions source/_patterns/01-elements/link/_link.variables.scss
View file
Open in desktop

This file was deleted.

Empty file removed source/_patterns/01-elements/link/enterprise/_link.variables.scss
View file
Open in desktop
Empty file.
40 changes: 39 additions & 1 deletion source/_patterns/01-elements/link/enterprise/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,40 @@
@import "link.variables";
@use "@db-ui/base/build/scss/icon/icons.helpers" as *;

@import "../link";

// Define the available icons
.elm-link {
&[rel] {
--icon-font-family: var(--db-base-icon-font-family);
--icon-font-size: var(--db-base-icon-font-size);
}

&[rel="configuration"] {
@include icon(glyph(settings), 24, "outline", $partial: $partial);
}

&[rel="messages"] {
@include icon(glyph(chat), 24, "outline", $partial: $partial);
}

&[rel="account"] {
@include icon(glyph(account), 24, "outline", $partial: $partial);
}

&[rel="configuration"],
&[rel="messages"],
&[rel="account"] {
&::before {
// preventing an underlined icon on click
display: inline-block;
}
}

&[data-size="small"] {
&[rel] {
@include icon-meta(20);
// TODO: remove when icons are availabe in the correct size
font-size: 16px;
}
}
}
78 changes: 38 additions & 40 deletions source/_patterns/01-elements/link/link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
@use "@db-ui/base/build/scss/variables" as *;
@use "@db-ui/base/build/scss/scaling-placeholder" as *;
@use "@db-ui/base/build/scss/color-placeholder" as *;
@use "@db-ui/base/build/scss/helpers/functions" as *;
@use "@db-ui/base/build/scss/icon/icons.helpers" as *;

@import "../../../css/partials.meta";
@import "link.variables";

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

// Link underline
text-underline-offset: to-rem($pxValue: 3);
text-underline-position: under;
@supports (text-underline-offset: 3px) {
text-underline-position: auto;
}
text-underline-position: from-font;
text-decoration-thickness: to-rem($pxValue: 1);

// Changing color on hover should be animated by a transition
transition: outline 0.06s, color $db-transition-color;

&:active {
color: initial;
&:hover {
color: inherit;
}

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

pointer-events: none;

Expand All @@ -31,46 +33,42 @@
}
}

// Sizes
&%size-Small {
&:not(.is-icon-text-replace) {
font-size: to-rem($pxValue: 14);
}

&[rel],
&[data-icon],
&[data-icon-before] {
@include icon-meta(20);
}

&[data-icon-after]::after {
@include icon-meta($size: 20, $position: "after");
}
&[data-content] {
--icon-font-family: var(--db-base-icon-font-family);
--icon-font-size: var(--db-base-icon-font-size);
}

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

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

&[rel="messages"] {
@include icon(glyph(chat), 24, "outline", $partial: $partial);
&[data-content="internal"],
&[data-content="external"] {
&::after {
--icon-margin-before: var(--db-spacing-fixed-2xs);
margin-top: -3px;
}

&:focus-visible {
outline-offset: var(--db-focus-outline-offset, 1px);
}
}

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

&[rel="configuration"],
&[rel="messages"],
&[rel="account"] {
&::before {
// preventing an underlined icon on click
display: inline-block;
// data-size=small is defined by tonality in "@db-ui/base/build/scss/tonality"
&[data-size="small"] {
&[data-content="internal"],
&[data-content="external"] {
&::after {
--icon-margin-before: var(--db-spacing-fixed-3xs);
}
}
}
}
10 changes: 6 additions & 4 deletions source/_patterns/01-elements/link/links.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@
{{/unless }}

<p class="{{ styleModifier }}">
{{> elements-link href='#' value='Teaser link' }}
{{> elements-link href='#' value='Teaser link Primary' data-variant="primary" data-content='internal'}}
</p>

<p class="{{ styleModifier }}">
{{> elements-link href='#' value='Teaser link' icon='settings' }}
{{> elements-link href='#' value='Teaser link (disabled)' disabled='true' data-content='internal'}}
</p>

<p class="{{ styleModifier }}">
{{> elements-link href='#' value='Teaser link (disabled)' disabled='true' }}
{{> elements-link href='#' value='Teaser link Internal (Default)' data-content='internal' size=size }}
</p>
<p class="{{ styleModifier }}">
{{> elements-link href='#' value='Teaser Link (disabled)' icon-after='account' disabled='true' size=size }}
{{> elements-link href='#' value='External link External' data-content='external' size=size }}
</p>
24 changes: 24 additions & 0 deletions source/_patterns/01-elements/link/tonality.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@

<p class="db-ui-functional">
{{> elements-link href='#' value='Internal link functional' data-content='internal' }}
{{> elements-link href='#' value='External link functional' data-content='external' }}
{{> elements-link href='#' value='Internal link functional small' data-content='internal' size="small" }}
{{> elements-link href='#' value='External link functional small' data-content='external' size="small" }}
</p>


<p class="db-ui-regular">
{{> elements-link href='#' value='Internal link regular (Default)' data-content='internal' }}
{{> elements-link href='#' value='External link regular (Default)' data-content='external' }}
{{> elements-link href='#' value='Internal link regular (Default) small' data-content='internal' size="small" }}
{{> elements-link href='#' value='External link regular (Default) small' data-content='external' size="small" }}
</p>



<p class="db-ui-expressive">
{{> elements-link href='#' value='Internal link expressive' data-content='internal' }}
{{> elements-link href='#' value='External link expressive' data-content='external' }}
{{> elements-link href='#' value='Internal link expressive small' data-content='internal' size="small" }}
{{> elements-link href='#' value='External link expressive small' data-content='external' size="small" }}
</p>
2 changes: 2 additions & 0 deletions source/css/enterprise/db-ui-core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ $partial: false;
@use "db-ui-core.variables" as *;

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

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

:root {
@extend %db-ui-functional;
@extend %db-bg-neutral-0;
}

// ELEMENTS
Expand Down