Revert back LabeledValue changes to role inputs5.0/fix-labeled-value-layout

Current LabeledValue always adds label/value classes, which caused
alignment issues to role inputs. As the label col is also an input, it's
not quite appropriate to use LabeledValue there.

2 files changed, 76 insertions, 26 deletions

diff --git a/share/html/Asset/Elements/AddCatalogPeople b/share/html/Asset/Elements/AddCatalogPeople
index 476684017c..50d549ed04 100644
--- a/share/html/Asset/Elements/AddCatalogPeople
+++ b/share/html/Asset/Elements/AddCatalogPeople
@@ -50,24 +50,34 @@ $Object
 </%args>
 <div class="add-user">
   <h3><&|/l&>Add a person</&></h3>
-  <&| /Elements/LabeledValue, RawLabel =>  $m->scomp('SelectRoleType', Object => $Object, Name => "AddUserRoleMember-Role") &>
+  <div class="form-row">
+    <div class="col-3">
+      <& SelectRoleType, Object => $Object, Name => "AddUserRoleMember-Role" &>
+    </div>
+    <div class="col-9">
       <input type="text" name="AddUserRoleMember"
         data-autocomplete="Users"
         data-autocomplete-return="Name"
         placeholder="<% loc("Find a user...") %>"
         class="form-control"
       >
-  </&>
+    </div>
+  </div>
 </div>
 
 <div class="add-group">
   <h3><&|/l&>Add a group</&></h3>
-    <&| /Elements/LabeledValue, RawLabel =>  $m->scomp('SelectRoleType', Object => $Object, Name => "AddGroupRoleMember-Role") &>
+  <div class="form-row">
+    <div class="col-3">
+      <& SelectRoleType, Object => $Object, Name => "AddGroupRoleMember-Role" &>
+    </div>
+    <div class="col-9">
       <input type="text" name="AddGroupRoleMember"
         data-autocomplete="Groups"
         data-autocomplete-return="Name"
         placeholder="<% loc("Find a group...") %>"
         class="form-control"
       >
-    </&>
+    </div>
+  </div>
 </div>
diff --git a/share/html/Ticket/Elements/AddWatchers b/share/html/Ticket/Elements/AddWatchers
index 8bc64a974f..19b375ad47 100644
--- a/share/html/Ticket/Elements/AddWatchers
+++ b/share/html/Ticket/Elements/AddWatchers
@@ -53,49 +53,89 @@
 % }
 
 % if ($Users and $Users->Count) {
-  <& /Elements/LabeledValue, Label => loc("Type"), Value => loc("Username") &>
-
+  <div class="form-row">
+    <div class="col-3">
+      <&|/l&>Type</&>
+    </div>
+    <div class="col-9">
+      <&|/l&>Username</&>
+    </div>
+  </div>
 % while (my $u = $Users->Next ) {
-    <&| /Elements/LabeledValue, RawLabel =>  $m->scomp("/Elements/SelectWatcherType",
+  <div class="form-row">
+    <div class="col-3">
+      <&/Elements/SelectWatcherType,
         Name  => "Ticket-AddWatcher-Principal-". $u->PrincipalId,
-        Queue => $Ticket->QueueObj),
-        ValueSpanClass => "current-value"
+        Queue => $Ticket->QueueObj,
       &>
-      <& '/Elements/ShowUser', User => $u, style=>'verbose' &>
-  </&>
+    </div>
+    <div class="col-9">
+      <span class="form-control current-value">
+        <& '/Elements/ShowUser', User => $u, style=>'verbose' &>
+      </span>
+    </div>
+  </div>
 % }
 % }
 
 % if ($Groups and $Groups->Count) {
-  <& /Elements/LabeledValue, Label => loc("Type"), Value => loc("Group") &>
+  <div class="form-row">
+    <div class="col-3">
+      <&|/l&>Type</&>
+    </div>
+    <div class="col-9">
+      <&|/l&>Group</&>
+    </div>
+  </div>
 % while (my $g = $Groups->Next ) {
-    <&| /Elements/LabeledValue, RawLabel =>  $m->scomp("/Elements/SelectWatcherType",
+  <div class="form-row">
+    <div class="col-3">
+      <& /Elements/SelectWatcherType,
         Name  => "Ticket-AddWatcher-Principal-".$g->PrincipalId,
-        Queue => $Ticket->QueueObj),
-        ValueSpanClass => "current-value"
+        Queue => $Ticket->QueueObj,
       &>
+    </div>
+    <div class="col-9">
+      <span class="form-control current-value">
         <%$g->Name%> (<%$g->Description%>)
-    </&>
+      </span>
+    </div>
+  </div>
 % }
 % }
 
-  <& /Elements/LabeledValue, Label => loc("Type"), Value => loc("User or Group") &>
-
+  <div class="form-row">
+    <div class="col-3">
+      <&|/l&>Type</&>
+    </div>
+    <div class="col-9">
+      <&|/l&>User or Group</&>
+    </div>
+  </div>
 % my $counter = 4;
 % for my $email (@extras) {
 % $counter++;
-  <&| /Elements/LabeledValue,
-    RawLabel => $m->scomp('/Elements/SelectWatcherType', Name => "WatcherTypeEmail".$counter, Queue => $Ticket->QueueObj),
-    ValueSpanClass => 'current-value' &>
+  <div class="form-row">
+    <div class="col-3">
+      <&/Elements/SelectWatcherType, Name => "WatcherTypeEmail".$counter, Queue => $Ticket->QueueObj &>
+    </div>
+    <div class="col-9">
       <input type="hidden" name="WatcherAddressEmail<%$counter%>" value="<%$email->format%>">
-      <%$email->format%>
-  </&>
+      <span class="form-control current-value">
+        <%$email->format%>
+      </span>
+    </div>
+  </div>
 % }
 % for my $i (1 .. 3) {
-    <&| /Elements/LabeledValue,
-    RawLabel => $m->scomp('/Elements/SelectWatcherType', Name => "WatcherTypeEmail".$i, Queue => $Ticket->QueueObj) &>
+  <div class="form-row">
+    <div class="col-3">
+      <&/Elements/SelectWatcherType, Name => "WatcherTypeEmail" . $i, Queue => $Ticket->QueueObj &>
+    </div>
+    <div class="col-6">
       <& /Elements/EmailInput, Name => 'WatcherAddressEmail' . $i, Size => '20', AutocompleteType => 'Principals' &>
-  </&>
+    </div>
+  </div>
 % }
 
 <%INIT>