➕ Add catch valid color and invalid color classname missing catch

fluid-framework · Mar 13, 2021 · 89233cf · 89233cf
1 parent 336eaed
commit 89233cf
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 54 deletions.
diff --git a/src/components/_control.scss b/src/components/_control.scss
@@ -14,57 +14,59 @@
     margin-bottom: 0;
   }
 
-  //
-  // feedback inside control
-  //
-  .control > .feedback {
-    position: absolute;
-    right: 0;
-    bottom: 100%;
-    display: none;
-    padding: $control-feedback-padding;
-    margin-bottom: $control-feedback-arrow-size + $control-feedback-offset-bottom;
-    border-radius: border-radius();
-    color: $control-feedback-color;
-    box-shadow: box-shadow($control-feedback-shadow);
-    @include gradient-background($control-feedback-background, 180deg);
-
-    @include before {
-      content: "";
+  @if $control-valid-classname and $control-error-classname {
+    //
+    // feedback inside control
+    //
+    .control > .feedback {
       position: absolute;
-      top: 100%;
-      right: $control-feedback-arrow-offset-right;
-      @include triangle(bottom, $control-feedback-arrow-size, $control-feedback-background);
+      right: 0;
+      bottom: 100%;
+      display: none;
+      padding: $control-feedback-padding;
+      margin-bottom: $control-feedback-arrow-size + $control-feedback-offset-bottom;
+      border-radius: border-radius();
+      color: $control-feedback-color;
+      box-shadow: box-shadow($control-feedback-shadow);
+      @include gradient-background($control-feedback-background, 180deg);
+
+      @include before {
+        content: "";
+        position: absolute;
+        top: 100%;
+        right: $control-feedback-arrow-offset-right;
+        @include triangle(bottom, $control-feedback-arrow-size, $control-feedback-background);
+      }
     }
-  }
 
-  .control.is-valid > .feedback.is-valid {
-    @extend %display-block;
-  }
+    .control.is-#{$control-valid-classname} > .feedback.is-#{$control-valid-classname} {
+      @extend %display-block;
+    }
 
-  .control.is-error > .feedback.is-error {
-    @extend %display-block;
-  }
+    .control.is-#{$control-error-classname} > .feedback.is-#{$control-error-classname} {
+      @extend %display-block;
+    }
 
-  .is-validated .control {
-    > .file:required,
-    > .input:required {
-      &:valid ~ .feedback.is-valid {
-        @extend %display-block;
-      }
+    .is-validated .control {
+      > .file:required,
+      > .input:required {
+        &:valid ~ .feedback.is-#{$control-valid-classname} {
+          @extend %display-block;
+        }
 
-      &:invalid ~ .feedback.is-error {
-        @extend %display-block;
+        &:invalid ~ .feedback.is-#{$control-error-classname} {
+          @extend %display-block;
+        }
       }
-    }
 
-    > input[type="checkbox"]:required {
-      &:checked ~ .feedback.is-valid {
-        @extend %display-block;
-      }
+      > input[type="checkbox"]:required {
+        &:checked ~ .feedback.is-#{$control-valid-classname} {
+          @extend %display-block;
+        }
 
-      &:not(:checked) ~ .feedback.is-error {
-        @extend %display-block;
+        &:not(:checked) ~ .feedback.is-#{$control-error-classname} {
+          @extend %display-block;
+        }
       }
     }
   }

diff --git a/src/components/_file.scss b/src/components/_file.scss
@@ -77,14 +77,18 @@
 
   // form validation style
   .is-validated .file:required {
-    &:valid ~ .input.label {
-      @extend .input.is-valid;
-      @extend .input.is-valid.has-icon;
+    @if $input-valid-classname {
+      &:valid ~ .input.label {
+        @extend .input.is-#{$input-valid-classname};
+        @extend .input.is-#{$input-valid-classname}.has-icon;
+      }
     }
 
-    &:invalid ~ .input.label {
-      @extend .input.is-error;
-      @extend .input.is-error.has-icon;
+    @if $input-error-classname {
+      &:invalid ~ .input.label {
+        @extend .input.is-#{$input-error-classname};
+        @extend .input.is-#{$input-error-classname}.has-icon;
+      }
     }
   }
 }
diff --git a/src/components/_input.scss b/src/components/_input.scss
@@ -88,14 +88,18 @@
 
   // form validation style
   .is-validated .input:required {
-    &:valid {
-      @extend .input.is-valid;
-      @extend .input.is-valid.has-icon;
+    @if $input-valid-classname {
+      &:valid {
+        @extend .input.is-#{$input-valid-classname};
+        @extend .input.is-#{$input-valid-classname}.has-icon;
+      }
     }
 
-    &:invalid {
-      @extend .input.is-error;
-      @extend .input.is-error.has-icon;
+    @if $input-error-classname {
+      &:invalid {
+        @extend .input.is-#{$input-error-classname};
+        @extend .input.is-#{$input-error-classname}.has-icon;
+      }
     }
   }
 

diff --git a/src/settings/components/_control.scss b/src/settings/components/_control.scss
@@ -2,6 +2,12 @@
 // Control
 //
 
+//
+// Inherit
+//
+$control-valid-classname:                          $valid-classname !default;
+$control-error-classname:                          $error-classname !default;
+
 //
 // Setting
 //

diff --git a/src/settings/components/_input.scss b/src/settings/components/_input.scss
@@ -5,6 +5,9 @@
 //
 // Inherit
 //
+$input-valid-classname:                          $valid-classname !default;
+$input-error-classname:                          $error-classname !default;
+
 $label-marginbottom:                             $space-typography !default;
 
 //

diff --git a/src/settings/theme/_color.scss b/src/settings/theme/_color.scss
@@ -91,3 +91,14 @@ $theme-colors: (
 @if $enable-all-color-variant {
   $theme-colors: map-merge($colors, $theme-colors);
 }
+
+$valid-classname:            if(map-get($theme-colors, "valid"), "valid", false) !default;
+$error-classname:            if(map-get($theme-colors, "error"), "error", false) !default;
+
+@if $valid-classname == false {
+  @warn "Valid ClassName Not Found";
+}
+
+@if $error-classname == false {
+  @warn "Error ClassName Not Found";
+}