From 5a39444daa7ec650d48ce43b775d476f74515219 Mon Sep 17 00:00:00 2001
From: "jean-christophe.alleman" <jean-christophe.alleman@corp.ovh.com>
Date: Mon, 12 Nov 2018 14:21:19 +0100
Subject: [PATCH 1/2] feat(oui-checkbox): add error class when checkbox is in
 error

---
 .../oui-checkbox/src/checkbox.component.js    |  3 +
 .../oui-checkbox/src/checkbox.controller.js   |  8 ++-
 packages/oui-checkbox/src/checkbox.html       | 57 ++++++++++---------
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/packages/oui-checkbox/src/checkbox.component.js b/packages/oui-checkbox/src/checkbox.component.js
index 3663b59a..9e789c78 100644
--- a/packages/oui-checkbox/src/checkbox.component.js
+++ b/packages/oui-checkbox/src/checkbox.component.js
@@ -4,6 +4,9 @@ import template from "./checkbox.html";
 export default {
     template,
     controller,
+    require: {
+        form: "?^^form"
+    },
     bindings: {
         model: "=?",
         id: "@?",
diff --git a/packages/oui-checkbox/src/checkbox.controller.js b/packages/oui-checkbox/src/checkbox.controller.js
index bdf5101e..8506566e 100644
--- a/packages/oui-checkbox/src/checkbox.controller.js
+++ b/packages/oui-checkbox/src/checkbox.controller.js
@@ -17,7 +17,6 @@ export default class {
         // So we use $timeout to force the $apply
         this.$timeout(() =>
             this.$element
-                .addClass("oui-checkbox")
                 .removeAttr("id")
                 .removeAttr("name")
         );
@@ -38,6 +37,13 @@ export default class {
         addDefaultParameter(this, "id", `ouiCheckbox${this.$scope.$id}`);
     }
 
+    hasError () {
+        if (!this.form) {
+            return false;
+        }
+        return this.form.$submitted && this.form[this.name].$invalid;
+    }
+
     _updateIndeterminateState (model) {
         this.checkboxElement.prop("indeterminate", model === null);
     }
diff --git a/packages/oui-checkbox/src/checkbox.html b/packages/oui-checkbox/src/checkbox.html
index fc1249ef..f2e33dd8 100644
--- a/packages/oui-checkbox/src/checkbox.html
+++ b/packages/oui-checkbox/src/checkbox.html
@@ -1,28 +1,31 @@
-<input class="oui-checkbox__input"
-    type="checkbox"
-    id="{{:: $ctrl.id }}"
-    name="{{:: $ctrl.name }}"
-    ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
-    ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}"
-    ng-model="$ctrl.model"
-    ng-change="$ctrl.onChange({ modelValue: $ctrl.model })"
-    ng-disabled="$ctrl.disabled"
-    ng-required="$ctrl.required">
-<label for="{{:: $ctrl.id }}"
-    class="oui-checkbox__label-container"
-    ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
-    ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}">
-    <span class="oui-checkbox__label">
-        <span id="{{:: $ctrl.id }}-text" ng-transclude>{{$ctrl.text}}</span>
-        <span class="oui-checkbox__icon">
-            <span class="oui-icon oui-icon-checkbox-unchecked"></span>
-            <span class="oui-icon oui-icon-checkbox-checked"></span>
-            <span class="oui-icon oui-icon-checkbox-checkmark"></span>
-            <span class="oui-icon oui-icon-checkbox-indeterminate"></span>
+<div class="oui-checkbox"
+     data-ng-class="{ 'oui-checkbox_error': $ctrl.hasError() }">
+    <input class="oui-checkbox__input"
+        type="checkbox"
+        id="{{:: $ctrl.id }}"
+        name="{{:: $ctrl.name }}"
+        ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
+        ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}"
+        ng-model="$ctrl.model"
+        ng-change="$ctrl.onChange({ modelValue: $ctrl.model })"
+        ng-disabled="$ctrl.disabled"
+        ng-required="$ctrl.required">
+    <label for="{{:: $ctrl.id }}"
+        class="oui-checkbox__label-container"
+        ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
+        ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}">
+        <span class="oui-checkbox__label">
+            <span id="{{:: $ctrl.id }}-text" ng-transclude>{{$ctrl.text}}</span>
+            <span class="oui-checkbox__icon">
+                <span class="oui-icon oui-icon-checkbox-unchecked"></span>
+                <span class="oui-icon oui-icon-checkbox-checked"></span>
+                <span class="oui-icon oui-icon-checkbox-checkmark"></span>
+                <span class="oui-icon oui-icon-checkbox-indeterminate"></span>
+            </span>
         </span>
-    </span>
-    <span id="{{:: $ctrl.id }}-description" class="oui-checkbox__description"
-        ng-bind="$ctrl.description"
-        ng-if="$ctrl.description">
-    </span>
-</label>
+        <span id="{{:: $ctrl.id }}-description" class="oui-checkbox__description"
+            ng-bind="$ctrl.description"
+            ng-if="$ctrl.description">
+        </span>
+    </label>
+</div>

From d3358f763217444a3028764267c9db696eee6a7c Mon Sep 17 00:00:00 2001
From: "jean-christophe.alleman" <jean-christophe.alleman@corp.ovh.com>
Date: Tue, 13 Nov 2018 13:10:22 +0100
Subject: [PATCH 2/2] fix(oui-checkbox): test and error display

---
 packages/oui-checkbox/src/checkbox.controller.js | 4 ++--
 packages/oui-checkbox/src/checkbox.html          | 6 ++++--
 packages/oui-checkbox/src/index.spec.js          | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/oui-checkbox/src/checkbox.controller.js b/packages/oui-checkbox/src/checkbox.controller.js
index 8506566e..0e9658d7 100644
--- a/packages/oui-checkbox/src/checkbox.controller.js
+++ b/packages/oui-checkbox/src/checkbox.controller.js
@@ -38,10 +38,10 @@ export default class {
     }
 
     hasError () {
-        if (!this.form) {
+        if (!this.form || !this.form[this.name]) {
             return false;
         }
-        return this.form.$submitted && this.form[this.name].$invalid;
+        return (!this.form[this.name].$dirty || this.form.$submitted) && !this.focused && this.form[this.name].$invalid;
     }
 
     _updateIndeterminateState (model) {
diff --git a/packages/oui-checkbox/src/checkbox.html b/packages/oui-checkbox/src/checkbox.html
index f2e33dd8..4caca23f 100644
--- a/packages/oui-checkbox/src/checkbox.html
+++ b/packages/oui-checkbox/src/checkbox.html
@@ -1,5 +1,5 @@
 <div class="oui-checkbox"
-     data-ng-class="{ 'oui-checkbox_error': $ctrl.hasError() }">
+    ng-class="{ 'oui-checkbox_error': $ctrl.hasError() }">
     <input class="oui-checkbox__input"
         type="checkbox"
         id="{{:: $ctrl.id }}"
@@ -9,7 +9,9 @@
         ng-model="$ctrl.model"
         ng-change="$ctrl.onChange({ modelValue: $ctrl.model })"
         ng-disabled="$ctrl.disabled"
-        ng-required="$ctrl.required">
+        ng-required="$ctrl.required"
+        ng-focus="$ctrl.focused = true"
+        ng-blur="$ctrl.focused = false">
     <label for="{{:: $ctrl.id }}"
         class="oui-checkbox__label-container"
         ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
diff --git a/packages/oui-checkbox/src/index.spec.js b/packages/oui-checkbox/src/index.spec.js
index 3f443ede..7c7a242a 100644
--- a/packages/oui-checkbox/src/index.spec.js
+++ b/packages/oui-checkbox/src/index.spec.js
@@ -27,12 +27,12 @@ describe("ouiCheckbox", () => {
     }
 
     describe("Component", () => {
-        it("should have a default classname", () => {
+        it("should have an element with default classname", () => {
             const element = TestUtils.compileTemplate("<oui-checkbox></oui-checkbox>");
 
             $timeout.flush();
 
-            expect(element.hasClass("oui-checkbox")).toBeTruthy();
+            expect(element.find("div").eq(0).hasClass("oui-checkbox")).toBe(true);
         });
 
         describe("id attribute", () => {