@sybilion/uilib 1.3.26 → 1.3.27

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.
Files changed (4) hide show
  1. package/dist/esm/components/ui/Tooltip/Tooltip.js +44 -4
  2. package/package.json +1 -1
  3. package/src/components/ui/Tooltip/Tooltip.tsx +50 -4
  4. package/src/docs/pages/TooltipPage.tsx +1 -0
package/dist/esm/components/ui/Tooltip/Tooltip.js CHANGED
@@ -24,6 +24,48 @@ function getPopperWrapper(contentEl) {
24
24
  return wrapper;
25
25
  }
26
26
  const OVER_TRIGGER_OFFSET = { left: -10, top: -6 };
27
+ const TRIGGER_TEXT_STYLE_PROPS = [
28
+ 'font-family',
29
+ 'font-size',
30
+ 'font-weight',
31
+ 'font-style',
32
+ 'font-variant',
33
+ 'font-stretch',
34
+ 'line-height',
35
+ 'letter-spacing',
36
+ 'word-spacing',
37
+ 'text-transform',
38
+ 'text-indent',
39
+ 'text-decoration-line',
40
+ 'text-decoration-color',
41
+ 'text-decoration-style',
42
+ 'text-decoration-thickness',
43
+ 'text-underline-offset',
44
+ 'font-feature-settings',
45
+ 'font-variation-settings',
46
+ 'font-kerning',
47
+ 'font-optical-sizing',
48
+ 'font-synthesis',
49
+ 'font-variant-numeric',
50
+ 'font-variant-ligatures',
51
+ 'font-variant-caps',
52
+ 'font-variant-east-asian',
53
+ 'tab-size',
54
+ 'color',
55
+ 'word-break',
56
+ 'overflow-wrap',
57
+ 'hyphens',
58
+ ];
59
+ function applyTriggerTextStyles(contentEl, computed) {
60
+ for (const prop of TRIGGER_TEXT_STYLE_PROPS) {
61
+ contentEl.style.setProperty(prop, computed.getPropertyValue(prop));
62
+ }
63
+ }
64
+ function clearTriggerTextStyles(contentEl) {
65
+ for (const prop of TRIGGER_TEXT_STYLE_PROPS) {
66
+ contentEl.style.removeProperty(prop);
67
+ }
68
+ }
27
69
  function applyOverTriggerStyles(contentEl, triggerEl) {
28
70
  const wrapper = getPopperWrapper(contentEl);
29
71
  if (!wrapper)
@@ -38,8 +80,7 @@ function applyOverTriggerStyles(contentEl, triggerEl) {
38
80
  wrapper.style.setProperty('width', `${rect.width}px`, 'important');
39
81
  contentEl.style.width = '100%';
40
82
  contentEl.style.boxSizing = 'border-box';
41
- contentEl.style.fontSize = computed.fontSize;
42
- contentEl.style.lineHeight = computed.lineHeight;
83
+ applyTriggerTextStyles(contentEl, computed);
43
84
  }
44
85
  function clearOverTriggerStyles(contentEl) {
45
86
  if (!contentEl)
@@ -55,8 +96,7 @@ function clearOverTriggerStyles(contentEl) {
55
96
  wrapper.style.removeProperty('width');
56
97
  contentEl.style.removeProperty('width');
57
98
  contentEl.style.removeProperty('box-sizing');
58
- contentEl.style.removeProperty('font-size');
59
- contentEl.style.removeProperty('line-height');
99
+ clearTriggerTextStyles(contentEl);
60
100
  }
61
101
  function TooltipProvider({ delayDuration = 0, ...props }) {
62
102
  return (jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sybilion/uilib",
3
- "version": "1.3.26",
3
+ "version": "1.3.27",
4
4
  "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
5
5
  "publishConfig": {
6
6
  "access": "public",
package/src/components/ui/Tooltip/Tooltip.tsx CHANGED
@@ -46,6 +46,54 @@ function getPopperWrapper(contentEl: HTMLElement): HTMLElement | null {
46
46
 
47
47
  const OVER_TRIGGER_OFFSET = { left: -10, top: -6 };
48
48
 
49
+ const TRIGGER_TEXT_STYLE_PROPS = [
50
+ 'font-family',
51
+ 'font-size',
52
+ 'font-weight',
53
+ 'font-style',
54
+ 'font-variant',
55
+ 'font-stretch',
56
+ 'line-height',
57
+ 'letter-spacing',
58
+ 'word-spacing',
59
+ 'text-transform',
60
+ 'text-indent',
61
+ 'text-decoration-line',
62
+ 'text-decoration-color',
63
+ 'text-decoration-style',
64
+ 'text-decoration-thickness',
65
+ 'text-underline-offset',
66
+ 'font-feature-settings',
67
+ 'font-variation-settings',
68
+ 'font-kerning',
69
+ 'font-optical-sizing',
70
+ 'font-synthesis',
71
+ 'font-variant-numeric',
72
+ 'font-variant-ligatures',
73
+ 'font-variant-caps',
74
+ 'font-variant-east-asian',
75
+ 'tab-size',
76
+ 'color',
77
+ 'word-break',
78
+ 'overflow-wrap',
79
+ 'hyphens',
80
+ ] as const;
81
+
82
+ function applyTriggerTextStyles(
83
+ contentEl: HTMLElement,
84
+ computed: CSSStyleDeclaration,
85
+ ) {
86
+ for (const prop of TRIGGER_TEXT_STYLE_PROPS) {
87
+ contentEl.style.setProperty(prop, computed.getPropertyValue(prop));
88
+ }
89
+ }
90
+
91
+ function clearTriggerTextStyles(contentEl: HTMLElement) {
92
+ for (const prop of TRIGGER_TEXT_STYLE_PROPS) {
93
+ contentEl.style.removeProperty(prop);
94
+ }
95
+ }
96
+
49
97
  function applyOverTriggerStyles(
50
98
  contentEl: HTMLElement,
51
99
  triggerEl: HTMLElement,
@@ -73,8 +121,7 @@ function applyOverTriggerStyles(
73
121
 
74
122
  contentEl.style.width = '100%';
75
123
  contentEl.style.boxSizing = 'border-box';
76
- contentEl.style.fontSize = computed.fontSize;
77
- contentEl.style.lineHeight = computed.lineHeight;
124
+ applyTriggerTextStyles(contentEl, computed);
78
125
  }
79
126
 
80
127
  function clearOverTriggerStyles(contentEl: HTMLElement | null) {
@@ -92,8 +139,7 @@ function clearOverTriggerStyles(contentEl: HTMLElement | null) {
92
139
 
93
140
  contentEl.style.removeProperty('width');
94
141
  contentEl.style.removeProperty('box-sizing');
95
- contentEl.style.removeProperty('font-size');
96
- contentEl.style.removeProperty('line-height');
142
+ clearTriggerTextStyles(contentEl);
97
143
  }
98
144
 
99
145
  function TooltipProvider({
package/src/docs/pages/TooltipPage.tsx CHANGED
@@ -53,6 +53,7 @@ export default function TooltipPage() {
53
53
  overflow: 'hidden',
54
54
  textOverflow: 'ellipsis',
55
55
  whiteSpace: 'nowrap',
56
+ fontWeight: 600,
56
57
  }}
57
58
  >
58
59
  {OVER_TRIGGER_TEXT}