From fbc565b6def8b1e08c086ba1e1a3534ce9c8b472 Mon Sep 17 00:00:00 2001
From: Marie JONES <14836007+marie-j@users.noreply.github.com>
Date: Fri, 19 Oct 2018 15:05:49 +0200
Subject: [PATCH 01/12] feat(oui-select): allow items to be disabled (#291)

---
 packages/oui-select/README.md                 | 19 +++++++
 packages/oui-select/src/index.spec.js         | 54 +++++++++++++++++++
 packages/oui-select/src/select.directive.js   |  1 +
 packages/oui-select/src/select.html           |  2 +-
 .../oui-select/src/templates/choices.html     |  3 +-
 5 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/packages/oui-select/README.md b/packages/oui-select/README.md
index 23eb4613..d6b4e6a7 100644
--- a/packages/oui-select/README.md
+++ b/packages/oui-select/README.md
@@ -68,6 +68,24 @@
 </oui-select>
 ```
 
+### Disabled Items
+
+```html:preview
+<oui-select name="country"
+    model="$ctrl.country"
+    data-title="Select a country"
+    placeholder="Select a country..."
+    items="$ctrl.countries"
+    disable-items="$ctrl.disableItems($item)"
+    required
+    match="name"
+    data-align="start">
+    <span ng-bind="$item.name"></span>
+</oui-select>
+```
+
+**Note**: For each `$item` in `items` array, `disable-item` will be called with current `$item` as an argument. If it returns true, `$item` will be disabled. 
+
 ### On Change
 
 **Note**: Model will not be refreshed until the `on-change` callback hasn't returned. If you want to access the new model inside the `on-change` callback you need to use the `modelValue` variable as below.
@@ -110,6 +128,7 @@
 | `placeholder` | string    | @?        | yes               | n/a               | n/a       | placeholder displayed when model is undefined
 | `match`       | string    | @?        | no                | n/a               | n/a       | property of item to show as selected item
 | `items`       | array     | <         | no                | n/a               | n/a       | array used to populate the list
+| `disable-items`| function | &         | no                | n/a               | n/a       | predicate to determine items to disable
 | `required`    | boolean   | <?        | no                | `true`, `false`   | `false`   | define if the field is required
 | `disabled`    | boolean   | <?        | no                | `true`, `false`   | `false`   | define if the field is disabled
 | `group-by`    | function  | <?        | no                | n/a               | n/a       | function taking an item as parameter and returning the group name as as string
diff --git a/packages/oui-select/src/index.spec.js b/packages/oui-select/src/index.spec.js
index 338fbbbd..8acbe5cf 100644
--- a/packages/oui-select/src/index.spec.js
+++ b/packages/oui-select/src/index.spec.js
@@ -289,5 +289,59 @@ describe("ouiSelect", () => {
                 expect(onChange).toHaveBeenCalledWith(data[index2]);
             });
         });
+
+        describe("Disable options", () => {
+            it("should disable corresponding items", () => {
+                const disableCountry = (item) => item.name === data[3].name;
+                const element = TestUtils.compileTemplate(`
+                    <oui-select name="country"
+                                model="$ctrl.country"
+                                title="Select a country"
+                                placeholder="Select a country..."
+                                items="$ctrl.countries"
+                                disable-items="$ctrl.disableCountry($item)"
+                                match="name">
+                        <span ng-bind="$item.name"></span>
+                    </oui-select>`, {
+                    countries: data,
+                    disableCountry
+                });
+
+                $timeout.flush();
+
+                // Trigger click to update the options with corresponding dynamic attributes
+                getDropdownButton(element).click();
+                expect(angular.element(getDropdownItem(element, 3)).prop("disabled")).toBeTruthy();
+            });
+
+            it("should update item", () => {
+                const countries = data.concat({ name: "Imaginary country", code: "IC" });
+                const disableCountry = (item) => item.code === "";
+                const element = TestUtils.compileTemplate(`
+                    <oui-select name="country"
+                                model="$ctrl.country"
+                                title="Select a country"
+                                placeholder="Select a country..."
+                                items="$ctrl.countries"
+                                disable-items="$ctrl.disableCountry($item)"
+                                match="name">
+                        <span ng-bind="$item.name"></span>
+                    </oui-select>`, {
+                    countries,
+                    disableCountry
+                });
+
+                $timeout.flush();
+
+                // Trigger click to update the options with corresponding dynamic attributes
+                getDropdownButton(element).click();
+                expect(angular.element(getDropdownItem(element, data.length - 1)).prop("disabled")).toBeFalsy();
+
+                element.scope().$ctrl.countries[data.length - 1].code = "";
+                $timeout.flush();
+
+                expect(angular.element(getDropdownItem(element, data.length - 1)).prop("disabled")).toBeTruthy();
+            });
+        });
     });
 });
diff --git a/packages/oui-select/src/select.directive.js b/packages/oui-select/src/select.directive.js
index d2233f54..45a76cd9 100644
--- a/packages/oui-select/src/select.directive.js
+++ b/packages/oui-select/src/select.directive.js
@@ -17,6 +17,7 @@ export default () => ({
         title: "@?",
         placeholder: "@?",
         items: "<",
+        disableItems: "&",
         match: "@?",
         groupBy: "<?",
         align: "@?",
diff --git a/packages/oui-select/src/select.html b/packages/oui-select/src/select.html
index 3ad6885c..e428e973 100644
--- a/packages/oui-select/src/select.html
+++ b/packages/oui-select/src/select.html
@@ -9,5 +9,5 @@
         on-focus="$ctrl.onUiSelectFocus()"
         on-select="$ctrl.onChange({ modelValue: $model })">
     <oui-ui-select-match placeholder="{{::$ctrl.placeholder}}"></oui-ui-select-match>
-    <oui-ui-select-choices repeat="$item in $ctrl.items track by $index"></oui-ui-select-choices>
+    <oui-ui-select-choices repeat="$item in $ctrl.items track by $index" ui-disable-choice="$ctrl.disableItems({ $item: $item })"></oui-ui-select-choices>
 </oui-ui-select>
diff --git a/packages/oui-select/src/templates/choices.html b/packages/oui-select/src/templates/choices.html
index 39ca7a5f..80888d58 100644
--- a/packages/oui-select/src/templates/choices.html
+++ b/packages/oui-select/src/templates/choices.html
@@ -5,10 +5,11 @@
             ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}"
             class="ui-select-choices-row oui-dropdown-option"
             ng-class="{
-                active: $select.isActive(this),
+                active: $select.isActive(this) && !$select.isDisabled(this),
                 selected: $select.isSelected(this),
                 disabled: $select.isDisabled(this)
             }"
+            ng-disabled="$select.isDisabled(this)"
             role="option"
             type="button">
             <span class="ui-select-choices-row-inner" ng-class="{ 'ui-select-choices-row-inner_grouped': $select.isGrouped }">

From 3cf97fc3179a49e29c14638d1f03366aaca9c94b Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Mon, 22 Oct 2018 10:19:23 +0200
Subject: [PATCH 02/12] fix(oui-navbar): fix state attributes on component
 links (#295)

---
 packages/oui-navbar/src/navbar.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 12cd08a9..86594ba8 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -29,6 +29,8 @@
         name="{{::managerLink.name}}"
         text="{{::managerLink.heading || managerLink.title}}"
         href="{{::managerLink.href || managerLink.url}}"
+        state="{{::!!managerLink.state ? managerLink.state : null}}"
+        state-params="::!!managerLink.stateParams ? managerLink.stateParams : null"
         variant="{{::managerLink.isPrimary ? 'primary' : 'secondary'}}"
         aria-label="{{::!!managerLink.label ? managerLink.label : null}}"
         ng-repeat="managerLink in ::$ctrl.mainLinks track by $index"

From b84e08ed8ea44b8e3ef6efef941b64aed07bfccc Mon Sep 17 00:00:00 2001
From: Marie JONES <14836007+marie-j@users.noreply.github.com>
Date: Tue, 23 Oct 2018 14:43:21 +0200
Subject: [PATCH 03/12] feat(oui-datagrid): permit to access row index (#296)

---
 packages/oui-datagrid/README.md               | 20 ++++++++++++
 .../oui-datagrid/src/cell/cell.controller.js  |  1 +
 packages/oui-datagrid/src/index.spec.js       | 32 +++++++++++++++++++
 3 files changed, 53 insertions(+)

diff --git a/packages/oui-datagrid/README.md b/packages/oui-datagrid/README.md
index 8c605725..a7640633 100644
--- a/packages/oui-datagrid/README.md
+++ b/packages/oui-datagrid/README.md
@@ -294,6 +294,26 @@ Or you can use the `page-size` property. It takes precedence over value configur
 </oui-datagrid>
 ```
 
+### Access row index 
+
+```html:preview
+<oui-datagrid rows="$ctrl.data" page-size="5">
+  <oui-column title="'Index'">
+    {{$rowIndex}}
+  </oui-column>
+  <oui-column title="'Name'">
+    {{$row.firstName}} {{$row.lastName}}
+  </oui-column>
+  <oui-column property="email">
+    <a href="mailto:{{$value}}">{{$value}}</a>
+  </oui-column>
+  <oui-column property="phone"></oui-column>
+  <oui-column property="birth">
+    {{$value | date:shortDate}}
+  </oui-column>
+</oui-datagrid>
+```
+
 ### Remote data
 
 ```html
diff --git a/packages/oui-datagrid/src/cell/cell.controller.js b/packages/oui-datagrid/src/cell/cell.controller.js
index d17d3cdd..ca62b284 100644
--- a/packages/oui-datagrid/src/cell/cell.controller.js
+++ b/packages/oui-datagrid/src/cell/cell.controller.js
@@ -40,6 +40,7 @@ export default class {
         this.cellScope.$row = this.row;
         this.cellScope.$column = this.column;
         this.cellScope.$value = this.row[this.column.name];
+        this.cellScope.$rowIndex = this.index;
 
         if (this.column.compiledTemplate) {
             this.column.compiledTemplate(this.cellScope, clone => {
diff --git a/packages/oui-datagrid/src/index.spec.js b/packages/oui-datagrid/src/index.spec.js
index 0af9c61f..1871e269 100644
--- a/packages/oui-datagrid/src/index.spec.js
+++ b/packages/oui-datagrid/src/index.spec.js
@@ -1076,6 +1076,38 @@ describe("ouiDatagrid", () => {
             expect(actualCellHtml).toBe(`test: ${fakeData[0].lastName}`);
         });
 
+        it("should support row index data binding inside cell", () => {
+            const element = TestUtils.compileTemplate(`
+                    <oui-datagrid rows="$ctrl.rows">
+                        <oui-column property="firstName"></oui-column>
+                        <oui-column property="">
+                            test: {{ $rowIndex }}
+                        </oui-column>
+                    </oui-datagrid>
+                `, {
+                rows: fakeData.slice(0, 5)
+            }
+            );
+
+            const $firstRow = getRow(element, 0);
+            expect(
+                getCell($firstRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 0");
+
+            const $middleRow = getRow(element, 2);
+            expect(
+                getCell($middleRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 2");
+
+            const $lastRow = getRow(element, 4);
+            expect(
+                getCell($lastRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 4");
+        });
+
         it("should support parent binding inside cell", () => {
             const element = TestUtils.compileTemplate(`
                     <oui-datagrid rows="$ctrl.rows">

From 2fa7c1506b173a97426bbe822ac55c7680f10ebe Mon Sep 17 00:00:00 2001
From: Marie JONES <14836007+marie-j@users.noreply.github.com>
Date: Tue, 30 Oct 2018 10:09:03 +0100
Subject: [PATCH 04/12] fix(oui-select-picker): prevent leaving blank space
 (#300)

If no match value is defined an empty section is created
---
 packages/oui-select-picker/src/index.spec.js  | 24 +++++++++++++++++++
 .../oui-select-picker/src/select-picker.html  | 15 +++++++-----
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/oui-select-picker/src/index.spec.js b/packages/oui-select-picker/src/index.spec.js
index 12a11be5..55353276 100644
--- a/packages/oui-select-picker/src/index.spec.js
+++ b/packages/oui-select-picker/src/index.spec.js
@@ -98,6 +98,30 @@ describe("ouiSelectPicker", () => {
                 const radioElement = getRadioInputElement(element);
                 expect(angular.element(radioElement).attr("value")).toEqual("aValue");
             });
+
+            it("should allow to pick one of values attribute", () => {
+                const element = TestUtils.compileTemplate('<oui-select-picker values="[\'aValue\', \'bValue\']"></oui-select-picker>');
+
+                const selectElement = element[0].querySelector("oui-select");
+                expect(angular.element(selectElement)).not.toBeUndefined();
+
+                const selectValues = element[0].querySelectorAll(".oui-dropdown-option");
+                expect(angular.element(selectValues[0]).text().trim()).toEqual("aValue");
+            });
+
+            it("should display radio value according to match", () => {
+                const element = TestUtils.compileTemplate('<oui-select-picker values="[{id: \'a\', name: \'aValue\'}]" match="name"></oui-select-picker>');
+
+                const value = element[0].querySelectorAll(".oui-select-picker__value");
+                expect(angular.element(value).text().trim()).toEqual("aValue");
+            });
+
+            it("should display select values according to match", () => {
+                const element = TestUtils.compileTemplate('<oui-select-picker values="[{id: \'a\', name: \'aValue\'}, {id: \'b\', name: \'bValue\'}]" match="name"></oui-select-picker>');
+
+                const selectValues = element[0].querySelectorAll(".oui-dropdown-option");
+                expect(angular.element(selectValues[1]).text().trim()).toEqual("bValue");
+            });
         });
 
         describe("disabled attribute", () => {
diff --git a/packages/oui-select-picker/src/select-picker.html b/packages/oui-select-picker/src/select-picker.html
index 630b2daa..ceecbfd3 100644
--- a/packages/oui-select-picker/src/select-picker.html
+++ b/packages/oui-select-picker/src/select-picker.html
@@ -28,10 +28,13 @@
             ng-bind=":: $ctrl.description"
             ng-if="$ctrl.description"></span>
     <span class="oui-select-picker__value-container oui-select-picker__section"
-        ng-if="$ctrl.values.length">
+            ng-if="$ctrl.values.length === 1 && $ctrl.match">
         <span class="oui-select-picker__value"
-                ng-bind=":: $ctrl.getFirstValueMatch($ctrl.match)"
-                ng-if="$ctrl.values.length === 1"></span>
+                ng-bind=":: $ctrl.getFirstValueMatch($ctrl.match)">
+        </span>
+    </span>
+    <span class="oui-select-picker__value-container oui-select-picker__section"
+          ng-if="$ctrl.values.length > 1">
         <oui-select name="{{:: $ctrl.name }}"
                     disabled="$ctrl.disabled"
                     items="$ctrl.values"
@@ -39,9 +42,9 @@
                     model="$ctrl.selectedValue"
                     on-change="$ctrl.onSelectModelChange({ modelValue: $ctrl.selectedValue })"
                     placeholder="{{:: $ctrl.placeholder || ' - ' }}"
-                    data-align="end"
-                    ng-if="$ctrl.values.length > 1">
-            <span ng-bind=":: $ctrl.$scope.$parent.getItemValue($item, $ctrl.match)"></span>
+                    data-align="end">
+            <span ng-if="$ctrl.match" ng-bind=":: $ctrl.$scope.$parent.getItemValue($item, $ctrl.match)"></span>
+            <span ng-if="!$ctrl.match" ng-bind=":: $item"></span>
         </oui-select>
     </span>
     <span class="oui-select-picker__transclude-container"

From 1f790fbae848091373c047f2255cb52bec563b93 Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Wed, 31 Oct 2018 10:00:26 +0100
Subject: [PATCH 05/12] feat(oui-popover): add ng-template and title attribute
 support  (#301)

* Refactor oui-popover to have the same functioning as oui-tooltip
* Add deprecated support for the old functionning of oui-popover
* Add title attribute support
* Add ng-template support to load the content of a popover
* Add unit tests
---
 packages/oui-popover/README.md                | 157 +++++++++-----
 .../popover-content.directive.js              |   6 +-
 .../src/content/popover-content.html          |   5 +
 packages/oui-popover/src/index.js             |   8 +-
 packages/oui-popover/src/index.spec.js        | 205 ++++++++++++------
 packages/oui-popover/src/popover-content.html |   7 -
 .../src/popover-trigger.directive.js          |  41 ----
 packages/oui-popover/src/popover.component.js |  11 -
 .../oui-popover/src/popover.controller.js     |  97 +++++++--
 packages/oui-popover/src/popover.directive.js |  17 ++
 packages/oui-popover/src/popover.html         |  19 +-
 .../src/trigger/popover-trigger.controller.js |  26 +++
 .../src/trigger/popover-trigger.directive.js  |  16 ++
 .../oui-tooltip/src/tooltip.controller.js     |  14 +-
 14 files changed, 416 insertions(+), 213 deletions(-)
 rename packages/oui-popover/src/{ => content}/popover-content.directive.js (69%)
 create mode 100644 packages/oui-popover/src/content/popover-content.html
 delete mode 100644 packages/oui-popover/src/popover-content.html
 delete mode 100644 packages/oui-popover/src/popover-trigger.directive.js
 delete mode 100644 packages/oui-popover/src/popover.component.js
 create mode 100644 packages/oui-popover/src/popover.directive.js
 create mode 100644 packages/oui-popover/src/trigger/popover-trigger.controller.js
 create mode 100644 packages/oui-popover/src/trigger/popover-trigger.directive.js

diff --git a/packages/oui-popover/README.md b/packages/oui-popover/README.md
index 7a2a65a3..a9fec30b 100644
--- a/packages/oui-popover/README.md
+++ b/packages/oui-popover/README.md
@@ -1,10 +1,49 @@
 # Popover
 
-<component-status cx-design="partial" ux="beta"></component-status>
+<component-status cx-design="complete" ux="rc"></component-status>
 
 ## Usage
 
-### Simple case
+### Using value of `oui-popover` attribute
+
+```html:preview
+<button type="button" 
+    class="oui-button oui-button_primary" 
+    oui-popover="This is an awesome popover content.">
+    Click to toggle popover
+</button>
+```
+
+### Using value of `title` attribute
+
+```html:preview
+<button type="button" 
+    class="oui-button oui-button_primary" 
+    title="This is an awesome popover content." 
+    oui-popover>
+    Click to toggle popover
+</button>
+```
+
+### Using a template with `oui-popover-template` attribute
+
+```html:preview
+<button type="button" 
+    class="oui-button oui-button_primary" 
+    oui-popover
+    oui-popover-template="popover.html">
+    Click to toggle popover
+</button>
+
+<script type="text/ng-template" id="popover.html">
+<p ng-init="$ctrl.awesome = 'awesome'">This is an <strong ng-bind="$ctrl.awesome"></strong> popover content.</p>
+<p><a href="#">The quick brown fox jumps over the lazy dog</a></p>
+</script>
+```
+
+**Note**: This method use `ngInclude` to add the template in a popover. The content of your template will be compiled with a **new** scope. See [ngInclude](https://docs.angularjs.org/api/ng/directive/ngInclude).
+
+### Using `oui-popover` component
 
 ```html:preview
 <oui-popover>
@@ -15,83 +54,83 @@
 </oui-popover>
 ```
 
+**Note**: This use is **deprecated** and will be removed in the next major version
+
 ### All directions
 
 ```html:preview
-<oui-popover placement="top">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on top</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
-
-<oui-popover placement="right">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on right</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
-
-<oui-popover placement="bottom">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on bottom</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
-
-<oui-popover placement="left">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on left</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
+<button type="button" class="oui-button oui-button_primary"
+    oui-popover="This is an awesome popover content."
+    oui-popover-placement="right">
+    Popover on right
+</button>
+
+<button type="button" class="oui-button oui-button_primary"
+    oui-popover="This is an awesome popover content."
+    oui-popover-placement="top">
+    Popover on top
+</button>
+
+<button type="button" class="oui-button oui-button_primary"
+    oui-popover="This is an awesome popover content."
+    oui-popover-placement="bottom">
+    Popover on bottom
+</button>
+
+<button type="button" class="oui-button oui-button_primary"
+    oui-popover="This is an awesome popover content."
+    oui-popover-placement="left">
+    Popover on left
+</button>
 ```
 
 ### Alignments
 
 ```html:preview
-<oui-popover placement="bottom-start">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Align start</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
-
-<oui-popover placement="bottom-end">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Align end</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
+<button type="button" class="oui-button oui-button_primary" 
+    oui-popover="This is an awesome popover content." 
+    oui-popover-placement="bottom-start">
+    Align start
+</button>
+
+<button type="button" class="oui-button oui-button_primary" 
+    oui-popover="This is an awesome popover content." 
+    oui-popover-placement="bottom-end">
+    Align end
+</button>
 ```
 
 ### Help Popover
 
 ```html:preview
-<oui-popover>
-    <button type="button" class="oui-popover-button" oui-popover-trigger></button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
+<button type="button" class="oui-popover-button" oui-popover="This is an awesome popover content."></button>
 ```
 
-## API
-
-### oui-popover
-
-The component for a popover.
-
-Availability:
-
- - Element
-
-| Attribute     | Type      | Binding   | Values                                                                                        | Default   | Description
-| ----          | ----      | ----      | ----                                                                                          | ----      | ----
-| `placement`   | string    | @?        | See [Popper placements](https://popper.js.org/popper-documentation.html#Popper.placements)    | `right`   | modifier for alignment
+### Dynamic popover text
 
-For placement values, see Popper.JS documentation (https://popper.js.org/popper-documentation.html#Popper.placements)
-
-### oui-popover-trigger
+```html:preview
+<input type="text" class="oui-input oui-input_inline"
+    ng-init="$ctrl.popoverText = 'Lorem ipsum'" 
+    ng-model="$ctrl.popoverText"
+    oui-popover="{{ $ctrl.popoverText }}">
+```
 
-The directive that triggers the popover apparition.
+## API
 
-Availability:
+| Attribute                 | Type      | Binding   | One-time Binding  | Values                                                                                        | Default           | Description
+| ----                      | ----      | ----      | ----              | ----                                                                                          | ----              | ----
+| `oui-popover`             | string    | @         | no                | n/a                                                                                           | `title` attribute | popover content
+| `oui-popover-template`    | string    | @?        | no                | n/a                                                                                           | n/a               | popover content template
+| `oui-popover-placement`   | string    | @?        | yes               | See [Popper placements](https://popper.js.org/popper-documentation.html#Popper.placements)    | `right`           | modifier for alignment
 
- - Element
- - Attribute
+## Deprecated
 
-### oui-popover-content
+### Attributes
 
-The directive that wrap the popover content.
+* `placement`: Replaced by `oui-popover-placement` attribute
 
-Availability:
+### Components
 
- - Element
- - Attribute
+* `oui-popover`: Replaced by `oui-popover` attribute
+* `oui-popover-trigger`: Replaced by `oui-popover` attribute
+* `oui-popover-content`: Replaced by `oui-popover` attribute
diff --git a/packages/oui-popover/src/popover-content.directive.js b/packages/oui-popover/src/content/popover-content.directive.js
similarity index 69%
rename from packages/oui-popover/src/popover-content.directive.js
rename to packages/oui-popover/src/content/popover-content.directive.js
index c1873ac6..cd3952c8 100644
--- a/packages/oui-popover/src/popover-content.directive.js
+++ b/packages/oui-popover/src/content/popover-content.directive.js
@@ -1,5 +1,6 @@
 import contentTemplate from "./popover-content.html";
 
+// Deprecated: Support only for old use
 export default () => {
     "ngInject";
 
@@ -13,6 +14,9 @@ export default () => {
         bindToController: true,
         scope: {},
         template: contentTemplate,
-        transclude: true
+        transclude: true,
+        link: (scope, element) => {
+            element.addClass("oui-popover");
+        }
     };
 };
diff --git a/packages/oui-popover/src/content/popover-content.html b/packages/oui-popover/src/content/popover-content.html
new file mode 100644
index 00000000..0f8066e4
--- /dev/null
+++ b/packages/oui-popover/src/content/popover-content.html
@@ -0,0 +1,5 @@
+<button type="button" class="oui-icon oui-icon-close_thin oui-popover__close-button" aria-label="Exit"
+    ng-click="$ctrl.popover.closePopover()"></button>
+<div class="oui-popover__content-container" aria-labelledby="{{:: $ctrl.popover.id }}"
+        ng-transclude></div>
+<div class="oui-popover__arrow" aria-hidden="true"></div>
diff --git a/packages/oui-popover/src/index.js b/packages/oui-popover/src/index.js
index 97a7648c..f0afe3c0 100644
--- a/packages/oui-popover/src/index.js
+++ b/packages/oui-popover/src/index.js
@@ -1,10 +1,10 @@
-import Popover from "./popover.component.js";
-import PopoverContent from "./popover-content.directive";
-import PopoverTrigger from "./popover-trigger.directive";
+import Popover from "./popover.directive.js";
+import PopoverContent from "./content/popover-content.directive";
+import PopoverTrigger from "./trigger/popover-trigger.directive";
 
 export default angular
     .module("oui.popover", [])
-    .component("ouiPopover", Popover)
+    .directive("ouiPopover", Popover)
     .directive("ouiPopoverContent", PopoverContent)
     .directive("ouiPopoverTrigger", PopoverTrigger)
     .name;
diff --git a/packages/oui-popover/src/index.spec.js b/packages/oui-popover/src/index.spec.js
index d286cd6c..0d12f7d2 100644
--- a/packages/oui-popover/src/index.spec.js
+++ b/packages/oui-popover/src/index.spec.js
@@ -1,81 +1,132 @@
 describe("ouiPopover", () => {
-    let TestUtils;
+    let $timeout;
+    let testUtils;
 
     beforeEach(angular.mock.module("oui.popover"));
     beforeEach(angular.mock.module("oui.test-utils"));
 
-    beforeEach(inject((_TestUtils_) => {
-        TestUtils = _TestUtils_;
+    beforeEach(inject((_$timeout_, _TestUtils_) => {
+        $timeout = _$timeout_;
+        testUtils = _TestUtils_;
     }));
 
-    describe("Component", () => {
-        it("should display the trigger with correct class name", () => {
-            const element = TestUtils.compileTemplate(`
-                <oui-popover>
-                  <button type="button" oui-popover-trigger>Popover trigger</button>
-                  <oui-popover-content>
-                    <b>Popover content</b>
-                  </oui-popover-content>
-                </oui-popover>`
-            );
-
-            const trigger = element[0].querySelector("[oui-popover-trigger]");
-            expect(angular.element(trigger).hasClass("oui-popover__trigger")).toBeTruthy();
-        });
+    describe("Directive", () => {
+        describe("oui-popover", () => {
+            it("should create a popover, next to the trigger, with the attribute value as text", () => {
+                const component = testUtils.compileTemplate('<div><button class="trigger" oui-popover="foo"></button></div>');
 
-        it("should display at right with arrow by default", () => {
-            const element = TestUtils.compileTemplate(`
-                <oui-popover>
-                  <button type="button" oui-popover-trigger></button>
-                  <div oui-popover-content>
-                    <b>Popover content</b>
-                  </div>
-                </oui-popover>`
-            );
-
-            const controller = element.controller("ouiPopover");
-            controller.openPopover();
-
-            expect(controller.popper.options.placement).toEqual("right");
-            expect(element[0].querySelector("[x-arrow]")).toBeDefined();
-        });
+                $timeout.flush();
+
+                const popover = angular.element(component[0].querySelector(".trigger")).next();
+
+                expect(popover.length).toBe(1);
+                expect(popover.hasClass("oui-popover")).toBe(true);
+                expect(popover.text().trim()).toBe("foo");
+            });
+
+            it("should create a popover, next to the trigger, with the attribute value as text", () => {
+                const component = testUtils.compileTemplate('<div><button class="trigger" title="foo" oui-popover></button></div>');
+
+                $timeout.flush();
+
+                const popover = angular.element(component[0].querySelector(".trigger")).next();
+
+                expect(popover.length).toBe(1);
+                expect(popover.hasClass("oui-popover")).toBe(true);
+                expect(popover.text().trim()).toBe("foo");
+            });
+
+            it("should position the popover with right direction when trigger is clicked, if there is no placement defined", () => {
+                const component = testUtils.compileTemplate('<div><button class="trigger" oui-popover="foo"></button></div>');
+
+                $timeout.flush();
+
+                const trigger = angular.element(component[0].querySelector(".trigger")).triggerHandler("click");
+                const popover = trigger.next();
+
+                expect(popover.attr("x-placement")).toBe("right");
+            });
+
+
+            it("should position the popover with placement attribute value, when trigger is clicked", () => {
+                const component = testUtils.compileTemplate('<div><button class="trigger" oui-popover="foo" oui-popover-placement="bottom-start"></button></div>');
+
+                $timeout.flush();
+
+                const trigger = angular.element(component[0].querySelector(".trigger")).triggerHandler("click");
+                const popover = trigger.next();
+
+                expect(popover.attr("x-placement")).toBe("bottom-start");
+            });
+
+            it("should create a popover, next to the trigger, with the content of the template", () => {
+                const component = testUtils.compileTemplate(`<div>
+                    <button class="trigger" oui-popover="foo" oui-popover-template="popover.html"></button>
+                    <script type="text/ng-template" id="popover.html">foo</script>
+                    </div>`);
+
+                $timeout.flush();
+
+                const popover = angular.element(component[0].querySelector(".trigger")).next();
+
+                expect(popover.text().trim()).toBe("foo");
+            });
+
+            it("should set aria-expanded when trigger is clicked", () => {
+                const component = testUtils.compileTemplate('<div><button class="trigger" oui-popover="foo"></button></div>');
 
-        it("should display the popover at bottom aligned the left border", () => {
-            const element = TestUtils.compileTemplate(`
-                <oui-popover placement="bottom-start">
-                  <button class="oui-button" oui-popover-trigger></button>
-                  <div oui-popover-content>
-                    <b>Popover content</b>
-                  </div>
-                </oui-popover>`
-            );
+                $timeout.flush();
 
-            const controller = element.controller("ouiPopover");
-            controller.openPopover();
+                const trigger = angular.element(component[0].querySelector(".trigger"));
+                expect(trigger.attr("aria-expanded")).toBe("false");
 
-            expect(controller.popper.options.placement).toEqual("bottom-start");
+                trigger.triggerHandler("click");
+                expect(trigger.attr("aria-expanded")).toBe("true");
+
+                trigger.triggerHandler("click");
+                expect(trigger.attr("aria-expanded")).toBe("false");
+            });
         });
 
-        describe("Events", () => {
-            it("should not be visible", () => {
-                const element = TestUtils.compileTemplate(`
+        describe("Deprecated support", () => {
+            it("should display the trigger with correct class name", () => {
+                const element = testUtils.compileTemplate(`
                     <oui-popover>
-                      <button class="oui-button" oui-popover-trigger></button>
+                      <button type="button" oui-popover-trigger>Popover trigger</button>
+                      <oui-popover-content>
+                        <b>Popover content</b>
+                      </oui-popover-content>
+                    </oui-popover>`
+                );
+
+                $timeout.flush();
+
+                const trigger = element[0].querySelector("[oui-popover-trigger]");
+                expect(angular.element(trigger).hasClass("oui-popover__trigger")).toBeTruthy();
+            });
+
+            it("should display at right with arrow by default", () => {
+                const element = testUtils.compileTemplate(`
+                    <oui-popover>
+                      <button type="button" oui-popover-trigger></button>
                       <div oui-popover-content>
                         <b>Popover content</b>
                       </div>
                     </oui-popover>`
                 );
 
-                const popover = element[0].querySelector("[oui-popover-content]").parentNode;
-                const $popover = angular.element(popover);
+                $timeout.flush();
+
+                const controller = element.controller("ouiPopover");
+                controller.openPopover();
 
-                expect($popover.hasClass("oui-popover_active")).toBeFalsy();
+                expect(controller.popper.options.placement).toEqual("right");
+                expect(element[0].querySelector("[x-arrow]")).toBeDefined();
             });
 
-            it("should display and hide popover on click", () => {
-                const element = TestUtils.compileTemplate(`
-                    <oui-popover>
+            it("should display the popover at bottom aligned the left border", () => {
+                const element = testUtils.compileTemplate(`
+                    <oui-popover placement="bottom-start">
                       <button class="oui-button" oui-popover-trigger></button>
                       <div oui-popover-content>
                         <b>Popover content</b>
@@ -83,22 +134,34 @@ describe("ouiPopover", () => {
                     </oui-popover>`
                 );
 
-                const rootElement = element[0].querySelector(".oui-popover");
-                const $rootElement = angular.element(rootElement);
-                const trigger = element[0].querySelector("[oui-popover-trigger]");
-                const $trigger = angular.element(trigger);
-                const closeButton = element[0].querySelector(".oui-popover__close-button");
-                const $closeButton = angular.element(closeButton);
-
-                expect($rootElement.hasClass("oui-popover_active")).toBeFalsy();
-                $trigger.triggerHandler("click");
-                expect($rootElement.hasClass("oui-popover_active")).toBeTruthy();
-                $trigger.triggerHandler("click");
-                expect($rootElement.hasClass("oui-popover_active")).toBeFalsy();
-                $trigger.triggerHandler("click");
-                expect($rootElement.hasClass("oui-popover_active")).toBeTruthy();
-                $closeButton.triggerHandler("click");
-                expect($rootElement.hasClass("oui-popover_active")).toBeFalsy();
+                $timeout.flush();
+
+                const controller = element.controller("ouiPopover");
+                controller.openPopover();
+
+                expect(controller.popper.options.placement).toEqual("bottom-start");
+            });
+
+            it("should set aria-expanded when trigger is clicked", () => {
+                const element = testUtils.compileTemplate(`
+                    <oui-popover>
+                      <button type="button" oui-popover-trigger>Popover trigger</button>
+                      <oui-popover-content>
+                        <b>Popover content</b>
+                      </oui-popover-content>
+                    </oui-popover>`
+                );
+
+                $timeout.flush();
+
+                const trigger = angular.element(element[0].querySelector("[oui-popover-trigger]"));
+                expect(trigger.attr("aria-expanded")).toBe("false");
+
+                trigger.triggerHandler("click");
+                expect(trigger.attr("aria-expanded")).toBe("true");
+
+                trigger.triggerHandler("click");
+                expect(trigger.attr("aria-expanded")).toBe("false");
             });
         });
     });
diff --git a/packages/oui-popover/src/popover-content.html b/packages/oui-popover/src/popover-content.html
deleted file mode 100644
index 6e784b4e..00000000
--- a/packages/oui-popover/src/popover-content.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="oui-popover__content">
-    <button type="button" class="oui-icon oui-icon-close_thin oui-popover__close-button" aria-label="Exit"
-            ng-click="$ctrl.popover.closePopover()"></button>
-    <div class="oui-popover__content-container" aria-labelledby="{{:: $ctrl.popover.id }}"
-         ng-transclude></div>
-    <div class="oui-popover__arrow" aria-hidden="true"></div>
-</div>
diff --git a/packages/oui-popover/src/popover-trigger.directive.js b/packages/oui-popover/src/popover-trigger.directive.js
deleted file mode 100644
index 485713fd..00000000
--- a/packages/oui-popover/src/popover-trigger.directive.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const popoverTriggerClass = "oui-popover__trigger";
-
-export default () => {
-    "ngInject";
-
-    return {
-        restrict: "AE",
-        require: "^ouiPopover",
-        scope: {},
-        link: (scope, element, attrs, ctrl) => {
-            const triggerElement = element;
-
-            triggerElement.addClass(popoverTriggerClass);
-
-            triggerElement.attr("id", ctrl.id);
-            triggerElement.attr({ "aria-haspopup": true, "aria-expanded": false });
-
-            triggerElement.on("click", () => ctrl.onTriggerClick());
-
-            scope.$on("oui:popover:afterOpen", (e, id) => {
-                if (id !== ctrl.id) {
-                    return;
-                }
-
-                triggerElement.attr("aria-expanded", true);
-            });
-
-            scope.$on("oui:popover:afterClose", (e, id) => {
-                if (id !== ctrl.id) {
-                    return;
-                }
-
-                triggerElement.attr("aria-expanded", false);
-            });
-
-            scope.$on("$destroy", () => {
-                triggerElement.off("click");
-            });
-        }
-    };
-};
diff --git a/packages/oui-popover/src/popover.component.js b/packages/oui-popover/src/popover.component.js
deleted file mode 100644
index 6531221c..00000000
--- a/packages/oui-popover/src/popover.component.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import controller from "./popover.controller";
-import template from "./popover.html";
-
-export default {
-    template,
-    controller,
-    bindings: {
-        placement: "@?"
-    },
-    transclude: true
-};
diff --git a/packages/oui-popover/src/popover.controller.js b/packages/oui-popover/src/popover.controller.js
index b22df046..c7624775 100644
--- a/packages/oui-popover/src/popover.controller.js
+++ b/packages/oui-popover/src/popover.controller.js
@@ -1,39 +1,91 @@
+import { addDefaultParameter } from "@ovh-ui/common/component-utils";
 import Popper from "popper.js";
+import template from "./popover.html";
 
 const KEY_ESCAPE = 27;
 
 export default class PopoverController {
-    constructor ($scope, $element, $attrs, $document, $timeout) {
+    constructor ($attrs, $compile, $document, $element, $scope, $timeout) {
         "ngInject";
 
-        this.$scope = $scope;
-        this.$element = $element;
         this.$attrs = $attrs;
+        this.$compile = $compile;
         this.$document = $document;
+        this.$element = $element;
+        this.$scope = $scope;
         this.$timeout = $timeout;
     }
 
     $onInit () {
-        this.isPopoverOpen = false;
+        // Deprecated: Support for component `oui-popover`
+        // Check if directive is an attribute or a component
+        this.isComponent = angular.isUndefined(this.$attrs.ouiPopover);
+
+        // Deprecated: Support for `placement` attribute
+        this.placement = this.placement || this.$attrs.placement;
 
-        // Use internal id to map trigger
         this.id = `ouiPopover${this.$scope.$id}`;
+        this.isPopoverOpen = false;
 
-        if (angular.isUndefined(this.placement)) {
-            this.placement = "right";
-        }
+        addDefaultParameter(this, "placement", "right");
     }
 
     $postLink () {
-        this.triggerElement = this.$element[0].querySelector(".oui-popover__trigger");
-        this.popperElement = this.$element[0].querySelector(".oui-popover__content");
-        this.arrowElement = this.$element[0].querySelector(".oui-popover__arrow");
+        this.setPopover();
+        this.setTrigger();
     }
 
     $destroy () {
         this.closePopover();
     }
 
+    setPopover () {
+        this.$timeout(() => {
+            // Deprecated: Support for component `oui-popover-content`
+            if (this.isComponent) {
+                this.popperElement = this.$element[0].querySelector(".oui-popover");
+                this.arrowElement = this.$element[0].querySelector(".oui-popover__arrow");
+                return;
+            }
+
+            // Support for attribute `oui-popover`
+            // Create a new scope to compile the popover next to the trigger
+            const popoverScope = angular.extend(this.$scope.$new(true), { $popoverCtrl: this });
+            const popoverTemplate = this.$compile(template)(popoverScope);
+
+            // Add compiled template after $element
+            this.$element
+                .removeAttr("title") // Remove title to avoid native tooltip
+                .after(popoverTemplate);
+
+            this.popperElement = this.$element.next()[0];
+            this.arrowElement = this.popperElement.querySelector(".oui-popover__arrow");
+        });
+    }
+
+    setTrigger () {
+        this.$timeout(() => {
+            // Deprecated: Support for component `oui-popover-trigger`
+            if (this.isComponent) {
+                this.triggerElement = this.$element[0].querySelector(".oui-popover__trigger");
+                this.$triggerElement = angular.element(this.triggerElement);
+                return;
+            }
+
+            // Support for attribute `oui-popover`
+            this.triggerElement = this.$element[0];
+            this.$triggerElement = angular.element(this.triggerElement);
+
+            this.$triggerElement
+                .addClass("oui-popover__trigger")
+                .attr({
+                    "aria-haspopup": true,
+                    "aria-expanded": false
+                })
+                .on("click", () => this.onTriggerClick());
+        });
+    }
+
     onTriggerClick () {
         if (!this.isPopoverOpen) {
             this.openPopover();
@@ -52,20 +104,33 @@ export default class PopoverController {
 
     openPopover () {
         this.isPopoverOpen = true;
-        angular.element(this.$element.children()[0]).addClass("oui-popover_active");
         this.updatePopper();
 
         this.$document.on("keydown", evt => this.triggerKeyHandler(evt));
-        this.$scope.$broadcast("oui:popover:afterOpen", this.id);
+
+        // Deprecated: Support for component `oui-popover-trigger`
+        if (this.isComponent) {
+            this.$triggerElement.attr("aria-expanded", true);
+            return;
+        }
+
+        // Support for attribute `oui-popover`
+        this.$element.attr("aria-expanded", true);
     }
 
     closePopover () {
         this.isPopoverOpen = false;
-        angular.element(this.$element.children()[0]).removeClass("oui-popover_active");
-        this.destroyPopper();
 
         this.$document.off("keydown", evt => this.triggerKeyHandler(evt));
-        this.$scope.$broadcast("oui:popover:afterClose", this.id);
+
+        // Deprecated: Support for component `oui-popover-trigger`
+        if (this.isComponent) {
+            this.$triggerElement.attr("aria-expanded", false);
+            return;
+        }
+
+        // Support for attribute `oui-popover`
+        this.$element.attr("aria-expanded", false);
     }
 
     createPopper () {
diff --git a/packages/oui-popover/src/popover.directive.js b/packages/oui-popover/src/popover.directive.js
new file mode 100644
index 00000000..b388e7d5
--- /dev/null
+++ b/packages/oui-popover/src/popover.directive.js
@@ -0,0 +1,17 @@
+import controller from "./popover.controller";
+
+export default () => {
+    "ngInject";
+
+    return {
+        restrict: "AE",
+        bindToController: {
+            text: "@ouiPopover",
+            title: "@?",
+            placement: "@?ouiPopoverPlacement",
+            template: "@?ouiPopoverTemplate"
+        },
+        controller,
+        controllerAs: "$popoverCtrl"
+    };
+};
diff --git a/packages/oui-popover/src/popover.html b/packages/oui-popover/src/popover.html
index ecfd3b09..460f5661 100644
--- a/packages/oui-popover/src/popover.html
+++ b/packages/oui-popover/src/popover.html
@@ -1,3 +1,18 @@
-<div class="oui-popover"
-     ng-transclude>
+<div class="oui-popover">
+    <button type="button"
+        class="oui-icon oui-icon-close_thin oui-popover__close-button"
+        aria-label="Exit"
+        ng-click="$popoverCtrl.closePopover()">
+    </button>
+    <div class="oui-popover__content-container"
+        ng-if="::!$popoverCtrl.template"
+        ng-attr-id="{{:: $popoverCtrl.id }}"
+        ng-bind="$popoverCtrl.text || $popoverCtrl.title">
+    </div>
+    <div class="oui-popover__content-container"
+        ng-if="::!!$popoverCtrl.template"
+        ng-attr-id="{{:: $popoverCtrl.id }}"
+        ng-include="$popoverCtrl.template">
+    </div>
+    <div class="oui-popover__arrow" aria-hidden="true"></div>
 </div>
diff --git a/packages/oui-popover/src/trigger/popover-trigger.controller.js b/packages/oui-popover/src/trigger/popover-trigger.controller.js
new file mode 100644
index 00000000..9f664c2d
--- /dev/null
+++ b/packages/oui-popover/src/trigger/popover-trigger.controller.js
@@ -0,0 +1,26 @@
+// Deprecated: Support only for old use
+export default class {
+    constructor ($element, $scope, $timeout) {
+        "ngInject";
+
+        this.$element = $element;
+        this.$scope = $scope;
+        this.$timeout = $timeout;
+    }
+
+    $postLink () {
+        this.$timeout(() =>
+            this.$element
+                .addClass("oui-popover__trigger")
+                .attr({
+                    "aria-haspopup": true,
+                    "aria-expanded": false
+                })
+                .on("click", () => this.popover.onTriggerClick())
+        );
+    }
+
+    $onDestroy () {
+        this.$element.off("click");
+    }
+}
diff --git a/packages/oui-popover/src/trigger/popover-trigger.directive.js b/packages/oui-popover/src/trigger/popover-trigger.directive.js
new file mode 100644
index 00000000..78be2ab2
--- /dev/null
+++ b/packages/oui-popover/src/trigger/popover-trigger.directive.js
@@ -0,0 +1,16 @@
+import controller from "./popover-trigger.controller";
+
+// Deprecated: Support only for old use
+export default () => {
+    "ngInject";
+
+    return {
+        restrict: "AE",
+        require: {
+            popover: "^ouiPopover"
+        },
+        controller,
+        bindToController: true,
+        scope: {}
+    };
+};
diff --git a/packages/oui-tooltip/src/tooltip.controller.js b/packages/oui-tooltip/src/tooltip.controller.js
index 8f308029..93d9b64a 100644
--- a/packages/oui-tooltip/src/tooltip.controller.js
+++ b/packages/oui-tooltip/src/tooltip.controller.js
@@ -17,8 +17,11 @@ export default class {
         addDefaultParameter(this, "placement", "top");
     }
 
-    $postLink () {
+    $onDestroy () {
+        this.destroyPopper();
+    }
 
+    $postLink () {
         this.$timeout(() => {
             if (this.title) {
                 addDefaultParameter(this, "text", this.title);
@@ -49,4 +52,13 @@ export default class {
             placement: this.placement
         });
     }
+
+    destroyPopper () {
+        if (!this.popper) {
+            return;
+        }
+
+        this.popper.destroy();
+        this.popper = null;
+    }
 }

From b776a2b1592783662080ff55ca0b2e9bcbe26c02 Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Wed, 31 Oct 2018 10:02:13 +0100
Subject: [PATCH 06/12]  fix(oui-calendar): fix boolean parameters  (#302)

* docs(oui-calendar): add enable-time example
* fix(oui-calendar): fix boolean parameters
---
 packages/oui-calendar/README.md                  | 13 ++++++++++++-
 packages/oui-calendar/src/calendar.controller.js |  2 ++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/oui-calendar/README.md b/packages/oui-calendar/README.md
index c223aac9..0d54e3cd 100644
--- a/packages/oui-calendar/README.md
+++ b/packages/oui-calendar/README.md
@@ -61,6 +61,17 @@
 </div>
 ```
 
+### Enabling time
+
+Use `enable-time` to show time selection after a date is selected.
+
+```html:preview
+<oui-calendar model="$ctrl.weekModel" format="Y-m-d H:i" enable-time>
+</oui-calendar>
+```
+
+**Note**: See [Flatpickr documentation](https://flatpickr.js.org/examples/#time-picker) for more information.
+
 ### Disabling dates
 
 Use `disable-date` to make certain dates unavailable for selection.
@@ -168,7 +179,7 @@ Use `mode` to set a different selection mode for the calendar
 | `min-date`        | object    | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | specifies the minimum/earliest date (inclusively) allowed for selection
 | `disable-date`    | array     | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | make certain dates unavailable for selection
 | `enable-date`     | array     | <?        | yes               | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr)   | n/a       | make certain dates only available for selection
-| `enable-time`     | boolean   | <?        | yes               | See [Options](https://flatpickr.js.org/options/)                                          | n/a       | enables time picker
+| `enable-time`     | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | enables time selection
 | `week-numbers`    | boolean   | <?        | yes               | `true`, `false`                                                                           | `false`   | week numbers flag
 | `disabled`        | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | disabled flag
 | `required`        | boolean   | <?        | no                | `true`, `false`                                                                           | `false`   | required flag
diff --git a/packages/oui-calendar/src/calendar.controller.js b/packages/oui-calendar/src/calendar.controller.js
index 773c6adc..794485bb 100644
--- a/packages/oui-calendar/src/calendar.controller.js
+++ b/packages/oui-calendar/src/calendar.controller.js
@@ -82,8 +82,10 @@ export default class {
     $onInit () {
         addBooleanParameter(this, "appendToBody");
         addBooleanParameter(this, "disabled");
+        addBooleanParameter(this, "enableTime");
         addBooleanParameter(this, "inline");
         addBooleanParameter(this, "required");
+        addBooleanParameter(this, "static");
         addBooleanParameter(this, "weekNumbers");
 
         this.initCalendarInstance();

From c39dc82d753396527398c457b5f9bb8e6a60eb3b Mon Sep 17 00:00:00 2001
From: Marie JONES <14836007+marie-j@users.noreply.github.com>
Date: Wed, 31 Oct 2018 17:16:04 +0100
Subject: [PATCH 07/12] fix(oui-select): prevent required validation to trigger
 on select (#303)

Error status is triggered for an instant on option selection
---
 packages/oui-select/src/select.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/oui-select/src/select.html b/packages/oui-select/src/select.html
index e428e973..3fc01767 100644
--- a/packages/oui-select/src/select.html
+++ b/packages/oui-select/src/select.html
@@ -3,7 +3,7 @@
         ng-model="$ctrl.model"
         search-enabled="false"
         ng-attr-title="{{::$ctrl.title}}"
-        ng-required="$ctrl.required"
+        ng-required="$ctrl.required && !$select.open"
         ng-disabled="$ctrl.disabled"
         on-blur="$ctrl.onUiSelectBlur()"
         on-focus="$ctrl.onUiSelectFocus()"

From 9824bbb34a81e9f48e1a1448fd099472822b07eb Mon Sep 17 00:00:00 2001
From: Axel Peter <15101925+AxelPeter@users.noreply.github.com>
Date: Mon, 5 Nov 2018 14:59:50 +0100
Subject: [PATCH 08/12] feat(oui-inline-adder): add inline-adder component
 (#304)

refactor(oui-inline-adder): component improvements
---
 packages/oui-angular/src/index.js             |   2 +
 packages/oui-angular/src/index.spec.js        |   1 +
 packages/oui-inline-adder/README.md           | 168 +++++++++++++++++
 .../src/field/inline-adder-field.component.js |   8 +
 .../field/inline-adder-field.controller.js    |  25 +++
 packages/oui-inline-adder/src/index.js        |  12 ++
 packages/oui-inline-adder/src/index.spec.js   | 176 ++++++++++++++++++
 .../src/inline-adder.component.js             |  15 ++
 .../src/inline-adder.controller.js            |  57 ++++++
 .../oui-inline-adder/src/inline-adder.html    |  24 +++
 .../src/inline-adder.provider.js              |  25 +++
 .../src/row/inline-adder-row.component.js     |  16 ++
 12 files changed, 529 insertions(+)
 create mode 100644 packages/oui-inline-adder/README.md
 create mode 100644 packages/oui-inline-adder/src/field/inline-adder-field.component.js
 create mode 100644 packages/oui-inline-adder/src/field/inline-adder-field.controller.js
 create mode 100644 packages/oui-inline-adder/src/index.js
 create mode 100644 packages/oui-inline-adder/src/index.spec.js
 create mode 100644 packages/oui-inline-adder/src/inline-adder.component.js
 create mode 100644 packages/oui-inline-adder/src/inline-adder.controller.js
 create mode 100644 packages/oui-inline-adder/src/inline-adder.html
 create mode 100644 packages/oui-inline-adder/src/inline-adder.provider.js
 create mode 100644 packages/oui-inline-adder/src/row/inline-adder-row.component.js

diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js
index 2b5f6d77..c32f6756 100644
--- a/packages/oui-angular/src/index.js
+++ b/packages/oui-angular/src/index.js
@@ -14,6 +14,7 @@ import Field from "@ovh-ui/oui-field";
 import FormActions from "@ovh-ui/oui-form-actions";
 import GuideMenu from "@ovh-ui/oui-guide-menu";
 import HeaderTabs from "@ovh-ui/oui-header-tabs";
+import InlineAdder from "@ovh-ui/oui-inline-adder";
 import Message from "@ovh-ui/oui-message";
 import Modal from "@ovh-ui/oui-modal";
 import Navbar from "@ovh-ui/oui-navbar";
@@ -53,6 +54,7 @@ export default angular
         FormActions,
         GuideMenu,
         HeaderTabs,
+        InlineAdder,
         Message,
         Modal,
         Navbar,
diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js
index ed8ea126..67b46a72 100644
--- a/packages/oui-angular/src/index.spec.js
+++ b/packages/oui-angular/src/index.spec.js
@@ -16,6 +16,7 @@ loadTests(require.context("../../oui-field/src/", true, /.*((\.spec)|(index))$/)
 loadTests(require.context("../../oui-form-actions/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-guide-menu/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-header-tabs/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-inline-adder/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-message/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-modal/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-navbar/src/", true, /.*((\.spec)|(index))$/));
diff --git a/packages/oui-inline-adder/README.md b/packages/oui-inline-adder/README.md
new file mode 100644
index 00000000..76292d0f
--- /dev/null
+++ b/packages/oui-inline-adder/README.md
@@ -0,0 +1,168 @@
+# Inline adder
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Basic
+
+```html:preview
+<oui-inline-adder>
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field ng-hide="$ctrl.togglerLoading">
+            <oui-field label="Field 2">
+                <input type="text" class="oui-input" name="field2" ng-model="field2" required>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+```
+
+### Multiple rows
+
+```html:preview
+<oui-inline-adder>
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field>
+            <oui-field label="Field 2">
+                <input type="text" class="oui-input" name="field2" ng-model="field2">
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 3">
+                <input type="text" class="oui-input" name="field3" ng-model="field3" required>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field>
+            <oui-field label="Field 4">
+                <input type="text" class="oui-input" name="field4" ng-model="field4">
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+```
+
+### Adaptive fields
+
+**Note**: Fields with `adaptive` attribute will adapt their size to their content.
+
+```html:preview
+<oui-inline-adder>
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field adaptive>
+            <oui-field label="Field 2" size="m">
+                <label class="oui-select">
+                    <select name="field2" ng-model="field2" class="oui-select__input" required>
+                        <option value="" disabled selected>Select the OS</option>
+                        <option value="freebsd">FreeBSD</option>
+                        <option value="linux">Linux</option>
+                        <option value="osx">OSX</option>
+                        <option value="windows">Windows</option>
+                    </select>
+                    <span class="oui-icon oui-icon-chevron-down" aria-hidden="true"></span>
+                </label>
+            </oui-field>
+        </oui-inline-adder-field>
+        <oui-inline-adder-field adaptive>
+            <oui-field label="Field 3">
+                <oui-numeric name="field3" model="field3"></oui-numeric>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+```
+
+### Events
+
+#### `on-add`
+
+**Note**: If you want to access the form inside `on-add` callback, you need to use the `form` variable as below.
+
+```html:preview
+<oui-inline-adder on-add="$ctrl.onAdd(form)">
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+<div class="oui-doc-preview-only">
+    <p>On Add</p>
+    <pre class="oui-doc-code oui-doc-code_json">{{$ctrl.addedForm | json}}</pre>
+</div>
+```
+
+#### `on-remove`
+
+**Note**: If you want to access the form inside `on-remove` callback, you need to use the `form` variable as below.
+
+```html:preview
+<oui-inline-adder on-remove="$ctrl.onRemove(form)">
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+<div class="oui-doc-preview-only">
+    <p>On Remove</p>
+    <pre class="oui-doc-code oui-doc-code_json">{{$ctrl.removedForm | json}}</pre>
+</div>
+```
+
+#### `on-change`
+
+**Note**: If you want to access the forms array inside `on-change` callback, you need to use the `forms` variable as below.
+
+```html:preview
+<oui-inline-adder on-change="$ctrl.onChange(forms)">
+    <oui-inline-adder-row>
+        <oui-inline-adder-field>
+            <oui-field label="Field 1">
+                <input type="text" class="oui-input" name="field1" ng-model="field1" required>
+            </oui-field>
+        </oui-inline-adder-field>
+    </oui-inline-adder-row>
+</oui-inline-adder>
+<div class="oui-doc-preview-only">
+    <p>On Change</p>
+    <pre class="oui-doc-code oui-doc-code_json">{{$ctrl.changedForms | json}}</pre>
+</div>
+```
+
+## API
+
+### 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
+
+### oui-inline-adder-field
+
+| Attribute     | Type      | Binding   | One-time binding  | Values            | Default   | Description
+| ----          | ----      | ----      | ----              | ----              | ----      | ----
+| `adaptive`    | boolean   | <?        | yes               | `true`, `false`   | `false`   | adaptive field flag
diff --git a/packages/oui-inline-adder/src/field/inline-adder-field.component.js b/packages/oui-inline-adder/src/field/inline-adder-field.component.js
new file mode 100644
index 00000000..669b5e7a
--- /dev/null
+++ b/packages/oui-inline-adder/src/field/inline-adder-field.component.js
@@ -0,0 +1,8 @@
+import controller from "./inline-adder-field.controller";
+
+export default {
+    bindings: {
+        adaptive: "<?"
+    },
+    controller
+};
diff --git a/packages/oui-inline-adder/src/field/inline-adder-field.controller.js b/packages/oui-inline-adder/src/field/inline-adder-field.controller.js
new file mode 100644
index 00000000..dd2b31dc
--- /dev/null
+++ b/packages/oui-inline-adder/src/field/inline-adder-field.controller.js
@@ -0,0 +1,25 @@
+import { addBooleanParameter } from "@ovh-ui/common/component-utils";
+
+export default class {
+    constructor ($attrs, $element, $timeout) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$timeout = $timeout;
+    }
+
+    $onInit () {
+        addBooleanParameter(this, "adaptive");
+    }
+
+    $postLink () {
+        this.$timeout(() => {
+            this.$element.addClass("oui-inline-adder__field");
+
+            if (this.adaptive) {
+                this.$element.addClass("oui-inline-adder__field_adaptive");
+            }
+        });
+    }
+}
diff --git a/packages/oui-inline-adder/src/index.js b/packages/oui-inline-adder/src/index.js
new file mode 100644
index 00000000..d2b791a2
--- /dev/null
+++ b/packages/oui-inline-adder/src/index.js
@@ -0,0 +1,12 @@
+import InlineAdder from "./inline-adder.component";
+import InlineAdderField from "./field/inline-adder-field.component";
+import InlineAdderProvider from "./inline-adder.provider";
+import InlineAdderRow from "./row/inline-adder-row.component";
+
+export default angular
+    .module("oui.inline-adder", [])
+    .component("ouiInlineAdder", InlineAdder)
+    .component("ouiInlineAdderField", InlineAdderField)
+    .component("ouiInlineAdderRow", InlineAdderRow)
+    .provider("ouiInlineAdderConfiguration", InlineAdderProvider)
+    .name;
diff --git a/packages/oui-inline-adder/src/index.spec.js b/packages/oui-inline-adder/src/index.spec.js
new file mode 100644
index 00000000..f3a16ac3
--- /dev/null
+++ b/packages/oui-inline-adder/src/index.spec.js
@@ -0,0 +1,176 @@
+describe("ouiInlineAdder", () => {
+    let TestUtils;
+    let $timeout;
+    let configuration;
+
+    beforeEach(angular.mock.module("oui.inline-adder"));
+    beforeEach(angular.mock.module("oui.inline-adder.configuration"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_TestUtils_, _$timeout_) => {
+        TestUtils = _TestUtils_;
+        $timeout = _$timeout_;
+    }));
+
+    describe("Provider", () => {
+        angular.module("oui.inline-adder.configuration", [
+            "oui.inline-adder"
+        ]).config(ouiInlineAdderConfigurationProvider => {
+            ouiInlineAdderConfigurationProvider.setTranslations({
+                foo: "bar"
+            });
+        });
+
+        beforeEach(inject(_ouiInlineAdderConfiguration_ => {
+            configuration = _ouiInlineAdderConfiguration_;
+        }));
+
+        it("should have custom options", () => {
+            expect(configuration.translations.foo).toEqual("bar");
+        });
+    });
+
+    describe("Component", () => {
+        describe("oui-inline-adder", () => {
+            it("should have a default classname", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-inline-adder>
+                        <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>`);
+
+                $timeout.flush();
+
+                expect(element.hasClass("oui-inline-adder")).toBeTruthy();
+            });
+
+            it("should have a form with a default id/name", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-inline-adder>
+                        <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 = element.find("form");
+                const id = `${element.controller("ouiInlineAdder").id}_0`;
+                const name = `${element.controller("ouiInlineAdder").name}_0`;
+
+                expect(form.length).toBe(1);
+                expect(form.attr("id")).toBe(id);
+                expect(form.attr("name")).toBe(name);
+            });
+
+            it("should create a new form when submitted", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-inline-adder>
+                        <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>`);
+
+                let length = element.find("form").length;
+
+                // Will have 2 rows
+                angular.element(element.find("form")[length - 1]).triggerHandler("submit");
+                expect(element.find("form").length).toBe(length += 1);
+
+                // Will have 3 rows
+                angular.element(element.find("form")[length - 1]).triggerHandler("submit");
+                expect(element.find("form").length).toBe(length += 1);
+            });
+
+            it("should hide a form when removed", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-inline-adder>
+                        <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>`);
+
+                let length = element.find("form").length;
+                const form = angular.element(element.find("form")[0]);
+
+                // Will have 2 rows
+                form.triggerHandler("submit");
+                expect(element.find("form").length).toBe(length += 1);
+
+                // Will have 1 row hidden
+                form.find("button").triggerHandler("click");
+                expect(form.hasClass("ng-hide")).toBeTruthy();
+            });
+        });
+
+        describe("oui-inline-adder-row", () => {
+            it("should have a default classname", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-inline-adder>
+                        <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>`);
+
+                $timeout.flush();
+
+                expect(element.find("oui-inline-adder-row").hasClass("oui-inline-adder__row")).toBeTruthy();
+            });
+        });
+
+        describe("oui-inline-adder-field", () => {
+            it("should have a default classname", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-inline-adder>
+                        <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>`);
+
+                $timeout.flush();
+
+                expect(element.find("oui-inline-adder-field").hasClass("oui-inline-adder__field")).toBeTruthy();
+            });
+
+            it("should have a variant classname", () => {
+                const element = TestUtils.compileTemplate(`
+                    <oui-inline-adder>
+                        <oui-inline-adder-row>
+                            <oui-inline-adder-field adaptive>
+                                <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>`);
+
+                $timeout.flush();
+
+                expect(element.find("oui-inline-adder-field").hasClass("oui-inline-adder__field_adaptive")).toBeTruthy();
+            });
+        });
+    });
+});
diff --git a/packages/oui-inline-adder/src/inline-adder.component.js b/packages/oui-inline-adder/src/inline-adder.component.js
new file mode 100644
index 00000000..0a60a478
--- /dev/null
+++ b/packages/oui-inline-adder/src/inline-adder.component.js
@@ -0,0 +1,15 @@
+import controller from "./inline-adder.controller.js";
+import template from "./inline-adder.html";
+
+export default {
+    bindings: {
+        id: "@?",
+        name: "@?",
+        onAdd: "&",
+        onChange: "&",
+        onRemove: "&"
+    },
+    controller,
+    template,
+    transclude: true
+};
diff --git a/packages/oui-inline-adder/src/inline-adder.controller.js b/packages/oui-inline-adder/src/inline-adder.controller.js
new file mode 100644
index 00000000..e8bf4b53
--- /dev/null
+++ b/packages/oui-inline-adder/src/inline-adder.controller.js
@@ -0,0 +1,57 @@
+import { addDefaultParameter } from "@ovh-ui/common/component-utils";
+import filter from "lodash/filter";
+
+export default class {
+    constructor ($attrs, $element, $scope, $timeout, ouiInlineAdderConfiguration) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$scope = $scope;
+        this.$timeout = $timeout;
+        this.translations = ouiInlineAdderConfiguration.translations;
+    }
+
+    $onInit () {
+        this.forms = [true];
+        this.isDisabled = [false];
+
+        addDefaultParameter(this, "id", `ouiInlineAdderForm${this.$scope.$id}`);
+        addDefaultParameter(this, "name", `ouiInlineAdderForm${this.$scope.$id}`);
+    }
+
+    $postLink () {
+        this.$timeout(() =>
+            this.$element.addClass("oui-inline-adder")
+        );
+    }
+
+    onFormsChange () {
+        // Filter boolean values used for ngShow
+        const forms = filter(this.forms, (item) => angular.isObject(item));
+        this.onChange({ forms });
+    }
+
+    onFormSubmit (form, index) {
+        if (form.$valid) {
+            this.forms[index] = form;
+
+            // Create new instance of form
+            this.isDisabled[index] = true;
+            this.forms.push(true);
+
+            // Callbacks
+            this.onAdd({ form });
+            this.onFormsChange();
+        }
+    }
+
+    onFormRemove (form, index) {
+        // Hide removed form to avoid refreshing ngRepeat
+        this.forms[index] = false;
+
+        // Callback
+        this.onRemove({ form });
+        this.onFormsChange();
+    }
+}
diff --git a/packages/oui-inline-adder/src/inline-adder.html b/packages/oui-inline-adder/src/inline-adder.html
new file mode 100644
index 00000000..9502e156
--- /dev/null
+++ b/packages/oui-inline-adder/src/inline-adder.html
@@ -0,0 +1,24 @@
+<form class="oui-inline-adder__form" novalidate
+    ng-attr-name="{{::$ctrl.name}}_{{::$index}}"
+    ng-attr-id="{{::$ctrl.id}}_{{::$index}}"
+    ng-repeat="form in $ctrl.forms track by $index"
+    ng-show="$ctrl.forms[$index]"
+    ng-submit="$ctrl.onFormSubmit(this[$ctrl.name + '_'+ $index], $index)">
+    <fieldset class="oui-inline-adder__fieldset"
+        ng-disabled="$ctrl.isDisabled[$index]"
+        ng-transclude>
+    </fieldset>
+    <footer class="oui-inline-adder__footer">
+        <button type="submit" class="oui-inline-adder__action"
+            ng-attr-aria-label="{{::$ctrl.translations.ariaAddItem}}"
+            ng-if="!$ctrl.isDisabled[$index]">
+            <i class="oui-icon oui-icon-add"></i>
+        </button>
+        <button type="button" class="oui-inline-adder__action"
+            ng-attr-aria-label="{{::$ctrl.translations.ariaRemoveItem}}"
+            ng-click="$ctrl.onFormRemove(this[$ctrl.name + '_'+ $index], $index)"
+            ng-if="$ctrl.isDisabled[$index]">
+            <i class="oui-icon oui-icon-trash_line"></i>
+        </button>
+    </footer>
+</form>
diff --git a/packages/oui-inline-adder/src/inline-adder.provider.js b/packages/oui-inline-adder/src/inline-adder.provider.js
new file mode 100644
index 00000000..c2810a0f
--- /dev/null
+++ b/packages/oui-inline-adder/src/inline-adder.provider.js
@@ -0,0 +1,25 @@
+import { merge } from "lodash";
+
+export default class {
+    constructor () {
+        this.translations = {
+            ariaAddItem: "Add Item",
+            ariaRemoveItem: "Remove Item"
+        };
+    }
+
+    /**
+     * Set the translations
+     * @param {Object} translations a map of translations
+     */
+    setTranslations (translations) {
+        this.translations = merge(this.translations, translations);
+        return this;
+    }
+
+    $get () {
+        return {
+            translations: this.translations
+        };
+    }
+}
diff --git a/packages/oui-inline-adder/src/row/inline-adder-row.component.js b/packages/oui-inline-adder/src/row/inline-adder-row.component.js
new file mode 100644
index 00000000..4a62ecae
--- /dev/null
+++ b/packages/oui-inline-adder/src/row/inline-adder-row.component.js
@@ -0,0 +1,16 @@
+export default {
+    controller: class {
+        constructor ($element, $timeout) {
+            "ngInject";
+
+            this.$element = $element;
+            this.$timeout = $timeout;
+        }
+
+        $postLink () {
+            this.$timeout(() =>
+                this.$element.addClass("oui-inline-adder__row")
+            );
+        }
+    }
+};

From 08420397cbd19eab91cd5f03decfb74eb3723808 Mon Sep 17 00:00:00 2001
From: Marie JONES <14836007+marie-j@users.noreply.github.com>
Date: Mon, 5 Nov 2018 15:41:27 +0100
Subject: [PATCH 09/12] feat(oui-navbar): allow actions on navbar menu links
 (#305)

---
 packages/oui-navbar/README.md                 |  2 ++
 packages/oui-navbar/src/index.spec.js         | 30 +++++++++++++++++++
 .../src/link/navbar-link.component.js         |  3 +-
 packages/oui-navbar/src/link/navbar-link.html |  6 ++--
 packages/oui-navbar/src/menu/navbar-menu.html |  6 ++--
 packages/oui-navbar/src/navbar.html           |  5 ++--
 6 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/oui-navbar/README.md b/packages/oui-navbar/README.md
index 86558664..f90107e8 100644
--- a/packages/oui-navbar/README.md
+++ b/packages/oui-navbar/README.md
@@ -250,6 +250,7 @@ This property is only available for root links of `main-links`.
     "title": String,
     "url": String<Url>,
     "isPrimary": Boolean,
+    "click": Function,
     "subLinks": Array[{
         "label": String,
         "title": String,
@@ -595,3 +596,4 @@ The property `name` **must be** `"user"`.
 | `state`               | string    | @?        | yes               | n/a                                   | n/a       | state of the link
 | `state-params`        | object    | <?        | yes               | n/a                                   | n/a       | state-params of the link
 | `variant`             | string    | @?        | yes               | `primary`, `secondary`, `tertiary`    | n/a       | style modifier of the link
+| `on-click`            | function  | &         | no                | n/a                                   | n/a       | click callback
diff --git a/packages/oui-navbar/src/index.spec.js b/packages/oui-navbar/src/index.spec.js
index e5aa774b..76e0ca27 100644
--- a/packages/oui-navbar/src/index.spec.js
+++ b/packages/oui-navbar/src/index.spec.js
@@ -655,5 +655,35 @@ describe("ouiNavbar", () => {
                 expect(toggler.attr("aria-expanded")).toBe("false");
             });
         });
+
+        describe("Links", () => {
+            const data = mockData.mainLinks[0];
+
+            it("should call click callback", () => {
+                const onClickSpy = jasmine.createSpy("onClickSpy");
+                const navbar = testUtils.compileTemplate(
+                    `<oui-navbar>
+                        <oui-navbar-main>
+                            <oui-navbar-link name="name"
+                                             text="title"
+                                             href="url"
+                                             on-click="$ctrl.onClick()">
+                            </oui-navbar-link>
+                        <oui-navbar-main>
+                    </oui-navbar>`, {
+                        name: data.name,
+                        title: data.title,
+                        url: data.url,
+                        onClick: onClickSpy
+                    });
+
+                $timeout.flush();
+
+                const link = angular.element(navbar[0].querySelector(".oui-navbar-link"));
+                link.triggerHandler("click");
+
+                expect(onClickSpy).toHaveBeenCalled();
+            });
+        });
     });
 });
diff --git a/packages/oui-navbar/src/link/navbar-link.component.js b/packages/oui-navbar/src/link/navbar-link.component.js
index 65f2e78f..c6c38147 100644
--- a/packages/oui-navbar/src/link/navbar-link.component.js
+++ b/packages/oui-navbar/src/link/navbar-link.component.js
@@ -12,7 +12,8 @@ export default {
         state: "@?",
         stateParams: "<?",
         label: "@?ariaLabel",
-        variant: "@?"
+        variant: "@?",
+        onClick: "&"
     },
     controller,
     template
diff --git a/packages/oui-navbar/src/link/navbar-link.html b/packages/oui-navbar/src/link/navbar-link.html
index 2c1e4fae..0d928cb8 100644
--- a/packages/oui-navbar/src/link/navbar-link.html
+++ b/packages/oui-navbar/src/link/navbar-link.html
@@ -9,7 +9,8 @@
         'oui-navbar-link_tertiary': $ctrl.variant === 'tertiary'
     }"
     ng-href="{{::$ctrl.href}}"
-    ng-bind="::$ctrl.text">
+    ng-bind="::$ctrl.text"
+    ng-click="$ctrl.onClick()">
 </a>
 <a class="oui-navbar-link"
     ng-if="::!!$ctrl.state"
@@ -23,5 +24,6 @@
     }"
     ng-bind="::$ctrl.text"
     ui-sref="{{::$ctrl.getFullSref()}}"
-    ui-sref-active="oui-navbar-link_active">
+    ui-sref-active="oui-navbar-link_active"
+    ng-click="$ctrl.onClick()">
 </a>
diff --git a/packages/oui-navbar/src/menu/navbar-menu.html b/packages/oui-navbar/src/menu/navbar-menu.html
index 5642d6e7..1e2cd02d 100644
--- a/packages/oui-navbar/src/menu/navbar-menu.html
+++ b/packages/oui-navbar/src/menu/navbar-menu.html
@@ -31,7 +31,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
                 'oui-navbar_desktop-only': !!menuLink.subLinks,
                 'oui-navbar-link_external': !!menuLink.isExternal
             }"
-            ng-click="$ctrl.navbarCtrl.toggleMenu()"
+            ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"
             ng-href="{{::menuLink.url}}"
             oui-navbar-group="{{::$ctrl.menuName}}"
             oui-navbar-group-last="::$last">
@@ -50,7 +50,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
             ng-class="::{
                 'oui-navbar_desktop-only': !!menuLink.subLinks
             }"
-            ng-click="$ctrl.navbarCtrl.toggleMenu()"
+            ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"
             ng-bind="::menuLink.title"
             ui-sref="{{::$ctrl.constructor.getFullSref(menuLink)}}"
             oui-navbar-group="{{::$ctrl.menuName}}"
@@ -60,7 +60,7 @@ <h3 class="oui-navbar-menu__title" ng-bind="::$ctrl.headerTitle"></h3>
 
         <!-- Button (click) -->
         <button class="oui-navbar-link" type="button"
-            ng-if="::(!menuLink.subLinks && !!menuLink.click)"
+            ng-if="::(!menuLink.subLinks && !!menuLink.click && !menuLink.state  && !menuLink.url)"
             ng-attr-aria-label="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-attr-title="{{::!!menuLink.label ? menuLink.label : null}}"
             ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)"
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 86594ba8..4ab051c7 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -34,7 +34,8 @@
         variant="{{::managerLink.isPrimary ? 'primary' : 'secondary'}}"
         aria-label="{{::!!managerLink.label ? managerLink.label : null}}"
         ng-repeat="managerLink in ::$ctrl.mainLinks track by $index"
-        ng-class="::!!managerLink.class ? managerLink.class : null">
+        ng-class="::!!managerLink.class ? managerLink.class : null"
+        on-click="managerLink.click()">
     </oui-navbar-link>
 </div>
 <!-- /Main Links -->
@@ -51,7 +52,7 @@
         aria-label="{{::!!asideLink.label ? asideLink.label : null}}"
         icon-badge="(asideLink.subLinks | filter: {isActive: 'true', acknowledged: '!true'}).length"
         icon-class="{{::!!asideLink.iconClass ? asideLink.iconClass : null}}"
-        on-click="asideLink.onClick"
+        on-click="asideLink.onClick()"
         ng-repeat="asideLink in $ctrl.asideLinks track by $index"
         ng-class="::!!asideLink.class ? asideLink.class : null"
         ng-switch="::asideLink.name">

From b01d260193e6dd0dc5e666adc27708090393cad9 Mon Sep 17 00:00:00 2001
From: Marie JONES <14836007+marie-j@users.noreply.github.com>
Date: Tue, 6 Nov 2018 12:53:24 +0100
Subject: [PATCH 10/12] feat(oui-dropdown): allow click on link items (#306)

---
 packages/oui-dropdown/src/index.spec.js       | 26 +++++++++++++++++++
 .../oui-dropdown/src/item/dropdown-item.html  |  4 ++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/oui-dropdown/src/index.spec.js b/packages/oui-dropdown/src/index.spec.js
index f2fa14d1..0be80e1c 100644
--- a/packages/oui-dropdown/src/index.spec.js
+++ b/packages/oui-dropdown/src/index.spec.js
@@ -212,6 +212,32 @@ describe("ouiDropdown", () => {
                 expect(link.attr("target")).toBe("_blank");
                 expect(link.attr("rel")).toBe("noopener");
             });
+
+            it("should call click callback", () => {
+                const onLinkClickSpy = jasmine.createSpy("onLinkClickSpy");
+                const onButtonClickSpy = jasmine.createSpy("onButtonClickSpy");
+                const element = TestUtils.compileTemplate(`
+                    <oui-dropdown>
+                        <oui-dropdown-trigger text="Actions"></oui-dropdown-trigger>
+                        <oui-dropdown-content>
+                            <oui-dropdown-item text="Lorem ipsum" href="#" on-click="$ctrl.onLinkClick()"></oui-dropdown-item>
+                            <oui-dropdown-item text="Lorem ipsum" on-click="$ctrl.onButtonClick()"></oui-dropdown-item>
+                            <oui-dropdown-item text="Lorem ipsum" href="#"></oui-dropdown-item>
+                        </oui-dropdown-content>
+                    </oui-dropdown>
+                `, {
+                    onLinkClick: onLinkClickSpy,
+                    onButtonClick: onButtonClickSpy
+                });
+
+                $timeout.flush();
+                const items = angular.element(element[0].querySelectorAll("oui-dropdown-item")).children();
+                angular.element(items[0]).triggerHandler("click");
+                angular.element(items[1]).triggerHandler("click");
+
+                expect(onLinkClickSpy).toHaveBeenCalled();
+                expect(onButtonClickSpy).toHaveBeenCalled();
+            });
         });
 
         describe("Group", () => {
diff --git a/packages/oui-dropdown/src/item/dropdown-item.html b/packages/oui-dropdown/src/item/dropdown-item.html
index a7996605..4741b3df 100644
--- a/packages/oui-dropdown/src/item/dropdown-item.html
+++ b/packages/oui-dropdown/src/item/dropdown-item.html
@@ -12,7 +12,8 @@
     ng-if="::!!$ctrl.href"
     ng-href="{{::$ctrl.href}}"
     ng-attr-target="{{::$ctrl.linkTarget}}"
-    ng-attr-rel="{{::$ctrl.linkRel}}">
+    ng-attr-rel="{{::$ctrl.linkRel}}"
+    ng-click="$ctrl.onClick()">
     <span ng-transclude>{{::$ctrl.text}}</span>
     <span ng-if="::$ctrl.external"
         class="oui-icon oui-icon-external_link"
@@ -23,6 +24,7 @@
     role="menuitem"
     ng-if="::!!$ctrl.state"
     ui-sref="{{::$ctrl.getFullSref()}}"
+    ng-click="$ctrl.onClick()"
     ng-transclude>
     {{::$ctrl.text}}
 </a>

From ac775804b84512345481de75e2650490b55ddf3c Mon Sep 17 00:00:00 2001
From: Marie JONES <14836007+marie-j@users.noreply.github.com>
Date: Thu, 8 Nov 2018 09:54:31 +0100
Subject: [PATCH 11/12] feat(oui-navbar): allow to animate icon on aside links
 (#308)

---
 packages/oui-navbar/README.md                               | 4 ++++
 .../oui-navbar/src/dropdown/navbar-dropdown.component.js    | 1 +
 packages/oui-navbar/src/dropdown/navbar-dropdown.html       | 6 ++++--
 packages/oui-navbar/src/index.spec.data.json                | 1 +
 packages/oui-navbar/src/index.spec.js                       | 6 ++++++
 packages/oui-navbar/src/navbar.html                         | 1 +
 6 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/oui-navbar/README.md b/packages/oui-navbar/README.md
index f90107e8..26d6dca1 100644
--- a/packages/oui-navbar/README.md
+++ b/packages/oui-navbar/README.md
@@ -349,6 +349,7 @@ It defines the menu in reponsive mode. It will be visible only for screen resolu
 This property is only available for root links of `aside-links`.
 
 - `iconClass`: define `class` of the menu item icon.
+- `iconAnimated`: define if the menu item icon should be animated
 
 ```json
 [{
@@ -357,6 +358,7 @@ This property is only available for root links of `aside-links`.
     "label": String,
     "title": String,
     "iconClass": String,
+    "iconAnimated": Boolean,
     "subLinks": Array[{
         "label": String,
         "title": String,
@@ -379,6 +381,7 @@ This property is only available for root links of `aside-links`.
                 acknowledged: '!true'
             }).length"
             icon-class="{{asideLink.iconClass}}"
+            icon-animated="asideLink.name === 'notifications'"
             on-click="asideLink.onClick"
             ng-repeat="asideLink in $ctrl.asideLinks track by $index"
             ng-class="asideLink.class"
@@ -548,6 +551,7 @@ The property `name` **must be** `"user"`.
 | `text`                | string    | @         | yes               | n/a                                   | n/a       | text of the button
 | `aria-label`          | string    | @?        | yes               | n/a                                   | n/a       | accessibility label of the button
 | `icon-class`          | string    | @?        | yes               | n/a                                   | n/a       | classname of the button icon
+| `icon-animated`        | boolean   | <?        | no                | `true`, `false`                       | `false`   | defines if the menu item icon should be shaking 
 | `icon-badge`          | number    | <?        | no                | n/a                                   | n/a       | number on the badge of the button icon
 | `on-click`            | function  | &         | no                | n/a                                   | n/a       | click callback
 
diff --git a/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js b/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
index 13d1f672..c29daf3f 100644
--- a/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
+++ b/packages/oui-navbar/src/dropdown/navbar-dropdown.component.js
@@ -11,6 +11,7 @@ export default {
         label: "@?ariaLabel",
         iconBadge: "<?",
         iconClass: "@?",
+        iconAnimated: "<?",
         onClick: "&"
     },
     controller,
diff --git a/packages/oui-navbar/src/dropdown/navbar-dropdown.html b/packages/oui-navbar/src/dropdown/navbar-dropdown.html
index 117b07fe..8d8279a3 100644
--- a/packages/oui-navbar/src/dropdown/navbar-dropdown.html
+++ b/packages/oui-navbar/src/dropdown/navbar-dropdown.html
@@ -5,9 +5,11 @@
     ng-class="::!!$ctrl.iconClass ? 'oui-navbar-link_icon' : null"
     ng-click="$ctrl.navbarCtrl.toggleMenu($ctrl.name); $ctrl.onClick();"
     oui-navbar-group="{{::$ctrl.name}}">
-    <span class="oui-icon" aria-hidden="true"
+    <span class="oui-icon {{:: 'navbar-' + $ctrl.iconClass }}" aria-hidden="true"
         ng-if="::!!$ctrl.iconClass"
-        ng-class="::'navbar-' + $ctrl.iconClass">
+        ng-class="{
+            'oui-icon_shake': $ctrl.iconAnimated
+        }">
         <span class="oui-icon__badge"
             ng-if="!!$ctrl.iconBadge"
             ng-bind="$ctrl.iconBadge">
diff --git a/packages/oui-navbar/src/index.spec.data.json b/packages/oui-navbar/src/index.spec.data.json
index d990b114..3ab25b49 100644
--- a/packages/oui-navbar/src/index.spec.data.json
+++ b/packages/oui-navbar/src/index.spec.data.json
@@ -43,6 +43,7 @@
             "class": "navbar-notification__list",
             "title": "Notifications",
             "iconClass": "oui-icon oui-icon-info_circle",
+            "iconAnimated": true,
             "subLinks": [
               {
                 "subject": "Maecenas id ipsum suscipit",
diff --git a/packages/oui-navbar/src/index.spec.js b/packages/oui-navbar/src/index.spec.js
index 76e0ca27..5045b5cc 100644
--- a/packages/oui-navbar/src/index.spec.js
+++ b/packages/oui-navbar/src/index.spec.js
@@ -546,6 +546,12 @@ describe("ouiNavbar", () => {
                 expect(data[userIndex].name).toBe("user");
                 expect(userMenu.hasClass("oui-navbar-menu_user")).toBe(true);
             });
+
+            it("should animate menu item icon", () => {
+                const notificationsIndex = 1;
+                const notificationsMenu = angular.element(menu.children("oui-navbar-dropdown")[notificationsIndex].querySelector(".oui-icon"));
+                expect(notificationsMenu.hasClass("oui-icon_shake")).toBe(true);
+            });
         });
 
         describe("Responsive menu", () => {
diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html
index 4ab051c7..bc2d94e8 100644
--- a/packages/oui-navbar/src/navbar.html
+++ b/packages/oui-navbar/src/navbar.html
@@ -52,6 +52,7 @@
         aria-label="{{::!!asideLink.label ? asideLink.label : null}}"
         icon-badge="(asideLink.subLinks | filter: {isActive: 'true', acknowledged: '!true'}).length"
         icon-class="{{::!!asideLink.iconClass ? asideLink.iconClass : null}}"
+        icon-animated="asideLink.iconAnimated ? asideLink.iconAnimated : false"
         on-click="asideLink.onClick()"
         ng-repeat="asideLink in $ctrl.asideLinks track by $index"
         ng-class="::!!asideLink.class ? asideLink.class : null"

From f76366610291ff70734199b56aa9bb60100467c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Martin?=
 <euhmeuh@users.noreply.github.com>
Date: Thu, 8 Nov 2018 09:54:48 +0100
Subject: [PATCH 12/12] feat(oui-modal): allow disabling oui-modal buttons
 (#307)

* feat(oui-modal): allow disabling oui-modal buttons

* feat(oui-modal): fix test and clean up the doc
---
 packages/oui-modal/README.md               | 29 ++++++++++++++++------
 packages/oui-modal/src/index.spec.js       | 29 ++++++++++++++++++++++
 packages/oui-modal/src/modal.component.js  |  2 ++
 packages/oui-modal/src/modal.controller.js |  2 ++
 packages/oui-modal/src/modal.html          |  4 +--
 5 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/packages/oui-modal/README.md b/packages/oui-modal/README.md
index 6cc3d121..ab008655 100644
--- a/packages/oui-modal/README.md
+++ b/packages/oui-modal/README.md
@@ -44,11 +44,10 @@
 <div ng-init="$ctrl.loading = true" class="oui-doc-preview-only-keep-children">
 <oui-modal
     heading="Loading modal title"
-    primary-action="$ctrl.confirm = true"
+    primary-action="$ctrl.doSomething()"
     primary-label="Ok"
-    secondary-action="$ctrl.cancel = true"
+    secondary-action="$ctrl.cancel()"
     secondary-label="Cancel"
-    on-dismiss="$ctrl.cancel = true"
     loading="$ctrl.loading">
 <oui-field label="Label for Input text">
     <input type="text" id="text" name="text" class="oui-input">
@@ -61,17 +60,29 @@
 ### Warning modal
 
 ```html:preview
-<div ng-init="$ctrl.dismiss = false"
-    class="oui-doc-preview-only-keep-children">
 <oui-modal
     heading="Warning modal"
-    primary-action="$ctrl.dismiss = true"
+    primary-action="$ctrl.doSomething()"
     primary-label="Ok"
-    on-dismiss="$ctrl.dismiss = true"
+    on-dismiss="$ctrl.dismiss()"
     type="warning">
   Modal content
 </oui-modal>
-</div>
+```
+
+### Disabled buttons
+
+```html:preview
+<oui-modal
+    heading="Fight a wizard on a bridge"
+    primary-action="$ctrl.pass()"
+    primary-label="Pass"
+    primary-disabled="true"
+    secondary-action="$ctrl.flee()"
+    secondary-label="Turn back"
+    secondary-disabled="true">
+  You shall not pass!
+</oui-modal>
 ```
 
 ## API
@@ -83,8 +94,10 @@
 | `loading`             | boolean   | <?        | no               | `true`, `false`                | `false`   | display loader flag
 | `primary-label`       | string    | @?        | yes              | n/a                            | n/a       | confirmation label
 | `primary-action`      | function  | &         | no               | n/a                            | n/a       | confirmation callback
+| `primary-disabled`    | boolean   | <?        | no               | `true`, `false`                | `false`   | disable the primary button
 | `secondary-label`     | string    | @?        | yes              | n/a                            | n/a       | cancellation label
 | `secondary-action`    | function  | &         | no               | n/a                            | n/a       | cancellation callback
+| `secondary-disabled`  | boolean   | <?        | no               | `true`, `false`                | `false`   | disable the secondary button
 | `on-dismiss`          | function  | &         | no               | n/a                            | n/a       | dismiss callback
 
 #### Deprecated
diff --git a/packages/oui-modal/src/index.spec.js b/packages/oui-modal/src/index.spec.js
index e14f68c9..7c4c63dc 100644
--- a/packages/oui-modal/src/index.spec.js
+++ b/packages/oui-modal/src/index.spec.js
@@ -177,6 +177,35 @@ describe("ouiModal", () => {
             expect($secondaryButton.attr("disabled")).toBe("disabled");
         });
 
+        it("should disable buttons when the conditions are met", () => {
+            const primaryDisabled = true;
+            const secondaryDisabled = true;
+
+            const element = TestUtils.compileTemplate(`
+                <oui-modal
+                    heading="Title"
+                    primary-label="{{::$ctrl.primaryLabel}}"
+                    primary-disabled="$ctrl.primaryDisabled"
+                    secondary-label="{{::$ctrl.secondaryLabel}}"
+                    secondary-disabled="$ctrl.secondaryDisabled">
+                </oui-modal>
+            `, {
+                primaryLabel,
+                secondaryLabel,
+                primaryDisabled,
+                secondaryDisabled
+            });
+
+            const $footer = getFooter(element);
+            const $primaryButton = getPrimaryButton($footer);
+            const $secondaryButton = getSecondaryButton($footer);
+
+            expect($primaryButton).toBeDefined();
+            expect($primaryButton.attr("disabled")).toBe("disabled");
+            expect($secondaryButton).toBeDefined();
+            expect($secondaryButton.attr("disabled")).toBe("disabled");
+        });
+
         it("should trigger secondary action", () => {
             const secondarySpy = jasmine.createSpy("secondaryClick");
             const element = TestUtils.compileTemplate(`
diff --git a/packages/oui-modal/src/modal.component.js b/packages/oui-modal/src/modal.component.js
index 5a656647..2576c362 100644
--- a/packages/oui-modal/src/modal.component.js
+++ b/packages/oui-modal/src/modal.component.js
@@ -11,8 +11,10 @@ export default {
         loading: "<?",
         primaryLabel: "@?",
         primaryAction: "&",
+        primaryDisabled: "<?",
         secondaryLabel: "@?",
         secondaryAction: "&",
+        secondaryDisabled: "<?",
         onDismiss: "&"
     },
     transclude: true
diff --git a/packages/oui-modal/src/modal.controller.js b/packages/oui-modal/src/modal.controller.js
index 465b3686..eaecd8ba 100644
--- a/packages/oui-modal/src/modal.controller.js
+++ b/packages/oui-modal/src/modal.controller.js
@@ -11,6 +11,8 @@ export default class {
 
     $onInit () {
         addBooleanParameter(this, "loading");
+        addBooleanParameter(this, "primaryDisabled");
+        addBooleanParameter(this, "secondaryDisabled");
 
         // Deprecated: Support for 'title' attribute
         if (!!this.$attrs.title && !this.$attrs.heading) {
diff --git a/packages/oui-modal/src/modal.html b/packages/oui-modal/src/modal.html
index f374c115..8baee373 100644
--- a/packages/oui-modal/src/modal.html
+++ b/packages/oui-modal/src/modal.html
@@ -28,13 +28,13 @@
         ng-if="$ctrl.secondaryLabel"
         ng-bind="$ctrl.secondaryLabel"
         ng-click="$ctrl.secondaryAction()"
-        ng-disabled="$ctrl.loading">
+        ng-disabled="$ctrl.loading || $ctrl.secondaryDisabled">
     </button>
     <button class="oui-button oui-button_primary"
         type="submit"
         ng-if="$ctrl.primaryLabel"
         ng-bind="$ctrl.primaryLabel"
         ng-click="$ctrl.primaryAction()"
-        ng-disabled="$ctrl.loading">
+        ng-disabled="$ctrl.loading || $ctrl.primaryDisabled">
     </button>
 </div>