feat(core): Customize Tooltips (taiga-family#1258)

WynieCronje · Jan 26, 2022 · 34a8634 · 34a8634
1 parent eb6b812
commit 34a8634
Show file tree

Hide file tree

Showing 18 changed files with 93 additions and 3 deletions.
diff --git a/projects/core/abstract/abstract-hint-options.ts b/projects/core/abstract/abstract-hint-options.ts
@@ -1,12 +1,14 @@
-import {TuiDirection, TuiHintModeT} from '@taiga-ui/core/types';
+import { TuiDirection, TuiHintModeT } from '@taiga-ui/core/types';
 
 export interface TuiAbstractHintOptions {
     readonly mode: TuiHintModeT | null;
     readonly direction: TuiDirection;
+    readonly cssClass: string | null;
 }
 
 /** Default values for abstract hint options */
 export const TUI_ABSTRACT_HINT_DEFAULT_OPTIONS: TuiAbstractHintOptions = {
     mode: null,
-    direction: 'bottom-left',
+    direction: 'bottom-left', 
+    cssClass: null
 };
diff --git a/projects/core/abstract/abstract-hint.ts b/projects/core/abstract/abstract-hint.ts
@@ -14,6 +14,10 @@ export abstract class AbstractTuiHint implements OnDestroy {
     @Input('tuiHintDirection')
     @tuiDefaultProp()
     direction: TuiAbstractHintOptions['direction'] = this.options.direction;
+
+    @Input('tuiHintCssClass')
+    @tuiDefaultProp()
+    cssClass: TuiAbstractHintOptions['cssClass'] = this.options.cssClass;
 
     content: PolymorpheusContent = '';
 

diff --git a/projects/core/components/hints-host/hints-host.template.html b/projects/core/components/hints-host/hints-host.template.html
@@ -3,6 +3,7 @@
     role="tooltip"
     [@tuiFadeIn]="animation"
     [attr.id]="hint.id"
+    [class]="'tui-hint-box ' + hint.cssClass"
     [hint]="hint"
     [tuiActiveZoneParent]="hint.activeZone"
     (tuiHoveredChange)="onHovered($event, hint)"

diff --git a/projects/core/components/primitive-textfield/primitive-textfield.template.html b/projects/core/components/primitive-textfield/primitive-textfield.template.html
@@ -108,6 +108,7 @@
             [mode]="hintController.mode"
             [showDelay]="hintController.showDelay"
             [hideDelay]="hintController.hideDelay"
+            [cssClass]="hintController.cssClass"
         ></tui-tooltip>
         <div
             *ngIf="iconAlignRight"

diff --git a/projects/core/components/tooltip/tooltip.component.ts b/projects/core/components/tooltip/tooltip.component.ts
@@ -49,6 +49,10 @@ export class TuiTooltipComponent {
     @tuiDefaultProp()
     describeId = '';
 
+    @Input()
+    @tuiDefaultProp()
+    cssClass: TuiHintOptions['cssClass'] = this.options.cssClass;
+
     constructor(
         @Inject(TuiDestroyService) destroy$: Observable<unknown>,
         @Inject(TUI_MODE) mode$: Observable<TuiBrightness | null>,

diff --git a/projects/core/components/tooltip/tooltip.template.html b/projects/core/components/tooltip/tooltip.template.html
@@ -5,6 +5,7 @@
     [content]="icon"
     [tuiHintId]="describeId"
     [tuiHint]="content"
+    [tuiHintCssClass]="cssClass"
     [tuiHintDirection]="direction"
     [tuiHintShowDelay]="showDelay"
     [tuiHintHideDelay]="hideDelay"

diff --git a/projects/core/directives/hint-controller/hint-controller.directive.ts b/projects/core/directives/hint-controller/hint-controller.directive.ts
@@ -37,6 +37,10 @@ export class TuiHintControllerDirective extends TuiController {
     @tuiDefaultProp()
     hideDelay: TuiHintOptions['tuiHintHideDelay'] = this.options.tuiHintHideDelay;
 
+    @Input('tuiHintCssClass')
+    @tuiDefaultProp()
+    cssClass: TuiHintOptions['cssClass'] = this.options.cssClass;
+
     constructor(@Inject(TUI_HINT_OPTIONS) private readonly options: TuiHintOptions) {
         super();
     }

diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts
@@ -108,6 +108,8 @@ export abstract class AbstractExampleTuiControl
 
     hintMode: TuiHintModeT | null = null;
 
+    cssClass : string | null = null;
+
     readonly dropdownAlignVariants: ReadonlyArray<TuiHorizontalDirection> = [
         'left',
         'right',

diff --git a/...onents/abstract/hint-controller-documentation/hint-controller-documentation.template.html b/...onents/abstract/hint-controller-documentation/hint-controller-documentation.template.html
@@ -41,4 +41,20 @@ <h6 i18n class="tui-text_h6">
     >
         Hint mode
     </ng-template>
+    <ng-template
+        i18n
+        documentationPropertyName="tuiHintCssClass"
+        documentationPropertyMode="input"
+        documentationPropertyType="string"
+        [(documentationPropertyValue)]="documentedComponent.cssClass"
+    >
+        Adds custom css classes (space separated) to global element <code>tui-hint-box</code>.
+        This enables css overrides in global style sheet.
+        example: <code>tui-tooltip-custom</code>
+        In global stylesheet 
+        <pre><code>.tui-hint-box.tui-tooltip-custom {{'{'}}
+    background-color: var(--tui-support-06);
+{{'}'}}</code></pre>
+    </ng-template>
+
 </tui-doc-documentation>
diff --git a/...modules/components/abstract/inherited-documentation/inherited-documentation.template.html b/...modules/components/abstract/inherited-documentation/inherited-documentation.template.html
@@ -137,5 +137,20 @@ <h6 class="tui-text_h6">
         >
             Hint mode
         </ng-template>
+        <ng-template
+            i18n
+            documentationPropertyName="tuiHintCssClass"
+            documentationPropertyMode="input"
+            documentationPropertyType="string"
+            [(documentationPropertyValue)]="documentedComponent.cssClass"
+        >
+            Adds custom css classes (space separated) to global element <code>tui-hint-box</code>.
+            This enables css overrides in global style sheet.
+            example: <code>tui-tooltip-custom</code>
+            In global stylesheet 
+            <pre><code>.tui-hint-box.tui-tooltip-custom {{'{'}}
+    background-color: var(--tui-support-06);
+{{'}'}}</code></pre>
+        </ng-template>
     </tui-doc-documentation>
 </ng-container>
diff --git a/projects/demo/src/modules/components/tooltip/examples/2/index.html b/projects/demo/src/modules/components/tooltip/examples/2/index.html
@@ -1,6 +1,6 @@
 <p>
     Custom host can be set with
-    <a tuiLink tuiMode="onDark" [routerLink]="['/tui-hint']">
+    <a tuiLink tuiMode="onDark" [routerLink]="['/directives/hint']">
         <code>tuiHint</code>
     </a>
     directive

diff --git a/projects/demo/src/modules/components/tooltip/tooltip.component.ts b/projects/demo/src/modules/components/tooltip/tooltip.component.ts
@@ -60,4 +60,6 @@ export class ExampleTuiTooltipComponent {
     showDelay = 500;
 
     hideDelay = 200;
+
+    cssClass = '';
 }
diff --git a/projects/demo/src/modules/components/tooltip/tooltip.template.html b/projects/demo/src/modules/components/tooltip/tooltip.template.html
@@ -45,6 +45,7 @@
                 [direction]="direction"
                 [showDelay]="showDelay"
                 [hideDelay]="hideDelay"
+                [cssClass]="cssClass"
             ></tui-tooltip>
             <input placeholder="id: qwerty" tuiDescribedBy="qwerty" />
         </tui-doc-demo>
@@ -108,6 +109,20 @@
             >
                 Hide Delay
             </ng-template>
+            <ng-template
+                documentationPropertyName="cssClass"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="cssClass"
+            >
+                Adds custom css classes (space separated) to global element <code>tui-hint-box</code>.
+                This enables css overrides in global style sheet.
+                example: <code>tui-tooltip-custom</code>
+                In global stylesheet 
+                <pre><code>.tui-hint-box.tui-tooltip-custom {{'{'}}
+    background-color: var(--tui-support-06);
+{{'}'}}</code></pre>
+            </ng-template>
         </tui-doc-documentation>
     </ng-template>
 

diff --git a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
@@ -43,4 +43,6 @@ export class ExampleTuiHintControllerComponent {
     tuiHintShowDelay = 500;
 
     tuiHintHideDelay = 200;
+
+    tuiHintCssClass : string | null = null;
 }
diff --git a/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html b/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html
@@ -37,6 +37,7 @@
                 [tuiHintMode]="tuiHintMode"
                 [tuiHintShowDelay]="tuiHintShowDelay"
                 [tuiHintHideDelay]="tuiHintHideDelay"
+                [tuiHintCssClass]="tuiHintCssClass"
             >
                 <tui-primitive-textfield [(value)]="tuiHintContent">
                     Content
@@ -88,6 +89,20 @@
             >
                 Hint controller hide delay
             </ng-template>
+            <ng-template
+                documentationPropertyName="tuiHintCssClass"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="tuiHintCssClass"
+            >
+                Adds custom css classes (space separated) to global element <code>tui-hint-box</code>.
+                This enables css overrides in global style sheet.
+                example: <code>tui-tooltip-custom</code>
+                In global stylesheet 
+                <pre><code>.tui-hint-box.tui-tooltip-custom {{'{'}}
+    background-color: var(--tui-support-06);
+{{'}'}}</code></pre>
+            </ng-template>
         </tui-doc-documentation>
     </ng-template>
 

diff --git a/projects/demo/src/modules/directives/hint/hint.component.ts b/projects/demo/src/modules/directives/hint/hint.component.ts
@@ -33,4 +33,5 @@ export class ExampleTuiHintComponent extends AbstractExampleTuiHint {
     id = '';
     showDelay = 500;
     hideDelay = 200;
+    cssClass : string | null = null;
 }
diff --git a/projects/demo/src/modules/directives/hint/hint.template.html b/projects/demo/src/modules/directives/hint/hint.template.html
@@ -21,6 +21,7 @@
                 [tuiHintDirection]="direction"
                 [tuiHintShowDelay]="showDelay"
                 [tuiHintHideDelay]="hideDelay"
+                [tuiHintCssClass]="cssClass"
             >
                 Hover it!
             </span>

diff --git a/projects/demo/src/styles.less b/projects/demo/src/styles.less
@@ -103,3 +103,7 @@ markdown {
         }
     }
 }
+
+.tui-hint-box.tui-tooltip-custom {
+    background-color: var(--tui-support-06);
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -103,3 +103,7 @@ markdown { @@
             }
         }
     }
+    .tui-hint-box.tui-tooltip-custom {
+        background-color: var(--tui-support-06);
+    }