feat(components): add tooltip options to components (#842)

Add tooltip option to inline-adder, numeric, switch, calendar and timepicker ref: MANAGER-13561 Signed-off-by: Jean-Baptiste Delon <[email protected]>
ovh · Mar 18, 2024 · 526324e · 526324e
1 parent 6b9a622
commit 526324e
Show file tree

Hide file tree

Showing 25 changed files with 104 additions and 16 deletions.
diff --git a/.../apps/workshop/stories/design-system/components/calendar/calendar-webcomponent.stories.js b/.../apps/workshop/stories/design-system/components/calendar/calendar-webcomponent.stories.js
@@ -25,6 +25,7 @@ export const Default = forModule(moduleName).createElement(
   () => compileTemplate(
     `
     <oui-calendar
+      tooltip="Click here to open the calendar"
       disabled="$ctrl.disabled"
       model="$ctrl.model"
       on-change="$ctrl.onChange(selectedDates, dateStr)"

diff --git a/...rkshop/stories/design-system/components/inline-adder/inline-adder-webcomponent.stories.js b/...rkshop/stories/design-system/components/inline-adder/inline-adder-webcomponent.stories.js
@@ -31,6 +31,8 @@ export const Simple = forModule(moduleName).createElement(
   () => compileTemplate(
     `
     <oui-inline-adder
+      tooltip-add="Click here to add an item"
+      tooltip-delete="Click here to remove an item"
       on-add="$ctrl.onAdd(form)"
       on-change="$ctrl.onChange(form)"
       on-remove="$ctrl.onRemove(form)">

diff --git a/...es/apps/workshop/stories/design-system/components/numeric/numeric-webcomponent.stories.js b/...es/apps/workshop/stories/design-system/components/numeric/numeric-webcomponent.stories.js
@@ -33,6 +33,8 @@ export const Simple = forModule(moduleName).createElement(
     `
     <oui-numeric
       model="$ctrl.model"
+      tooltip-increase="Increment Number"
+      tooltip-decrease="Decrement Number"
       disabled="$ctrl.disabled"
       on-change="$ctrl.onChange(modelValue)">
     </oui-numeric>`,

diff --git a/...ages/apps/workshop/stories/design-system/components/switch/switch-webcomponent.stories.js b/...ages/apps/workshop/stories/design-system/components/switch/switch-webcomponent.stories.js
@@ -31,6 +31,7 @@ export const Default = forModule(moduleName).createElement(
   () => compileTemplate(
     `
     <oui-switch
+      tooltip="Click to enable/disable"
       disabled="$ctrl.disabled"
       model="$ctrl.model"
       on-change="$ctrl.onChange(modelValue)">

diff --git a/...s/workshop/stories/design-system/components/timepicker/timepicker-webcomponent.stories.js b/...s/workshop/stories/design-system/components/timepicker/timepicker-webcomponent.stories.js
@@ -23,6 +23,7 @@ export const Default = forModule(moduleName).createElement(
   () => compileTemplate(
     `
     <oui-timepicker
+      tooltip="Click here to open the timepicker"
       disabled="$ctrl.disabled"
       model="$ctrl.model"
       on-change="$ctrl.onChange(modelValue)"

diff --git a/packages/components/calendar/README.md b/packages/components/calendar/README.md
@@ -65,6 +65,7 @@ angular.module('myModule', ['oui.calendar'])
 | `on-change`       | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the user selects a date, or changes the time on a selected date
 | `on-close`        | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the calendar is closed
 | `on-open`         | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the calendar is opened
+| `tooltip`         | string    | @?        | yes               | n/a                                                                                       | n/a       | tooltip to display
 
 ### Attributes `on-*`
 

diff --git a/packages/components/calendar/src/js/calendar.component.js b/packages/components/calendar/src/js/calendar.component.js
@@ -30,6 +30,7 @@ export default {
     onChange: '&',
     onClose: '&',
     onOpen: '&',
+    tooltip: '@?',
   },
   controller,
   template,

diff --git a/packages/components/calendar/src/js/calendar.html b/packages/components/calendar/src/js/calendar.html
@@ -4,6 +4,7 @@
         autocomplete="off"
         ng-attr-id="{{::$ctrl.id}}"
         ng-attr-name="{{::$ctrl.name}}"
+        ng-attr-title="{{::$ctrl.tooltip}}"
         ng-model="$ctrl.model"
         ng-disabled="$ctrl.disabled"
         ng-required="$ctrl.required" />

diff --git a/packages/components/calendar/src/js/calendar.spec.js b/packages/components/calendar/src/js/calendar.spec.js
@@ -59,6 +59,13 @@ describe('ouiCalendar', () => {
       expect(input.attr('name')).toBe('bar');
     });
 
+    it('should have tooltip', () => {
+      const component = testUtils.compileTemplate('<oui-calendar id="foo" name="bar" tooltip="Click here to open the calendar" model="$ctrl.model"></oui-calendar>');
+      const input = component.find('input');
+
+      expect(input.attr('title')).toBe('Click here to open the calendar');
+    });
+
     it('should set the picker inline', () => {
       const component = testUtils.compileTemplate('<oui-calendar model="$ctrl.model" inline></oui-calendar>');
       const controller = component.controller('ouiCalendar');

diff --git a/packages/components/inline-adder/README.md b/packages/components/inline-adder/README.md
@@ -23,11 +23,13 @@ angular.module('myModule', ['oui.inline-adder'])
 
 ## Component `oui-inline-adder`
 
-| Attribute     | Type      | Binding   | One-time binding  | Values            | Default   | Description
-| ----          | ----      | ----      | ----              | ----              | ----      | ----
-| `on-add`      | function  | &         | no                | n/a               | n/a       | handler triggered when a row is added
-| `on-remove`   | function  | &         | no                | n/a               | n/a       | handler triggered when a row is removed
-| `on-change`   | function  | &         | no                | n/a               | n/a       | handler triggered when rows have changed
+| Attribute        | Type      | Binding   | One-time binding  | Values            | Default   | Description
+| ----             | ----      | ----      | ----              | ----              | ----      | ----
+| `on-add`         | function  | &         | no                | n/a               | n/a       | handler triggered when a row is added
+| `on-remove`      | function  | &         | no                | n/a               | n/a       | handler triggered when a row is removed
+| `on-change`      | function  | &         | no                | n/a               | n/a       | handler triggered when rows have changed
+| `tooltip-add`    | string    | @?        | yes               | n/a               | n/a       | tooltip to display for the add button
+| `tooltip-delete` | string    | @?        | yes               | n/a               | n/a       | tooltip to display for the delete button
 
 ### Attributes `on-*`
 

diff --git a/packages/components/inline-adder/src/js/inline-adder.component.js b/packages/components/inline-adder/src/js/inline-adder.component.js
@@ -8,6 +8,8 @@ export default {
     onAdd: '&',
     onChange: '&',
     onRemove: '&',
+    tooltipAdd: '@?',
+    tooltipDelete: '@?',
   },
   controller,
   template,

diff --git a/packages/components/inline-adder/src/js/inline-adder.html b/packages/components/inline-adder/src/js/inline-adder.html
@@ -11,11 +11,13 @@
     </fieldset>
     <footer class="oui-inline-adder__footer">
         <button type="submit" class="oui-inline-adder__action oui-button oui-button_primary oui-button_s"
+            ng-attr-title="{{::$ctrl.tooltipAdd}}"
             ng-attr-aria-label="{{::$ctrl.translations.ariaAddItem}}"
             ng-if="!$ctrl.isDisabled[$index]">
             <span class="oui-icon oui-icon-add"></span>
         </button>
         <button type="button" class="oui-inline-adder__action oui-button oui-button_primary oui-button_s"
+            ng-attr-title="{{::$ctrl.tooltipDelete}}"
             ng-attr-aria-label="{{::$ctrl.translations.ariaRemoveItem}}"
             ng-click="$ctrl.onFormRemove(this[$ctrl.name + '_'+ $index], $index)"
             ng-if="$ctrl.isDisabled[$index]">

diff --git a/packages/components/inline-adder/src/js/inline-adder.spec.js b/packages/components/inline-adder/src/js/inline-adder.spec.js
@@ -116,6 +116,31 @@ describe('ouiInlineAdder', () => {
         form.find('button').triggerHandler('click');
         expect(form.hasClass('ng-hide')).toBeTruthy();
       });
+
+      it('should have a tooltip', () => {
+        const element = TestUtils.compileTemplate(`
+                    <oui-inline-adder tooltip-add="Add an item" tooltip-delete="Delete an item">
+                        <oui-inline-adder-row>
+                            <oui-inline-adder-field>
+                                <oui-field label="Field 1">
+                                    <input type="text" class="oui-input" name="field1" required>
+                                </oui-field>
+                            </oui-inline-adder-field>
+                        </oui-inline-adder-row>
+                    </oui-inline-adder>`);
+
+        const form = angular.element(element.find('form')[0]);
+        const footer = angular.element(form.find('footer')[0]);
+        const button = angular.element(footer.find('button')[0]);
+        expect(button.attr('title')).toBe('Add an item');
+
+        form.triggerHandler('submit');
+
+        const newform = angular.element(element.find('form')[0]);
+        const newfooter = angular.element(newform.find('footer')[0]);
+        const newbutton = angular.element(newfooter.find('button')[0]);
+        expect(newbutton.attr('title')).toBe('Delete an item');
+      });
     });
 
     describe('oui-inline-adder-row', () => {

diff --git a/packages/components/numeric/README.md b/packages/components/numeric/README.md
@@ -8,13 +8,15 @@ angular.module('myModule', ['oui.numeric']);
 
 ## Component `oui-numeric`
 
-| Attribute     | Type      | Binding   | One-time binding  | Values            | Default   | Description
-| ----          | ----      | ----      | ----              | ----              | ----      | ----
-| `id`          | string    | @?        | yes               | n/a               | n/a       | id attribute of the input
-| `name`        | string    | @?        | yes               | n/a               | n/a       | name attribute of the input
-| `model`       | string    | =         | no                | n/a               | n/a       | model bound to component
-| `min`         | integer   | <?        | no                | n/a               | `0`       | model lower bound
-| `max`         | integer   | <?        | no                | n/a               | `99999`   | model upper bound
-| `disabled`    | boolean   | <?        | no                | `true`, `false`   | `false`   | disabled flag
-| `on-change`   | function  | &?        | no                | n/a               | n/a       | handler triggered when model changes
-| `step`         | integer   | <?        | no                | n/a               | `1`   | value to be increased/decreased when +/- button is clicked
+| Attribute          | Type      | Binding   | One-time binding  | Values            | Default   | Description
+| ----               | ----      | ----      | ----              | ----              | ----      | ----
+| `id`               | string    | @?        | yes               | n/a               | n/a       | id attribute of the input
+| `name`             | string    | @?        | yes               | n/a               | n/a       | name attribute of the input
+| `model`            | string    | =         | no                | n/a               | n/a       | model bound to component
+| `min`              | integer   | <?        | no                | n/a               | `0`       | model lower bound
+| `max`              | integer   | <?        | no                | n/a               | `99999`   | model upper bound
+| `disabled`         | boolean   | <?        | no                | `true`, `false`   | `false`   | disabled flag
+| `on-change`        | function  | &?        | no                | n/a               | n/a       | handler triggered when model changes
+| `step`             | integer   | <?        | no                | n/a               | `1`       | value to be increased/decreased when +/- button is clicked
+| `tooltip-increase` | string    | @?        | yes               | n/a               | `1`       | tooltip to display for the + button
+| `tooltip-decrease` | string    | @?        | yes               | n/a               | `1`       | tooltip to display for the - button
diff --git a/packages/components/numeric/src/js/numeric.component.js b/packages/components/numeric/src/js/numeric.component.js
@@ -13,5 +13,7 @@ export default {
     step: '<?',
     disabled: '<?',
     onChange: '&?',
+    tooltipIncrease: '@?',
+    tooltipDecrease: '@?',
   },
 };
diff --git a/packages/components/numeric/src/js/numeric.html b/packages/components/numeric/src/js/numeric.html
@@ -1,5 +1,6 @@
 <button class="oui-numeric__button oui-button oui-button_primary oui-button_s"
     type="button"
+    ng-attr-title="{{::$ctrl.tooltipDecrease}}"
     ng-disabled="$ctrl.disabled || $ctrl.model <= $ctrl.min"
     ng-click="$ctrl.decrement()"
     tabindex="-1"
@@ -24,6 +25,7 @@
     ng-attr-step="{{ $ctrl.step }}">
 <button class="oui-numeric__button oui-button oui-button_primary oui-button_s"
     type="button"
+    ng-attr-title="{{::$ctrl.tooltipIncrease}}"
     ng-disabled="$ctrl.disabled || $ctrl.model >= $ctrl.max"
     ng-click="$ctrl.increment()"
     tabindex="-1"

diff --git a/packages/components/numeric/src/js/numeric.spec.js b/packages/components/numeric/src/js/numeric.spec.js
@@ -50,6 +50,17 @@ describe('ouiNumeric', () => {
       expect(elt.find('input').val()).toBe('5');
     });
 
+    it('should display a tooltip', () => {
+      const elt = angular.element('<oui-numeric model="foo" min="0" max="5" tooltip-increase="Increment Number" tooltip-decrease="Decrement Number"></oui-numeric>');
+      const scope = $rootScope.$new();
+      $compile(elt)(scope);
+      scope.$digest();
+      elt.find('input').controller('ngModel').$setViewValue('1');
+      expect(scope.foo).toBe(1);
+      expect(getDecrementBtn(elt).attr('title')).toBe('Decrement Number');
+      expect(getIncrementBtn(elt).attr('title')).toBe('Increment Number');
+    });
+
     it('should not updates model when input is given invalid value', () => {
       const elt = angular.element('<oui-numeric model="foo" min="0" max="5"></oui-numeric>');
       const scope = $rootScope.$new();

diff --git a/packages/components/switch/README.md b/packages/components/switch/README.md
@@ -16,6 +16,7 @@ angular.module('myModule', ['oui.switch']);
 | `disabled`    | boolean   | <?        | no                | `true`, `false`   | `false`   | disabled flag
 | `required`    | boolean   | <?        | no                | `true`, `false`   | `false`   | required flag
 | `on-change`   | function  | &         | no                | n/a               | n/a       | function to call when model changes
+| `tooltip`     | string    | @?        | yes               | n/a               | n/a       | tooltip to display
 
 ### Attribute `on-change`
 

diff --git a/packages/components/switch/src/js/switch.component.js b/packages/components/switch/src/js/switch.component.js
@@ -11,5 +11,6 @@ export default {
     disabled: '<?',
     required: '<?',
     onChange: '&',
+    tooltip: '@?',
   },
 };
diff --git a/packages/components/switch/src/js/switch.html b/packages/components/switch/src/js/switch.html
@@ -1,4 +1,4 @@
-<label class="oui-switch__label-container">
+<label class="oui-switch__label-container" ng-attr-title="{{:: $ctrl.tooltip }}">
     <input class="oui-switch__checkbox" type="checkbox" id="{{:: $ctrl.id }}" name="{{:: $ctrl.name }}"
            ng-change="$ctrl.onChange({ modelValue: $ctrl.model })"
            ng-disabled="$ctrl.disabled"

diff --git a/packages/components/switch/src/js/switch.spec.js b/packages/components/switch/src/js/switch.spec.js
@@ -49,6 +49,14 @@ describe('ouiSwitch', () => {
       });
     });
 
+    describe('tooltip attribute', () => {
+      it('should display a disable action tooltip when defined', () => {
+        const element = TestUtils.compileTemplate('<oui-switch model="$ctrl.checked" tooltip="Click to enable/disable"></oui-switch>');
+        const label = angular.element(element.find('label')[0]);
+        expect(label.attr('title')).toBe('Click to enable/disable');
+      });
+    });
+
     describe('model attribute', () => {
       it('should display an unchecked switch when no model', () => {
         const element = TestUtils.compileTemplate('<oui-switch></oui-switch>');

diff --git a/packages/components/timepicker/README.md b/packages/components/timepicker/README.md
@@ -26,6 +26,7 @@ angular.module('myModule', ['oui.timepicker']);
 | `on-change`       | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the user change the selected time
 | `on-close`        | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the timepicker is closed
 | `on-open`         | function  | &         | no                | n/a                                                                                       | n/a       | handler triggered when the timepicker is opened
+| `tooltip`         | string    | @?        | yes               | n/a                                                                                       | n/a       | tooltip to display
 
 ### Attributes `on-*`
 

diff --git a/packages/components/timepicker/src/js/timepicker.component.js b/packages/components/timepicker/src/js/timepicker.component.js
@@ -23,6 +23,7 @@ export default {
     onChange: '&',
     onClose: '&',
     onOpen: '&',
+    tooltip: '@?',
   },
   controller,
   template,

diff --git a/packages/components/timepicker/src/js/timepicker.html b/packages/components/timepicker/src/js/timepicker.html
@@ -1,6 +1,7 @@
 <oui-calendar model="$ctrl.model"
     id="{{::$ctrl.id}}"
     name="{{::$ctrl.name}}"
+    ng-attr-title="{{::$ctrl.tooltip}}"
     options="$ctrl.options"
     placeholder="{{::$ctrl.placeholder}}"
     format="{{::$ctrl.format}}"

diff --git a/packages/components/timepicker/src/js/timepicker.spec.js b/packages/components/timepicker/src/js/timepicker.spec.js
@@ -32,6 +32,16 @@ describe('ouiTimepicker', () => {
       expect(input.attr('name')).toBe('bar');
     });
 
+    it('should have a tooltip on the input', () => {
+      const component = testUtils.compileTemplate(`
+                <oui-timepicker id="foo" name="bar" model="$ctrl.model"
+                                tooltip="Click here to open the timepicker">
+                </oui-timepicker>`);
+
+      const calendar = component.find('oui-calendar');
+      expect(calendar.attr('title')).toBe('Click here to open the timepicker');
+    });
+
     it('should set the picker inline', () => {
       const component = testUtils.compileTemplate('<oui-timepicker model="$ctrl.model" inline></oui-timepicker>');
       const controller = component.controller('ouiTimepicker');