Skip to content

Commit 98d9994

Browse files
dkolbadkolba
committed
feat: 🎸 Link according to DBUX-3 spec
BREAKING CHANGE: 🧨 Brace yourselves - all your links are belong to us 🔗
1 parent 977a639 commit 98d9994

File tree

7 files changed

+47
-33
lines changed

7 files changed

+47
-33
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,16 @@ nav,
3939
// General styles (TODO: most likely move those to DB UI Base)
4040
:root {
4141
--db-focus-outline-offset: 1px;
42-
--db-focus-outline-color: #2c95c4;
42+
--db-focus-outline-color: #0087b9;
4343
}
4444

4545
// Focus styles
4646
:is(a, button, input, textarea, summary) {
4747
--db-focus-outline-size: max(2px, 0.08em);
4848

4949
&:focus-visible {
50-
outline: var(--db-focus-outline-size) var(--db-focus-outline-style, solid)
50+
outline: var(--db-focus-outline-size)
51+
var(--db-focus-outline-style, solid)
5152
var(--db-focus-outline-color, currentColor);
5253
outline-offset: var(
5354
--db-focus-outline-offset,

‎source/_patterns/00-base/icons/_icons.helpers.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@
6262
content: none;
6363
}
6464
} @else {
65-
@extend %icon;
65+
// 🤷‍♂️
66+
@extend %icon !optional;
6667
}
6768
}
6869
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@
1414
{{#if size }} data-size="{{ size }}"{{/if }}
1515
{{#if icon}} data-icon="{{ icon }}"{{/if}}
1616
{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
17+
{{#if data-variant}} data-variant="{{ data-variant }}"{{/if}}
1718
>{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }}
1819
</a>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
@import "../../00-base/colors/colors.variables";
33
@import "../../00-base/icons/icons.helpers";
44

5-
$link--disabled-opacity: 0.4 !default;
5+
$link--disabled-opacity: 0.25 !default;
66
$link-reaMain--color: $db-color-cyan-600 !default;

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

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@
33

44
.elm-link {
55
display: inline-block;
6-
border-radius: to-rem($pxValue: 4);
6+
border-radius: to-rem($pxValue: 6);
77

88
// Link underline
9-
text-underline-offset: to-rem($pxValue: 3);
9+
text-underline-offset: to-rem($pxValue: 1);
1010
text-underline-position: under;
11+
text-decoration-thickness: to-rem($pxValue: 1);
1112
@supports (text-underline-offset: 3px) {
1213
text-underline-position: auto;
1314
}
1415

1516
&:active {
16-
color: initial;
17+
font-size: to-em($pxValue: 14);
1718
}
1819

1920
// "disabled" links
@@ -26,42 +27,40 @@
2627
color: initial;
2728
}
2829
}
30+
&[data-variant="internal"] {
31+
@include icon(glyph(link), 20, "outline", "after");
32+
}
33+
&[data-variant="external"] {
34+
@include icon(glyph(link-external), 20, "outline", "after");
35+
}
2936

37+
&[data-variant="internal"],
38+
&[data-variant="external"] {
39+
color: #282d37;
40+
&::after {
41+
margin-top: -3px;
42+
--icon-margin-before: #{to-rem($pxValue: 4)};
43+
}
44+
&:focus-visible {
45+
outline-offset: -1px;
46+
padding: 0 2px 0 2px;
47+
}
48+
}
3049
// Sizes
3150
&%size-Small {
3251
&:not(.is-icon-text-replace) {
33-
font-size: to-rem($pxValue: 14);
34-
}
35-
&[rel],
36-
&[data-icon],
37-
&[data-icon-before] {
38-
@include iconMeta(20);
52+
font-size: to-em($pxValue: 12);
3953
}
40-
&[data-icon-after]::after {
41-
@include iconMeta($size: 20, $position: "after");
54+
&:active {
55+
font-size: to-em($pxValue: 10);
4256
}
4357
}
4458

4559
&[data-size="small"] {
60+
color: #42464f;
4661
@extend %size-Small;
47-
}
48-
49-
// Define the available icons
50-
&[rel="configuration"] {
51-
@include icon(glyph(settings), 24, "outline", $partial: $partial);
52-
}
53-
&[rel="messages"] {
54-
@include icon(glyph(chat), 24, "outline", $partial: $partial);
55-
}
56-
&[rel="account"] {
57-
@include icon(glyph(account), 24, "outline", $partial: $partial);
58-
}
59-
&[rel="configuration"],
60-
&[rel="messages"],
61-
&[rel="account"] {
62-
&::before {
63-
// preventing an underlined icon on click
64-
display: inline-block;
62+
&::after {
63+
--icon-font-size: #{to-rem($pxValue: 16)};
6564
}
6665
}
6766
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,10 @@
1919
<p class="{{ styleModifier }}">
2020
{{> elements-link href='#' value='Teaser Link (disabled)' icon-after='account' disabled='true' size=size }}
2121
</p>
22+
23+
<p class="{{ styleModifier }}">
24+
{{> elements-link href='#' value='Internal link hbs' data-variant='internal' size=size }}
25+
</p>
26+
<p class="{{ styleModifier }}">
27+
{{> elements-link href='#' value='External link hbs' data-variant='external' size=size }}
28+
</p>

‎~/Library/Microsoft/PowerAppsCli/usersettings.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"uniqueId": "6a7b3244-9df5-4ca0-9f16-ed06cc348906",
3+
"settingVersion": "1.0",
4+
"telemetryEnabled": true
5+
}

0 commit comments

Comments
 (0)