feat(Slider): improve render tooltip logic

Endava · Apr 12, 2024 · c99f375 · c99f375
1 parent 63d0c4a
commit c99f375
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/packages/beeq/src/components/slider/bq-slider.tsx b/packages/beeq/src/components/slider/bq-slider.tsx
@@ -46,6 +46,8 @@ export class BqSlider {
   @State() minValue: number = 0;
   /** The `maxValue` state is only used when the slider type is `range`. */
   @State() maxValue: number = 100;
+  @State() calculatedLeftThumbPosition: number;
+  @State() calculatedRightThumbPosition: number;
 
   // Public Property API
   // ========================
@@ -144,11 +146,20 @@ export class BqSlider {
   componentDidLoad() {
     this.updateProgressTrack();
     this.syncInputsValue();
+    if (this.enableTooltip) {
+      this.calculatedLeftThumbPosition = this.calculateThumbPosition()?.leftThumbPosition;
+      this.calculatedRightThumbPosition = this.calculateThumbPosition()?.rightThumbPosition;
+    }
   }
 
   componentDidUpdate() {
     this.updateProgressTrack();
     this.syncInputsValue();
+    this.calculateThumbPosition();
+    if (this.enableTooltip) {
+      this.calculatedLeftThumbPosition = this.calculateThumbPosition()?.leftThumbPosition;
+      this.calculatedRightThumbPosition = this.calculateThumbPosition()?.rightThumbPosition;
+    }
   }
 
   // Listeners
@@ -361,12 +372,12 @@ export class BqSlider {
           </div>
           {/* INPUT (Min), used on single type */}
           {this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input))}
-          {this.enableTooltip && this.renderTooltip(this.minValue, this.calculateThumbPosition()?.leftThumbPosition)}
+          {this.enableTooltip && this.renderTooltip(this.minValue, this.calculatedLeftThumbPosition)}
           {/* INPUT (Max) */}
           {this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))}
           {this.enableTooltip &&
             this.isRangeType &&
-            this.renderTooltip(this.maxValue, this.calculateThumbPosition()?.rightThumbPosition)}
+            this.renderTooltip(this.maxValue, this.calculatedRightThumbPosition)}
         </div>
         {/* LABEL (end) */}
         {this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')}

diff --git a/packages/beeq/src/components/slider/readme.md b/packages/beeq/src/components/slider/readme.md
@@ -11,11 +11,13 @@
 | ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------- |
 | `debounceTime`         | `debounce-time`          | The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change.                                                                                                                                                   | `number`                               | `0`         |
 | `disabled`             | `disabled`               | If `true` the slider is disabled.                                                                                                                                                                                                                       | `boolean`                              | `false`     |
+| `enableTooltip`        | `enable-tooltip`         | If `true`, a tooltip will be shown displaying the progress value                                                                                                                                                                                        | `boolean`                              | `false`     |
 | `enableValueIndicator` | `enable-value-indicator` | If `true` it will show the value label on a side of the slider track area                                                                                                                                                                               | `boolean`                              | `false`     |
 | `gap`                  | `gap`                    | A number representing the amount to remain between the minimum and maximum values (only for range type).                                                                                                                                                | `number`                               | `0`         |
 | `max`                  | `max`                    | A number representing the max value of the slider.                                                                                                                                                                                                      | `number`                               | `100`       |
 | `min`                  | `min`                    | A number representing the min value of the slider.                                                                                                                                                                                                      | `number`                               | `0`         |
 | `step`                 | `step`                   | A number representing the step of the slider. ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.                                                                      | `number`                               | `1`         |
+| `tooltipAlwaysVisible` | `tooltip-always-visible` | If `true`, a tooltip will always display the progress value. It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.                                                                                             | `boolean`                              | `false`     |
 | `type`                 | `type`                   | It defines the type of slider to display                                                                                                                                                                                                                | `"range" \| "single"`                  | `'single'`  |
 | `value`                | `value`                  | The value of the slider. - If the slider type is `single`, the value is a number. - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value). | `[number, number] \| number \| string` | `undefined` |
 
@@ -43,6 +45,19 @@
 | `"track-area"`    | The track area of the slider.                                                                                          |
 
 
+## Dependencies
+
+### Depends on
+
+- [bq-tooltip](../tooltip)
+
+### Graph
+```mermaid
+graph TD;
+  bq-slider --> bq-tooltip
+  style bq-slider fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/beeq/src/components/tooltip/readme.md b/packages/beeq/src/components/tooltip/readme.md
@@ -56,12 +56,14 @@ Type: `Promise<void>`
 
  - [bq-progress](../progress)
  - [bq-side-menu-item](../side-menu-item)
+ - [bq-slider](../slider)
 
 ### Graph
 ```mermaid
 graph TD;
   bq-progress --> bq-tooltip
   bq-side-menu-item --> bq-tooltip
+  bq-slider --> bq-tooltip
   style bq-tooltip fill:#f9f,stroke:#333,stroke-width:4px
 ```