Add valid tooltip

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>

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