From b2b0e8fa99a6832134c66625e9760b92ac7c9f3f Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Wed, 11 Mar 2020 09:19:50 +0900
Subject: [PATCH] Add valid tooltip

---
 docs/content/components/forms.md |  4 ++--
 src/forms/form-group.scss        | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md
index 8f557ba9..58a1cfbc 100644
--- a/docs/content/components/forms.md
+++ b/docs/content/components/forms.md
@@ -227,8 +227,8 @@ Convey success, errors and warnings for form groups.
 If the input is **valid**, add the `.successful` class to the `<div class="form-group">` element. Next add/update a success message to the `<div>` under the input, as well as the `.success` class.
 
 ```html live
-<form>
-  <div class="form-group successful">
+<form class="pb-6">
+  <div class="form-group valid">
     <div class="form-group-header">
       <label for="unsername-input">Username</label>
     </div>
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index 4ca89f77..fb4370e8 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -142,8 +142,10 @@
   //
   // Our inline errors
 
+  &.valid,
   &.warn,
   &.errored {
+    .success,
     .warning,
     .error {
       position: absolute;
@@ -188,6 +190,25 @@
     }
   }
 
+  &.valid {
+    .success {
+      // stylelint-disable-next-line primer/colors
+      color: $green-900;
+      // stylelint-disable-next-line primer/colors
+      background-color: $green-100;
+      border-color: $border-green;
+
+      &::after {
+        // stylelint-disable-next-line primer/borders
+        border-bottom-color: $green-100;
+      }
+
+      &::before {
+        border-bottom-color: $border-green;
+      }
+    }
+  }
+
   &.warn {
     .warning {
       // stylelint-disable-next-line primer/colors