Skip to content

Commit caf51ee

Browse files
bolt-botbolt-bot
committed
Merge branch 'dev' into feature/uikit-refactor-p7
# Conflicts: # packages/uikit-workshop/dist/index.html # packages/uikit-workshop/dist/styleguide/css/pattern-lab.css # packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js # packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js # packages/uikit-workshop/package.json # packages/uikit-workshop/src/html/index.html # packages/uikit-workshop/src/html/partials/modal.html # packages/uikit-workshop/src/sass/pattern-lab.scss # packages/uikit-workshop/src/sass/scss/04-components/_header.scss # packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss # packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss # packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss # packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss # packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss # packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.scss # packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.scss # packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss # packages/uikit-workshop/src/scripts/patternlab-pattern.js
2 parents 04d3650 + cb58c43 commit caf51ee

15 files changed

Lines changed: 1576 additions & 394 deletions

File tree

‎CODEOWNERS‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# This is a comment.
2+
# Each line is a file pattern followed by one or more owners.
3+
4+
# These owners will be the default owners for everything in
5+
# the repo. Unless a later match takes precedence,
6+
# @global-owner1 and @global-owner2 will be requested for
7+
# review when someone opens a pull request.
8+
@pattern-lab/trusted-committers
9+
10+
# CLI owner
11+
/packages/cli @raphaelokon
12+
13+
# uikit-workshop owner
14+
/packages/uikit-workshop @sghoweri
15+
16+
# engine-nunjucks owner
17+
/packages/engine-nunjucks @danwhite85

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<title id="title">Pattern Lab</title>
66
<meta charset="UTF-8">
7-
<meta name='viewport' content='initial-scale=1, width=device-width, viewport-fit=cover'>
7+
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
88
<meta name="theme-color" content="#ababab" />
99
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
1010

@@ -77,7 +77,27 @@
7777

7878
</div>
7979
<!--end pl-c-viewport-->
80-
<pl-drawer></pl-drawer>
80+
<div class="pl-c-modal__cover pl-js-modal-cover"></div>
81+
<div class="pl-c-modal pl-js-modal">
82+
<div class="pl-c-modal__toolbar">
83+
<div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
84+
<div class="pl-c-modal__toolbar-controls">
85+
<!-- @todo: revisit to see if slotted content might make sense here (ex. to have an extra toggle for switching the layout -->
86+
<pl-toggle-layout></pl-toggle-layout>
87+
88+
<button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
89+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
90+
<title>Close</title>
91+
<path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
92+
</svg>
93+
</button>
94+
</div>
95+
</div>
96+
<div class="pl-c-modal__content-wrapper">
97+
<div class="pl-c-modal__content pl-js-modal-content"></div>
98+
</div>
99+
</div>
100+
81101
</div>
82102
</pl-layout>
83103

@@ -209,7 +229,9 @@
209229

210230
<ul class="pl-c-tools__list pl-js-acc-panel">
211231
<li class="pl-c-tools__item">
212-
<pl-toggle-info></pl-toggle-info>
232+
<button class="pl-c-tools__action pl-js-pattern-info-toggle">Show Pattern Info</button>
233+
<!-- WIP - commenting out for now -->
234+
<!-- <pl-info-toggle></pl-info-toggle> -->
213235
</li>
214236
<li class="pl-c-tools__item">
215237
<pl-toggle-layout text="Switch Layout"><pl-toggle-layout>

‎packages/uikit-workshop/dist/styleguide/css/pattern-lab.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js‎

Lines changed: 1424 additions & 205 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<title id="title">Pattern Lab</title>
66
<meta charset="UTF-8">
7-
<meta name='viewport' content='initial-scale=1, width=device-width, viewport-fit=cover'>
7+
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
88
<meta name="theme-color" content="#ababab" />
99
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
1010

‎packages/uikit-workshop/src/html/partials/modal.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@
22
<div class="pl-c-modal pl-js-modal">
33
<div class="pl-c-modal__toolbar">
44
<div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
5-
</div>
6-
<div class="pl-c-modal__content-wrapper">
75
<div class="pl-c-modal__toolbar-controls">
6+
<!-- @todo: revisit to see if slotted content might make sense here (ex. to have an extra toggle for switching the layout -->
7+
<pl-toggle-layout></pl-toggle-layout>
8+
89
<button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
910
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
1011
<title>Close</title>
1112
<path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
1213
</svg>
1314
</button>
14-
<pl-toggle-layout></pl-toggle-layout>
1515
</div>
16+
</div>
17+
<div class="pl-c-modal__content-wrapper">
1618
<div class="pl-c-modal__content pl-js-modal-content"></div>
1719
</div>
1820
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@
2020
color: $pl-color-gray-50;
2121
font-family: $pl-font;
2222
font-size: $pl-font-size-sm;
23+
min-height: 30px; // magic number -- needed for initial skeleton screen styles used in the critical CSS
2324

24-
@supports (padding: max(0px)) {
25+
@supports(padding: max(0px)) {
2526
padding-left: env(safe-area-inset-left);
2627
padding-right: env(safe-area-inset-right);
2728
}

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

Lines changed: 19 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@
99
*/
1010
.pl-c-pattern-info {
1111
flex-grow: 1; // fills space available when placed in the parent flex container
12-
13-
@media all and (min-width: $pl-bp-large) {
14-
display: flex;
15-
}
12+
display: flex;
13+
flex-direction: row;
14+
flex-flow: row wrap;
15+
width: 100%;
16+
overflow: auto;
17+
-webkit-overflow-scrolling: touch;
1618

1719
/**
1820
* Pattern info inside the "view all" template
@@ -31,30 +33,6 @@
3133
overflow: visible;
3234
}
3335
}
34-
35-
/**
36-
* Pattern info inside modal
37-
*/
38-
.pl-c-drawer & {
39-
position: absolute;
40-
top: 0;
41-
right: 0.8rem;
42-
bottom: 0;
43-
left: 0;
44-
overflow: scroll;
45-
@include hideScrollBar();
46-
-webkit-overflow-scrolling: touch;
47-
flex-grow: 1;
48-
49-
@supports (padding: env(safe-area-inset-right)) {
50-
right: calc(env(safe-area-inset-right) + 0.8rem);
51-
}
52-
53-
@media all and (min-width: $pl-bp-large) {
54-
position: static;
55-
overflow: visible;
56-
}
57-
}
5836
}
5937

6038
/**
@@ -63,65 +41,19 @@
6341
* Right side contains pattern code
6442
*/
6543
.pl-c-pattern-info__panel {
66-
padding: 1rem;
67-
width: 100%;
68-
69-
@media all and (min-width: $pl-bp-large) {
70-
flex: auto;
71-
position: absolute;
72-
top: 0;
73-
bottom: 0;
74-
left: 0;
75-
right: 0;
76-
}
77-
78-
.pl-c-drawer & {
79-
padding-right: 1.3rem;
80-
81-
@supports (padding: env(safe-area-inset-right)) {
82-
padding-right: calc(env(safe-area-inset-right) + 1.3rem);
83-
}
84-
}
85-
}
86-
87-
/**
88-
* Pattern Info Panel
89-
* 1) Left panel that contains pattern title, lineage, description, annotations
90-
*/
91-
.pl-c-pattern-info__panel--info {
92-
padding-top: 2rem;
93-
94-
@media all and (min-width: $pl-bp-large) {
95-
left: 0;
96-
right: 50%;
97-
overflow: auto;
98-
@include hideScrollBar();
99-
-webkit-overflow-scrolling: touch;
100-
}
101-
102-
@media all and (min-width: $pl-bp-xl) {
103-
right: 55%;
104-
}
105-
}
106-
107-
/**
108-
* Pattern Code Panel
109-
* 1) Right panel that displays the pattern's code (found in _tabs.scss)
110-
* 2) Using a sibling selector because the pattern info isn't always present.
111-
* The sibling selector allows the code panel to occupy the full width of
112-
* the modal
113-
* 1) Cap the height of the code panel in the modal
114-
*/
115-
.pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code {
116-
@media all and (min-width: $pl-bp-large) {
117-
right: 0;
118-
left: 50%;
119-
top: 1.2rem;
120-
}
121-
122-
@media all and (min-width: $pl-bp-xl) {
123-
left: 45%;
124-
}
44+
flex-basis: 40%; // fills up 100% if only one panel exists. using 40% vs 50% due to quirky behavior in IE 11
45+
padding-top: 1rem;
46+
padding-right: 1rem;
47+
padding-bottom: 0;
48+
padding-left: 1rem;
49+
margin-bottom: 1rem;
50+
flex-grow: 1;
51+
max-width: 100%;
52+
min-width: 300px; // so panels stack automatically
53+
display: inline-flex;
54+
flex-direction: column;
55+
overflow: auto;
56+
-webkit-overflow-scrolling: touch;
12557
}
12658

12759
/**

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

Lines changed: 7 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -18,46 +18,6 @@
1818
flex-direction: column;
1919
overflow: hidden;
2020
flex-grow: 1;
21-
22-
/**
23-
* Tabs inside a code panel
24-
*/
25-
26-
.pl-c-pattern-info__panel--code & {
27-
// @media all and (min-width: $pl-bp-large) {
28-
position: absolute;
29-
top: 1rem;
30-
bottom: 1rem;
31-
left: 1rem;
32-
right: 1rem;
33-
// }
34-
}
35-
36-
.pl-c-drawer & {
37-
// adjusts the absolutely positioned tabs container when nested inside the PL drawer
38-
// @todo: refactor to eliminate the need for this
39-
@media all and (min-width: $pl-bp-med) {
40-
right: 1.5rem;
41-
42-
@supports (padding: unquote('max(0px, env(safe-area-inset-right))')) {
43-
right: unquote('max(1.5rem, env(safe-area-inset-right))');
44-
}
45-
}
46-
47-
@media all and (min-width: 848px) {
48-
right: 2.3rem;
49-
50-
@supports (padding: unquote('max(0px, env(safe-area-inset-right))')) {
51-
right: unquote(
52-
'max(2.3rem, calc(env(safe-area-inset-right) + 1.4rem))'
53-
);
54-
}
55-
}
56-
57-
@media all and (min-width: $pl-bp-xl) {
58-
left: 2rem;
59-
}
60-
}
6121
}
6222

6323
/**
@@ -110,19 +70,12 @@
11070
* 1) Tab content contains the tab panels
11171
*/
11272
.pl-c-tabs__content {
113-
flex-grow: 1;
114-
flex-shrink: 1;
115-
flex-basis: 0;
116-
overflow: hidden;
73+
overflow: auto;
11774
-webkit-overflow-scrolling: touch;
118-
height: 100%;
119-
120-
/**
121-
* Tab content inside modal
122-
*/
123-
.pl-c-drawer & {
124-
border: 0;
125-
}
75+
padding-top: 0.5rem;
76+
flex-grow: 1;
77+
display: flex;
78+
flex-direction: column;
12679
}
12780

12881
/**
@@ -133,11 +86,11 @@
13386
.pl-c-tabs__panel {
13487
display: none;
13588
min-height: 12rem;
136-
height: 100%;
13789

13890
&.pl-is-active-tab {
139-
display: block;
14091
display: flex;
92+
height: 100%;
93+
flex-grow: 1;
14194
}
14295

14396
/**

0 commit comments

Comments
 (0)