Skip to content

Commit 4fcf881

Browse files
nmergetnmerget
authored
fix: issue with popover & tooltip using it in pure html css (#4360)
1 parent a6a993b commit 4fcf881

File tree

7 files changed

+147
-113
lines changed

7 files changed

+147
-113
lines changed

‎__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png

-36 Bytes
Loading

‎__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png

-77 Bytes
Loading

‎__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png

-36 Bytes
Loading

‎packages/components/src/components/popover/index.html

Lines changed: 46 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -7,113 +7,51 @@
77
</head>
88
<body style="padding: var(--db-spacing-fixed-md)">
99
<h2>Default</h2>
10-
<button class="db-button" aria-describedby="popover-01">
11-
Popover bottom
12-
<i class="db-popover" id="popover-01">Test</i>
13-
</button>
14-
<button class="db-button" aria-describedby="popover-02">
15-
Popover top
16-
<i class="db-popover" data-placement="top" id="popover-02">Test</i>
17-
</button>
18-
<button class="db-button" aria-describedby="popover-03">
19-
Popover left
20-
<i class="db-popover" data-placement="left" id="popover-03">Test</i>
21-
</button>
22-
<button class="db-button" aria-describedby="popover-04">
23-
Popover right
24-
<i class="db-popover" data-placement="right" id="popover-04"
25-
>Test</i
26-
>
27-
</button>
28-
29-
<h2>Gap</h2>
30-
<button class="db-button" aria-describedby="popover-05">
31-
Popover bottom gap
32-
<i class="db-popover" data-gap="true" id="popover-05">Test</i>
33-
</button>
34-
<button class="db-button" aria-describedby="popover-06">
35-
Popover top gap
36-
<i
37-
class="db-popover"
38-
data-placement="top"
39-
data-gap="true"
40-
id="popover-06"
41-
>
42-
Test
43-
</i>
44-
</button>
45-
<button class="db-button" aria-describedby="popover-07">
46-
Popover left gap
47-
<i
48-
class="db-popover"
49-
data-placement="left"
50-
data-gap="true"
51-
id="popover-07"
52-
>
53-
Test
54-
</i>
55-
</button>
56-
<button class="db-button" aria-describedby="popover-08">
57-
Popover right gap
58-
<i
59-
class="db-popover"
60-
data-placement="right"
61-
data-gap="true"
62-
id="popover-08"
63-
>
64-
Test
65-
</i>
66-
</button>
67-
68-
<h2>Animation/delay</h2>
69-
70-
<button class="db-button" aria-describedby="popover-09">
71-
Popover delay slow
72-
<i class="db-popover" data-delay="slow" id="popover-09">Test</i>
73-
</button>
74-
75-
<button class="db-button" aria-describedby="popover-10">
76-
Popover delay fast
77-
<i class="db-popover" data-delay="fast" id="popover-10">Test</i>
78-
</button>
79-
80-
<button class="db-button" aria-describedby="popover-11">
81-
Popover plain
82-
<i class="db-popover" data-behavior="plain" id="popover-11">Test</i>
83-
</button>
84-
85-
<h2>Width</h2>
86-
87-
<button class="db-button" aria-describedby="popover-12">
88-
Popover auto width
89-
<i class="db-popover" id="popover-12">
90-
Max width, lorem ipsum dolor sit amet, consetetur sadipscing
91-
</i>
92-
</button>
93-
94-
<button class="db-button" aria-describedby="popover-13">
95-
Popover fixed width
96-
<i class="db-popover" data-width="fixed" id="popover-13">
97-
Max width, lorem ipsum dolor sit amet, consetetur sadipscing
98-
</i>
99-
</button>
100-
101-
<button class="db-button" aria-describedby="popover-14">
102-
Popover test
103-
<i class="db-popover" data-placement="top" id="popover-14">
104-
<h4>Title</h4>
105-
<p>Paragraph</p>
106-
<a href="#">Link</a>
107-
</i>
108-
</button>
109-
110-
<button class="db-button" aria-describedby="popover-15">
111-
Popover open
112-
<i class="db-popover" data-open="true" id="popover-15">
113-
<h4>Title</h4>
114-
<p>Paragraph</p>
115-
<a href="#">Link</a>
116-
</i>
117-
</button>
10+
<div class="db-stack" data-direction="row" style="overflow: unset">
11+
<div id="popover-00" class="db-popover">
12+
<button class="db-button" type="button">right</button>
13+
<article
14+
class="db-popover-content"
15+
data-placement="right"
16+
data-animation="true"
17+
>
18+
<button class="db-button" type="button">
19+
Inside Popover
20+
</button>
21+
</article>
22+
</div>
23+
<div id="popover-01" class="db-popover">
24+
<button class="db-button" type="button">bottom</button>
25+
<article class="db-popover-content" data-animation="true">
26+
<button class="db-button" type="button">
27+
Inside Popover
28+
</button>
29+
</article>
30+
</div>
31+
<div id="popover-02" class="db-popover">
32+
<button class="db-button" type="button">top</button>
33+
<article
34+
class="db-popover-content"
35+
data-placement="top"
36+
data-animation="true"
37+
>
38+
<button class="db-button" type="button">
39+
Inside Popover
40+
</button>
41+
</article>
42+
</div>
43+
<div id="popover-02" class="db-popover">
44+
<button class="db-button" type="button">left</button>
45+
<article
46+
class="db-popover-content"
47+
data-placement="left"
48+
data-animation="true"
49+
>
50+
<button class="db-button" type="button">
51+
Inside Popover
52+
</button>
53+
</article>
54+
</div>
55+
</div>
11856
</body>
11957
</html>

‎packages/components/src/components/popover/popover.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
.db-popover {
66
position: relative;
77
display: flex;
8+
block-size: fit-content;
9+
inline-size: fit-content;
810

911
&:is([data-e2e-hover="true"], :hover, :focus-within) {
1012
> article:not([data-open="false"]) {

‎packages/components/src/components/tooltip/index.html

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,45 @@
77
</head>
88
<body style="padding: var(--db-spacing-fixed-md)">
99
<h1>Placement</h1>
10-
<button class="db-button" aria-describedby="tooltip-01">
10+
<button
11+
class="db-button"
12+
aria-describedby="tooltip-01"
13+
data-has-tooltip="true"
14+
>
1115
Tooltip
1216
<i class="db-tooltip" id="tooltip-01">Test</i>
1317
</button>
14-
<button class="db-button" aria-describedby="tooltip-02">
18+
<button
19+
class="db-button"
20+
aria-describedby="tooltip-02"
21+
data-has-tooltip="true"
22+
>
1523
Tooltip top
1624
<i class="db-tooltip" data-placement="top" id="tooltip-02">Test</i>
1725
</button>
18-
<button class="db-button" aria-describedby="tooltip-03">
26+
<button
27+
class="db-button"
28+
aria-describedby="tooltip-03"
29+
data-has-tooltip="true"
30+
>
1931
Tooltip left
2032
<i class="db-tooltip" data-placement="left" id="tooltip-03">Test</i>
2133
</button>
22-
<button class="db-button" aria-describedby="tooltip-04">
34+
<button
35+
class="db-button"
36+
aria-describedby="tooltip-04"
37+
data-has-tooltip="true"
38+
>
2339
Tooltip right
2440
<i class="db-tooltip" data-placement="right" id="tooltip-04"
2541
>Test</i
2642
>
2743
</button>
28-
<button class="db-button" aria-describedby="tooltip-05">
44+
<button
45+
class="db-button"
46+
aria-describedby="tooltip-05"
47+
data-has-tooltip="true"
48+
>
2949
Tooltip Strong
3050
<i class="db-tooltip" data-emphasis="strong" id="tooltip-05"
3151
>Test</i

‎packages/components/src/styles/internal/_popover-component.scss

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
@use "@db-ux/core-foundations/build/styles/screen-sizes";
55
@use "component";
66

7+
$popover-gap-size: var(--db-popover-distance);
8+
$popover-inset: calc(100% + #{$popover-gap-size} * var(--db-popover-gap, 0));
9+
$popover-gap-inset: calc(-1 * #{$popover-gap-size});
10+
711
%popover-center {
812
&:not([data-placement], [data-corrected-placement]),
913
&[data-placement="bottom"]:not([data-corrected-placement]),
@@ -79,6 +83,76 @@
7983
&:is(.db-tooltip) {
8084
--db-popover-distance: #{variables.$db-spacing-fixed-sm};
8185
}
86+
87+
/* This is for pure html css without using JS */
88+
&:not([data-corrected-placement]) {
89+
&[data-placement^="bottom"],
90+
&[data-placement^="top"] {
91+
&[data-placement$="end"] {
92+
inset-inline-end: 0;
93+
}
94+
95+
&[data-placement$="start"] {
96+
inset-inline-start: 0;
97+
}
98+
}
99+
100+
&[data-placement^="left"],
101+
&[data-placement^="right"] {
102+
&[data-placement$="end"] {
103+
inset-block-end: 0;
104+
}
105+
106+
&[data-placement$="start"] {
107+
inset-block-start: 0;
108+
}
109+
}
110+
111+
&:not([data-placement]),
112+
&[data-placement^="bottom"] {
113+
inset-block-start: $popover-inset;
114+
115+
&::before {
116+
inset-inline-start: 0;
117+
inline-size: 100%;
118+
block-size: $popover-gap-size;
119+
inset-block-start: $popover-gap-inset;
120+
}
121+
}
122+
123+
&[data-placement^="top"] {
124+
inset-block-end: $popover-inset;
125+
126+
&::before {
127+
inset-inline-end: 0;
128+
inline-size: 100%;
129+
block-size: $popover-gap-size;
130+
inset-block-end: $popover-gap-inset;
131+
}
132+
}
133+
134+
&[data-placement^="left"] {
135+
inset-inline-end: $popover-inset;
136+
137+
&::before {
138+
inset-block-end: 0;
139+
block-size: 100%;
140+
inline-size: $popover-gap-size;
141+
inset-inline-end: $popover-gap-inset;
142+
}
143+
}
144+
145+
&[data-placement^="right"] {
146+
inset-inline-start: $popover-inset;
147+
148+
&::before {
149+
inset-block-start: 0;
150+
block-size: 100%;
151+
inline-size: $popover-gap-size;
152+
inset-inline-start: $popover-gap-inset;
153+
}
154+
}
155+
}
82156
}
83157

84158
@mixin get-popover-show() {

0 commit comments

Comments
 (0)