Merge pull request #12 from cozy/inputs

Rework the error tooltips, form-floating, and input-group

docs/forms.html

@@ -106,13 +106,36 @@ <h2>Material inputs</h2>
               class="form-control is-invalid"
               id="lightFloatingInputInvalid"
               placeholder="[email protected]"
-              value="[email protected]"
+              value="$invalid"
               required
               autocomplete="off"
             />
             <label for="lightFloatingInputInvalid">Invalid input</label>
-            <div class="invalid-tooltip">
+            <div class="invalid-tooltip mb-1">
               <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-dark"></span>
+              This input is not valid
+            </div>
+            <ul class="fst-italic small">
+              <li class="text-danger">Only letters and digits</li>
+              <li class="text-danger">Start with a letter</li>
+              <li class="text-muted">Do not enter your email address</li>
+            </ul>
+          </form>
+          <form class="input-group form-floating has-validation mb-3">
+            <input
+              type="text"
+              class="form-control is-invalid"
+              id="lightFloatingInputGroup"
+              placeholder="username"
+              required
+              autocomplete="off"
+            />
+            <label for="lightFloatingInputGroup">Input group</label>
+            <span class="input-group-text">@example.com</span>
+            <div class="invalid-tooltip mb-1">
+              <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-dark"></span>
               This input is not valid
             </div>
           </form>
@@ -209,13 +232,36 @@ <h2>Material inputs</h2>
               class="form-control is-invalid"
               id="invertedFloatingInputInvalid"
               placeholder="[email protected]"
-              value="[email protected]"
+              value="$invalid"
               required
               autocomplete="off"
             />
             <label for="invertedFloatingInputInvalid">Invalid input</label>
-            <div class="invalid-tooltip">
+            <div class="invalid-tooltip mb-1">
               <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-white"></span>
+              This input is not valid
+            </div>
+            <ul class="fst-italic small">
+              <li class="text-danger">Only letters and digits</li>
+              <li class="text-danger">Start with a letter</li>
+              <li class="text-muted">Do not enter your email address</li>
+            </ul>
+          </form>
+          <form class="input-group form-floating has-validation mb-3">
+            <input
+              type="text"
+              class="form-control is-invalid"
+              id="invertedFloatingInputGroup"
+              placeholder="username"
+              required
+              autocomplete="off"
+            />
+            <label for="invertedFloatingInputGroup">Input group</label>
+            <span class="input-group-text">@example.com</span>
+            <div class="invalid-tooltip mb-1">
+              <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-dark"></span>
               This input is not valid
             </div>
           </form>
@@ -310,13 +356,36 @@ <h2>Material inputs</h2>
               class="form-control is-invalid"
               id="darkFloatingInputInvalid"
               placeholder="[email protected]"
-              value="[email protected]"
+              value="$invalid"
               required
               autocomplete="off"
             />
             <label for="darkFloatingInputInvalid">Invalid input</label>
-            <div class="invalid-tooltip">
+            <div class="invalid-tooltip mb-1">
+              <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-white"></span>
+              This input is not valid
+            </div>
+            <ul class="fst-italic small">
+              <li class="text-danger">Only letters and digits</li>
+              <li class="text-danger">Start with a letter</li>
+              <li class="text-muted">Do not enter your email address</li>
+            </ul>
+          </form>
+          <form class="input-group form-floating has-validation mb-3">
+            <input
+              type="text"
+              class="form-control is-invalid"
+              id="darkFloatingInputGroup"
+              placeholder="username"
+              required
+              autocomplete="off"
+            />
+            <label for="darkFloatingInputGroup">Input group</label>
+            <span class="input-group-text">@example.com</span>
+            <div class="invalid-tooltip mb-1">
               <div class="tooltip-arrow"></div>
+              <span class="icon icon-alert bg-dark"></span>
               This input is not valid
             </div>
           </form>

docs/icons/icons.css

@@ -1,3 +1,7 @@
+.icon-alert {
+  -webkit-mask-image: url(alert.svg);
+  mask-image: url(alert.svg);
+}
 .icon-back {
   -webkit-mask-image: url(back.svg);
   mask-image: url(back.svg);

docs/themes/dark.css

@@ -13,6 +13,7 @@
   --errorColor: #ff9b9b;
   --errorColorDark: #f96b6b;
   --errorColorDarkest: #ffecec;
+  --errorColorLight: #ea3f3f;
   --errorColorLightest: #340b0b;
   --warningColor: #ffc35c;
   --warningColorDarkest: #fff3dd;
@@ -21,6 +22,7 @@
   --successColorDarkest: #e3ffe7;
   --successColorLightest: #08250b;
   --infoColor: #1d212a;
+  --disabledTextColor: rgba(255, 255, 255, .4);
   --defaultBackgroundColor: #1d212a;
   --paperBackgroundColor: #2c3039;
   --dividerColor: rgba(255, 255, 255, .12);

postcss-cozy-vars/index.js

@@ -115,10 +115,12 @@ function changeColor(decl) {
     case ".btn-outline-warning:hover":
       decl.value = "var(--warningColor)";
       break;
-    case ".text-danger":
     case ".invalid-feedback":
       decl.value = "var(--errorColor)";
       break;
+    case ".text-danger":
+      decl.value = "var(--errorColorLight)";
+      break;
     case ".btn-outline-danger":
     case ".btn-outline-danger:hover":
       decl.value = "var(--btn-intent-outlined-text-color)";
@@ -175,6 +177,7 @@ function changeBackground(decl) {
     case ".form-select":
     case ".form-select:focus":
     case ".form-check-input":
+    case ".input-group-text":
     case ".card":
       decl.value = "var(--paperBackgroundColor)";
       break;

src/cozy/_colors.scss

@@ -34,6 +34,7 @@ html {
   --errorColor: #ea3f3f;                       // Error 600
   --errorColorDark: #d31f1f;                   // Error 700
   --errorColorDarkest: #340b0b;                // Error 900
+  --errorColorLight: #ff9b9b;                  // Error 400
   --errorColorLightest: #ffecec;               // Error 100
   --warningColor: #cb8100;                     // Warning 600
   --warningColorDarkest: #281c07;              // Warning 900
@@ -83,6 +84,7 @@ html {
   --secondaryTextColor: rgba(255, 255, 255, .64);
   --errorColor: #fff;
   --errorColorDarkest: #fff;
+  --errorColorLight: #ffd3d3;          // Error 200
   --errorColorLightest: #f96b6b;       // Error 500
   --warningColor: #fff;
   --warningColorDarkest: #fff;

src/cozy/_forms.scss

@@ -70,6 +70,7 @@
     position: absolute;
     top: 1rem;
     left: .75rem;
+    z-index: 3; // needed for input-group
     padding: 0 .25rem;
     pointer-events: none;
     background-color: var(--paperBackgroundColor);

src/cozy/_validation.scss

@@ -13,7 +13,8 @@
 }
 
 .is-invalid ~ .invalid-tooltip {
-  display: block;
+  display: inline-flex;
+  align-items: center;
 }
 
 .invalid-tooltip .tooltip-arrow {
@@ -34,3 +35,12 @@
     border-bottom-color: var(--errorColorLightest);
   }
 }
+
+.invalid-tooltip .icon {
+  margin: .25rem .375rem .25rem 0;
+}
+
+.input-group .invalid-tooltip {
+  flex-basis: 100%;
+  max-width: 100%;
+}

src/cozy/_variables.scss

@@ -54,6 +54,8 @@ $form-floating-input-padding-t: 1rem;
 $form-floating-input-padding-b: 1rem;
 $form-floating-label-transform: scale(.8) translateY(-2rem) translateX(.15rem);
 
+$form-feedback-tooltip-font-size: .75rem;
+
 // Buttons
 $btn-padding-x: 1rem;
 $btn-padding-y: .688rem;