feat(Tooltip): update TS structure (#327)

* feat: update input TS file * fix: revert changes * feat: add tootip declarations * chore: remove type * fix: update return type
rdkcentral · Aug 8, 2023 · 9b2c248 · 9b2c248
1 parent 875b283
commit 9b2c248
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 16 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.d.ts
@@ -18,10 +18,10 @@
 
 import lng from '@lightningjs/core';
 import Base from '../Base';
-import type { Color, StylePartial } from '../../types/lui';
-import type { TextBoxStyle } from '../TextBox';
+import { Color, StylePartial } from '../../types/lui';
+import TextBox, { TextBoxStyle } from '../TextBox';
 
-export type TooltipStyle = {
+type TooltipStyle = {
   backgroundColor: Color;
   marginBottom: number;
   paddingX: number;
@@ -33,14 +33,50 @@ export type TooltipStyle = {
   transition: lng.types.TransitionSettings;
 };
 
-export default class Tooltip extends Base {
+declare namespace Tooltip {
+  export interface TemplateSpec extends Base.TemplateSpec {
+    /**
+     * Text of tooltip content
+     */
+    title?: string;
+
+    /**
+     * The amount of time, in milliseconds, before the tooltip is displayed after being focused
+     */
+    delayVisible?: number;
+
+    /**
+     * The amount of time, in milliseconds, the tooltip is displayed before transitioning out of the display
+     */
+    timeVisible?: number;
+  }
+}
+
+declare class Tooltip<
+  TemplateSpec extends Tooltip.TemplateSpec = Tooltip.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends Base<TemplateSpec, TypeConfig> {
+  /**
+   * text of tooltip
+   */
   title?: string;
+
+  /**
+   * the amount of time, in milliseconds, before the tooltip is displayed after being focused
+   */
   delayVisible?: number;
+
+  /**
+   * the amount of time, in milliseconds, the tooltip is displayed before transitioning out of the display
+   */
   timeVisible?: number;
+
   get style(): TooltipStyle;
   set style(v: StylePartial<TooltipStyle>);
 
   // tags
   get _Background(): lng.Component;
-  get _Text(): lng.Component;
+  get _Text(): TextBox;
 }
+
+export { Tooltip as default, TooltipStyle };
diff --git a/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.mdx b/packages/@lightningjs/ui-components/src/components/Tooltip/Tooltip.mdx
@@ -75,17 +75,18 @@ Tooltip is only visible on focus of the parent.
 | ------------ | ------ | --------- | ----------------------------------------------------------------------------------------------------- |
 | delayVisible | number | undefined | the amount of time, in milliseconds, before the tooltip is displayed after being focused              |
 | timeVisible  | number | undefined | the amount of time, in milliseconds, the tooltip is displayed before transitioning out of the display |
-| title        | string | undefined | tool tip text goes here                                                                               |
+| title        | string | undefined | text of tooltip content                                                                               |
 
 ### Style Properties
 
-| name            | type             | description                                          |
-| --------------- | ---------------- | ---------------------------------------------------- |
-| backgroundColor | number           | background color of tooltip                          |
-| marginBottom    | number           | space below tooltip                                  |
-| paddingX        | number           | space on left and right sides of tooltip text        |
-| paddingY        | number           | space above and below tooltip text                   |
-| pointerW        | number           | width of point beneath rounded rectangle of tooltip  |
-| pointerH        | number           | height of point beneath rounded rectangle of tooltip |
-| radius          | number \| array  | radius of tooltip corners                            |
-| textStyle       | string \| object | text styles used for Tooltip's text                  |
+| name            | type                             | description                                          |
+| --------------- | -------------------------------- | ---------------------------------------------------- |
+| backgroundColor | number                           | background color of tooltip                          |
+| marginBottom    | number                           | space below tooltip                                  |
+| paddingX        | number                           | space on left and right sides of tooltip text        |
+| paddingY        | number                           | space above and below tooltip text                   |
+| pointerW        | number                           | width of point beneath rounded rectangle of tooltip  |
+| pointerH        | number                           | height of point beneath rounded rectangle of tooltip |
+| radius          | number \| array                  | radius of tooltip corners                            |
+| textStyle       | string \| object                 | text styles used for Tooltip's text                  |
+| transition      | <DocsLink id="lng.Transition" /> | transition to apply to text                          |