Skip to content

Commit f41d8bf

Browse files
bmuenzenmeyerbmuenzenmeyer
authored
Merge pull request #1094 from pattern-lab/feature/uikit-refactor-and-enhancements--v2
UIKit Fixes & Updates
2 parents 318babc + 9c7742a commit f41d8bf

34 files changed

+661
-296
lines changed

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

+7-1
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

+48-12
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

+6
Loading

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

+5
Loading

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

+4
Loading

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

+17-15
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/pattern-lab.scss

+33
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,16 @@
6262
position: absolute;
6363
top: 0.5rem;
6464
right: 0.5rem;
65+
66+
@supports (position: sticky){
67+
transform: translateY(-0.7rem);
68+
float: right;
69+
position: sticky;
70+
top: 1rem;
71+
right: 0;
72+
margin-top: -2rem;
73+
}
74+
6575
padding: 0.2rem 0.4rem;
6676
background-color: $pl-color-gray-07;
6777
color: $pl-color-gray-87;
@@ -81,9 +91,32 @@
8191
}
8292
}
8393

94+
.pl-c-code-copy-btn__icon {
95+
height: 1em;
96+
width: 1em;
97+
}
98+
99+
.pl-c-code-copy-btn__icon--paste {
100+
display: none;
101+
102+
.is-copied & {
103+
display: inline-block;
104+
}
105+
}
106+
107+
.pl-c-code-copy-btn__icon--copy {
108+
display: inline-block;
109+
110+
.is-copied & {
111+
display: none;
112+
}
113+
}
114+
84115
.pl-c-main {
85116
overflow: hidden;
86117
max-width: 100vw;
118+
padding-left: .5rem;
119+
padding-right: .5rem;
87120
}
88121

89122
/*------------------------------------*\

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

+2-2
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

+2-1
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

+3-3
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

0 commit comments

Comments
 (0)