Skip to content

Commit d07952c

Browse files
sghowerisghoweri
committed
feat: port latest UIKit updates + fixes upstream
1 parent 22fc44a commit d07952c

File tree

33 files changed

+627
-296
lines changed

33 files changed

+627
-296
lines changed

‎packages/uikit-workshop/src/html/index.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@
3030
</head>
3131

3232
<body class="pl-c-body">
33-
<pl-layout></pl-layout>
33+
<pl-layout>
34+
<pl-header></pl-header>
35+
<div class="pl-c-viewport-modal-wrapper">
36+
<pl-iframe></pl-iframe>
37+
<pl-drawer></pl-drawer>
38+
</div>
39+
</pl-layout>
3440

3541
<!-- the template for the modal slider -->
3642
<script type="text/mustache" class="pl-js-panel-template-base">

‎packages/uikit-workshop/src/html/partials/base-template.html

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,35 +37,41 @@ <h2 class="pl-c-pattern-info__title">
3737
<!--end pl-c-pattern-info__description-->
3838
{{/ patternDescExists }} {{# lineageExists }}
3939
<p class="pl-c-lineage pl-js-lineage">
40-
The <em>{{ patternName }}</em> pattern contains the following patterns: {{#
41-
lineage }}
40+
The
41+
<em>{{ patternName }}</em>
42+
pattern contains the following patterns: {{# lineage }}
4243
<a
4344
href="{{ lineagePath }}"
4445
class="pl-c-lineage__link pl-js-lineage-link"
45-
data-patternPartial="{{ lineagePattern }}"
46+
data-patternpartial="{{ lineagePattern }}"
4647
>
4748
{{ lineagePattern }} {{# lineageState }}<span
4849
class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}"
4950
title="{{ lineageState }}"
50-
/>{{/ lineageState }} </a
51-
><!--end pl-c-lineage__link-->
51+
/>
52+
{{/ lineageState }}
53+
</a>
54+
<!--end pl-c-lineage__link-->
5255
{{# hasComma }}, {{/ hasComma }} {{/ lineage }}
5356
</p>
5457
<!--end pl-c-lineage-->
5558
{{/ lineageExists }} {{# lineageRExists }}
5659
<p class="pl-c-lineage">
57-
The <em>{{ patternName }}</em> pattern is included in the following
58-
patterns: {{# lineageR }}
60+
The
61+
<em>{{ patternName }}</em>
62+
pattern is included in the following patterns: {{# lineageR }}
5963
<a
6064
href="{{ lineagePath }}"
6165
class="pl-c-lineage__link pl-js-lineage-link"
62-
data-patternPartial="{{ lineagePattern }}"
66+
data-patternpartial="{{ lineagePattern }}"
6367
>
6468
{{ lineagePattern }} {{# lineageState }}<span
6569
class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}"
6670
title="{{ lineageState }}"
67-
/>{{/ lineageState }} </a
68-
><!--end pl-c-lineage__link-->
71+
/>
72+
{{/ lineageState }}
73+
</a>
74+
<!--end pl-c-lineage__link-->
6975
{{# hasComma }}, {{/ hasComma }} {{/ lineageR }}
7076
</p>
7177
<!--end pl-c-lineage-->
@@ -105,6 +111,7 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
105111
id="pl-{{ patternPartial }}-{{ id }}-tab"
106112
data-patternpartial="{{ patternPartial }}"
107113
data-panelid="{{ id }}"
114+
no-smooth-scroll
108115
>{{ name }}</a
109116
>
110117
</li>
@@ -123,11 +130,40 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
123130
>
124131
<button
125132
class="pl-c-code-copy-btn pl-js-code-copy-btn"
133+
size="small"
126134
data-clipboard-target="#pl-{{ patternPartial }}-{{ id }}-panel code"
127135
>
128-
Copy
129-
</button>
136+
<span class="pl-c-code-copy-btn__icon-text">Copy</span>
137+
<svg
138+
viewbox="0 0 24 24"
139+
width="20"
140+
height="20"
141+
class="pl-c-code-copy-btn__icon pl-c-code-copy-btn__icon--copy"
142+
>
143+
<title>copy icon</title>
144+
<path
145+
fill="currentColor"
146+
d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016c1.078 0 2.016 0.891 2.016 1.969v14.016c0 1.078-0.938 2.016-2.016 2.016h-10.969c-1.078 0-2.016-0.938-2.016-2.016v-14.016c0-1.078 0.938-1.969 2.016-1.969h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016c0-1.078 0.891-2.016 1.969-2.016h12z"
147+
></path>
148+
</svg>
130149

150+
<svg
151+
class="pl-c-code-copy-btn__icon pl-c-code-copy-btn__icon--paste"
152+
viewbox="0 0 16 16"
153+
width="20"
154+
height="20"
155+
>
156+
<title>clipboard</title>
157+
<path
158+
fill="currentColor"
159+
d="M14.5 2h-4.5c0-1.105-0.895-2-2-2s-2 0.895-2 2h-4.5c-0.276 0-0.5 0.224-0.5 0.5v13c0 0.276 0.224 0.5 0.5 0.5h13c0.276 0 0.5-0.224 0.5-0.5v-13c0-0.276-0.224-0.5-0.5-0.5zM8 1c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.552 0-1-0.448-1-1s0.448-1 1-1zM14 15h-12v-12h2v1.5c0 0.276 0.224 0.5 0.5 0.5h7c0.276 0 0.5-0.224 0.5-0.5v-1.5h2v12z"
160+
></path>
161+
<path
162+
fill="currentColor"
163+
d="M7 13.414l-3.207-3.707 0.914-0.914 2.293 1.793 4.293-3.793 0.914 0.914z"
164+
></path>
165+
</svg>
166+
</button>
131167
{{{ content }}}
132168
</div>
133169
<!--end pl-c-tabs__panel-->

‎packages/uikit-workshop/src/icons/code-collapse.svg

Lines changed: 6 additions & 0 deletions
Loading

‎packages/uikit-workshop/src/icons/code-expand.svg

Lines changed: 5 additions & 0 deletions
Loading

‎packages/uikit-workshop/src/icons/copy.svg

Lines changed: 4 additions & 0 deletions
Loading

‎packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
11
@import 'scss/01-abstracts/variables';
22
@import 'scss/01-abstracts/mixins';
33

4-
@keyframes animateIn {
5-
from {
6-
transform: translate3d(-50%, -100%, 0px);
7-
opacity: 0;
8-
}
9-
to {
10-
opacity: 1;
11-
transform: translate3d(-50%, calc(3rem - 50%), 0px);
12-
}
13-
}
14-
154
@keyframes rotate {
165
0% {
176
transform: rotate(0deg);
@@ -21,21 +10,34 @@
2110
}
2211
}
2312

13+
.pl-c-loader-wrapper {
14+
position: absolute;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
}
20+
21+
.pl-c-loader-wrapper:not(:last-child){
22+
opacity: 0;
23+
pointer-events: none;
24+
transition: opacity 0.2s ease, transform 0.2s ease;
25+
}
26+
2427
.pl-c-loader {
2528
z-index: 1000;
2629
position: absolute;
27-
top: 0;
30+
top: 50%;
2831
left: 50%;
2932
margin: auto;
3033
max-width: $pl-space * 25;
3134
width: calc(90vw - #{$pl-doublespace});
3235
border-radius: $pl-border-radius;
3336
background: rgba($pl-color-black, 0.9);
34-
transform: translate3d(-50%, -100%, 0px);
37+
transform: translate3d(-50%, -50%, 0px);
3538
transition: opacity 0.3s ease, transform 0.3s ease;
3639
pointer-events: none;
37-
opacity: 0;
38-
animation: animateIn ease 0.3s forwards;
40+
opacity: 1;
3941
}
4042

4143
.pl-c-loader__content {

‎packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,9 @@
8080
* 1. WIP -- part of broader UI refactor
8181
*/
8282
&.pl-is-active {
83-
max-height: calc(100vh - #{$offset-top} - 1rem);
83+
max-height: calc(95vh - #{$offset-top} - 1rem);
8484
max-height: calc(
85-
var(--pl-viewport-height, calc(100vh - #{$offset-top})) - 1rem
85+
var(--pl-viewport-height, calc(95vh - #{$offset-top})) - 1rem
8686
); /* [1] */
8787
overflow: auto;
8888
-webkit-overflow-scrolling: touch;

‎packages/uikit-workshop/src/sass/scss/02-base/_body.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,17 @@
99
*/
1010
.pl-c-html {
1111
min-height: 100%;
12+
display: flex;
1213
}
1314

1415
.pl-c-body {
1516
margin: 0;
1617
padding: 0;
18+
width: 100%;
1719
-webkit-text-size-adjust: 100%;
1820
display: flex; // Required for IE 11 to display overall PL layout correctly
1921
}
2022

21-
// @todo: refactor to make colors more generic to PL:
2223
.pl-c-body--theme-dark,
2324
:root {
2425
--theme-bg: #161b3c;

‎packages/uikit-workshop/src/sass/scss/04-components/_pattern-lineage.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Pattern Lineage info
77
*/
88
.pl-c-lineage {
9-
font-size: $pl-font-size-sm-2;
9+
font-size: $pl-font-size-norm;
1010
line-height: 1.7;
1111
margin-top: 0;
1212
}
@@ -16,9 +16,9 @@
1616
*/
1717
.pl-c-lineage__link {
1818
font-style: italic;
19-
color: inherit;
19+
color: inherit; // light vs dark text
2020
text-decoration: underline;
21-
display: inline-flex;
21+
display: inline;
2222
align-items: center;
2323
transition: opacity $pl-animate-quick ease;
2424

‎packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss

Lines changed: 66 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -67,24 +67,21 @@
6767
* 1) This is the button that twirls down extra pattern info
6868
*/
6969
.pl-c-pattern__extra-toggle {
70-
font-size: 9px;
70+
font-size: 0.8rem;
7171
position: absolute;
7272
bottom: -1px;
7373
right: 0;
7474
z-index: 1;
75-
padding: 0.65em 0.65em 0.5em;
76-
line-height: 1;
75+
padding: 0.4rem 0.5rem;
7776
color: $pl-color-gray-50;
7877
background-color: transparent;
78+
cursor: pointer;
7979
font-weight: normal;
80-
border: 1px solid $pl-color-gray-13;
81-
border-top-left-radius: $pl-border-radius-med;
82-
border-top-right-radius: $pl-border-radius-med;
83-
transition: background-color $pl-animate-quick ease-out;
84-
85-
.pl-c-pattern__toggle-icon {
86-
display: inline-block;
87-
}
80+
transition: all $pl-animate-quick ease-out;
81+
font-family: $pl-font;
82+
border-color: #ddd;
83+
display: flex;
84+
align-items: center;
8885

8986
&:hover,
9087
&:focus,
@@ -95,16 +92,68 @@
9592

9693
&:focus {
9794
outline: 1px dotted $pl-color-gray-70;
95+
outline-offset: -1px;
9896
}
9997

10098
&.pl-is-active {
10199
border-bottom-color: $pl-color-gray-02;
100+
}
101+
}
102+
103+
.pl-c-pattern__toggle-icon-wrapper {
104+
position: relative;
105+
height: 1rem;
106+
width: 1rem;
107+
}
108+
109+
.pl-c-pattern__toggle-icon {
110+
height: 0.9rem;
111+
width: 0.9rem;
112+
display: inline-block;
113+
vertical-align: middle;
114+
position: absolute;
115+
top: 50%;
116+
left: 50%;
117+
transform: translate3d(-50%, -50%, 0);
118+
transition: transform .1s linear, opacity .1s linear;
119+
}
120+
121+
.pl-c-pattern__toggle-icon--expand {
122+
z-index: 1;
123+
124+
.pl-is-active & {
125+
opacity: 0;
126+
}
127+
}
128+
129+
.pl-c-pattern__toggle-icon--collapse {
130+
opacity: 0;
131+
z-index: 2;
132+
height: 1rem;
133+
width: 1rem;
134+
135+
.pl-is-active & {
136+
opacity: 1;
137+
}
138+
}
139+
140+
.pl-c-pattern__extra-toggle-text ~ .pl-c-pattern__toggle-icon-wrapper {
141+
margin-left: 0.25rem;
142+
}
102143

103-
.pl-c-pattern__toggle-icon {
104-
-webkit-transform: rotate(180deg);
105-
-ms-transform: rotate(180deg);
106-
transform: rotate(180deg);
107-
}
144+
.pl-c-pattern__extra-toggle-text--collapse {
145+
display: none;
146+
147+
.pl-is-active & {
148+
display: inline-block;
149+
}
150+
}
151+
152+
.pl-c-pattern__extra-toggle-text--expand {
153+
display: inline-block;
154+
155+
.pl-is-active & {
156+
display: none;
108157
}
109158
}
110159

@@ -126,10 +175,6 @@
126175
border: 1px solid $pl-color-gray-13;
127176
border-radius: $pl-border-radius-med;
128177
border-top-right-radius: 0;
129-
max-height: 150rem;
178+
max-height: 9999px;
130179
}
131180
}
132-
133-
.pl-c-pattern-index {
134-
padding: 0 0.5rem;
135-
}

0 commit comments

Comments
 (0)