Merge pull request #742 from ovh/develop

Release v5.3.0

Author: JeremyDec

packages/apps/workshop/stories/design-system/components/datagrid/datagrid-webcomponent.stories.js

@@ -269,6 +269,34 @@ export const RowActions = forModule(moduleName).createElement(
 
 RowActions.storyName = 'Row actions';
 
+export const Helper = forModule(moduleName).createElement(
+  () => compileTemplate(
+    `
+    <oui-datagrid
+      page-size="5"
+      rows="$ctrl.data">
+      <oui-datagrid-column title="'First name'" property="firstName" helper="'This is an helper text'"></oui-datagrid-column>
+      <oui-datagrid-column title="'Last name'" property="lastName"></oui-datagrid-column>
+      <oui-datagrid-column title="'Email'" property="email"></oui-datagrid-column>
+      <oui-datagrid-column title="'Phone'" property="phone"></oui-datagrid-column>
+      <oui-action-menu text="Actions" compact>
+        <oui-action-menu-item
+          on-click="$ctrl.onActionClick($row)">
+          Action
+        </oui-action-menu-item>
+      </oui-action-menu>
+    </oui-datagrid>`,
+    {
+      $ctrl: {
+        data,
+        onActionClick: action('onActionClick'),
+      },
+    },
+  ),
+);
+
+Helper.storyName = 'With helper';
+
 export const CustomizableColumnsDisplay = forModule(moduleName).createElement(
   () => compileTemplate(
     `

packages/components/datagrid/README.md

@@ -29,7 +29,7 @@ angular.module('myModule', ['oui.datagrid'])
 | ----                              | ----      | ----      | ----                | ----             | ----         | ----
 | `id`                              | string    | @?        | no                  | n/a              | n/a          | id of the datagrid
 | `page-size`                       | number    | @?        | no                  | n/a              | `25`         | maximum number of rows to show on each pages
-| `page`                            | number    | @?        | no                  | n/a               | `1`         | page to display 
+| `page`                            | number    | @?        | no                  | n/a               | `1`         | page to display
 | `rows`                            | array     | <?        | yes                 | n/a              | n/a          | local rows to load in the datagrid
 | `criteria`                        | array     | <?        | yes                 | n/a              | n/a          | default filter criteria to apply
 | `empty-placeholder`               | string    | @?        | yes                 | n/a              | n/a          | custom placeholder text when there is no data
@@ -128,7 +128,7 @@ The template inside the element will be placed at the bottom of each row, making
 </oui-datagrid>
 ```
 
-As many row details can be added as needed 
+As many row details can be added as needed
 
 ```html
 <oui-datagrid rows="$ctrl.data">
@@ -350,6 +350,7 @@ These parameters override properties defined in `oui-datagrid-column` or `column
 | `type`                  | string          | n/a      | no                | See below         | `string`  | define a column type
 | `property`              | string          | n/a      | yes               | n/a               | `null`    | property path used to get value from value
 | `sortable`              | string          | n/a      | yes               | `asc`, `desc`     | `asc`     | makes a column sortable and gives the order
+| `helper`                | string          | n/a      | yes               | n/a               | null      | adds a helper text next to column title
 | `filterable`            | n/a             | n/a      | no                | n/a               | n/a       | define a filterable column
 | `searchable`            | n/a             | n/a      | no                | n/a               | n/a       | define a searchable column
 | `type-options`          | object          | n/a      | no                | See below         | `{}`      | define options related to column type (see below)

packages/components/datagrid/src/js/datagrid-column-builder.service.js

@@ -39,6 +39,7 @@ export default class DatagridColumnBuilder {
 
       const column = {
         footer: description.footer || getAttribute(element, 'footer'),
+        helper: getAttribute(element, 'helper'),
         hidden: description.hidden || hasAttribute(element, 'hidden'),
         name: description.name || getAttribute(element, 'name'),
         preventCustomization: description.preventCustomization || hasAttribute(element, 'prevent-customization'),

packages/components/datagrid/src/js/datagrid.html

@@ -35,6 +35,13 @@
                         ng-if="column.sortable"
                         aria-hidden="true">
                     </span>
+                    <button
+                        ng-if="!!column.helper"
+                        type="button"
+                        class="oui-popover-button"
+                        oui-popover="{{:: column.helper }}"
+                        oui-popover-placement="right"
+                    ></button>
                 </th>
                 <th ng-if="$ctrl.hasActionMenu || $ctrl.customizable"
                     class="oui-datagrid__header oui-datagrid__header_s">

packages/components/datagrid/src/js/datagrid.spec.js

@@ -128,7 +128,7 @@ describe('ouiDatagrid', () => {
         expect(getCell($firstRow, 2).children().html()).toBe(additionnalDataValue);
       }));
 
-      it('shoshould display a skeleton when a cell is not loaded', inject(($q) => {
+      it('should display a skeleton when a cell is not loaded', inject(($q) => {
         const deferred = $q.defer();
         const loadRowSpy = jasmine.createSpy('loadRow');
 
@@ -860,6 +860,38 @@ describe('ouiDatagrid', () => {
       });
     });
 
+    describe('Helper popover', () => {
+      it('should be present if helper text is provided', () => {
+        const element = TestUtils.compileTemplate(`
+                    <oui-datagrid rows="$ctrl.rows"
+                        columns="$ctrl.columns">
+                        <oui-datagrid-column property="firstName" type="text" helper="Helper text"></oui-datagrid-column>
+                    </oui-datagrid>
+                `, {
+          columns: columnsData.columns1,
+          rows: fakeData.slice(0, 5),
+        });
+
+        const helperPopover = element[0].querySelector('.oui-popover-button');
+        expect(helperPopover).not.toEqual(null);
+      });
+
+      it('should not be present if helper text is not provided', () => {
+        const element = TestUtils.compileTemplate(`
+                    <oui-datagrid rows="$ctrl.rows"
+                        columns="$ctrl.columns">
+                        <oui-datagrid-column property="firstName" type="text"></oui-datagrid-column>
+                    </oui-datagrid>
+                `, {
+          columns: columnsData.columns1,
+          rows: fakeData.slice(0, 5),
+        });
+
+        const helperPopover = element[0].querySelector('.oui-popover-button');
+        expect(helperPopover).toEqual(null);
+      });
+    });
+
     describe('Dynamic columns', () => {
       it('should update columns list', () => {
         const element = TestUtils.compileTemplate(`