Port the bulk of Ticket to LabeledValue

13 files changed, 124 insertions, 287 deletions

diff --git a/share/html/Ticket/Create.html b/share/html/Ticket/Create.html
index 6af9f0bee7..9b18caae3b 100644
--- a/share/html/Ticket/Create.html
+++ b/share/html/Ticket/Create.html
@@ -258,40 +258,33 @@
                 title_class=> 'inverse',  
                 color => "#993333" &>
 <div>
-
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Priority</&>:</div>
-  <div class="value col-9"><& /Elements/SelectPriority,
+<&| /Elements/LabeledValue, Label => loc('Priority') &>
+    <& /Elements/SelectPriority,
       Name => "InitialPriority",
       Default => $ARGS{InitialPriority} ? $ARGS{InitialPriority} : $QueueObj->DefaultValue('InitialPriority'),
       QueueObj => $QueueObj,
-  &></div>
-</div>
+  &>
+</&>
 
-<div class="form-row FinalPriority">
-  <div class="label col-3"><&|/l&>Final Priority</&>:</div>
-  <div class="value col-9"><& /Elements/SelectPriority,
+<&| /Elements/LabeledValue, Label => loc('Final Priority'), Class => 'FinalPriority' &>
+<& /Elements/SelectPriority,
     Name => "FinalPriority",
     Default => $ARGS{FinalPriority} ? $ARGS{FinalPriority} : $QueueObj->DefaultValue('FinalPriority'),
     QueueObj => $QueueObj,
-  &></div>
-</div>
+  &>
+</&>
 
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Time Estimated</&>:</div>
-  <div class="value col-9"><& /Elements/EditTimeValue, Name => 'TimeEstimated', Default => $ARGS{TimeEstimated} || '' &></div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Time Estimated') &>
+    <& /Elements/EditTimeValue, Name => 'TimeEstimated', Default => $ARGS{TimeEstimated} || '' &>
+</&>
 
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Time Worked</&>:</div>
-  <div class="value col-9"><& /Elements/EditTimeValue, Name => 'TimeWorked', Default => $ARGS{TimeWorked} || '' &></div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Time Worked') &>
+<& /Elements/EditTimeValue, Name => 'TimeWorked', Default => $ARGS{TimeWorked} || '' &>
+</&>
 
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Time Left</&>:</div>
-  <div class="value col-9"><& /Elements/EditTimeValue, Name => 'TimeLeft', Default => $ARGS{TimeLeft} || '' &></div>
-</div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Time Left') &>
+  <& /Elements/EditTimeValue, Name => 'TimeLeft', Default => $ARGS{TimeLeft} || '' &>
+</&>
 </&>
 
 <div class="ticket-info-dates">
@@ -300,14 +293,13 @@
   color => "#663366" &>
 
 <div>
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Starts</&>:</div>
-  <div class="value col-9"><& /Elements/SelectDate, Name => "Starts", Default => $ARGS{Starts} || $QueueObj->DefaultValue('Starts') || '' &></div>
-</div>
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Due</&>:</div>
-  <div class="value col-9"><& /Elements/SelectDate, Name => "Due", Default => $ARGS{Due} || $QueueObj->DefaultValue('Due') || '' &></div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Starts') &>
+    <& /Elements/SelectDate, Name => "Starts", Default => $ARGS{Starts} || $QueueObj->DefaultValue('Starts') || '' &>
+</&>
+
+<&| /Elements/LabeledValue, Label => loc('Due') &>
+    <& /Elements/SelectDate, Name => "Due", Default => $ARGS{Due} || $QueueObj->DefaultValue('Due') || '' &>
+</&>
 <& /Elements/EditCustomFields,
     %ARGS,
     Object => $ticket,
diff --git a/share/html/Ticket/Elements/AddWatchers b/share/html/Ticket/Elements/AddWatchers
index 19b375ad47..8bc64a974f 100644
--- a/share/html/Ticket/Elements/AddWatchers
+++ b/share/html/Ticket/Elements/AddWatchers
@@ -53,89 +53,49 @@
 % }
 
 % if ($Users and $Users->Count) {
-  <div class="form-row">
-    <div class="col-3">
-      <&|/l&>Type</&>
-    </div>
-    <div class="col-9">
-      <&|/l&>Username</&>
-    </div>
-  </div>
+  <& /Elements/LabeledValue, Label => loc("Type"), Value => loc("Username") &>
+
 % while (my $u = $Users->Next ) {
-  <div class="form-row">
-    <div class="col-3">
-      <&/Elements/SelectWatcherType,
+    <&| /Elements/LabeledValue, RawLabel =>  $m->scomp("/Elements/SelectWatcherType",
         Name  => "Ticket-AddWatcher-Principal-". $u->PrincipalId,
-        Queue => $Ticket->QueueObj,
+        Queue => $Ticket->QueueObj),
+        ValueSpanClass => "current-value"
       &>
-    </div>
-    <div class="col-9">
-      <span class="form-control current-value">
-        <& '/Elements/ShowUser', User => $u, style=>'verbose' &>
-      </span>
-    </div>
-  </div>
+      <& '/Elements/ShowUser', User => $u, style=>'verbose' &>
+  </&>
 % }
 % }
 
 % if ($Groups and $Groups->Count) {
-  <div class="form-row">
-    <div class="col-3">
-      <&|/l&>Type</&>
-    </div>
-    <div class="col-9">
-      <&|/l&>Group</&>
-    </div>
-  </div>
+  <& /Elements/LabeledValue, Label => loc("Type"), Value => loc("Group") &>
 % while (my $g = $Groups->Next ) {
-  <div class="form-row">
-    <div class="col-3">
-      <& /Elements/SelectWatcherType,
+    <&| /Elements/LabeledValue, RawLabel =>  $m->scomp("/Elements/SelectWatcherType",
         Name  => "Ticket-AddWatcher-Principal-".$g->PrincipalId,
-        Queue => $Ticket->QueueObj,
+        Queue => $Ticket->QueueObj),
+        ValueSpanClass => "current-value"
       &>
-    </div>
-    <div class="col-9">
-      <span class="form-control current-value">
         <%$g->Name%> (<%$g->Description%>)
-      </span>
-    </div>
-  </div>
+    </&>
 % }
 % }
 
-  <div class="form-row">
-    <div class="col-3">
-      <&|/l&>Type</&>
-    </div>
-    <div class="col-9">
-      <&|/l&>User or Group</&>
-    </div>
-  </div>
+  <& /Elements/LabeledValue, Label => loc("Type"), Value => loc("User or Group") &>
+
 % my $counter = 4;
 % for my $email (@extras) {
 % $counter++;
-  <div class="form-row">
-    <div class="col-3">
-      <&/Elements/SelectWatcherType, Name => "WatcherTypeEmail".$counter, Queue => $Ticket->QueueObj &>
-    </div>
-    <div class="col-9">
+  <&| /Elements/LabeledValue,
+    RawLabel => $m->scomp('/Elements/SelectWatcherType', Name => "WatcherTypeEmail".$counter, Queue => $Ticket->QueueObj),
+    ValueSpanClass => 'current-value' &>
       <input type="hidden" name="WatcherAddressEmail<%$counter%>" value="<%$email->format%>">
-      <span class="form-control current-value">
-        <%$email->format%>
-      </span>
-    </div>
-  </div>
+      <%$email->format%>
+  </&>
 % }
 % for my $i (1 .. 3) {
-  <div class="form-row">
-    <div class="col-3">
-      <&/Elements/SelectWatcherType, Name => "WatcherTypeEmail" . $i, Queue => $Ticket->QueueObj &>
-    </div>
-    <div class="col-6">
+    <&| /Elements/LabeledValue,
+    RawLabel => $m->scomp('/Elements/SelectWatcherType', Name => "WatcherTypeEmail".$i, Queue => $Ticket->QueueObj) &>
       <& /Elements/EmailInput, Name => 'WatcherAddressEmail' . $i, Size => '20', AutocompleteType => 'Principals' &>
-    </div>
-  </div>
+  </&>
 % }
 
 <%INIT>
diff --git a/share/html/Ticket/Elements/EditBasics b/share/html/Ticket/Elements/EditBasics
index ead04df00e..d3ed836bc1 100644
--- a/share/html/Ticket/Elements/EditBasics
+++ b/share/html/Ticket/Elements/EditBasics
@@ -185,15 +185,12 @@ for my $field (@fields) {
 % }
 % for my $field (@fields) {
 %# Prefer input name as css class, e.g. "FinalPriority" instead of "Final_Priority"
-  <div class="form-row <% CSSClass( $field->{args}{Name} || $field->{'name'} ) %>">
-    <div class="label col-3">
-      <span class="<% $field->{hint} ? 'prev-icon-helper' : '' %>"><% loc($field->{'name'}) %>:</span>\
-%   if ( my $hint = $field->{hint} ) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $hint %>"></span>
-%   }
-    </div>
-    <div class="value col-9"><% $field->{'html'} |n %></div>
-  </div>
+<& /Elements/LabeledValue,
+    Class => (CSSClass( $field->{args}{Name} || $field->{'name'} )),
+    Label => loc($field->{'name'}),
+    LabelSpanClass => ( $field->{hint} ? 'prev-icon-helper' : ''),
+    LabelTooltip => $field->{hint},
+    RawValue => $field->{'html'} &>
 % }
 % $m->callback( CallbackName => 'EndOfList', TicketObj => $TicketObj, %ARGS, Fields => \@fields );
 % unless ($InTable) {
diff --git a/share/html/Ticket/Elements/EditDates b/share/html/Ticket/Elements/EditDates
index 80ce1c8b23..aa68ca595a 100644
--- a/share/html/Ticket/Elements/EditDates
+++ b/share/html/Ticket/Elements/EditDates
@@ -46,9 +46,7 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 <div>
-  <div class="form-row">
-    <div class="label col-3"><&|/l&>Starts</&>:</div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Starts') &>
         <div class="form-row">
           <div class="col-auto">
         <& /Elements/SelectDate,
@@ -63,11 +61,8 @@
             <span class="current-value form-control">(<% $TicketObj->StartsObj->AsString %>)</span>
           </div>
         </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><&|/l&>Started</&>:</div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, Label => loc('Started') &>
         <div class="form-row">
           <div class="col-auto">
         <& /Elements/SelectDate,
@@ -82,14 +77,9 @@
             <span class="current-value form-control">(<%$TicketObj->StartedObj->AsString %>)</span>
           </div>
         </div>
-    </div>
-  </div>
+    </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Last Contact</&>:
-    </div>
-    <div class="value col-9">
+    <&| /Elements/LabeledValue, Label => loc('Last Contact') &>
         <div class="form-row">
           <div class="col-auto">
         <& /Elements/SelectDate,
@@ -104,11 +94,8 @@
         <span class="current-value form-control">(<% $TicketObj->ToldObj->AsString %>)</span>
           </div>
         </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><&|/l&>Due</&>:</div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, Label => loc('Due') &>
         <div class="form-row">
           <div class="col-auto">
         <& /Elements/SelectDate,
@@ -123,8 +110,7 @@
         <span class="current-value form-control">(<% $TicketObj->DueObj->AsString %>)</span>
           </div>
         </div>
-    </div>
-  </div>
+  </&>
   <& /Elements/EditCustomFields, Object => $TicketObj, Grouping => 'Dates', InTable => 1 &>
 % $m->callback( %ARGS, CallbackName => 'EndOfList', Ticket => $TicketObj );
 </div>
diff --git a/share/html/Ticket/Elements/EditMerge b/share/html/Ticket/Elements/EditMerge
index 2eead1a6d9..4a2348d62f 100644
--- a/share/html/Ticket/Elements/EditMerge
+++ b/share/html/Ticket/Elements/EditMerge
@@ -48,12 +48,9 @@
 <div class='ticket-merge-text <% $MergeTextClass %>'>
 <&|/l&>Warning: merging is a non-reversible action! Enter a single ticket number to be merged into.</&>
 </div>
-<div>
-  <div class="form-row">
-    <div class="label <% $LabelStyle %>"><&|/l&>Merge into</&>:</div>
-    <div class="value <% $ValueStyle %>"><input type="text" class="form-control" name="<% $Name %>" value="<% $Default || '' %>" data-autocomplete="Tickets" data-autocomplete-exclude="<% join( ' ', @excludes) || '' %>" /></div>
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Merge into') &>
+  <input type="text" class="form-control" name="<% $Name %>" value="<% $Default || '' %>" data-autocomplete="Tickets" data-autocomplete-exclude="<% join( ' ', @excludes) || '' %>" />
+</&>
 
 <%INIT>
 my @excludes;
@@ -76,6 +73,4 @@ $Tickets => undef
 $Name => ''
 $Default => ''
 $MergeTextClass => 'ticket-merge-position'
-$LabelStyle => 'col-2'
-$ValueStyle => 'col-4'
 </%ARGS>
diff --git a/share/html/Ticket/Elements/EditPeople b/share/html/Ticket/Elements/EditPeople
index 9df4e2cf3d..d56602fb56 100644
--- a/share/html/Ticket/Elements/EditPeople
+++ b/share/html/Ticket/Elements/EditPeople
@@ -73,10 +73,9 @@
   <div class="boxcontainer current-watchers col-xl-6">
 <h3><&|/l&>People</&></h3>
 
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Owner</&>:</div>
-  <div class="value col-6"><& /Elements/SelectOwner, Name => 'Owner', QueueObj => $Ticket->QueueObj, TicketObj => $Ticket, Default => $Ticket->OwnerObj->Id, DefaultValue => 0&></div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Owner') &>
+    <& /Elements/SelectOwner, Name => 'Owner', QueueObj => $Ticket->QueueObj, TicketObj => $Ticket, Default => $Ticket->OwnerObj->Id, DefaultValue => 0 &>
+</&>
 
 % my @role_fields;
 % my $single_roles = $Ticket->QueueObj->CustomRoles;
@@ -87,15 +86,9 @@
 
 % $m->callback( CustomRoles => $single_roles, SingleRoles => 1, Ticket => $Ticket, %ARGS, CallbackName => 'ModifyCustomRoles' );
 % while (my $role = $single_roles->Next) {
-<div class="form-row">
-  <div class="label col-3">
-    <span class="<% $role->EntryHint ? 'prev-icon-helper' : '' %>"><% $role->Name %>:</span>\
-% if ( my $hint = $role->EntryHint ) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $hint %>"></span>
-% }
-  </div>
-  <div class="value col-6"><& /Elements/SingleUserRoleInput, role => $role, Ticket => $Ticket &></div>
-</div>
+<&| /Elements/LabeledValue, Label => $role->Name, LabelTooltip => $role->EntryHint &>
+  <& /Elements/SingleUserRoleInput, role => $role, Ticket => $Ticket &>
+</&>
 
 % }
 
diff --git a/share/html/Ticket/Elements/EditPeopleInline b/share/html/Ticket/Elements/EditPeopleInline
index 6bd5b5cd6d..c47028b255 100644
--- a/share/html/Ticket/Elements/EditPeopleInline
+++ b/share/html/Ticket/Elements/EditPeopleInline
@@ -51,11 +51,9 @@
   </div>
 </div>
 
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Owner</&>:</div>
-  <div class="value col-6"><& /Elements/SelectOwner, Name => 'Owner', QueueObj => $Ticket->QueueObj, TicketObj => $Ticket, Default => $Ticket->OwnerObj->Id, DefaultValue => 0&></div>
-</div>
-
+<&| /Elements/LabeledValue, Label => loc('Owner') &>
+ <& /Elements/SelectOwner, Name => 'Owner', QueueObj => $Ticket->QueueObj, TicketObj => $Ticket, Default => $Ticket->OwnerObj->Id, DefaultValue => 0&>
+</&>
 % my @role_fields;
 % my $single_roles = $Ticket->QueueObj->CustomRoles;
 % $single_roles->LimitToSingleValue;
@@ -65,15 +63,9 @@
 % $m->callback( CustomRoles => $single_roles, SingleRoles => 1, Ticket => $Ticket, %ARGS, CallbackName => 'ModifyCustomRoles', CallbackPage => '/Ticket/ModifyPeople.html' );
 
 % while (my $role = $single_roles->Next) {
-<div class="form-row">
-  <div class="label col-3">
-    <span class="<% $role->EntryHint ? 'prev-icon-helper' : '' %>"><% $role->Name %>:</span>\
-% if ( my $hint = $role->EntryHint ) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $hint %>"></span>
-% }
-  </div>
-  <div class="value col-6"><& /Elements/SingleUserRoleInput, role => $role, Ticket => $Ticket &></div>
-</div>
+<&| /Elements/LabeledValue, Label => $role->Name, LabelTooltip => $role->EntryHint &>
+  <& /Elements/SingleUserRoleInput, role => $role, Ticket => $Ticket &>
+</&>
 
 % }
 
diff --git a/share/html/Ticket/Elements/ShowBasics b/share/html/Ticket/Elements/ShowBasics
index b6686c7fd2..1c629c2fc6 100644
--- a/share/html/Ticket/Elements/ShowBasics
+++ b/share/html/Ticket/Elements/ShowBasics
@@ -46,76 +46,44 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 <div>
-  <div class="id form-row">
-    <div class="label col-3"><&|/l&>Id</&>:</div>
-    <div class="value col-9"><span><%$Ticket->Id %></span></div>
-  </div>
-  <div class="status form-row">
-    <div class="label col-3"><&|/l&>Status</&>:</div>
-    <div class="value col-9"><span class="current-value"><% loc($Ticket->Status) %></span></div>
-  </div>
+  <& /Elements/LabeledValue, Class => 'id',Label => loc("Id"), Value => $Ticket->id &>
+  <& /Elements/LabeledValue, Class => 'status',Label => loc("Status"), Value => loc($Ticket->Status), ValueSpanClass => "current-value" &>
 % if ( !$Ticket->QueueObj->SLADisabled ) {
-  <div class="sla form-row">
-    <div class="label col-3"><&|/l&>SLA</&>:</div>
-    <div class="value col-9"><span class="current-value"><% loc($Ticket->SLA) %></span></div>
-  </div>
+  <& /Elements/LabeledValue, Class => "sla",Label => loc("SLA"), Value => loc($Ticket->SLA), ValueSpanClass => "current_value" &>
 % }
 % if ($show_time_worked) {
 % if ($Ticket->TimeEstimated) {
-  <div class="time estimated form-row">
-    <div class="label col-3"><&|/l&>Estimated</&>:</div>
-    <div class="value col-9"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeEstimated &></span></div>
-  </div>
+  <& /Elements/LabeledValue, Class => "time estimated",Label => loc("Estimated"), ValueSpanClass => "current-value", RawValue => $m->scomp("ShowTime", minutes => $Ticket->TimeEstimated) &>
 % }
 % $m->callback( %ARGS, CallbackName => 'AfterTimeEstimated', TicketObj => $Ticket );
 % if ($Ticket->TimeWorked) {
-  <div class="time worked sum form-row">
-    <div class="label col-3"><&|/l&>Worked</&>:</div>
-    <div class="value col-9"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeWorked &></span></div>
-  </div>
+    <& /Elements/LabeledValue, Class => "time worked sum",Label => loc("Worked"), ValueSpanClass => "current-value", RawValue => $m->scomp("ShowTime", minutes => $Ticket->TimeWorked ) &>
 % }
 % my $totalTimeWorked = 0;
 % if (RT->Config->Get('DisplayTotalTimeWorked') && ($totalTimeWorked = $Ticket->TotalTimeWorked)) {
-  <div class="total time worked sum form-row">
-    <div class="label col-3"><&|/l&>Total Time Worked</&>:</div>
-    <div class="value col-9"><span class="current-value"><& ShowTime, minutes => $totalTimeWorked &></span></div>
-  </div>
+    <& /Elements/LabeledValue, Class => "total time worked sum",Label => loc("Total Time Worked"), ValueSpanClass => "current-value", RawValue => $m->scomp("ShowTime", minutes => $totalTimeWorked ) &>
 % }
 % if ( keys %$time_worked ) {
-<div class="time worked by-user form-row">
-  <div class="label col-3"><&|/l&>Users</&>:</div>
-  <div class="value col-9">
-    <span class="current-value">
+  <&| /Elements/LabeledValue, Class => "time worked by-user",Label => loc("Users"), ValueSpanClass => "current-value" &>
 %   for my $user ( keys %$time_worked ) {
       <div>
         <span class="value"><% $user %>:</span>
         <span class="value"><& /Ticket/Elements/ShowTime, minutes => $time_worked->{$user} &></span>
       </div>
 %   }
-    </span>
-  </div>
-</div>
+  </&>
 % }
 % $m->callback( %ARGS, CallbackName => 'AfterTimeWorked', TicketObj => $Ticket );
 % if ($Ticket->TimeLeft) {
-  <div class="time left form-row">
-    <div class="label col-3"><&|/l&>Left</&>:</div>
-    <div class="value col-9"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeLeft &></span></div>
-  </div>
+  <& /Elements/LabeledValue, Class => "time left",label => loc("Left"), ValueSpanClass => "current-value", Value => $m->scomp( "ShowTime", minutes => $Ticket->TimeLeft) &>
 % }
 % }
 % $m->callback( %ARGS, CallbackName => 'AfterTimeLeft', TicketObj => $Ticket );
-  <div class="priority form-row">
-    <div class="label col-3"><&|/l&>Priority</&>:</div>
-    <div class="value col-9"><span class="current-value"><& ShowPriority, Ticket => $Ticket &></span></div>
-  </div>
+  <& /Elements/LabeledValue, Class => "priority", Label => loc("Priority"), ValueSpanClass => "current-value", RawValue => $m->scomp("ShowPriority", Ticket => $Ticket ) &>
 % $m->callback( %ARGS, CallbackName => 'AfterPriority', TicketObj => $Ticket );
 %# This will check SeeQueue at the ticket role level, queue level, and global level
 % if ($Ticket->CurrentUserHasRight('SeeQueue')) {
-  <div class="queue form-row">
-    <div class="label col-3"><&|/l&>Queue</&>:</div>
-    <div class="value col-9"><span class="current-value"><& ShowQueue, Ticket => $Ticket, QueueObj => $Ticket->QueueObj &></span></div>
-  </div>
+  <& /Elements/LabeledValue, Class =>"queue",Label => loc("Queue"), ValueSpanClass => "current-value", RawValue => $m->scomp("ShowQueue", Ticket => $Ticket, QueueObj => $Ticket->QueueObj) &>
 % }
 % $m->callback( %ARGS, CallbackName => 'AfterQueue', TicketObj => $Ticket );
   <& /Ticket/Elements/ShowCustomFields, Ticket => $Ticket, Grouping => 'Basics', Table => 0 &>
diff --git a/share/html/Ticket/Elements/ShowDates b/share/html/Ticket/Elements/ShowDates
index 424a876abd..6ae1683bb9 100644
--- a/share/html/Ticket/Elements/ShowDates
+++ b/share/html/Ticket/Elements/ShowDates
@@ -46,21 +46,19 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 <div>
-  <div class="date form-row created">
-    <div class="label col-3"><&|/l&>Created</&>:</div>\
-    <div class="value col-9"><span class="current-value"><% $Ticket->CreatedObj->AsString %></span></div>
-  </div>
+<& /Elements/LabeledValue, Label => loc("Created"), Class => "date created", ValueSpanClass => "current-value", Value => $Ticket->CreatedObj->AsString &>
+
 % $m->callback( %ARGS, CallbackName => 'AfterCreated', TicketObj => $Ticket );
-  <div class="date form-row starts<% $Ticket->StartsObj->Unix ? q{} : q{ unset-field}%>">
-    <div class="label col-3"><&|/l&>Starts</&>:</div>\
-    <div class="value col-9"><span class="current-value"><% $Ticket->StartsObj->AsString %></span></div>
-  </div>
+
+<& /Elements/LabeledValue, Label => loc("Starts"), Class => "date starts". ($Ticket->StartsObj->Unix ? q{} : q{ unset-field}), ValueSpanClass => "current-value", Value => $Ticket->StartsObj->AsString &>
+
 % $m->callback( %ARGS, CallbackName => 'AfterStarts', TicketObj => $Ticket );
-  <div class="date form-row started<% $Ticket->StartedObj->Unix ? q{} : q{ unset-field}%>">
-    <div class="label col-3"><&|/l&>Started</&>:</div>\
-    <div class="value col-9"><span class="current-value"><% $Ticket->StartedObj->AsString %></span></div>
-  </div>
+
+<& /Elements/LabeledValue, Label => loc("Started"), Class => "date started". ($Ticket->StartedObj->Unix ? q{} : q{ unset-field}), ValueSpanClass => "current-value", Value => $Ticket->StartedObj->AsString &>
+
+
 % $m->callback( %ARGS, CallbackName => 'AfterStarted', TicketObj => $Ticket );
+
   <div class="date form-row told<% $Ticket->ToldObj->Unix || $Ticket->CurrentUserHasRight('ModifyTicket') ? q{} : q{ unset-field}%>">
     <div class="label col-3">
 % if ( $Ticket->CurrentUserHasRight('ModifyTicket' ) ) {
diff --git a/share/html/Ticket/Elements/ShowSummary b/share/html/Ticket/Elements/ShowSummary
index c929833660..7868525975 100644
--- a/share/html/Ticket/Elements/ShowSummary
+++ b/share/html/Ticket/Elements/ShowSummary
@@ -210,8 +210,7 @@ push @extra, (titleright_raw => $links_titleright) if $links_titleright;
                 <& /Elements/EditLinks, Object => $Ticket, TwoColumn => 0 &>
 
                 <h3><&|/l&>Merge</&></h3>
-                <& /Ticket/Elements/EditMerge, Ticket => $Ticket, LabelStyle => 'col-3',
-                   ValueStyle => 'col-9', MergeTextClass => '', %ARGS &>
+                <& /Ticket/Elements/EditMerge, Ticket => $Ticket, MergeTextClass => '', %ARGS &>
 
                 <div class="form-row">
                   <div class="col-12 text-right">
diff --git a/share/html/Ticket/Graphs/Elements/EditGraphProperties b/share/html/Ticket/Graphs/Elements/EditGraphProperties
index 85d9cd526f..f15b7dd787 100644
--- a/share/html/Ticket/Graphs/Elements/EditGraphProperties
+++ b/share/html/Ticket/Graphs/Elements/EditGraphProperties
@@ -46,12 +46,7 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 <&| /Widgets/TitleBox, title => loc('Graph Properties') &>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <% loc('Direction') %>
-    </div>
-    <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Direction') &>
       <select class="form-control selectpicker" name="Direction">
         <option value="TB" <% ($Direction||'TB') eq 'TB'? 'selected="selected"': '' |n %>><% loc('top to bottom') %></option>
         <option value="LR" <% ($Direction||'TB') eq 'LR'? 'selected="selected"': '' |n %>><% loc('left to right') %></option>
@@ -59,41 +54,27 @@
 %#<option value="BT" <% ($Direction||'TB') eq 'BT'? 'selected="selected"': '' |n %>><% loc('bottom to top') %></option>
 %#<option value="RL" <% ($Direction||'TB') eq 'RL'? 'selected="selected"': '' |n %>><% loc('right to left') %></option>
       </select>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3">
-      <% loc('Main type of links') %>
-    </div>
-    <div class="value col-9">
+  </&>
+  <&| /Elements/LabeledValue, Label => loc('Main type of links') &>
       <select class="form-control selectpicker" name="LeadingLink">
 % foreach ( @link_types ) {
        <option value="<% $_ %>" <% ($LeadingLink||'Members') eq $_? 'selected="selected"': '' |n %>><% loc($_) %></option>
 % }
       </select>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <% loc('maximum depth') %>
-    </div>
-    <div class="value col-9">
-      <select class="form-control selectpicker" name="MaxDepth">
-        <option value="0"><% loc('Unlimit') %></option>
+  <&| /Elements/LabeledValue, Label => loc('maximum depth') &>
+
+    <select class="form-control selectpicker" name="MaxDepth">
+      <option value="0"><% loc('Unlimit') %></option>
 % foreach ( 1..6 ) {
-        <option value="<% $_ %>" <% ($MaxDepth||0) == $_? 'selected="selected"': '' %>><% $_ %></option>
+      <option value="<% $_ %>" <% ($MaxDepth||0) == $_? 'selected="selected"': '' %>><% $_ %></option>
 % }
-      </select>
-    </div>
-  </div>
+    </select>
+  </&>
+
+    <&| /Elements/LabeledValue, Label => loc('Show as well') &>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <% loc('Show as well') %>:
-    </div>
-    <div class="value col-9">
-      <div class="form-row">
 % foreach my $type ( @link_types ) {
 % my $checked = '';
 % $checked = 'checked="checked"' if grep $type eq $_, @ShowLinks;
@@ -105,16 +86,11 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
+  </&>
 
 % my @properties = RT::Graph::Tickets->TicketProperties( $session{'CurrentUser'} );
 
-  <div class="form-row">
-    <div class="label col-3">
-      <% loc('Fill boxes with color using') %>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Fill boxes with color using') &>
       <select name="FillUsing" class="form-control selectpicker">
         <option value=""><% loc('nothing') %></option>
 <%PERL>
@@ -130,8 +106,7 @@ while ( my ($group, $list) = (splice @tmp, 0, 2) ) {
         <option value="<% $prop %>" <% $selected |n %>><% loc($prop) %></option>
 % } }
       </select>
-    </div>
-  </div>
+  </&>
 
 % if ( RT::Link->can('Description' ) ) {
 % my $checked = '';
@@ -197,19 +172,13 @@ my $id = "graph-properties-box-$Level";
 my $class = '';
 $class = 'class="hidden"' if $Level != 1 && !@Default;
 </%INIT>
-<div class="label col-3">
-  <% loc('Show Tickets Properties on [_1] level', $Level) %>
+  <&| /Elements/LabeledValue, Label => loc('Show Tickets Properties on [_1] level', $Level) &>
   (<small><a href="#" onclick="hideshow(<% $id |n,j%>); return false;"><% loc('open/close') %></a></small>):
-</div>
+</&>
 
 <div id="<% $id %>" <% $class |n %>>
 % while ( my ($group, $list) = (splice @Available, 0, 2) ) {
-  <div class="form-row">
-    <div class="label col-3">
-      <% loc($group) %>:
-    </div>
-    <div class="value col-9">
-      <div class="form-row">
+    <&| /Elements/LabeledValue, Label => loc($group) &>
 % foreach my $prop ( @$list ) {
 % my $checked = '';
 % $checked = 'checked="checked"' if grep $_ eq $prop, @Default;
@@ -221,8 +190,7 @@ $class = 'class="hidden"' if $Level != 1 && !@Default;
         </div>
 % }
       </div>
-    </div>
-  </div>
+  </&>
 % }
 </div>
 </%METHOD>
diff --git a/share/html/Ticket/Graphs/Elements/ShowLegends b/share/html/Ticket/Graphs/Elements/ShowLegends
index d9592c8c86..0e00485e5b 100644
--- a/share/html/Ticket/Graphs/Elements/ShowLegends
+++ b/share/html/Ticket/Graphs/Elements/ShowLegends
@@ -46,30 +46,20 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 <&| /Widgets/TitleBox, title => loc('Legends'), hideable => $hideable &>
-  <div class="form-row">
-    <div class="label col-3"><% loc('Status') %>:</div>
-    <div class="value col-9">
-      <span class="form-control current-value">
+  <&| /Elements/LabeledValue, Label => loc('Status'), ValueSpanClass => "current-value"  &>
 % foreach my $status ( sort keys %RT::Graph::Tickets::ticket_status_style ) {
 % my $style = $RT::Graph::Tickets::ticket_status_style{ $status };
       <span class="value" style="color: <% $style->{'fontcolor'} %>; padding: 0.6em; border: 1px solid black;"><% loc($status) %></span>
 % }
-      </span>
-    </div>
-  </div>
+  </&>
 
 % if ( $FillUsing ) {
-    <div class="form-row">
-      <div class="label col-3"><% loc($FillUsing) %>:</div>
-      <div class="value col-9">
-        <span class="form-control current-value">
+  <&| /Elements/LabeledValue, Label => loc($FillUsing), ValueSpanClass => "current-value"  &>
 % foreach my $value ( sort keys %RT::Graph::Tickets::fill_cache ) {
 % my $color = $RT::Graph::Tickets::fill_cache{ $value };
           <span class="value" style="background-color: <% $color %>; padding: 0.6em; border: 1px solid black;"><% loc($value) %></span>
 % }
-        </span>
-      </div>
-    </div>
+    </&>
 % }
 </&>
 
diff --git a/share/html/Ticket/Update.html b/share/html/Ticket/Update.html
index 0fec498b27..680aedcf24 100644
--- a/share/html/Ticket/Update.html
+++ b/share/html/Ticket/Update.html
@@ -74,10 +74,9 @@
 % }
 
 % if ( $TicketObj->CurrentUserHasRight('SeeQueue') ) {
-<div class="form-row">
-  <div class="label col-3"><&|/l&>Queue</&>:</div>
-  <div class="value col-9"><span class="current-value form-control"><% $TicketObj->QueueObj->Name %></span></div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Queue'), ValueSpanClass => 'current-value' &>
+<% $TicketObj->QueueObj->Name %>
+</&>
 % }
 
 <div class="form-row"><div class="label col-3"><&|/l&>Update Type</&>:</div>