feat(component): for conversation properties input fields, need to sh…

…ow tooltip for AMB fields Based on the properties passed from unity_
freshworks · Jan 7, 2025 · dedd7b8 · dedd7b8
1 parent 13fdc85
commit dedd7b8
Show file tree

Hide file tree

Showing 17 changed files with 137 additions and 27 deletions.
diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts
@@ -1180,6 +1180,18 @@ export namespace Components {
           * The step attribute is used when the type is `number`. It specifies the interval between legal numbers in a number/decimal input element. Works with the min and max attributes to limit the increments at which a value can be set. Possible values are `any` or a positive floating point number. Default value is `any`
          */
         "step": string;
+        /**
+          * Optional tooltip for the component, shown on hover of the input box.
+         */
+        "tooltip"?: string;
+        /**
+          * The tooltip placement type for the optional tooltip.
+         */
+        "tooltipPlacement"?: PopoverPlacementType;
+        /**
+          * Truncate title on text overflow
+         */
+        "truncateOnOverflow": boolean;
         /**
           * Type of value accepted as the input value. If a user enters a value other than the specified type, the input box is not populated.
          */
@@ -4288,6 +4300,18 @@ declare namespace LocalJSX {
           * The step attribute is used when the type is `number`. It specifies the interval between legal numbers in a number/decimal input element. Works with the min and max attributes to limit the increments at which a value can be set. Possible values are `any` or a positive floating point number. Default value is `any`
          */
         "step"?: string;
+        /**
+          * Optional tooltip for the component, shown on hover of the input box.
+         */
+        "tooltip"?: string;
+        /**
+          * The tooltip placement type for the optional tooltip.
+         */
+        "tooltipPlacement"?: PopoverPlacementType;
+        /**
+          * Truncate title on text overflow
+         */
+        "truncateOnOverflow"?: boolean;
         /**
           * Type of value accepted as the input value. If a user enters a value other than the specified type, the input box is not populated.
          */

diff --git a/packages/crayons-core/src/components/country-phone/readme.md b/packages/crayons-core/src/components/country-phone/readme.md
@@ -300,6 +300,7 @@ graph TD;
   fw-select --> fw-spinner
   fw-select --> fw-icon
   fw-select --> fw-list-options
+  fw-select --> fw-tooltip
   fw-tag --> fw-tooltip
   fw-tag --> fw-avatar
   fw-tag --> fw-icon
@@ -313,6 +314,7 @@ graph TD;
   fw-select-option --> fw-avatar
   fw-checkbox --> fw-icon
   fw-input --> fw-icon
+  fw-input --> fw-tooltip
   style fw-country-phone fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/crayons-core/src/components/data-table/readme.md b/packages/crayons-core/src/components/data-table/readme.md
@@ -2434,10 +2434,11 @@ graph TD;
   fw-select-option --> fw-avatar
   fw-checkbox --> fw-icon
   fw-input --> fw-icon
+  fw-input --> fw-tooltip
+  fw-tooltip --> fw-popover
   fw-custom-cell-user --> fw-avatar
   fw-custom-cell-icon --> fw-icon
   fw-custom-cell-paragraph --> fw-tooltip
-  fw-tooltip --> fw-popover
   style fw-data-table fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/crayons-core/src/components/datepicker/readme.md b/packages/crayons-core/src/components/datepicker/readme.md
@@ -750,6 +750,7 @@ graph TD;
   fw-button --> fw-spinner
   fw-button --> fw-icon
   fw-input --> fw-icon
+  fw-input --> fw-tooltip
   fw-timepicker --> fw-select
   fw-timepicker --> fw-select-option
   fw-select --> fw-tag
@@ -758,6 +759,7 @@ graph TD;
   fw-select --> fw-spinner
   fw-select --> fw-icon
   fw-select --> fw-list-options
+  fw-select --> fw-tooltip
   fw-tag --> fw-tooltip
   fw-tag --> fw-avatar
   fw-tag --> fw-icon

diff --git a/packages/crayons-core/src/components/form-control/readme.md b/packages/crayons-core/src/components/form-control/readme.md
@@ -73,14 +73,16 @@ graph TD;
   fw-form-control --> fw-timepicker
   fw-form-control --> fw-file-uploader-2
   fw-input --> fw-icon
+  fw-input --> fw-tooltip
+  fw-tooltip --> fw-popover
+  fw-textarea --> fw-tooltip
   fw-datepicker --> fw-tooltip
   fw-datepicker --> fw-icon
   fw-datepicker --> fw-button
   fw-datepicker --> fw-input
   fw-datepicker --> fw-timepicker
   fw-datepicker --> fw-popover
   fw-datepicker --> fw-select
-  fw-tooltip --> fw-popover
   fw-button --> fw-spinner
   fw-button --> fw-icon
   fw-timepicker --> fw-select
@@ -91,6 +93,7 @@ graph TD;
   fw-select --> fw-spinner
   fw-select --> fw-icon
   fw-select --> fw-list-options
+  fw-select --> fw-tooltip
   fw-tag --> fw-tooltip
   fw-tag --> fw-avatar
   fw-tag --> fw-icon

diff --git a/packages/crayons-core/src/components/form/readme.md b/packages/crayons-core/src/components/form/readme.md
@@ -3498,14 +3498,16 @@ graph TD;
   fw-form-control --> fw-timepicker
   fw-form-control --> fw-file-uploader-2
   fw-input --> fw-icon
+  fw-input --> fw-tooltip
+  fw-tooltip --> fw-popover
+  fw-textarea --> fw-tooltip
   fw-datepicker --> fw-tooltip
   fw-datepicker --> fw-icon
   fw-datepicker --> fw-button
   fw-datepicker --> fw-input
   fw-datepicker --> fw-timepicker
   fw-datepicker --> fw-popover
   fw-datepicker --> fw-select
-  fw-tooltip --> fw-popover
   fw-button --> fw-spinner
   fw-button --> fw-icon
   fw-timepicker --> fw-select
@@ -3516,6 +3518,7 @@ graph TD;
   fw-select --> fw-spinner
   fw-select --> fw-icon
   fw-select --> fw-list-options
+  fw-select --> fw-tooltip
   fw-tag --> fw-tooltip
   fw-tag --> fw-avatar
   fw-tag --> fw-icon

diff --git a/packages/crayons-core/src/components/input/input.scss b/packages/crayons-core/src/components/input/input.scss
@@ -119,6 +119,10 @@ $warning-color: $color-casablanca-300;
           background-color: $input-disabled-bg;
           pointer-events: none;
         }
+
+        &.truncate {
+          text-overflow: ellipsis;
+        }
       }
     }
 

diff --git a/packages/crayons-core/src/components/input/input.tsx b/packages/crayons-core/src/components/input/input.tsx
@@ -10,6 +10,7 @@ import {
 } from '@stencil/core';
 
 import { handleKeyDown, renderHiddenField, hasSlot } from '../../utils';
+import { PopoverPlacementType } from '../../utils/types';
 
 import FieldControl from '../../function-components/field-control';
 
@@ -117,6 +118,21 @@ export class Input {
    */
   @Prop() errorText = '';
 
+  /**
+   * Optional tooltip for the component, shown on hover of the input box.
+   */
+  @Prop() tooltip?: string;
+
+  /**
+   * The tooltip placement type for the optional tooltip.
+   */
+  @Prop() tooltipPlacement?: PopoverPlacementType;
+
+  /**
+   * Truncate title on text overflow
+   */
+  @Prop() truncateOnOverflow = false;
+
   /**
    * Triggered when the input box comes into focus.
    */
@@ -271,6 +287,8 @@ export class Input {
         warningText={this.warningText}
         hasWarningTextSlot={this.hasWarningTextSlot}
         required={this.required}
+        tooltip={this.tooltip}
+        tooltipPlacement={this.tooltipPlacement}
       >
         <div
           aria-disabled={this.disabled}
@@ -307,6 +325,9 @@ export class Input {
                       this.nativeInput = input;
                     }}
                     id={this.name}
+                    class={{
+                      truncate: this.truncateOnOverflow,
+                    }}
                     autoComplete={this.autocomplete}
                     disabled={this.disabled}
                     name={this.name}