Add "kv-" prefix to internal CSS classes with !important flag (#545)

rjaros · Dec 1, 2024 · 47978ae · 47978ae
1 parent a19d1fb
commit 47978ae
Show file tree

Hide file tree

Showing 28 changed files with 51 additions and 42 deletions.
diff --git a/kvision-assets/src/css/style.css b/kvision-assets/src/css/style.css
@@ -1,32 +1,32 @@
-.text-justify {
+.kv-text-justify {
     text-align: justify !important;
 }
 
-.text-left {
+.kv-text-left {
     text-align: left !important;
 }
 
-.text-start {
-    text-align: left !important;
+.kv-text-start {
+    text-align: start !important;
 }
 
-.text-right {
+.kv-text-right {
     text-align: right !important;
 }
 
-.text-end {
-    text-align: right !important;
+.kv-text-end {
+    text-align: end !important;
 }
 
-.text-center {
+.kv-text-center {
     text-align: center !important;
 }
 
-.text-nowrap {
+.kv-text-nowrap {
     white-space: nowrap !important;
 }
 
-.text-danger {
+.kv-text-danger {
     color: var(--bs-danger, #dc3545) !important;
 }
 
@@ -810,6 +810,12 @@ label.required-label + ons-input > span.text-input__label::after {
     border-top: 1px solid #888888;
 }
 
+.ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-control-sm .ts-control {
+    padding-left: 0.5rem;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
 .toastify {
     background-image: unset;
     background-color: blue;

diff --git a/...ules/kvision-bootstrap-upload/src/jsMain/kotlin/io/kvision/form/upload/BootstrapUpload.kt b/...ules/kvision-bootstrap-upload/src/jsMain/kotlin/io/kvision/form/upload/BootstrapUpload.kt
@@ -255,7 +255,7 @@ open class BootstrapUpload(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-datetime/src/jsMain/kotlin/io/kvision/form/time/DateTime.kt b/kvision-modules/kvision-datetime/src/jsMain/kotlin/io/kvision/form/time/DateTime.kt
@@ -319,7 +319,7 @@ open class DateTime(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-datetime/src/jsTest/kotlin/test/io/kvision/form/time/DateTimeSpec.kt b/kvision-modules/kvision-datetime/src/jsTest/kotlin/test/io/kvision/form/time/DateTimeSpec.kt
@@ -61,7 +61,7 @@ class DateTimeSpec : DomSpec {
             )
             ti.validatorError = "Validation Error"
             assertEqualsHtml(
-                "<div class=\"form-group kv-mb-3 text-danger\"><label class=\"form-label\" for=\"${id}_input\">Label</label><div class=\"input-group date is-invalid\" data-td-target-input=\"nearest\" data-td-target-toggle=\"nearest\" id=\"$id\"><input class=\"form-control is-invalid\" data-td-target=\"#$id\" id=\"${id}_input\" placeholder=\"place\" name=\"name\" disabled=\"disabled\" type=\"text\" value=\"$datastr\"><span class=\"input-group-text\" data-td-target=\"#$id\" data-td-toggle=\"datetimepicker\"><span class=\"fas fa-calendar-alt\"></span></span></div><div class=\"invalid-feedback\">Validation Error</div></div>",
+                "<div class=\"form-group kv-mb-3 kv-text-danger\"><label class=\"form-label\" for=\"${id}_input\">Label</label><div class=\"input-group date is-invalid\" data-td-target-input=\"nearest\" data-td-target-toggle=\"nearest\" id=\"$id\"><input class=\"form-control is-invalid\" data-td-target=\"#$id\" id=\"${id}_input\" placeholder=\"place\" name=\"name\" disabled=\"disabled\" type=\"text\" value=\"$datastr\"><span class=\"input-group-text\" data-td-target=\"#$id\" data-td-toggle=\"datetimepicker\"><span class=\"fas fa-calendar-alt\"></span></span></div><div class=\"invalid-feedback\">Validation Error</div></div>",
                 element?.innerHTML,
                 "Should render correct date time input form control with validation error"
             )

diff --git a/kvision-modules/kvision-imask/src/jsMain/kotlin/io/kvision/form/number/ImaskNumeric.kt b/kvision-modules/kvision-imask/src/jsMain/kotlin/io/kvision/form/number/ImaskNumeric.kt
@@ -237,7 +237,7 @@ open class ImaskNumeric(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsCheckBox.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsCheckBox.kt
@@ -120,7 +120,7 @@ open class OnsCheckBox(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsDateTime.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsDateTime.kt
@@ -184,7 +184,7 @@ open class OnsDateTime(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsNumber.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsNumber.kt
@@ -212,7 +212,7 @@ open class OnsNumber(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadio.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadio.kt
@@ -133,7 +133,7 @@ open class OnsRadio(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadioGroup.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRadioGroup.kt
@@ -157,7 +157,7 @@ open class OnsRadioGroup(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRange.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsRange.kt
@@ -171,7 +171,7 @@ open class OnsRange(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSelect.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSelect.kt
@@ -176,7 +176,7 @@ open class OnsSelect(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSwitch.kt b/kvision-modules/kvision-onsenui/src/jsMain/kotlin/io/kvision/onsenui/form/OnsSwitch.kt
@@ -121,7 +121,7 @@ open class OnsSwitch(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/...on-modules/kvision-select-remote/src/jsMain/kotlin/io/kvision/form/select/SelectRemote.kt b/...on-modules/kvision-select-remote/src/jsMain/kotlin/io/kvision/form/select/SelectRemote.kt
@@ -164,7 +164,7 @@ open class SelectRemote<out T : Any>(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/...les/kvision-tom-select-remote/src/jsMain/kotlin/io/kvision/form/select/TomSelectRemote.kt b/...les/kvision-tom-select-remote/src/jsMain/kotlin/io/kvision/form/select/TomSelectRemote.kt
@@ -209,7 +209,7 @@ open class TomSelectRemote<out T : Any>(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/kvision-modules/kvision-tom-select/src/jsMain/kotlin/io/kvision/form/select/TomSelect.kt b/kvision-modules/kvision-tom-select/src/jsMain/kotlin/io/kvision/form/select/TomSelect.kt
@@ -206,7 +206,7 @@ open class TomSelect(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/check/CheckBox.kt b/src/jsMain/kotlin/io/kvision/form/check/CheckBox.kt
@@ -187,7 +187,7 @@ open class CheckBox(
             classSetBuilder.add("form-check-reverse")
         }
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/check/GenericRadioGroup.kt b/src/jsMain/kotlin/io/kvision/form/check/GenericRadioGroup.kt
@@ -161,7 +161,7 @@ open class GenericRadioGroup<T>(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
         if (inline) {
             classSetBuilder.add("kv-radiogroup-inline")

diff --git a/src/jsMain/kotlin/io/kvision/form/check/Radio.kt b/src/jsMain/kotlin/io/kvision/form/check/Radio.kt
@@ -188,7 +188,7 @@ open class Radio(
             classSetBuilder.add("form-check-reverse")
         }
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/check/TriStateCheckBox.kt b/src/jsMain/kotlin/io/kvision/form/check/TriStateCheckBox.kt
@@ -198,7 +198,7 @@ open class TriStateCheckBox(
             classSetBuilder.add("form-check-reverse")
         }
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/number/Numeric.kt b/src/jsMain/kotlin/io/kvision/form/number/Numeric.kt
@@ -195,7 +195,7 @@ open class Numeric(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/number/Range.kt b/src/jsMain/kotlin/io/kvision/form/number/Range.kt
@@ -167,7 +167,7 @@ open class Range(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/number/Spinner.kt b/src/jsMain/kotlin/io/kvision/form/number/Spinner.kt
@@ -183,7 +183,7 @@ open class Spinner(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/select/Select.kt b/src/jsMain/kotlin/io/kvision/form/select/Select.kt
@@ -194,7 +194,7 @@ open class Select(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/text/AbstractText.kt b/src/jsMain/kotlin/io/kvision/form/text/AbstractText.kt
@@ -171,7 +171,7 @@ abstract class AbstractText(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/form/upload/Upload.kt b/src/jsMain/kotlin/io/kvision/form/upload/Upload.kt
@@ -158,7 +158,7 @@ open class Upload(
     override fun buildClassSet(classSetBuilder: ClassSetBuilder) {
         super.buildClassSet(classSetBuilder)
         if (validatorError != null) {
-            classSetBuilder.add("text-danger")
+            classSetBuilder.add("kv-text-danger")
         }
     }
 

diff --git a/src/jsMain/kotlin/io/kvision/html/Tag.kt b/src/jsMain/kotlin/io/kvision/html/Tag.kt
@@ -158,11 +158,14 @@ enum class TAG(internal val tagName: String) {
  * CSS align attributes.
  */
 enum class Align(override val className: String) : CssClass {
-    LEFT("text-start"),
-    CENTER("text-center"),
-    RIGHT("text-end"),
-    WRAP("text-wrap"),
-    NOWRAP("text-nowrap")
+    LEFT("kv-text-left"),
+    START("kv-text-start"),
+    CENTER("kv-text-center"),
+    RIGHT("kv-text-right"),
+    END("kv-text-end"),
+    WRAP("kv-text-wrap"),
+    NOWRAP("kv-text-nowrap"),
+    JUSTIFY("kv-text-justify"),
 }
 
 /**

diff --git a/src/jsTest/kotlin/test/io/kvision/form/text/TextSpec.kt b/src/jsTest/kotlin/test/io/kvision/form/text/TextSpec.kt
@@ -49,11 +49,11 @@ class TextSpec : DomSpec {
             )
             ti.validatorError = "Validation Error"
             assertEqualsHtml(
-                "<div class=\"form-group kv-mb-3 text-danger\"><label class=\"form-label\" for=\"$id\">Label</label><input class=\"form-control is-invalid\" id=\"$id\" placeholder=\"place\" name=\"name\" maxlength=\"15\" disabled=\"disabled\" type=\"text\" value=\"abc\"><div class=\"invalid-feedback\">Validation Error</div></div>",
+                "<div class=\"form-group kv-mb-3 kv-text-danger\"><label class=\"form-label\" for=\"$id\">Label</label><input class=\"form-control is-invalid\" id=\"$id\" placeholder=\"place\" name=\"name\" maxlength=\"15\" disabled=\"disabled\" type=\"text\" value=\"abc\"><div class=\"invalid-feedback\">Validation Error</div></div>",
                 element?.innerHTML,
                 "Should render correct input form control with validation error"
             )
         }
     }
 
-}
+}