feat(kit): Tooltip add DI options (#9571)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 22, 2024 · e2f17c4 · e2f17c4
1 parent 6d6bcea
commit e2f17c4
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 9 deletions.
diff --git a/projects/core/directives/hint/hint-options.directive.ts b/projects/core/directives/hint/hint-options.directive.ts
@@ -48,6 +48,7 @@ export const TUI_HINT_DEFAULT_OPTIONS: TuiHintOptions = {
     showDelay: 500,
     hideDelay: 200,
     appearance: '',
+    /** TODO @deprecated use {@link TUI_TOOLTIP_OPTIONS} instead **/
     icon: '@tui.circle-help',
 };
 

diff --git a/projects/core/directives/hint/hint.style.less b/projects/core/directives/hint/hint.style.less
@@ -3,7 +3,6 @@
 :host {
     position: absolute;
     max-inline-size: 18rem;
-    min-block-size: var(--tui-height-m);
     padding: 0.75rem 1rem;
     background: var(--tui-background-accent-1);
     border-radius: var(--tui-radius-l);
@@ -12,7 +11,6 @@
     font: var(--tui-font-text-s);
     white-space: pre-line;
     overflow-wrap: break-word;
-    line-height: 1.25rem;
     transform-origin: var(--left) var(--top);
 
     &::before {

diff --git a/projects/kit/directives/tooltip/index.ts b/projects/kit/directives/tooltip/index.ts
@@ -1 +1,2 @@
 export * from './tooltip.directive';
+export * from './tooltip.options';
diff --git a/projects/kit/directives/tooltip/tooltip.directive.ts b/projects/kit/directives/tooltip/tooltip.directive.ts
@@ -12,7 +12,7 @@ import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
 import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
 import {TuiTextfieldComponent} from '@taiga-ui/core/components/textfield';
 import {
-    TUI_APPEARANCE_OPTIONS,
+    tuiAppearanceOptionsProvider,
     tuiAppearanceState,
     TuiWithAppearance,
 } from '@taiga-ui/core/directives/appearance';
@@ -25,6 +25,8 @@ import {
 import {TUI_ICON_START} from '@taiga-ui/core/tokens';
 import {map} from 'rxjs';
 
+import {TUI_TOOLTIP_OPTIONS} from './tooltip.options';
+
 @Component({
     standalone: true,
     template: '',
@@ -41,13 +43,11 @@ class TuiTooltipStyles {}
     standalone: true,
     selector: 'tui-icon[tuiTooltip]',
     providers: [
-        {
-            provide: TUI_APPEARANCE_OPTIONS,
-            useValue: {appearance: 'icon'},
-        },
+        tuiAppearanceOptionsProvider(TUI_TOOLTIP_OPTIONS),
         {
             provide: TUI_ICON_START,
-            useFactory: () => inject(TUI_HINT_OPTIONS).icon,
+            useFactory: () =>
+                inject(TUI_TOOLTIP_OPTIONS).icon || inject(TUI_HINT_OPTIONS).icon,
         },
     ],
     hostDirectives: [
@@ -63,6 +63,7 @@ class TuiTooltipStyles {}
     ],
     host: {
         tuiTooltip: '',
+        '(click.prevent)': '0',
         '(mousedown)': 'onClick($event)',
     },
 })

diff --git a/projects/kit/directives/tooltip/tooltip.options.ts b/projects/kit/directives/tooltip/tooltip.options.ts
@@ -0,0 +1,6 @@
+import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';
+
+export const [TUI_TOOLTIP_OPTIONS, tuiTooltipOptionsProvider] = tuiCreateOptions({
+    icon: '',
+    appearance: 'icon',
+});
diff --git a/projects/kit/directives/tooltip/tooltip.style.less b/projects/kit/directives/tooltip/tooltip.style.less
@@ -1,8 +1,24 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
 [tuiTooltip] {
-    border-width: 0.25rem;
+    border-width: 0.125rem;
     border-radius: 100%;
     cursor: pointer;
     pointer-events: auto;
+    background-clip: content-box !important;
+
+    [tuiBlock],
+    [tuiCell][data-size='s'],
+    [tuiLabel][data-orientation='horizontal'] {
+        border-width: 0.25rem;
+    }
+
+    &::after {
+        .center-all();
+
+        inline-size: 1rem;
+        block-size: 1rem;
+    }
 }
 
 @media (hover: hover) {

diff --git a/projects/legacy/components/tooltip/tooltip.component.ts b/projects/legacy/components/tooltip/tooltip.component.ts
@@ -21,6 +21,7 @@ import {TuiHintHover, TuiHintOptionsDirective} from '@taiga-ui/core/directives/h
     inputs: ['content', 'direction', 'appearance', 'showDelay', 'hideDelay'],
     host: {
         '[attr.data-appearance]': 'computedAppearance',
+        '(click.prevent)': '0',
         '(mousedown)': 'stopOnMobile($event)',
     },
 })