Skip to content

Commit c389a60

Browse files
mfranzkeMaximilian
mfranzke
and
Maximilian
authored
fix(annotations): displaying annotation tooltips correctly (pattern-lab#1406)
* chore(docs): some typos missed to replace mustache initially and incorrect handlebars two times (both in package name and URL) * Revert "Merge pull request pattern-lab#2 from pattern-lab/dev" This reverts commit 7812878, reversing changes made to 26db979. * Revert "Merge pull request pattern-lab#1 from pattern-lab/dev" This reverts commit 26db979, reversing changes made to fc90750. * Revert "chore(docs): some typos" This reverts commit 271dc8d. * chore: some reformatting * chore: formatting * chore: formatting This reverts commit 271dc8d. * chore: formatting * refactor: let's hide elements the modern way with the hidden attribute * refactor: extracting annotations inside modal styles * refactor: we won't need this as a generated CSS file * Revert "Merge branch 'dev' into fix/annotations-tooltip-rendering" This reverts commit 2c715ae, reversing changes made to 5effb4f. * refactor: adding some sample content for the annotations and corrected the current approach to provide annotations JSON * refactor: regenerated those files Co-authored-by: Maximilian <mfr@nzke.net>
1 parent e7cbf76 commit c389a60

File tree

4 files changed

+81
-81
lines changed

4 files changed

+81
-81
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
@import '../scripts/components/pl-nav/pl-nav.scss';
4747
@import '../scripts/components/pl-search/pl-search.scss';
4848
@import 'scss/04-components/annotations';
49+
@import 'scss/04-components/annotations-inside-modal';
4950
@import 'scss/04-components/breadcrumbs';
5051
@import 'scss/04-components/pattern-category';
5152
@import 'scss/04-components/pattern-info';

‎packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@charset "UTF-8";
2+
3+
/*------------------------------------*\
4+
#ANNOTATIONS INSIDE MODAL
5+
\*------------------------------------*/
6+
7+
/**
8+
* Annotations area
9+
* 1) Appears inside of modal
10+
*/
11+
.pl-c-annotations {
12+
margin: 1rem 0;
13+
}
14+
15+
/**
16+
* Annotations Title
17+
* Says the word "Annotations"
18+
*/
19+
.pl-c-annotations__title {
20+
font-size: 1.2rem !important;
21+
margin: 0 0 0.5rem;
22+
}
23+
24+
/**
25+
* Annotations list
26+
* 1) Ordered list of annotations
27+
* 2) Presented with parent selector to force styles
28+
* over pl-c-text-passage
29+
*/
30+
.pl-c-annotations .pl-c-annotations__list {
31+
counter-reset: the-count;
32+
padding: 0;
33+
margin: 0;
34+
list-style: none;
35+
}
36+
37+
/**
38+
* Annotations list item
39+
* 1) Displays each item as a number
40+
*/
41+
.pl-c-annotations__item {
42+
position: relative;
43+
padding-left: 1.5rem;
44+
margin-bottom: 1rem;
45+
border-radius: $pl-border-radius-med;
46+
transition: background-color $pl-animate-quick ease;
47+
48+
&:before {
49+
content: counter(the-count);
50+
counter-increment: the-count;
51+
font-size: 85%;
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
width: 14px;
56+
height: 14px;
57+
border-radius: 50%;
58+
padding: 2px;
59+
text-align: center;
60+
background-color: $pl-color-gray-50;
61+
color: $pl-color-white;
62+
position: absolute;
63+
top: 4px;
64+
left: 0;
65+
}
66+
67+
&.pl-is-active {
68+
outline: 1px dotted $pl-color-gray-50;
69+
outline-offset: -1px;
70+
}
71+
}
72+
73+
.pl-c-annotations .pl-c-annotations__item-title {
74+
margin-bottom: 0;
75+
}

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

Lines changed: 2 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,10 @@
3636
/**
3737
* Annotation tooltip
3838
* 1) Appears inside the iframe over any element that has an
39-
* anootation attached to it.
40-
* 2) Annotation tip gets dynamically set to `display: none` via
41-
* JavaScript
39+
* annotation attached to it.
4240
*/
4341
.pl-c-annotation-tip {
44-
display: flex; /* 2 */
42+
display: flex;
4543
align-items: center;
4644
justify-content: center;
4745
width: 24px !important;
@@ -55,77 +53,3 @@
5553
position: absolute;
5654
z-index: 100;
5755
}
58-
59-
/*------------------------------------*\
60-
#ANNOTATIONS INSIDE MODAL
61-
\*------------------------------------*/
62-
63-
/**
64-
* Annotations area
65-
* 1) Appears inside of modal
66-
*/
67-
.pl-c-annotations {
68-
margin: 1rem 0;
69-
}
70-
71-
/**
72-
* Annotations Title
73-
* Says the word "Annotations"
74-
*/
75-
.pl-c-annotations__title {
76-
font-size: 1.2rem !important;
77-
margin: 0 0 0.5rem;
78-
}
79-
80-
/**
81-
* Annotations list
82-
* 1) Ordered list of annotations
83-
* 2) Presented with parent selector to force styles
84-
* over pl-c-text-passage
85-
*/
86-
.pl-c-annotations .pl-c-annotations__list {
87-
counter-reset: the-count;
88-
padding: 0;
89-
margin: 0;
90-
list-style: none;
91-
}
92-
93-
/**
94-
* Annotations list item
95-
* 1) Displays each item as a number
96-
*/
97-
.pl-c-annotations__item {
98-
position: relative;
99-
padding-left: 1.5rem;
100-
margin-bottom: 1rem;
101-
border-radius: $pl-border-radius-med;
102-
transition: background-color $pl-animate-quick ease;
103-
104-
&:before {
105-
content: counter(the-count);
106-
counter-increment: the-count;
107-
font-size: 85%;
108-
display: flex;
109-
align-items: center;
110-
justify-content: center;
111-
width: 14px;
112-
height: 14px;
113-
border-radius: 50%;
114-
padding: 2px;
115-
text-align: center;
116-
background-color: $pl-color-gray-50;
117-
color: $pl-color-white;
118-
position: absolute;
119-
top: 4px;
120-
left: 0;
121-
}
122-
123-
&.pl-is-active {
124-
outline: 1px dotted $pl-color-gray-50;
125-
outline-offset: -1px;
126-
}
127-
}
128-
129-
.pl-c-annotations .pl-c-annotations__item-title {
130-
margin-bottom: 0;
131-
}

‎packages/uikit-workshop/src/scripts/components/modal-styleguide.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export const modalStyleguide = {
168168
patternPartialSelector + '.pl-c-annotation-tip'
169169
);
170170
for (let i = 0; i < elsToHide.length; i++) {
171-
elsToHide[i].style.display = 'none';
171+
elsToHide[i].hidden = true;
172172
}
173173
},
174174

@@ -242,7 +242,7 @@ export const modalStyleguide = {
242242
.getComputedStyle(elsToHighlight[j], null)
243243
.getPropertyValue('max-height') === '0px'
244244
) {
245-
span.style.display = 'none';
245+
span.hidden = true;
246246
}
247247

248248
const annotationTip = document.querySelector(
@@ -254,7 +254,7 @@ export const modalStyleguide = {
254254
elsToHighlight[j].firstChild
255255
);
256256
} else {
257-
annotationTip.style.display = 'inline-flex';
257+
annotationTip.hidden = false;
258258
}
259259

260260
elsToHighlight[j].onclick = (function (el) {

0 commit comments

Comments
 (0)