fix(tooltip): addind new pro to control max width inside componente

takenet · Jun 12, 2024 · ddb6088 · ddb6088
1 parent ceb3710
commit ddb6088
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -2450,6 +2450,10 @@ export namespace Components {
           * Method for change the visibility of tooltip.
          */
         "invisible": () => Promise<void>;
+        /**
+          * Used to set tooltip max width
+         */
+        "maxWidth": string;
         /**
           * Used to set tooltip position
          */
@@ -6053,6 +6057,10 @@ declare namespace LocalJSX {
           * Used to disable tooltip when the button are avalible
          */
         "disabled"?: boolean;
+        /**
+          * Used to set tooltip max width
+         */
+        "maxWidth"?: string;
         /**
           * Used to set tooltip position
          */

diff --git a/src/components/tooltip/readme.md b/src/components/tooltip/readme.md
@@ -11,6 +11,7 @@
 | ------------- | -------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
 | `dataTest`    | `data-test`    | Data test is the prop to specifically test the component action object. | `string`                                                                                                                                                                                             | `null`          |
 | `disabled`    | `disabled`     | Used to disable tooltip when the button are avalible                    | `boolean`                                                                                                                                                                                            | `false`         |
+| `maxWidth`    | `max-width`    | Used to set tooltip max width                                           | `string`                                                                                                                                                                                             | `'320px'`       |
 | `position`    | `position`     | Used to set tooltip position                                            | `"bottom-center" \| "bottom-left" \| "bottom-right" \| "left-bottom" \| "left-center" \| "left-top" \| "right-bottom" \| "right-center" \| "right-top" \| "top-center" \| "top-left" \| "top-right"` | `'left-center'` |
 | `tooltipText` | `tooltip-text` | Used to set tooltip text                                                | `string`                                                                                                                                                                                             | `'Tooltip'`     |
 

diff --git a/src/components/tooltip/tooltip.stories.jsx b/src/components/tooltip/tooltip.stories.jsx
@@ -14,7 +14,12 @@ export default {
 export const Properties = (args) => {
   return (
     <bds-grid margin="auto">
-      <bds-tooltip position={args.position} tooltip-text={args.tooltipText} disabled={args.disabled}>
+      <bds-tooltip
+        position={args.position}
+        tooltip-text={args.tooltipText}
+        disabled={args.disabled}
+        max-width={args.maxWidth}
+      >
         <bds-button>Hover me</bds-button>
       </bds-tooltip>
     </bds-grid>
@@ -25,6 +30,7 @@ Properties.args = {
   disabled: false,
   position: 'right-center',
   tooltipText: 'Tooltip',
+  maxWidth: '',
 };
 
 Properties.argTypes = {
@@ -60,6 +66,12 @@ Properties.argTypes = {
     },
     control: 'text',
   },
+  maxWidth: {
+    table: {
+      defaultValue: { summary: 'vazio' },
+    },
+    control: 'text',
+  },
 };
 
 export const Methods = () => {

diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
@@ -25,6 +25,8 @@ export class Tooltip {
    */
   @State() isMouseOver = false;
   @State() textVerify: string;
+  @State() maxWidtTooltip: string;
+
   /**
    * Used to set tooltip text
    */
@@ -40,6 +42,11 @@ export class Tooltip {
    */
   @Prop() position: TooltipPostionType = 'left-center';
 
+  /**
+   * Used to set tooltip max width
+   */
+  @Prop() maxWidth: string = '320px';
+
   /**
    * Data test is the prop to specifically test the component action object.
    */
@@ -71,14 +78,23 @@ export class Tooltip {
 
   componentWillLoad() {
     this.textVerify = this.tooltipText ? this.tooltipText.replace(/<br>/gi, '\r\n') : '';
+    this.maxWidtTooltip = this.maxWidth;
   }
 
   @Watch('tooltipText')
   tooltipTextChanged(): void {
     this.textVerify = this.tooltipText ? this.tooltipText.replace(/<br>/gi, '\r\n') : '';
   }
 
+  @Watch('maxWidth')
+  maxWidthChanged(): void {
+    this.maxWidtTooltip = this.maxWidth;
+  }
+
   render() {
+    const styleTooltip = {
+      maxWidth: this.maxWidtTooltip,
+    };
     return (
       <div class="tooltip__wrapper">
         <div
@@ -94,6 +110,7 @@ export class Tooltip {
             [`tooltip__tip--${this.position}`]: true,
             'tooltip__tip--visible': this.isMouseOver,
           }}
+          style={styleTooltip}
         >
           <div class={{ tooltip__tip__text: true }}>
             <pre>