@rogieking/figui3 1.8.8 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.css +10 -4
- package/example.html +14 -1
- package/fig.js +8 -0
- package/package.json +1 -1
package/components.css
CHANGED
|
@@ -875,7 +875,7 @@ fig-button {
|
|
|
875
875
|
*[fill] {
|
|
876
876
|
fill: currentColor;
|
|
877
877
|
}
|
|
878
|
-
*[stroke][stroke
|
|
878
|
+
*[stroke]:not([stroke="none"]) {
|
|
879
879
|
stroke: currentColor;
|
|
880
880
|
}
|
|
881
881
|
}
|
|
@@ -1899,7 +1899,11 @@ fig-slider {
|
|
|
1899
1899
|
|
|
1900
1900
|
background-color: var(--figma-color-bg-secondary);
|
|
1901
1901
|
border-radius: var(--radius-medium);
|
|
1902
|
-
padding-left:
|
|
1902
|
+
padding-left: var(--spacer-2);
|
|
1903
|
+
|
|
1904
|
+
&:not([text="true"]) {
|
|
1905
|
+
padding-right: var(--spacer-2);
|
|
1906
|
+
}
|
|
1903
1907
|
|
|
1904
1908
|
.fig-slider-input-container {
|
|
1905
1909
|
height: var(--slider-height);
|
|
@@ -2085,7 +2089,7 @@ fig-popover {
|
|
|
2085
2089
|
height: 6px;
|
|
2086
2090
|
position: absolute;
|
|
2087
2091
|
top: calc(100% - 1px);
|
|
2088
|
-
left: 50
|
|
2092
|
+
left: var(--beak-offset, 50%);
|
|
2089
2093
|
z-index: 2;
|
|
2090
2094
|
transform: translate(-50%);
|
|
2091
2095
|
}
|
|
@@ -2093,6 +2097,7 @@ fig-popover {
|
|
|
2093
2097
|
&[position="bottom"] {
|
|
2094
2098
|
&:after {
|
|
2095
2099
|
top: 1px;
|
|
2100
|
+
left: var(--beak-offset, 50%);
|
|
2096
2101
|
transform: translate(-50%, -100%) scaleY(-1);
|
|
2097
2102
|
}
|
|
2098
2103
|
}
|
|
@@ -2116,7 +2121,7 @@ fig-popover {
|
|
|
2116
2121
|
height: 6px;
|
|
2117
2122
|
position: absolute;
|
|
2118
2123
|
top: calc(100% - 1px);
|
|
2119
|
-
left: 50
|
|
2124
|
+
left: var(--beak-offset, 50%);
|
|
2120
2125
|
z-index: 2;
|
|
2121
2126
|
transform: translate(-50%);
|
|
2122
2127
|
}
|
|
@@ -2124,6 +2129,7 @@ fig-popover {
|
|
|
2124
2129
|
&[position="bottom"] {
|
|
2125
2130
|
&:after {
|
|
2126
2131
|
top: 1px;
|
|
2132
|
+
left: var(--beak-offset, 50%);
|
|
2127
2133
|
transform: translate(-50%, -100%) scaleY(-1);
|
|
2128
2134
|
}
|
|
2129
2135
|
}
|
package/example.html
CHANGED
|
@@ -39,10 +39,17 @@
|
|
|
39
39
|
max="100"
|
|
40
40
|
value="50"
|
|
41
41
|
step="1"
|
|
42
|
-
text="true"
|
|
43
42
|
units="%"
|
|
44
43
|
variant="neue">
|
|
45
44
|
</fig-slider>
|
|
45
|
+
<fig-slider min="1"
|
|
46
|
+
max="100"
|
|
47
|
+
value="50"
|
|
48
|
+
step="1"
|
|
49
|
+
units="%"
|
|
50
|
+
text="true"
|
|
51
|
+
variant="neue">
|
|
52
|
+
</fig-slider>
|
|
46
53
|
|
|
47
54
|
|
|
48
55
|
<fig-popover action="manual"
|
|
@@ -91,6 +98,12 @@
|
|
|
91
98
|
|
|
92
99
|
|
|
93
100
|
<hstack>
|
|
101
|
+
<fig-tooltip text="Tooltip that is very very long"
|
|
102
|
+
delay="0">
|
|
103
|
+
<fig-button>
|
|
104
|
+
T
|
|
105
|
+
</fig-button>
|
|
106
|
+
</fig-tooltip>
|
|
94
107
|
<fig-tooltip text="Tooltip"
|
|
95
108
|
delay="0">
|
|
96
109
|
<fig-button>
|
package/fig.js
CHANGED
|
@@ -383,6 +383,14 @@ class FigTooltip extends HTMLElement {
|
|
|
383
383
|
left = window.innerWidth - popupRect.width - offset.right;
|
|
384
384
|
}
|
|
385
385
|
|
|
386
|
+
// Calculate the center of the target element relative to the tooltip
|
|
387
|
+
const targetCenter = rect.left + rect.width / 2;
|
|
388
|
+
const tooltipLeft = left;
|
|
389
|
+
const beakOffset = targetCenter - tooltipLeft;
|
|
390
|
+
|
|
391
|
+
// Set the beak offset as a CSS custom property
|
|
392
|
+
this.popup.style.setProperty("--beak-offset", `${beakOffset}px`);
|
|
393
|
+
|
|
386
394
|
this.popup.style.top = `${top}px`;
|
|
387
395
|
this.popup.style.left = `${left}px`;
|
|
388
396
|
this.popup.style.opacity = "1";
|