fix(form): support inline fields group label for required attribute

A required Inline fields label does not get an asterisk and does not get a state color To fix the state color i had to make use of the :has() class selector. This isnt supported by all browsers, so in those browsers this feature wont work. I also fixed positioning of fields when an empty label is used
fomantic · Mar 2, 2023 · e275dcb · e275dcb
1 parent 5da44d8
commit e275dcb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/definitions/behaviors/form.js b/src/definitions/behaviors/form.js
@@ -643,7 +643,7 @@
                         var $field = typeof identifier === 'string'
                                 ? module.get.field(identifier)
                                 : identifier,
-                            $label = $field.closest(selector.group).find('label').eq(0)
+                            $label = $field.closest(selector.group).find('label:not(:empty)').eq(0)
                         ;
 
                         return $label.length === 1

diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -527,6 +527,11 @@
             color: @c;
         }
 
+        // needs separate selector because not supported by every browser
+        .ui.form .fields:has(.@{state}) > label {
+            color: @c;
+        }
+
         .ui.form .fields.@{state} .field .ui.label,
         .ui.form .field.@{state} .ui.label {
             background-color: @lbg;
@@ -729,6 +734,11 @@
             .ui.inverted.form .@{state}.field label {
                 color: @lbg;
             }
+
+            // needs separate selector because not supported by every browser
+            .ui.inverted.form .fields:has(.@{state}) > label {
+                color: @lbg;
+            }
         }
     });
 }
@@ -804,33 +814,41 @@
          Required Field
     --------------------- */
 
-    .ui.form .required.fields:not(.grouped) > .field > label::after,
+    .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after,
+    .ui.form .required.fields.inline > label::after,
     .ui.form .required.fields.grouped > label::after,
     .ui.form .required.field > label::after,
-    .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+    .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after,
     .ui.form .required.field > .checkbox::after,
     .ui.form label.required::after {
         margin: @requiredMargin;
         content: @requiredContent;
         color: @requiredColor;
     }
 
-    .ui.form .required.fields:not(.grouped) > .field > label::after,
+    .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after,
+    .ui.form .required.fields.inline > label::after,
     .ui.form .required.fields.grouped > label::after,
     .ui.form .required.field > label::after,
     .ui.form label.required::after {
         display: inline-block;
         vertical-align: top;
     }
 
-    .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+    .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after,
     .ui.form .required.field > .checkbox::after {
         position: absolute;
         top: 0;
         left: 100%;
     }
 }
 
+.ui.ui.ui.ui.form .fields > label:empty::after,
+.ui.ui.ui.ui.form .field > label:empty::after {
+    content: " ";
+    display: inline-block;
+}
+
 /*******************************
            Variations
 *******************************/