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

Author: euhmeuh

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

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(`

packages/oui-modal/src/modal.component.js

@@ -11,8 +11,10 @@ export default {
         loading: "<?",
         primaryLabel: "@?",
         primaryAction: "&",
+        primaryDisabled: "<?",
         secondaryLabel: "@?",
         secondaryAction: "&",
+        secondaryDisabled: "<?",
         onDismiss: "&"
     },
     transclude: true

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) {

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>