Give its own class to inner far side container (#76)

CHANGELOG.md

@@ -1,12 +1,16 @@
 # CHANGELOG
+## v6.2.3
+### Fixed
+- Add the far side container of the form field label only if a far side item is present. 
+- Update styles of far side container of form field label.
 
 ## v6.2.2
 ### Added
- - Added ability to include an extra node to the far side of the label in form fields.
+- Added ability to include an extra node to the far side of the label in form fields.
 
 ## v6.2.1
 ### Fixed
- - BUG 4445327: Masthead: hover color regression on action buttons
+- BUG 4445327: Masthead: hover color regression on action buttons
 
 ## v6.2.0
 - Refactor component styling logic using ThemeProvider in styled component library.

lib/components/Field/Field.module.scss

@@ -63,9 +63,15 @@ $line-height: 5*$grid-size;
     }
 }
 
+.label-farSide-container {
+    @include md-box(flex-row);
+    align-items: flex-end;
+}
+
 .label-inner-container {
     @include md-box(flex-row);
     align-items: flex-end;
+    flex: 1;
 }
 
 .field-error {

lib/components/Field/FormLabel.tsx

@@ -11,6 +11,7 @@ export interface FormLabelType {}
 export interface FormLabelAttributes {
     container?: DivProps;
     innerContainer?: DivProps;
+    farSideContainer?: DivProps;
     text?: LabelProps;
     icon?: IconAttributes;
     balloon?: BalloonAttributes;
@@ -118,11 +119,11 @@ export const FormLabel: React.StatelessComponent<FormLabelProps> = (props: FormL
                 </Attr.label>
                 {balloon}
             </Attr.div>
-            <Attr.div
-                className={css('label-inner-container')}
-                attr={props.attr.innerContainer}>
+            {props.farSide && <Attr.div
+                className={css('label-farSide-container')}
+                attr={props.attr.farSideContainer}>
                 {props.farSide}
-            </Attr.div>
+            </Attr.div>}
         </Attr.div>
     );
 };

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "6.2.2",
+    "version": "6.2.3",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",