feat(field): add inline label (#834)

ref: MANAGER-12722 Signed-off-by: Quentin Pavy <[email protected]>
ovh · Dec 14, 2023 · de558d3 · de558d3
1 parent 7b48892
commit de558d3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/packages/components/field/src/js/field.component.js b/packages/components/field/src/js/field.component.js
@@ -9,6 +9,7 @@ export default {
     errorMessages: '<?',
     labelPopover: '@?',
     forceErrorDisplay: '<?',
+    inline: '<?',
   },
   controller,
   require: {

diff --git a/packages/components/field/src/js/field.html b/packages/components/field/src/js/field.html
@@ -1,6 +1,7 @@
 <div class="oui-field"
     ng-class="[
         { 'oui-field_error': $ctrl.isErrorVisible() },
+        { 'oui-field_inline': $ctrl.inline },
         (!!$ctrl.size && 'oui-field_' + $ctrl.size),
     ]">
     <div class="oui-field__header"

diff --git a/packages/components/field/src/less/field.less b/packages/components/field/src/less/field.less
@@ -8,6 +8,17 @@
     margin-bottom: @oui-field-header-spacing;
   }
 
+  &_inline {
+    .oui-field__header {
+      display: inline-flex;
+      margin-right: 1rem;
+    }
+
+    .oui-field__control {
+      display: inline-block;
+    }
+  }
+
   &__label {
     display: inline-block;
     margin: 0;