[Rt-commit] rt branch 5.0/extract-label-value-rows created. rt-5.0.3-96-g66f48a0a69

BPS Git Server git at git.bestpractical.com
Wed Aug 24 20:07:12 UTC 2022


This is an automated email from the git hooks/post-receive script. It was
generated because a ref change was pushed to the repository containing
the project "rt".

The branch, 5.0/extract-label-value-rows has been created
        at  66f48a0a69747d9f078c223776b3e20396eb2cc9 (commit)

- Log -----------------------------------------------------------------
commit 66f48a0a69747d9f078c223776b3e20396eb2cc9
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 18:24:21 2022 -0700

    Port most of Elements to LabeledValue

diff --git a/share/html/Elements/AddLinks b/share/html/Elements/AddLinks
index 131e7f8da0..096cfb55dc 100644
--- a/share/html/Elements/AddLinks
+++ b/share/html/Elements/AddLinks
@@ -73,30 +73,29 @@ $exclude .= qq| data-autocomplete-exclude="$id"| if $Object->id;
 <i><&|/l&>Enter objects or URIs to link objects to. Separate multiple entries with spaces.</&></i><br />
 % }
 <div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Depends on').':', Relation => 'DependsOn' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="<%$id%>-DependsOn" value="<% $ARGSRef->{"$id-DependsOn"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Depended on by').':', Relation => 'DependedOnBy' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="DependsOn-<%$id%>" value="<% $ARGSRef->{"DependsOn-$id"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Parents').':', Relation => 'Parents' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="<%$id%>-MemberOf" value="<% $ARGSRef->{"$id-MemberOf"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Children').':', Relation => 'Children' &></div>
-    <div class="value col-9"> <input type="text" class="form-control" name="MemberOf-<%$id%>" value="<% $ARGSRef->{"MemberOf-$id"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Refers to').':', Relation => 'RefersTo' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="<%$id%>-RefersTo" value="<% $ARGSRef->{"$id-RefersTo"} || '' %>" <% $exclude |n%>/></div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Referred to by').':', Relation => 'ReferredToBy' &></div>
-    <div class="value col-9"><input type="text" class="form-control" name="RefersTo-<%$id%>" value="<% $ARGSRef->{"RefersTo-$id"} || '' %>" <% $exclude |n%>/></div>
-  </div>
+
+
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depends on'), Relation => 'DependsOn') &>
+  <input type="text" class="form-control" name="<%$id%>-DependsOn" value="<% $ARGSRef->{"$id-DependsOn"} || '' %>" <% $exclude |n%>/>
+</&>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depended on by'), Relation => 'DependedOnBy') &>
+  <input type="text" class="form-control" name="DependsOn-<%$id%>" value="<% $ARGSRef->{"DependsOn-$id"} || '' %>" <% $exclude |n%>/>
+</&>
+
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Parents'), Relation => 'Parents') &>
+  <input type="text" class="form-control" name="<%$id%>-MemberOf" value="<% $ARGSRef->{"$id-MemberOf"} || '' %>" <% $exclude |n%>/>
+</&>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Children'), Relation => 'Children') &>
+  <input type="text" class="form-control" name="MemberOf-<%$id%>" value="<% $ARGSRef->{"MemberOf-$id"} || '' %>" <% $exclude |n%>/>
+</&>
+
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Refers to'), Relation => 'RefersTo') &>
+  <input type="text" class="form-control" name="<%$id%>-RefersTo" value="<% $ARGSRef->{"$id-RefersTo"} || '' %>" <% $exclude |n%>/>
+</&>
+<&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Referred to by'), Relation => 'ReferredToBy') &>
+  <input type="text" class="form-control" name="RefersTo-<%$id%>" value="<% $ARGSRef->{"RefersTo-$id"} || '' %>" <% $exclude |n%>/>
+</&>
+
   <& /Elements/EditCustomFields,
         Object          => $Object,
         Grouping        => 'Links',
diff --git a/share/html/Elements/BulkLinks b/share/html/Elements/BulkLinks
index b7eb5a161d..330934239a 100644
--- a/share/html/Elements/BulkLinks
+++ b/share/html/Elements/BulkLinks
@@ -48,145 +48,80 @@
 <div class="form-row">
   <div class="col-6">
 <h3><&|/l&>Current Links</&></h3>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Depends on</&>:
-  </div>
-  <div class="value col-9">
-    <div class="form-row">
+<&| /Elements/LabeledValue, Label => loc('Depends on') &>
 % if ( $hash{DependsOn} ) {
 % for my $link ( values %{$hash{DependsOn}} ) {
       <& EditLink, Link => $link, Mode => 'Target' &>
 % } }
-    </div>
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Depended on by</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Depended on by') &>
 % if ( $hash{DependedOnBy} ) {
 % for my $link ( values %{$hash{DependedOnBy}} ) {
       <& EditLink, Link => $link, Mode => 'Base' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Parents</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Parents') &>
 % if ( $hash{MemberOf} ) {
 % for my $link ( values %{$hash{MemberOf}} ) {
       <& EditLink, Link => $link, Mode => 'Target' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Children</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Children') &>
 % if ( $hash{Members} ) {
 % for my $link ( values %{$hash{Members}} ) {
       <& EditLink, Link => $link, Mode => 'Base' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Refers to</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Refers to') &>
 % if ( $hash{RefersTo} ) {
 % for my $link ( values %{$hash{RefersTo}} ) {
       <& EditLink, Link => $link, Mode => 'Target' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Referred to by</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Referred to by') &>
 % if ( $hash{ReferredToBy} ) {
 % for my $link ( values %{$hash{ReferredToBy}} ) {
       <& EditLink, Link => $link, Mode => 'Base' &>
 % } }
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="col-3"></div>
-  <div class="col-9">
-    <i><&|/l&>(Check box to delete)</&></i>
-  </div>
-</div>
-</div>
+<&| /Elements/LabeledValue, Label => '' &>
+  <i><&|/l&>(Check box to delete)</&></i>
+</&>
 
 <div class="col-6">
 <h3><&|/l&>New Links</&></h3>
 <em><&|/l&>Enter tickets or URIs to link to. Separate multiple entries with spaces.</&></em>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Depends on</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="<% $record_type %>-DependsOn" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-DependsOn' } || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Depends on') &>
+  <input class="form-control" type="text" name="<% $record_type %>-DependsOn" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-DependsOn' } || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Depended on by</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="DependsOn-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'DependsOn-'. $record_type } || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Depended on by') &>
+  <input class="form-control" type="text" name="DependsOn-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'DependsOn-'. $record_type } || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Parents</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="<% $record_type %>-MemberOf" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-MemberOf'} || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Parents') &>
+  <input class="form-control" type="text" name="<% $record_type %>-MemberOf" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-MemberOf'} || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Children</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="MemberOf-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'MemberOf-'. $record_type } || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Children') &>
+  <input class="form-control" type="text" name="MemberOf-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'MemberOf-'. $record_type } || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Refers to</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="<% $record_type %>-RefersTo" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-RefersTo'} || '' %>" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Refers to') &>
+  <input class="form-control" type="text" name="<% $record_type %>-RefersTo" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ $record_type .'-RefersTo'} || '' %>" />
+</&>
+
+<&| /Elements/LabeledValue, Label => loc('Referred to by') &>
+  <input class="form-control" type="text" name="RefersTo-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'RefersTo-'. $record_type } || '' %>" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Referred to by</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="RefersTo-<% $record_type %>" data-autocomplete="Tickets" data-autocomplete-multiple="1" value="<% $ARGS{ 'RefersTo-'. $record_type } || '' %>" />
-  </div>
-</div>
 </div>
 
 </div>
diff --git a/share/html/Elements/EditLinks b/share/html/Elements/EditLinks
index b50222560a..3092057725 100644
--- a/share/html/Elements/EditLinks
+++ b/share/html/Elements/EditLinks
@@ -47,12 +47,9 @@
 %# END BPS TAGGED BLOCK }}}
 <div class="row ticket-summary">
   <div class="boxcontainer col-md-<% $TwoColumn ? 6 : 12 %>">
-      <h3><&|/l&>Current Links</&></h3>
-
-<div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Depends on').':', Relation => 'DependsOn' &></div>
-    <div class="value col-9">
+    <h3><&|/l&>Current Links</&></h3>
+    <div>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depends on'), Relation => 'DependsOn') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->DependsOn->Next) {
         <div class="list-group-item">
@@ -60,11 +57,9 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Depended on by').':', Relation => 'DependedOnBy' &></div>
-    <div class="value col-9">
+    </&>
+
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Depended on by'), Relation => 'DependedOnBy') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->DependedOnBy->Next) {
         <div class="list-group-item">
@@ -72,11 +67,8 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Parents').':', Relation => 'Parents' &></div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Parents'), Relation => 'Parents') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->MemberOf->Next) {
         <div class="list-group-item">
@@ -84,11 +76,8 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Children').':', Relation => 'Children' &></div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Children'), Relation => 'Children') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->Members->Next) {
         <div class="list-group-item">
@@ -96,11 +85,8 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Refers to').':', Relation => 'RefersTo' &></div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Refers to'), Relation => 'RefersTo') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->RefersTo->Next) {
         <div class="list-group-item">
@@ -108,11 +94,8 @@
         </div>
 %}
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3"><& ShowRelationLabel, Object => $Object, Label => loc('Referred to by').':', Relation => 'ReferredToBy' &></div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('ShowRelationLabel', Object => $Object, Label => loc('Referred to by'), Relation => 'ReferredToBy') &>
       <div class="checkboxes list-group list-group-compact">
 % while (my $link = $Object->ReferredToBy->Next) {
         <div class="list-group-item">
@@ -120,19 +103,15 @@
         </div>
 % }
       </div>
-    </div>
-  </div>
-  <div class="form-row">
-    <span class="empty"></span>
-    <div class="value col-9"><i><&|/l&>(Check box to delete)</&></i></div>
-  </div>
-</div>
-
+    </&>
+    <&| /Elements/LabeledValue, Label => '' &>
+      <i><&|/l&>(Check box to delete)</&></i>
+    </&>
   </div>
   <div class="boxcontainer col-md-<% $TwoColumn ? 6 : 12 %>">
-<h3><&|/l&>New Links</&></h3>
-<& AddLinks, %ARGS &>
-</div>
+    <h3><&|/l&>New Links</&></h3>
+      <& AddLinks, %ARGS &>
+  </div>
 </div>
 <%ARGS>
 $Object => undef
diff --git a/share/html/Elements/EditPassword b/share/html/Elements/EditPassword
index 83135d58ed..2cc92d576c 100644
--- a/share/html/Elements/EditPassword
+++ b/share/html/Elements/EditPassword
@@ -50,33 +50,17 @@
 % } else {
 
 % if ( $cond{'RequireCurrent'} ) {
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l, $session{'CurrentUser'}->Name()&>[_1]'s current password</&>:
-    </div>
-    <div class="value col-9">
-      <input type="password" class="form-control" name="<% $Name[0] %>" size="16" autocomplete="off" />
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc( "[_1]'s current password",$session{'CurrentUser'}->Name()) &>
+    <input type="password" class="form-control" name="<% $Name[0] %>" size="16" autocomplete="off" />
+  </&>
 % }
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>New password</&>:
-    </div>
-    <div class="value col-9">
-      <input type="password" class="form-control" name="<% $Name[1] %>" size="16" autocomplete="off" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Retype Password</&>:
-    </div>
-    <div class="value col-9">
-      <input type="password" class="form-control" name="<% $Name[2] %>" size="16" autocomplete="off" />
-    </div>
-  </div>
+<&| /Elements/LabeledValue, Label => loc("New password") &>
+  <input type="password" class="form-control" name="<% $Name[1] %>" size="16" autocomplete="off" />
+</&>
+<&| /Elements/LabeledValue, Label => loc("Retype Password") &>
+  <input type="password" class="form-control" name="<% $Name[2] %>" size="16" autocomplete="off" />
+</&>
 % }
 
 <%ARGS>
diff --git a/share/html/Elements/Lifecycle/Graph b/share/html/Elements/Lifecycle/Graph
index dd88a6b1ea..3635e7242a 100644
--- a/share/html/Elements/Lifecycle/Graph
+++ b/share/html/Elements/Lifecycle/Graph
@@ -49,27 +49,17 @@
   <div id="lifeycycle-ui-edit-node" class="lifeycycle-ui-edit-node collapse card card-body">
     <input type="hidden" name="id" />
     <div class="alert alert-warning invalid-name hidden"><&|/l&>Invalid name</&></div>
-    <div class="form-row">
-      <div class="col-3 label">
-        <label for="name"><&|/l&>Name</&>:</label>
-      </div>
-      <div class="col-9 value">
-        <input class="form-control" type="text" id="name" name="name" value="" />
-      </div>
-    </div>
+    <&| /Elements/LabeledValue, Label => loc('Name') &>
+      <input class="form-control" type="text" id="name" name="name" value="" />
+    </&>
 
-    <div class="form-row">
-      <div class="col-3 label">
-        <label for="type"><&|/l&>Type</&>:</label>
-      </div>
-      <div class="col-9 value">
+    <&| /Elements/LabeledValue, Label => loc('Type') &>
         <select class="selectpicker form-control" id="type" name="type">
           <option value="initial"><&|/l&>Initial</&></option>
           <option value="active"><&|/l&>Active</&></option>
           <option value="inactive"><&|/l&>Inactive</&></option>
         </select>
-      </div>
-    </div>
+    </&>
     <div class="form-row">
       <div class="col-12 text-right">
         <button class="btn btn-light" id="CancelNode"><&|/l&>Cancel</&></button>
diff --git a/share/html/Elements/Login b/share/html/Elements/Login
index 583b1851f6..e2fe6cfdc6 100644
--- a/share/html/Elements/Login
+++ b/share/html/Elements/Login
@@ -68,23 +68,13 @@
 % unless (RT->Config->Get('WebRemoteUserAuth') and !RT->Config->Get('WebFallbackToRTLogin')) {
 <form id="login" name="login" method="post" action="<% RT->Config->Get('WebPath') %>/NoAuth/Login.html">
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Username</&>:
-    </div>
-    <div class="value col-9">
-      <input class="form-control" type="text" name="user" value="<%$user%>" id="user" autocapitalize="off" />
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Username") &>
+    <input class="form-control" type="text" name="user" value="<%$user%>" id="user" autocapitalize="off" />
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Password</&>:
-    </div>
-    <div class="value col-9">
-      <input class="form-control" type="password" name="pass" />
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Password") &>
+    <input class="form-control" type="password" name="pass" />
+  </&>
 
 <input type="hidden" name="next" value="<% $next %>" />
 
diff --git a/share/html/Elements/QuickCreate b/share/html/Elements/QuickCreate
index 00ee3bd593..00808c1e57 100644
--- a/share/html/Elements/QuickCreate
+++ b/share/html/Elements/QuickCreate
@@ -54,34 +54,25 @@
 >
 <input type="hidden" class="hidden" name="QuickCreate" value="1" />
 <div>
-  <div class="form-row input-row">
-    <div class="label col-3"><&|/l&>Subject</&>:</div>
-    <div class="value col-9"><input type="text" size="50" class="form-control" name="Subject" value="<% $args->{Subject} || '' %>" /></div>
-  </div>
-  <div class="form-row input-row">
-    <div class="label col-3"><&|/l&>Queue</&>:</div>
-    <div class="value col-9">
-      <& /Elements/SelectNewTicketQueue, Name => 'Queue', Default => $args->{Queue} &>
-    </div>
-  </div>
-  <div class="form-row input-row">
-      <div class="label col-3"><&|/l&>Owner</&>:</div>
-      <div class="value col-9">
-        <select type="select" name="Owner" class="selectpicker form-control">
+  <&| /Elements/LabeledValue, Label => loc("Subject"), Class => 'input-row' &>
+    <input type="text" size="50" class="form-control" name="Subject" value="<% $args->{Subject} || '' %>" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Queue"), Class => 'input-row' &>
+    <& /Elements/SelectNewTicketQueue, Name => 'Queue', Default => $args->{Queue} &>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Owner"), Class => 'input-row' &>
+      <select type="select" name="Owner" class="selectpicker form-control">
 % my $default_owner = $args->{Owner} || $session{'CurrentUser'}->id;
-          <option value="<%$session{'CurrentUser'}->id%>" <% $default_owner == $session{'CurrentUser'}->id ? 'selected="selected"' : '' |n %>><&|/l&>Me</&></option>
-          <option value="<%RT->Nobody->id%>" <% $default_owner == RT->Nobody->id ? 'selected="selected"' : '' |n %>><%loc('Nobody')%></option>
-        </select>
-      </div>
-  </div>
-  <div class="form-row input-row">
-    <div class="label col-3"><&|/l&>Requestors</&>:</div>
-    <div class="value col-9"><& /Elements/EmailInput, Name => 'Requestors', AutocompleteType => 'Principals', Size => '40', Default => $args->{Requestors} || $session{CurrentUser}->EmailAddress, AutocompleteMultiple => 1 &></div>
-  </div>
-  <div class="form-row input-row">
-    <div class="label col-3"><&|/l&>Content</&>:</div>
-    <div class="value col-9"><textarea class="form-control" name="Content" cols="50" rows="3"><% $args->{Content} || ''%></textarea></div>
-  </div>
+        <option value="<%$session{'CurrentUser'}->id%>" <% $default_owner == $session{'CurrentUser'}->id ? 'selected="selected"' : '' |n %>><&|/l&>Me</&></option>
+        <option value="<%RT->Nobody->id%>" <% $default_owner == RT->Nobody->id ? 'selected="selected"' : '' |n %>><%loc('Nobody')%></option>
+      </select>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Requestors"), Class => 'input-row' &>
+    <& /Elements/EmailInput, Name => 'Requestors', AutocompleteType => 'Principals', Size => '40', Default => $args->{Requestors} || $session{CurrentUser}->EmailAddress, AutocompleteMultiple => 1 &>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Content"), Class => 'input-row' &>
+    <textarea class="form-control" name="Content" cols="50" rows="3"><% $args->{Content} || ''%></textarea>
+  </&>
 </div>
 
 <div class="form-row">
diff --git a/share/html/Elements/ShowRecord b/share/html/Elements/ShowRecord
index 2ed27c88eb..594367226c 100644
--- a/share/html/Elements/ShowRecord
+++ b/share/html/Elements/ShowRecord
@@ -79,8 +79,12 @@ for my $column (@columns) {
         $title = $fetch_columnmap->($attr,'title',[$attr]);
     }
 </%perl>
-<div class="record-field form-row <% $Class ? CSSClass("$Class-field") : "" %> <% CSSClass($fetch_columnmap->($attr,'attribute',[$attr],'no_escape')) %>">
-<div class="label col-3"><% loc($title) |n %></div>
+<&| /Elements/LabeledValue,
+    RawLabel => loc($title),
+    Class => 'record-field '.
+        ( $Class ? CSSClass("$Class-field")." " : "" ) .
+        CSSClass($fetch_columnmap->($attr,'attribute',[$attr],'no_escape'))
+     &>
 <%perl>
     my @out;
     foreach my $subcol ( @{ $column->{output} } ) {
@@ -92,9 +96,10 @@ for my $column (@columns) {
         push @out, $fetch_columnmap->($col, 'value', [$Object]);
     }
     @out = grep { defined $_ and length $_ } @out;
+    $m->out(join("", @out));
+    $m->callback(CallbackName => 'AfterValue', Object => $Object, attribute => $attr, column => $column );
+
 </%perl>
-<div class="value col-9"><span class="current-value"><% join('', at out) |n %></span></div>
-% $m->callback(CallbackName => 'AfterValue', Object => $Object, attribute => $attr, column => $column );
-</div>
+</&>
 % }
 </div>

commit 986aa00513d61287b559ba81c056c867472e745b
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 18:23:29 2022 -0700

    Port Search/Bulk to LabeledValue

diff --git a/share/html/Search/Bulk.html b/share/html/Search/Bulk.html
index 68767c4f31..1b9a2855f0 100644
--- a/share/html/Search/Bulk.html
+++ b/share/html/Search/Bulk.html
@@ -89,259 +89,139 @@
   <div class="form-row">
     <div class="col-6">
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make Owner</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/SelectOwner, Name => "Owner", Default => $ARGS{Owner} || '' &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => loc("Make Owner") &>
+        <& /Elements/SelectOwner, Name => "Owner", Default => $ARGS{Owner} || '' &>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3"></div>
-        <div class="value col-9">
+      <&| /Elements/LabeledValue, Label => '' &>
           <div class="custom-control custom-checkbox">
             <input type="checkbox" id="ForceOwnerChange" class="checkbox custom-control-input" name="ForceOwnerChange"
               <% $ARGS{ForceOwnerChange} ? 'checked="checked"' : '' %>
             />
             <label for="ForceOwnerChange" class="custom-control-label">(<&|/l&>Force change</&>)</label>
           </div>
-        </div>
-      </div>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Add Requestor</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/EmailInput, Name => "AddRequestor", Size=> 20, Default => $ARGS{AddRequestor}, AutocompleteType => 'Principals' &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => loc("Add Requestor") &>
+        <& /Elements/EmailInput, Name => "AddRequestor", Size=> 20, Default => $ARGS{AddRequestor}, AutocompleteType => 'Principals' &>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Remove Requestor</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/EmailInput, Name => "DeleteRequestor", Size=> 20, Default => $ARGS{DeleteRequestor}, AutocompleteType => 'Principals' &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => loc("Remove Requestor") &>
+        <& /Elements/EmailInput, Name => "DeleteRequestor", Size=> 20, Default => $ARGS{DeleteRequestor}, AutocompleteType => 'Principals' &>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3"></div>
-        <div class="value col-9">
+      <&| /Elements/LabeledValue, Label => '' &>
           <div class="custom-control custom-checkbox">
             <input type="checkbox" id="ClearRequestor" class="checkbox custom-control-input" name="ClearRequestor"
               <% $ARGS{ClearRequestor} ? 'checked="checked"' : '' %>
             />
             <label for="ClearRequestor" class="custom-control-label"><&|/l&>Clear Requestor</&></label>
           </div>
-        </div>
-      </div>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Add Cc</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/EmailInput, Name => "AddCc", Size=> 20, Default => $ARGS{AddCc}, AutocompleteType => 'Principals' &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => 'Add Cc' &>
+        <& /Elements/EmailInput, Name => "AddCc", Size=> 20, Default => $ARGS{AddCc}, AutocompleteType => 'Principals' &>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Remove Cc</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/EmailInput, Name => "DeleteCc", Size=> 20, Default => $ARGS{DeleteCc}, AutocompleteType => 'Principals' &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => 'Remove Cc' &>
+        <& /Elements/EmailInput, Name => "DeleteCc", Size=> 20, Default => $ARGS{DeleteCc}, AutocompleteType => 'Principals' &>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3"></div>
-        <div class="value col-9">
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" id="ClearCc" class="checkbox custom-control-input" name="ClearRequestor"
-              <% $ARGS{ClearCc} ? 'checked="checked"' : '' %>
-            />
-            <label for="ClearCc" class="custom-control-label"><&|/l&>Clear Cc</&></label>
-          </div>
+      <&| /Elements/LabeledValue, Label => '' &>
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" id="ClearCc" class="checkbox custom-control-input" name="ClearRequestor"
+            <% $ARGS{ClearCc} ? 'checked="checked"' : '' %>
+          />
+        <label for="ClearCc" class="custom-control-label"><&|/l&>Clear Cc</&></label>
         </div>
-      </div>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Add AdminCc</&>:
-        </div>
-        <div class="value col-9">
+      <&| /Elements/LabeledValue, Label => 'Add AdminCc' &>
           <& /Elements/EmailInput, Name => "AddAdminCc", Size=> 20, Default => $ARGS{AddAdminCc}, AutocompleteType => 'Principals' &>
-        </div>
-      </div>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Remove AdminCc</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/EmailInput, Name => "DeleteAdminCc", Size=> 20, Default => $ARGS{DeleteAdminCc}, AutocompleteType => 'Principals' &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => 'Remove AdminCc' &>
+        <& /Elements/EmailInput, Name => "DeleteAdminCc", Size=> 20, Default => $ARGS{DeleteAdminCc}, AutocompleteType => 'Principals' &>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3"></div>
-        <div class="value col-9">
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" id="ClearAdminCc" class="checkbox custom-control-input" name="ClearAdminCc"
-              <% $ARGS{ClearAdminCc} ? 'checked="checked"' : '' %>
-            />
-            <label for="ClearAdminCc" class="custom-control-label"><&|/l&>Clear AdminCc</&></label>
-          </div>
+    <&| /Elements/LabeledValue, Label => '' &>
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" id="ClearAdminCc" class="checkbox custom-control-input" name="ClearAdminCc"
+            <% $ARGS{ClearAdminCc} ? 'checked="checked"' : '' %>
+          />
+          <label for="ClearAdminCc" class="custom-control-label"><&|/l&>Clear AdminCc</&></label>
         </div>
-      </div>
+      </&>
 
 % my $single_roles = RT::CustomRoles->new($session{CurrentUser});
 % $single_roles->LimitToSingleValue;
 % $single_roles->LimitToObjectId($_) for keys %$seen_queues;
 % while (my $role = $single_roles->Next) {
-      <div class="form-row">
-        <div class="label col-3">
-          <span class="<% $role->EntryHint ? 'prev-icon-helper' : '' %>"><&|/l, $role->Name &>Make [_1]</&>:</span>\
-%         if ($role->EntryHint) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $role->EntryHint %>"></span>
-%         }
-        </div>
-        <div class="value col-9">
-          <& /Elements/SingleUserRoleInput, role => $role, ShowPlaceholder => 0, ShowEntryHint => 0, Size => 20, Default => $ARGS{"RT::CustomRole-" . $role->Id} &>
-        </div>
-      </div>
+  <&| /Elements/LabeledValue, Label => loc("Make [_1]", $role->Name), LabelTooltip => $role->EntryHint &>
+    <& /Elements/SingleUserRoleInput, role => $role, ShowPlaceholder => 0, ShowEntryHint => 0, Size => 20, Default => $ARGS{"RT::CustomRole-" . $role->Id} &>
+  </&>
 % }
 
 % my $multi_roles = RT::CustomRoles->new($session{CurrentUser});
 % $multi_roles->LimitToMultipleValue;
 % $multi_roles->LimitToObjectId($_) for keys %$seen_queues;
 % while (my $role = $multi_roles->Next) {
-      <div class="form-row">
-        <div class="label col-3">
-          <span class="<% $role->EntryHint ? 'prev-icon-helper' : '' %>"><&|/l, $role->Name &>Add [_1]</&>:</span>\
-%         if ($role->EntryHint) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $role->EntryHint %>"></span>
-%         }
-        </div>
-        <div class="value col-9">
-          <& /Elements/MultiUserRoleInput, role => $role, Name => "AddRT::CustomRole-" . $role->Id, Size=> 20, Default => $ARGS{"AddRT::CustomRole-" . $role->Id}, AutocompleteMultiple => 0 &>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <span class="<% $role->EntryHint ? 'prev-icon-helper' : '' %>"><&|/l, $role->Name &>Remove [_1]</&>:</span>\
-%         if ($role->EntryHint) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $role->EntryHint %>"></span>
-%         }
-        </div>
-        <div class="value col-9">
-          <& /Elements/MultiUserRoleInput, role => $role, Name => "DeleteRT::CustomRole-" . $role->Id, Size=> 20, Default => $ARGS{"DeleteRT::CustomRole-" . $role->Id}, AutocompleteMultiple => 0 &>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3"></div>
-        <div class="value col-9">
-          <div class="custom-control custom-checkbox">
-            <input type="checkbox" id="ClearRT::CustomRole-<% $role->Id %>" class="checkbox custom-control-input" name="ClearRT::CustomRole-<% $role->Id %>"
-              <% $ARGS{'ClearRT::CustomRole-' . $role->Id} ? 'checked="checked"' : '' %>
-            />
-            <label for="ClearRT::CustomRole-<% $role->Id %>" class="custom-control-label"><&|/l, $role->Name&>Clear [_1]</&></label>
-          </div>
-        </div>
-      </div>
+  <&| /Elements/LabeledValue, Label => loc("Add [_1]", $role->Name), LabelTooltip => $role->EntryHint &>
+    <& /Elements/MultiUserRoleInput, role => $role, Name => "AddRT::CustomRole-" . $role->Id, Size=> 20, Default => $ARGS{"AddRT::CustomRole-" . $role->Id}, AutocompleteMultiple => 0 &>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Remove [_1]", $role->Name), LabelTooltip => $role->EntryHint &>
+    <& /Elements/MultiUserRoleInput, role => $role, Name => "DeleteRT::CustomRole-" . $role->Id, Size=> 20, Default => $ARGS{"DeleteRT::CustomRole-" . $role->Id}, AutocompleteMultiple => 0 &>
+  </&>
+
+  <&| /Elements/LabeledValue, Label => '' &>
+    <div class="custom-control custom-checkbox">
+     <input type="checkbox" id="ClearRT::CustomRole-<% $role->Id %>" class="checkbox custom-control-input" name="ClearRT::CustomRole-<% $role->Id %>"
+      <% $ARGS{'ClearRT::CustomRole-' . $role->Id} ? 'checked="checked"' : '' %>
+    />
+    <label for="ClearRT::CustomRole-<% $role->Id %>" class="custom-control-label"><&|/l, $role->Name&>Clear [_1]</&></label>
+  </div>
+</&>
 % }
 
     </div>
     <div class="col-6">
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make subject</&>:
-        </div>
-        <div class="value col-9">
-          <input class="form-control" type="text" name="Subject" size="20" value="<% $ARGS{Subject} || '' %>"/>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => loc("Make subject") &>
+        <input class="form-control" type="text" name="Subject" size="20" value="<% $ARGS{Subject} || '' %>"/>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make priority</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/SelectPriority, Name => "Priority", Default => $ARGS{Priority}, Queues => $seen_queues &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => loc("Make priority") &>
+        <& /Elements/SelectPriority, Name => "Priority", Default => $ARGS{Priority}, Queues => $seen_queues &>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make queue</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/SelectQueue, Name => "Queue", Default => $ARGS{Queue} &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => loc("Make queue") &>
+        <& /Elements/SelectQueue, Name => "Queue", Default => $ARGS{Queue} &>
+      </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make Status</&>:
-        </div>
-        <div class="value col-9">
-          <& /Ticket/Elements/SelectStatus, Name => "Status", Default => $ARGS{Status}, Queues => $seen_queues &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => loc("Make status") &>
+        <& /Ticket/Elements/SelectStatus, Name => "Status", Default => $ARGS{Status}, Queues => $seen_queues &>
+      </&>
 
 % if ($hasSLA) {
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make SLA</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/SelectSLA, Name => "SLA", Default => $ARGS{SLA} &>
-        </div>
-      </div>
+  <&| /Elements/LabeledValue, Label => loc("Make SLA") &>
+    <& /Elements/SelectSLA, Name => "SLA", Default => $ARGS{SLA} &>
+  </&>
 % }
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make date Starts</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/SelectDate, Name => "Starts_Date", Default => $ARGS{Starts_Date} || '' &>
-        </div>
-      </div>
+<&| /Elements/LabeledValue, Label => loc("Make date Starts") &>
+  <& /Elements/SelectDate, Name => "Starts_Date", Default => $ARGS{Starts_Date} || '' &>
+</&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make date Started</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/SelectDate, Name => "Started_Date", Default => $ARGS{Started_Date} || '' &>
-        </div>
-      </div>
+<&| /Elements/LabeledValue, Label => loc("Make date Started") &>
+  <& /Elements/SelectDate, Name => "Started_Date", Default => $ARGS{Started_Date} || '' &>
+</&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make date Told</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/SelectDate, Name => "Told_Date", Default => $ARGS{Told_Date} || '' &>
-        </div>
-      </div>
+<&| /Elements/LabeledValue, Label => loc("Make date Told") &>
+  <& /Elements/SelectDate, Name => "Told_Date", Default => $ARGS{Told_Date} || '' &>
+</&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Make date Due</&>:
-        </div>
-        <div class="value col-9">
-          <& /Elements/SelectDate, Name => "Due_Date", Default => $ARGS{Due_Date} || '' &>
-        </div>
-      </div>
+<&| /Elements/LabeledValue, Label => loc("Make date Due") &>
+  <& /Elements/SelectDate, Name => "Due_Date", Default => $ARGS{Due_Date} || '' &>
+</&>
     </div>
   </div>
 </&>

commit db87d17cedf36caf7ee25baa23b6c83fd61ec9be
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 18:23:10 2022 -0700

    Port Dashboards to LabeledValue

diff --git a/share/html/Dashboards/Modify.html b/share/html/Dashboards/Modify.html
index 9b0da0e371..d644db725b 100644
--- a/share/html/Dashboards/Modify.html
+++ b/share/html/Dashboards/Modify.html
@@ -58,34 +58,18 @@
 % }
 
 <&|/Widgets/TitleBox, title => loc('Basics') &>
+  <&| /Elements/LabeledValue, Label => loc('Name') &>
+    <input class="form-control" type="text" name="Name" value="<%$Dashboard->Name%>" />
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Name</&>:
-    </div>
-    <div class="value col-9">
-        <input class="form-control" type="text" name="Name" value="<%$Dashboard->Name%>" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Privacy</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Privacy') &>
       <& /Dashboards/Elements/SelectPrivacy, Name => "Privacy", Objects => \@privacies, Default => $Dashboard->Privacy &>
-    </div>
-  </div>
+  </&>
 
 % if ( $Dashboard->Id && $Dashboard->{Attribute}->DependedOnBy->Count ) {
-  <div class="form-row">
-    <div class="label col-3"><&|/l&>Depended on by</&>:</div>
-    <div class="col-9">
-      <span class="form-control current-value">
-        <a href="#" data-toggle="modal" data-target="#dashboard-depended-on-by-list-modal"><% loc('View') %></a>
-      </span>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc('Depended on by'), ValueSpanClass => 'form-control current-value' &>
+    <a href="#" data-toggle="modal" data-target="#dashboard-depended-on-by-list-modal"><% loc('View') %></a>
+  </&>
 % }
 </&>
 
diff --git a/share/html/Dashboards/Subscription.html b/share/html/Dashboards/Subscription.html
index 2b7b7eb889..ecf13fd207 100644
--- a/share/html/Dashboards/Subscription.html
+++ b/share/html/Dashboards/Subscription.html
@@ -54,23 +54,11 @@
 <input type="hidden" class="hidden" name="id" value="<% $fields{'DashboardId'} %>" />
 
 <&| /Widgets/TitleBox, title => loc('Dashboard') &>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Dashboard</&>:
-    </div>
-    <div class="value col-9">
-      <span class="current-value form-control"><% $Dashboard->Name %></span>
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Queries</&>:
-    </div>
-    <div class="value col-9">
+<& /Elements/LabeledValue, Label => loc('Dashboard'), ValueSpanClass => 'current-value form-control', Value => $Dashboard->Name &>
+<&| /Elements/LabeledValue, Label => loc('Queries'), ValueSpanClass => 'current-value form-control' &>
 % my @portlets = grep { defined } $Dashboard->Portlets;
 % if (!@portlets) {
-      <span class="current-value form-control">(<&|/l&>none</&>)</span>
+(<&|/l&>none</&>)
 % } else {
       <ol class="dashboard-queries list-group list-group-compact">
 %   for my $portlet (@portlets) {
@@ -80,17 +68,12 @@
 %   }
       </ol>
 % }
-    </div>
-  </div>
+  </&>
 </&>
 
 <&| /Widgets/TitleBox, title => loc('Subscription') &>
+<&| /Elements/LabeledValue, Label => loc('Frequency') &>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Frequency</&>:
-    </div>
-    <div class="value col-9">
       <div class="form-row">
         <div class="col-auto">
           <div class="custom-control custom-radio">
@@ -169,14 +152,9 @@
           </span>
         </div>
       </div>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Hour</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Hour') &>
       <div class="row">
         <div class="col-auto">
           <select name="Hour" class="form-control selectpicker">
@@ -202,14 +180,9 @@
           <span class="current-value form-control">(<%$timezone%>)</span>
         </div>
       </div>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Language</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Language') &>
       <div class="row">
         <div class="col-auto">
           <& /Elements/SelectLang,
@@ -219,14 +192,9 @@
            &>
         </div>
       </div>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Rows</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Rows') &>
       <div class="row">
         <div class="col-auto">
           <select name="Rows" class="form-control selectpicker">
@@ -236,19 +204,15 @@
           </select>
         </div>
       </div>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" id="SuppressIfEmpty" name="SuppressIfEmpty" class="custom-control-input" value="1"  <% $fields{'SuppressIfEmpty'} ? 'checked="checked"' : "" |n %>>
         <label class="custom-control-label" for="SuppressIfEmpty"><&|/l&>Suppress if empty (Check this to avoid sending mail if all searches have no results)</&></label>
         <input type="hidden" class="hidden" name="SuppressIfEmpty-Magic" value="1" />
       </div>
-    </div>
-  </div>
+  </&>
 
 % $m->callback( %ARGS, CallbackName => 'SubscriptionFormEnd', FieldsRef => \%fields,
 %     SubscriptionObj => $SubscriptionObj, DashboardObj => $Dashboard );
@@ -264,11 +228,7 @@
   <&|/l&>For searches like "10 highest priority tickets I own" that contain __CurrentUser__ in the query, the results are specific to each recipient. For dashboards with these searches, select "Each dashboard recipient" below to run each search with the recipient set as the "Current User".</&>
   </p>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Run Dashboard Searches As</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Run Dashboard Searches As') &>
       <div class="custom-control custom-radio">
         <input type="radio" id="context-subscriber" name="Context" class="custom-control-input" value="subscriber" <% ($fields{'Context'} // '') ne 'recipient' ? 'checked="checked"' : "" |n %>></input>
         <label class="custom-control-label" for="context-subscriber"><&|/l&>Subscription owner</&>(<% $session{CurrentUser}->Name %>)</label>
@@ -277,8 +237,7 @@
         <input type="radio" id="context-recipient" name="Context" class="custom-control-input" value="recipient" <% ($fields{'Context'} // '') eq 'recipient' ? 'checked="checked"' : "" |n %>></input>
         <label class="custom-control-label" for="context-recipient"><&|/l&>Each dashboard recipient</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 </&>
 
 <&| /Widgets/TitleBox, title => loc('Recipients') &>

commit 0e6a2b9f893ffcebc5b37682dd52dd381f2539c4
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 18:22:30 2022 -0700

    Port Install to LabeledValue

diff --git a/share/html/Install/index.html b/share/html/Install/index.html
index 9fb50a7da4..cc66aae1d0 100644
--- a/share/html/Install/index.html
+++ b/share/html/Install/index.html
@@ -56,19 +56,15 @@
 <h1><% loc('Language') %></h1>
 
 <div class="select-lang">
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Select another language</&>:
-    </div>
-
-    <div class="col-9 input-group">
+  <&| /Elements/LabeledValue, Label => loc("Select another language") &>
+    <div class="input-group">
       <& /Elements/SelectLang,
         Name => 'Lang',
         Default => $lang_handle? $lang_handle->language_tag : undef,
       &>
       <input type="submit"  class="btn btn-primary"  name="ChangeLang"  value="<% loc('Change') %>" >
     </div>
-  </div>
+  </&>
 </div>
 
 <h1><% loc('What is RT?') %></h1>

commit 143e9118010245c20dd40f1df70d580de699e0fb
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 18:21:44 2022 -0700

    Port Tools to LabeledValue

diff --git a/share/html/Tools/MyDay.html b/share/html/Tools/MyDay.html
index 25720c033f..84983730ff 100644
--- a/share/html/Tools/MyDay.html
+++ b/share/html/Tools/MyDay.html
@@ -66,39 +66,24 @@
   <div <%$class|n%>>
 
     <div class="col-6">
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Worked</&>:
-        </div>
-        <div class="value col-auto">
+      <&| /Elements/LabeledValue, Label => loc("Worked") &>
           <div class="input-group mb-3">
             <input class="form-control" type="text" size="3" name="UpdateTimeWorked-<%$Ticket->Id%>" />
             <div class="input-group-append">
               <span class="input-group-text"><&|/l&>minutes</&></span>
             </div>
           </div>
-        </div>
-      </div>
+    </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Status</&>:
-        </div>
-        <div class="value col-auto">
-          <& /Ticket/Elements/SelectStatus, Name=> 'UpdateStatus-'.$Ticket->Id, TicketObj => $Ticket &>
-        </div>
-      </div>
+    <&| /Elements/LabeledValue, Label => loc("Status") &>
+      <& /Ticket/Elements/SelectStatus, Name=> 'UpdateStatus-'.$Ticket->Id, TicketObj => $Ticket &>
+    </&>
     </div>
-
     <div class="col-6">
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Comments</&>:
-        </div>
-        <div class="value col-9">
-          <textarea class="form-control" name="UpdateContent-<%$Ticket->Id%>" rows="5" cols="60"></textarea>
-        </div>
-      </div>
+
+    <&| /Elements/LabeledValue, Label => loc("Comments") &>
+      <textarea class="form-control" name="UpdateContent-<%$Ticket->Id%>" rows="5" cols="60"></textarea>
+    </&>
     </div>
   </div>
 % }

commit 0ade6f60e62a9df5997a42a88e9f262a60173413
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 17:58:29 2022 -0700

    Port SelfService to LabeledValue

diff --git a/share/html/SelfService/Elements/RequestUpdate b/share/html/SelfService/Elements/RequestUpdate
index fbb1972263..4fc5d347ac 100644
--- a/share/html/SelfService/Elements/RequestUpdate
+++ b/share/html/SelfService/Elements/RequestUpdate
@@ -53,23 +53,13 @@ action="<%RT->Config->Get('WebPath')%><% $r->path_info %>"
 % $m->callback(CallbackName => 'InFormElement');
 >
     <input type="hidden" class="hidden" name="QuickCreate" value="1" />
-    <div class="form-row">
-      <div class="label col-3">
-        <&|/l&>Subject</&>:
-      </div>
-      <div class="value col-9">
-        <input class="form-control" type="text" size="50" name="Subject" value="<% $args->{Subject} || loc('Please update my user information') %>" />
-      </div>
-    </div>
+    <&| /Elements/LabeledValue, Label => loc("Subject") &>
+      <input class="form-control" type="text" size="50" name="Subject" value="<% $args->{Subject} || loc('Please update my user information') %>" />
+    </&>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Description</&>:
-        </div>
-        <div class="value col-9">
-          <textarea class="form-control" name="Content" cols="50" rows="3"><% $args->{Content} || ''%></textarea></td>
-        </div>
-      </div>
+    <&| /Elements/LabeledValue, Label => loc("Description") &>
+      <textarea class="form-control" name="Content" cols="50" rows="3"><% $args->{Content} || ''%></textarea></td>
+    </&>
 
       <div class="form-row">
         <div class="col-12">
diff --git a/share/html/SelfService/Prefs.html b/share/html/SelfService/Prefs.html
index 128d534847..48e0994f49 100644
--- a/share/html/SelfService/Prefs.html
+++ b/share/html/SelfService/Prefs.html
@@ -57,23 +57,13 @@
 
     <div class="col-6">
       <&| /Widgets/TitleBox, title => loc('Locale'), id => "user-prefs-identity" &>
-        <div class="form-row">
-          <div class="label col-3">
-            <&|/l&>Language</&>:
-          </div>
-          <div class="value col-9">
+        <&| /Elements/LabeledValue, Label => loc("Language") &>
             <& /Elements/SelectLang, Name => 'Lang', Default => $user->Lang &>
-          </div>
-        </div>
-
-        <div class="form-row">
-          <div class="label col-3">
-                <&|/l&>Timezone</&>:
-          </div>
-          <div class="value col-9">
-            <& /Elements/SelectTimezone, Name => 'Timezone', Default => $user->Timezone &>
-          </div>
-        </div>
+        </&>
+
+        <&| /Elements/LabeledValue, Label => loc("Timezone") &>
+          <& /Elements/SelectTimezone, Name => 'Timezone', Default => $user->Timezone &>
+        </&>
       </&>
     </div>
 

commit 3ad0feaa4d3f8ab0a8dc5eecf05b4c57a38e9893
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 17:57:25 2022 -0700

    Port the bulk of Ticket to LabeledValue

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..43f3d84124 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 &></div>
+</&>
 
 % }
 
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 31a5b6a9bc..f7fc157d31 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>

commit fdebb13b40dadbb50e0df315873fa8b193428d7e
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 17:55:19 2022 -0700

    Port Prefs to LabeledValue

diff --git a/share/html/Prefs/Elements/EditAboutMe b/share/html/Prefs/Elements/EditAboutMe
index be8a11a343..ae58564fe3 100644
--- a/share/html/Prefs/Elements/EditAboutMe
+++ b/share/html/Prefs/Elements/EditAboutMe
@@ -54,49 +54,23 @@
 
     <&| /Widgets/TitleBox, title => loc('Identity'), id => "user-prefs-identity" &>
       <input type="hidden" class="hidden" name="Name" value="<%$UserObj->Name%>" />
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Email</&>:
-        </div>
-        <div class="value col-9">
+
+      <&| /Elements/LabeledValue, Label => loc("Email") &>
           <input class="form-control" type="text" name="EmailAddress" value="<%$UserObj->EmailAddress%>" />
-        </div>
-      </div>
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Real Name") &>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Real Name</&>:
-        </div>
-        <div class="value col-9">
           <input class="form-control" type="text" name="RealName" value="<%$UserObj->RealName%>" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Nickname</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Nickname") &>
           <input class="form-control" type="text" name="NickName" value="<%$UserObj->NickName || ''%>" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Language</&>:
-        </div>
-        <div class="value col-9">
+           </&>
+      <&| /Elements/LabeledValue, Label => loc("Language") &>
           <& /Elements/SelectLang, Name => 'Lang', Default => $UserObj->Lang &>
-        </div>
-      </div>
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Timezone</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Timezone") &>
           <& /Elements/SelectTimezone, Name => 'Timezone', Default => $UserObj->Timezone &>
-        </div>
-      </div>
+      </&>
 
       <div class="form-row">
         <& /Elements/EditCustomFields, Object => $UserObj, Grouping => 'Identity' &>
@@ -104,42 +78,18 @@
     </&>
 
     <&| /Widgets/TitleBox, title => loc('Phone numbers'), id => "user-prefs-phone" &>
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Residence</&>:
-        </div>
-        <div class="value col-9">
+      <&| /Elements/LabeledValue, Label => loc("Residence") &>
           <input class="form-control" type="tel" name="HomePhone" value="<%$UserObj->HomePhone || ''%>" size="13" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Work</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Work") &>
           <input class="form-control" type="tel" name="WorkPhone" value="<%$UserObj->WorkPhone || ''%>" size="13" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Mobile</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Mobile") &>
           <input class="form-control" type="tel" name="MobilePhone" value="<%$UserObj->MobilePhone || ''%>" size="13" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Pager</&>:
-        </div>
-        <div class="value col-9">
+          </&>
+      <&| /Elements/LabeledValue, Label => loc("Pager") &>
           <input class="form-control" type="tel" name="PagerPhone" value="<%$UserObj->PagerPhone || ''%>" size="13" />
-        </div>
-      </div>
-
+      </&>
       <div class="form-row">
         <div class="label col-12">
           <& /Elements/EditCustomFields, Object => $UserObj, Grouping => 'Phones' &>
@@ -185,71 +135,32 @@
 
 % my $AdminUser = $session{'CurrentUser'}->HasRight( Object => RT->System, Right => 'AdminUsers' );
     <&| /Widgets/TitleBox, title => loc('Location'), id => "user-prefs-location" &>
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Organization</&>:
-        </div>
-        <div class="value col-9">
+      <&| /Elements/LabeledValue, Label => loc("Organization") &>
+
 %if ( $AdminUser ) {
           <input class="form-control" type="text" name="Organization" value="<%$UserObj->Organization || ''%>" />
 %} else {
           <span class="current-value form-control"><%$UserObj->Organization || ''%></span>
 %}
-        </div>
-      </div>
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Address1</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Address1") &>
           <input class="form-control" type="text" name="Address1" value="<%$UserObj->Address1 || ''%>" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Address2</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Address2") &>
           <input class="form-control" type="text" name="Address2" value="<%$UserObj->Address2 || ''%>" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>City</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("City") &>
           <input class="form-control" type="text" name="City" value="<%$UserObj->City || ''%>" size="14" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>State</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("State") &>
           <input class="form-control" type="text" name="State" value="<%$UserObj->State || ''%>" size="3" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Zip</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Zip") &>
           <input class="form-control" type="text" name="Zip" value="<%$UserObj->Zip || ''%>" size="9" />
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Country</&>:
-        </div>
-        <div class="value col-9">
+      </&>
+      <&| /Elements/LabeledValue, Label => loc("Country") &>
           <input class="form-control" type="text" name="Country" value="<%$UserObj->Country || ''%>" />
-        </div>
-      </div>
+      </&>
 
       <div class="form-row">
         <div class="col-12">
diff --git a/share/html/Prefs/Elements/ShowAboutMe b/share/html/Prefs/Elements/ShowAboutMe
index 295524b4db..62d30b7bdf 100644
--- a/share/html/Prefs/Elements/ShowAboutMe
+++ b/share/html/Prefs/Elements/ShowAboutMe
@@ -51,62 +51,23 @@
 
     <&| /Widgets/TitleBox, title => loc('Identity'), id => "user-prefs-identity" &>
       <input type="hidden" class="hidden" name="Name" value="<%$UserObj->Name%>" />
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Email</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->EmailAddress%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Real Name</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->RealName%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Nickname</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->NickName || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Language</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value">
+      <& /Elements/LabeledValue, Label => loc("Email"), ValueSpanClass => 'current-value', Value => $UserObj->EmailAddress &>
+      <& /Elements/LabeledValue, Label => loc("Real Name"), ValueSpanClass => 'current-value', Value => $UserObj->RealName &>
+      <& /Elements/LabeledValue, Label => loc("Nickname"),  ValueSpanClass => 'current-value', Value => $UserObj->NickName &>
+      <&| /Elements/LabeledValue, Label => loc("Language"), ValueSpanClass => 'current-value' &>
 % if ( $UserObj->Lang ) {
             <&|/l, $lang &>[_1]</&>
 % } else {
             <&|/l&>System Default</&> (<% I18N::LangTags::List::name($session{CurrentUser}->LanguageHandle->language_tag) %>)
 % }
-          </span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Timezone</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value">
+     </&>
+      <&| /Elements/LabeledValue, Label => loc("Timezone"), ValueSpanClass => 'current-value' &>
 % if ( $UserObj->Timezone ) {
             <%$UserObj->Timezone%>
 % } else {
             <&|/l&>System Default</&> (<% RT->Config->Get('Timezone') %>)
 % }
-          </span>
-        </div>
-      </div>
+      </&>
 
       <div class="form-row">
         <& /Elements/ShowCustomFields, Object => $UserObj, Grouping => 'Identity' &>
@@ -115,41 +76,10 @@
     </&>
 
     <&| /Widgets/TitleBox, title => loc('Phone numbers'), id => "user-prefs-phone" &>
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Residence</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->HomePhone || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Work</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->WorkPhone || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Mobile</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->MobilePhone || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Pager</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->PagerPhone || ''%></span>
-        </div>
-      </div>
+      <& /Elements/LabeledValue, Label => loc("Residence"), ValueSpanClass => 'current-value', Value => $UserObj->HomePhone &>
+      <& /Elements/LabeledValue, Label => loc("Work"), ValueSpanClass => 'current-value', Value => $UserObj->WorkPhone &>
+      <& /Elements/LabeledValue, Label => loc("Mobile"), ValueSpanClass => 'current-value', Value => $UserObj->MobilePhone &>
+      <& /Elements/LabeledValue, Label => loc("Pager"), ValueSpanClass => 'current-value', Value => $UserObj->PagerPhone &>
 
       <div class="form-row">
         <& /Elements/ShowCustomFields, Object => $UserObj, Grouping => 'Phones' &>
@@ -163,68 +93,14 @@
   <div class="col-6">
 
     <&| /Widgets/TitleBox, title => loc('Location'), id => "user-prefs-location" &>
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Organization</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->Organization || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Address1</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->Address1 || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Address2</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->Address2 || ''%></span>
-        </div>
-      </div>
 
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>City</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->City || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>State</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->State || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Zip</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->Zip || ''%></span>
-        </div>
-      </div>
-
-      <div class="form-row">
-        <div class="label col-3">
-          <&|/l&>Country</&>:
-        </div>
-        <div class="value col-9">
-          <span class="current-value"><%$UserObj->Country || ''%></span>
-        </div>
-      </div>
+      <& /Elements/LabeledValue, Label => loc("Organization"), ValueSpanClass => 'current-value', Value => $UserObj->Organization &>
+      <& /Elements/LabeledValue, Label => loc("Address1"), ValueSpanClass => 'current-value', Value => $UserObj->Address1 &>
+      <& /Elements/LabeledValue, Label => loc("Address2"), ValueSpanClass => 'current-value', Value => $UserObj->Address2 &>
+      <& /Elements/LabeledValue, Label => loc("City"), ValueSpanClass => 'current-value', Value => $UserObj->City &>
+      <& /Elements/LabeledValue, Label => loc("State"), ValueSpanClass => 'current-value', Value => $UserObj->State &>
+      <& /Elements/LabeledValue, Label => loc("Zip"), ValueSpanClass => 'current-value', Value => $UserObj->Zip &>
+      <& /Elements/LabeledValue, Label => loc("Country"), ValueSpanClass => 'current-value', Value => $UserObj->Country &>
 
       <div class="form-row">
         <& /Elements/ShowCustomFields, Object => $UserObj, Grouping => 'Location' &>

commit c31e113f55e54c138436376bd81978bbda720a68
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 17:53:21 2022 -0700

    Port Assets to LabeledValue

diff --git a/share/html/Asset/Elements/AddCatalogPeople b/share/html/Asset/Elements/AddCatalogPeople
index 50d549ed04..67aa0a5a3c 100644
--- a/share/html/Asset/Elements/AddCatalogPeople
+++ b/share/html/Asset/Elements/AddCatalogPeople
@@ -50,34 +50,24 @@ $Object
 </%args>
 <div class="add-user">
   <h3><&|/l&>Add a person</&></h3>
-  <div class="form-row">
-    <div class="col-3">
-      <& SelectRoleType, Object => $Object, Name => "AddUserRoleMember-Role" &>
-    </div>
-    <div class="col-9">
+  <&| /Elemenents/LabeledValue, RawLabel =>  $m->scomp('SelectRoleType', Object => $Object, Name => "AddUserRoleMember-Role") &>
       <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>
-  <div class="form-row">
-    <div class="col-3">
-      <& SelectRoleType, Object => $Object, Name => "AddGroupRoleMember-Role" &>
-    </div>
-    <div class="col-9">
+    <&| /Elemenents/LabeledValue, RawLabel =>  $m->scomp('SelectRoleType', Object => $Object, Name => "AddGroupRoleMember-Role") &>
       <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/Asset/Elements/AssetSearchBasics b/share/html/Asset/Elements/AssetSearchBasics
index 44c675eb46..c0ba9ac9c2 100644
--- a/share/html/Asset/Elements/AssetSearchBasics
+++ b/share/html/Asset/Elements/AssetSearchBasics
@@ -49,24 +49,19 @@
   <div class="form-row">
     <div class="col-6">
       <div class="form-row">
-        <div class="label col-3"><&|/l&>Catalog</&></div>
-        <div class="value col-9">
+        <&| /Elements/LabeledValue, Label => loc('Catalog') &>
           <& /Asset/Elements/SelectCatalog, Name => 'Catalog', CheckRight => "ShowCatalog",
             Default => $ARGS{'Catalog'}, OnChange => "jQuery('#AssetSearch').submit()"
           &>
-        </div>
-      </div>
+        </&>
     </div>
 
     <div class="col-6">
-      <div class="form-row">
-        <div class="label col-3"><&|/l&>Status</&></div>
-        <div class="value col-9">
-          <& /Asset/Elements/SelectStatus, Name => 'Status', Catalogs => { $CatalogObj->id => 1 }, DefaultValue => 1,
-            Default => ($ARGS{'Status'} || '')
-          &>
-        </div>
-      </div>
+      <&| /Elements/LabeledValue, Label => loc('Status') &>
+        <& /Asset/Elements/SelectStatus, Name => 'Status', Catalogs => { $CatalogObj->id => 1 }, DefaultValue => 1,
+          Default => ($ARGS{'Status'} || '')
+        &>
+      </&>
     </div>
   </div>
 
diff --git a/share/html/Asset/Elements/EditBasics b/share/html/Asset/Elements/EditBasics
index c9c693d3c6..c3c6f20254 100644
--- a/share/html/Asset/Elements/EditBasics
+++ b/share/html/Asset/Elements/EditBasics
@@ -45,40 +45,20 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-  <div class="form-row asset-catalog">
-    <div class="label col-3">
-      <&|/l&>Catalog</&>:
-    </div>
-    <div class="value col-9">
-      <& /Asset/Elements/SelectCatalog, Default => $current{Catalog}, AutoSubmit => $AutoSubmit &>
-    </div>
-  </div>
-  <div class="form-row asset-name">
-    <div class="label col-3">
-      <&|/l&>Name</&>:
-    </div>
-    <div class="value col-9">
-      <input class="form-control" type="text" name="Name" value="<% $current{Name} %>" size="40">
-    </div>
-  </div>
+ <&| /Elements/LabeledValue, Label => loc('Catalog') &>
+  <& /Asset/Elements/SelectCatalog, Default => $current{Catalog}, AutoSubmit => $AutoSubmit &>
+</&>
+<&| /Elements/LabeledValue, Label => loc('Name') &>
+  <input class="form-control" type="text" name="Name" value="<% $current{Name} %>" size="40">
+</&>
 
-  <div class="form-row asset-description">
-    <div class="label col-3">
-      <&|/l&>Description</&>:
-    </div>
-    <div class="value col-9">
-      <input class="form-control" type="text" name="Description" value="<% $current{Description} %>" size="40">
-    </div>
-  </div>
+ <&| /Elements/LabeledValue, Label => loc('Description') &>
+  <input class="form-control" type="text" name="Description" value="<% $current{Description} %>" size="40">
+</&>
 
-  <div class="form-row asset-status">
-    <div class="label col-3">
-      <&|/l&>Status</&>:
-    </div>
-    <div class="value col-9">
-      <& /Asset/Elements/SelectStatus, Name => 'Status', AssetObj => $AssetObj, CatalogObj => $CatalogObj &>
-    </div>
-  </div>
+ <&| /Elements/LabeledValue, Label => loc('Status') &>
+  <& /Asset/Elements/SelectStatus, Name => 'Status', AssetObj => $AssetObj, CatalogObj => $CatalogObj &>
+</&>
 
 % if ( $AssetObj->id ) {
   <& /Elements/EditCustomFields, Object => $AssetObj, Grouping => 'Basics', InTable => 0 &>
diff --git a/share/html/Asset/Elements/EditDates b/share/html/Asset/Elements/EditDates
index 5c662e1909..b4288c83fc 100644
--- a/share/html/Asset/Elements/EditDates
+++ b/share/html/Asset/Elements/EditDates
@@ -45,34 +45,18 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Created</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value form-control">
-      <&|/l_unsafe,
-        $m->interp->apply_escapes($AssetObj->CreatedAsString, 'h'),
-        $m->scomp('/Elements/ShowUser', User => $AssetObj->CreatorObj)
-        &>[_1] by [_2]</&>
-    </span>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Last Updated</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value form-control">
-      <&|/l_unsafe,
-        $m->interp->apply_escapes($AssetObj->LastUpdatedAsString, 'h'),
-        $m->scomp('/Elements/ShowUser', User => $AssetObj->LastUpdatedByObj)
-        &>[_1] by [_2]</&>
-    </span>
-  </div>
-</div>
-
+<&| /Elements/LabeledValue, Label => loc('Created'), ValueSpanClass => "current-value form-control" &>
+  <&|/l_unsafe,
+    $m->interp->apply_escapes($AssetObj->CreatedAsString, 'h'),
+    $m->scomp('/Elements/ShowUser', User => $AssetObj->CreatorObj)
+      &>[_1] by [_2]</&>
+</&>
+<&| /Elements/LabeledValue, Label => loc('Updated'), ValueSpanClass => "current-value form-control" &>
+  <&|/l_unsafe,
+    $m->interp->apply_escapes($AssetObj->LastUpdatedAsString, 'h'),
+    $m->scomp('/Elements/ShowUser', User => $AssetObj->LastUpdatedByObj)
+    &>[_1] by [_2]</&>
+</&>
 <& /Elements/EditCustomFields, Object => $AssetObj, Grouping => 'Dates' &>
 % $m->callback(%ARGS, CallbackName => "AfterFields");
 <%args>
diff --git a/share/html/Asset/Elements/EditPeople b/share/html/Asset/Elements/EditPeople
index 36107b2435..8db9a7f1f9 100644
--- a/share/html/Asset/Elements/EditPeople
+++ b/share/html/Asset/Elements/EditPeople
@@ -46,12 +46,9 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 % for my $role ( $AssetObj->Roles ) {
-<div class="asset-people-<% CSSClass($role) %> form-row">
-  <div class="label col-3"><% loc($role) %>:</div>
-  <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc($role), Class => "asset-people-".CSSClass($role) &>
     <& /Elements/EmailInput, Name => $role, Size => undef, Default => $ARGS{$role}, Autocomplete => 1, ($AssetObj->Role($role)->{Single} ? () : (AutocompleteType => 'Principals', AutocompleteMultiple => 1)) &>
-  </div>
-</div>
+  </&>
 % }
 
 <%args>
diff --git a/share/html/Asset/Elements/ShowBasics b/share/html/Asset/Elements/ShowBasics
index c38064d5af..9b54178643 100644
--- a/share/html/Asset/Elements/ShowBasics
+++ b/share/html/Asset/Elements/ShowBasics
@@ -45,41 +45,15 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row asset-catalog">
-  <div class="label col-3">
-    <&|/l&>Catalog</&>:
-  </div>
-  <div class="value col-9">
-    <& ShowCatalog, Asset => $AssetObj &>
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc('Catalog'), Class => "asset-catalog" &>
+  <& ShowCatalog, Asset => $AssetObj &>
+</&>
 
-<div class="form-row asset-name">
-  <div class="col-3 label">
-    <&|/l&>Name</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $AssetObj->Name || '' %></span>
-  </div>
-</div>
+<& /Elements/LabeledValue, Label => loc('Name'), Class => "asset-name", ValueSpanClass => 'current-value', Value => $AssetObj->Name &>
 
-<div class="form-row asset-description">
-  <div class="col-3 label">
-    <&|/l&>Description</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $AssetObj->Description || '' %></span>
-  </div>
-</div>
+<& /Elements/LabeledValue, Label => loc('Name'), Class => "asset-description", ValueSpanClass => 'current-value', Value => $AssetObj->Description &>
 
-<div class="form-row asset-status">
-  <div class="col-3 label">
-    <&|/l&>Status</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $AssetObj->Status || '' %></span>
-  </div>
-</div>
+<& /Elements/LabeledValue, Label => loc('Status'), Class => "asset-status", ValueSpanClass => 'current-value', Value => $AssetObj->Status &>
 
 <& /Elements/ShowCustomFields, Object => $AssetObj, Grouping => 'Basics' &>
 % $m->callback(%ARGS, CallbackName => "AfterFields");
diff --git a/share/html/Asset/Elements/ShowDates b/share/html/Asset/Elements/ShowDates
index 14a6e283c1..56fe598d25 100644
--- a/share/html/Asset/Elements/ShowDates
+++ b/share/html/Asset/Elements/ShowDates
@@ -45,33 +45,19 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Created</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value">
+<&| /Elements/LabeledValue, Label => loc('Created'), ValueSpanClass => 'current-value' &>
       <&|/l_unsafe,
         $m->interp->apply_escapes($AssetObj->CreatedAsString, 'h'),
         $m->scomp('/Elements/ShowUser', User => $AssetObj->CreatorObj)
       &>[_1] by [_2]</&>
-    </span>
-  </div>
-</div>
+</&>
+<&| /Elements/LabeledValue, Label => loc('Last Updated'), ValueSpanClass => 'current-value' &>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Last Updated</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value">
       <&|/l_unsafe,
         $m->interp->apply_escapes($AssetObj->LastUpdatedAsString, 'h'),
         $m->scomp('/Elements/ShowUser', User => $AssetObj->LastUpdatedByObj)
       &>[_1] by [_2]</&>
-    </span>
-  </div>
-</div>
+</&>
 
 <div class="form-row">
   <& /Elements/ShowCustomFields, Object => $AssetObj, Grouping => 'Dates' &>
diff --git a/share/html/Asset/Elements/ShowPeople b/share/html/Asset/Elements/ShowPeople
index 0ecad92f38..6b35fdf2e6 100644
--- a/share/html/Asset/Elements/ShowPeople
+++ b/share/html/Asset/Elements/ShowPeople
@@ -56,27 +56,23 @@ my $CatalogObj = $AssetObj->CatalogObj;
     <div class="label col-3">
       <% loc($role) %>:
     </div>
+    <div class="value col-9">
+      <div class="user-accordion accordion">
 % if ($AssetObj->Role($role)->{Single}) {
 %      my $users = $AssetObj->RoleGroup($role)->UserMembersObj(Recursively => 0);
 %      $users->FindAllRows;
 %      my $user = $users->Next;
-    <div class="value col-9">
-      <div class="user-accordion accordion">
 %     if ( $user->id != RT->Nobody->id ) {
         <& ShowRoleMembers, Group => $AssetObj->RoleGroup($role), Role => $role &>
 %     } else {
         <& /Elements/ShowUser, User => $user, Link => 1 &>
 %     }
-      </div>
-    </div>
 % } else {
-    <div class="value col-9">
-      <div class="user-accordion accordion">
         <& ShowRoleMembers, Group => $AssetObj->RoleGroup($role), Role => $role &>
         <& ShowRoleMembers, Group => $CatalogObj->RoleGroup($role), Role => $role, Skip => $AssetObj->RoleGroup($role), Note => loc("(via this asset's catalog)") &>
+% }
       </div>
     </div>
-% }
   </div>
 % }
 
diff --git a/share/html/Asset/Search/Bulk.html b/share/html/Asset/Search/Bulk.html
index 7dc7c0b2aa..f1331b3af2 100644
--- a/share/html/Asset/Search/Bulk.html
+++ b/share/html/Asset/Search/Bulk.html
@@ -91,42 +91,29 @@
     <div class="form-row">
       <div class="col-6">
         <div class="form-row">
-          <div class="label col-3">
-            <&|/l&>Catalog</&>
-          </div>
-          <div class="value col-9">
+          <&| /Elements/LabeledValue, Label => loc('Catalog') &>
             <& /Asset/Elements/SelectCatalog, Name => 'UpdateCatalog', UpdateSession => 0, ShowNullOption => 1 &>
-          </div>
-        </div>
-      </div>
+          </&>
+
 
       <div class="col-6">
-        <div class="form-row">
-          <div class="label col-3"><&|/l&>Name</&></div>
-          <div class="value col-9">
-            <input class="form-control" type="text" name="UpdateName" value="<% $ARGS{'Name'}||'' %>" size="40">
-          </div>
-        </div>
+        <&| /Elements/LabeledValue, Label => loc('Name') &>
+          <input class="form-control" type="text" name="UpdateName" value="<% $ARGS{'Name'}||'' %>" size="40">
+        </&>
       </div>
     </div>
 
     <div class="form-row">
       <div class="col-6 asset-catalog">
-        <div class="form-row">
-          <div class="label col-3"><&|/l&>Description</&></div>
-          <div class="value col-9">
+        <&| /Elements/LabeledValue, Label => loc('Description') &>
             <input class="form-control" type="text" name="UpdateDescription" value="<% $ARGS{'Description'}||'' %>" size="40">
-          </div>
-        </div>
+        </&>
       </div>
 
       <div class="col-6 asset-status">
-        <div class="form-row">
-          <div class="label col-3"><&|/l&>Status</&></div>
-          <div class="value col-9">
-            <& /Asset/Elements/SelectStatus, Name => 'UpdateStatus', DefaultValue => 1 &>
-          </div>
-        </div>
+        <&| /Elements/LabeledValue, Label => loc('Status') &>
+          <& /Asset/Elements/SelectStatus, Name => 'UpdateStatus', DefaultValue => 1 &>
+        </&>
       </div>
     </div>
 % my $basic_cfs = $cfs->Clone;
@@ -143,41 +130,30 @@
 % my $input = "SetRoleMember-$rname";
     <div class="form-row">
       <div class="col-6">
-        <div class="form-row">
-          <div class="label col-3">
-            <% loc($rname) %>
-          </div>
-          <div class="value col-9">
-            <input class="form-control" type="text" value="<% $ARGS{ $input } || '' %>" name="<% $input %>" id="<% $input %>" data-autocomplete="Users" data-autocomplete-return="Name" />
-          </div>
-        </div>
+        <&| /Elements/LabeledValue, Label => loc($rname) &>
+          <input class="form-control" type="text" value="<% $ARGS{ $input } || '' %>" name="<% $input %>" id="<% $input %>" data-autocomplete="Users" data-autocomplete-return="Name" />
+        </&>
       </div>
     </div>
 % } else {
 % my $input = "AddRoleMember-$rname";
     <div class="form-row">
       <div class="col-6">
-        <div class="form-row">
-          <div class="label col-3"><% loc("Add [_1]", loc($rname)) %></div>
-          <div class="value col-9">
-            <input class="form-control" type="text" value="<% $ARGS{ $input } || '' %>" name="<% $input %>" id="<% $input %>" data-autocomplete="Users" data-autocomplete-return="Name" />
-          </div>
-        </div>
+        <&| /Elements/LabeledValue, Label => loc("Add [_1]", loc($rname)) &>
+          <input class="form-control" type="text" value="<% $ARGS{ $input } || '' %>" name="<% $input %>" id="<% $input %>" data-autocomplete="Users" data-autocomplete-return="Name" />
+        </&>
       </div>
 
 % $input = "RemoveRoleMember-$rname";
       <div class="col-6">
-        <div class="form-row">
-          <div class="label col-3"><% loc("Remove [_1]", loc($rname)) %></div>
-          <div class="value col-9">
+        <&| /Elements/LabeledValue, Label => loc("Remove [_1]", loc($rname)) &>
             <input class="form-control" type="text" value="<% $ARGS{ $input } || '' %>" name="<% $input %>" id="<% $input %>" data-autocomplete="Users" data-autocomplete-return="Name" />
 
             <div class="custom-control custom-checkbox">
               <input class="custom-control-input" type="checkbox" id="RemoveAllRoleMembers-<% $rname %>" name="RemoveAllRoleMembers-<% $rname %>" value="1"/>
               <label class="custom-control-label" for="RemoveAllRoleMembers-<% $rname %>"><em><&|/l&>(Check to delete all values)</&></em></label>
             </div>
-          </div>
-        </div>
+        </&>
       </div>
     </div>
 % }

commit ff4850b429777efd1b9fa8e9994247002ae8d513
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 17:52:44 2022 -0700

    Port Articles to LabeledValue

diff --git a/share/html/Articles/Article/Display.html b/share/html/Articles/Article/Display.html
index b79ff2699c..8b4a96d4a6 100644
--- a/share/html/Articles/Article/Display.html
+++ b/share/html/Articles/Article/Display.html
@@ -49,59 +49,13 @@
 <& /Elements/Tabs &>
 
 <&| /Widgets/TitleBox, title => loc('The Basics'), class => 'article-basics', &>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Summary</&>:
-    </div>
-    <div class="value col-9">
-      <span class="current-value"><%$article->Summary%></span>
-    </div>
-  </div>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Sort Order</&>:
-    </div>
-    <div class="value col-9">
-      <span class="current-value"><%$article->SortOrder%></span>
-    </div>
-  </div>
+<& /Elements/LabeledValue, Label => loc('Summary'), ValueSpanClass => 'current-value', Value => $article->Summary &>
+<& /Elements/LabeledValue, Label => loc('Sort Order'), ValueSpanClass => 'current-value', Value => $article->SortOrder &>
+<& /Elements/LabeledValue, Label => loc('Class'), ValueSpanClass => 'current-value', Value => $article->ClassObj->Name &>
+<& /Elements/LabeledValue, Label => loc('Creator'), ValueSpanClass => 'current-value', Value => $article->CreatedObj->AsString &>
+<& /Elements/LabeledValue, Label => loc('Updated'), ValueSpanClass => 'current-value', Value => $article->LastUpdatedObj->AsString &>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Class</&>:
-    </div>
-    <div class="value col-9">
-      <span class="current-value"><%$article->ClassObj->Name%></span>
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Creator</&>:
-    </div>
-    <div class="value col-9">
-      <span class="current-value"><& /Elements/ShowUser, User => $article->CreatorObj &></span>
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Created</&>:
-    </div>
-    <div class="value col-9">
-      <span class="current-value"><%$article->CreatedObj->AsString%></span>
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Updated</&>:
-    </div>
-    <div class="value col-9">
-      <span class="current-value"><%$article->LastUpdatedObj->AsString%></span>
-    </div>
-  </div>
 </&>
 
 % $m->callback( %ARGS, CallbackName => 'AfterBasics' );
diff --git a/share/html/Articles/Article/Elements/EditBasics b/share/html/Articles/Article/Elements/EditBasics
index 026c14f393..4f5046a092 100644
--- a/share/html/Articles/Article/Elements/EditBasics
+++ b/share/html/Articles/Article/Elements/EditBasics
@@ -45,80 +45,45 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Name</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="Name" value="<%($ARGS{'id'} eq 'new' ? '' : $ArticleObj->Name) || $ARGS{'Name'} || ''|h%>" size="50" />
-  </div>
-</div>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Summary</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="Summary" value="<%($ARGS{'id'} eq 'new' ? '' : $ArticleObj->Summary) || $ARGS{'Summary'} ||'' |h%>" size="50" />
-  </div>
-</div>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Sort Order</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="SortOrder" value="<%($ARGS{'id'} eq 'new' ? '0' : $ArticleObj->SortOrder) || $ARGS{'SortOrder'} || '0' %>" size="50" />
-  </div>
-</div>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Class</&>:
-  </div>
-  <div class="value col-9">
+
+<&| /Elements/LabeledValue, Label => loc('Name') &>
+  <input class="form-control" type="text" name="Name" value="<%($ARGS{'id'} eq 'new' ? '' : $ArticleObj->Name) || $ARGS{'Name'} || ''|h%>" size="50" />
+</&>
+<&| /Elements/LabeledValue, Label => loc('Summary') &>
+  <input class="form-control" type="text" name="Summary" value="<%($ARGS{'id'} eq 'new' ? '' : $ArticleObj->Summary) || $ARGS{'Summary'} ||'' |h%>" size="50" />
+</&>
+<&| /Elements/LabeledValue, Label => loc('Sort Order') &>
+  <input class="form-control" type="text" name="SortOrder" value="<%($ARGS{'id'} eq 'new' ? '0' : $ArticleObj->SortOrder) || $ARGS{'SortOrder'} || '0' %>" size="50" />
+</&>
+<&| /Elements/LabeledValue, Label => loc('Class') &>
 % if ($EditClass) {
 <& /Articles/Elements/SelectClass, Name => 'Class', Default =>$ArticleObj->ClassObj->Id&>
 % } else {
 <span class="current-value form-control"><%$ClassObj->Name%></span>
 <input type="hidden" name="Class" value="<%$ClassObj->Id%>" />
 % }
-  </div>
-</div>
+</&>
+
 % if ($ARGS{'id'} ne 'new') {
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Creator</&>:
-  </div>
-  <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Creator') &>
     <span class="current-value form-control"><& /Elements/ShowUser, User => $ArticleObj->CreatorObj &></span>
-  </div>
-</div>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Created</&>:
-  </div>
-  <div class="value col-9">
+  </&>
+  <&| /Elements/LabeledValue, Label => loc('Created') &>
     <span class="current-value form-control"><%$ArticleObj->CreatedObj->AsString%></span>
-  </div>
-</div>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Updated</&>:
-  </div>
-  <div class="value col-9">
+  </&>
+  <&| /Elements/LabeledValue, Label => loc('Updated') &>
     <span class="current-value form-control"><%$ArticleObj->LastUpdatedObj->AsString%></span>
-  </div>
-</div>
+  </&>
 % }
 % if ($ARGS{'id'} eq 'new' || $ArticleObj->CurrentUserHasRight('DisableArticle')) {
-<div class="form-row">
-  <div class="label col-3"></div>
-  <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
+
     <input type="hidden" class="hidden" name="SetEnabled" value="1" />
     <div class="custom-control custom-checkbox">
       <input type="checkbox" id="Enabled" name="Enabled" class="custom-control-input" value="1" <% ( $ArticleObj->id && $ArticleObj->Disabled || $ARGS{'Disabled'} ) ? '' : 'checked="checked"' |n %> />
       <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this article)</&></label>
     </div>
-  </div>
-</div>
+  </&>
 % }
 <%INIT>
 </%INIT>
diff --git a/share/html/Articles/Article/Elements/EditCustomFields b/share/html/Articles/Article/Elements/EditCustomFields
index a2dec964da..52d177efcd 100644
--- a/share/html/Articles/Article/Elements/EditCustomFields
+++ b/share/html/Articles/Article/Elements/EditCustomFields
@@ -46,14 +46,8 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 % while (my $CustomField = $CustomFields->Next()) {
-<div class="form-row">
-  <div class="label col-3">
-    <span class="name <% $CustomField->EntryHint ? 'prev-icon-helper' : '' %>"><%$CustomField->Name%>:</span>\
-% if ( $CustomField->EntryHint ) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $CustomField->EntryHint %>"></span>
-% }
-  </div>
-  <div class="value col-9 entry">
+  <&| /Elements/LabeledValue, Label => $CustomField->Name, LabelTooltip => $CustomField->EntryHint &>
+
     <& /Elements/EditCustomField, 
       Object => $ArticleObj, 
       CustomField => $CustomField, 
@@ -61,8 +55,7 @@
       Rows => 15,
       Cols => 70
     &>
-  </div>
-</div>
+  </&>
 % }
 <%INIT>
 my $CustomFields;
diff --git a/share/html/Articles/Article/Elements/EditLinks b/share/html/Articles/Article/Elements/EditLinks
index 92ef88783e..6f6470723d 100644
--- a/share/html/Articles/Article/Elements/EditLinks
+++ b/share/html/Articles/Article/Elements/EditLinks
@@ -45,12 +45,9 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3"></div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => '' &>
     <i><&|/l&>Enter articles, tickets, or other URLs related to this article.</&></i>
-  </div>
-</div>
+</&>
 <div class="form-row">
   <div class="label col-3"></div>
   <div class="label col-9 text-left">
diff --git a/share/html/Articles/Article/Elements/EditTopics b/share/html/Articles/Article/Elements/EditTopics
index 4946f34029..63b193fee7 100644
--- a/share/html/Articles/Article/Elements/EditTopics
+++ b/share/html/Articles/Article/Elements/EditTopics
@@ -45,10 +45,8 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Topics</&>:
-  </div>
+  <&| /Elements/LabeledValue, Label => loc('Topics') &>
+
   <input type="hidden" name="EditTopics" value="1" />
   <div class="value col-9">
 <select multiple size="10" name="Topics" class="tall selection-box">
@@ -81,8 +79,7 @@
 </optgroup>
 % }
 </select>
-  </div>
-</div>
+</&>
 <%INIT>
 use Tree::Simple;
 
diff --git a/share/html/Articles/Article/Elements/ShowLinks b/share/html/Articles/Article/Elements/ShowLinks
index e17312dae6..af4b14809f 100644
--- a/share/html/Articles/Article/Elements/ShowLinks
+++ b/share/html/Articles/Article/Elements/ShowLinks
@@ -45,11 +45,7 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Refers to</&>:
-  </div>
-  <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Refers to') &>
 % my $refersto = $article->RefersTo;
 <ul class="list-group list-group-compact">
 % while (my $link = $refersto->Next) {
@@ -71,12 +67,10 @@
 </li>
 % }
 </ul>
-  </div>
+</&>
+
+<&| /Elements/LabeledValue, Label => loc('Referred to by') &>
 
-  <div class="label col-3">
-    <&|/l&>Referred to by</&>:
-  </div>
-  <div class="value col-9">
 <ul class="list-group list-group-compact">
 % my $referredtoby = $article->ReferredToBy;
 % while (my $link = $referredtoby->Next) {
@@ -98,8 +92,7 @@
 </li>
 % }
 </ul>
-</div>
-</div>
+</&>
 <%args>
 $article => undef
 </%args>
diff --git a/share/html/Articles/Article/Elements/ShowTopics b/share/html/Articles/Article/Elements/ShowTopics
index 1740b93107..75162533bb 100644
--- a/share/html/Articles/Article/Elements/ShowTopics
+++ b/share/html/Articles/Article/Elements/ShowTopics
@@ -45,20 +45,13 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Topics</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value">
+<&| /Elements/LabeledValue, Label => loc('Topics'), ValueSpanClass => 'current-value' &>
 % my $topics = RT::ObjectTopics->new($session{'CurrentUser'});
 % $topics->LimitToObject($article);
 % while (my $t = $topics->Next) {
 <& /Articles/Elements/ShowTopic, topic => $t->TopicObj &>
 % }
-    </span>
-  </div>
-</div>
+</&>
 <%args>
 $article => undef
 </%args>

commit 60d5b045d404482584cb47c40395810cc7051100
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 17:51:57 2022 -0700

    Port Reports to LabeledValue

diff --git a/share/html/Reports/CreatedByDates.html b/share/html/Reports/CreatedByDates.html
index 50900a86c4..2036adb055 100644
--- a/share/html/Reports/CreatedByDates.html
+++ b/share/html/Reports/CreatedByDates.html
@@ -95,32 +95,17 @@ $m->callback( CallbackName => 'MassageQuery', %ARGS, ARGSRef => \%ARGS,
 
 <hr />
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Queue</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectQueue, Name => 'Queue', NamedValues => 1, Default => $QueueObj->id &>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Queue") &>
+    <& /Elements/SelectQueue, Name => 'Queue', NamedValues => 1, Default => $QueueObj->id &>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Tickets created after</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectDate, Name => 'CreatedAfter', Default => $CreatedAfter &>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Tickets created after") &>
+    <& /Elements/SelectDate, Name => 'CreatedAfter', Default => $CreatedAfter &>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Tickets created before</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectDate, Name => 'CreatedBefore', Default => $CreatedBefore &>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Tickets created before") &>
+    <& /Elements/SelectDate, Name => 'CreatedBefore', Default => $CreatedBefore &>
+  </&>
 
   <div class="form-row">
     <div class="col-12">
diff --git a/share/html/Reports/ResolvedByDates.html b/share/html/Reports/ResolvedByDates.html
index 922304e7f6..ec071fb0dc 100644
--- a/share/html/Reports/ResolvedByDates.html
+++ b/share/html/Reports/ResolvedByDates.html
@@ -98,32 +98,17 @@ $m->callback( CallbackName => 'MassageQuery', %ARGS, ARGSRef => \%ARGS,
 % }
 
 <hr />
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Queue</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectQueue, Name => 'Queue', NamedValues => 1, Default => $QueueObj->id &>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Queue") &>
+    <& /Elements/SelectQueue, Name => 'Queue', NamedValues => 1, Default => $QueueObj->id &>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Tickets resolved after</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectDate, Name => 'ResolvedAfter', Default => $ResolvedAfter &>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Tickets resolved after") &>
+    <& /Elements/SelectDate, Name => 'ResolvedAfter', Default => $ResolvedAfter &>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Tickets resolved before</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectDate, Name => 'ResolvedBefore', Default => $ResolvedBefore &>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Tickets resolved before") &>
+    <& /Elements/SelectDate, Name => 'ResolvedBefore', Default => $ResolvedBefore &>
+  </&>
   <div class="form-row">
     <div class="col-12">
       <& /Elements/Submit &>
diff --git a/share/html/Reports/ResolvedByOwner.html b/share/html/Reports/ResolvedByOwner.html
index 0a64188609..6e9c71516c 100644
--- a/share/html/Reports/ResolvedByOwner.html
+++ b/share/html/Reports/ResolvedByOwner.html
@@ -74,14 +74,9 @@ $m->callback( CallbackName => 'MassageQuery', %ARGS, ARGSRef => \%ARGS,
 
 <hr />
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Queue</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectQueue, Name => 'Queue', NamedValues => 1, Default => $QueueObj->id &>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc("Queue") &>
+    <& /Elements/SelectQueue, Name => 'Queue', NamedValues => 1, Default => $QueueObj->id &>
+  </&>
 
   <div class="form-row">
     <div class="col-12">
diff --git a/share/html/Reports/TimeWorkedReport.html b/share/html/Reports/TimeWorkedReport.html
index 259683ab6d..ecd7b405d3 100644
--- a/share/html/Reports/TimeWorkedReport.html
+++ b/share/html/Reports/TimeWorkedReport.html
@@ -52,52 +52,27 @@
 <div class="container">
 <&| /Widgets/TitleBox, hideable => 0, class => 'user-timeworked-form-content', content_class => 'mx-auto width-md' &>
   <form method="POST" action="TimeWorkedReport.html" class="mx-auto">
-    <div class="form-row">
-      <div class="label col-3">
-        <&|/l&>User</&>:
-      </div>
-      <div class="value col-9">
+    <&| /Elements/LabeledValue, Label => loc("User") &>
         <input class="form-control user-time-worked-input" name="User" data-autocomplete="Users" data-autocomplete-return="Name" placeholder="<%
 loc("Find a user...") %>" value="<% $User %>" />
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="label col-3">
-        <&|/l&>Start Date</&>:
-      </div>
-      <div class="value col-9">
-        <& /Elements/SelectDate, ShowTime => 1, Name => 'StartDate', Default => $StartDate &>
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="label col-3">
-        <&|/l&>End Date</&>:
-      </div>
-      <div class="value col-9">
-        <& /Elements/SelectDate, ShowTime => 1, Name => 'EndDate', Default => $EndDate &>
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="label col-3">
-        <&|/l&>Sort By</&>:
-      </div>
-      <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, Label => loc("Start Date") &>
+      <& /Elements/SelectDate, ShowTime => 1, Name => 'StartDate', Default => $StartDate &>
+    </&>
+    <&| /Elements/LabeledValue, Label => loc("End Date") &>
+      <& /Elements/SelectDate, ShowTime => 1, Name => 'EndDate', Default => $EndDate &>
+    </&>
+    <&| /Elements/LabeledValue, Label => loc("Sort By") &>
         <select name="SortBy" class="selectpicker">
           <option value="Date" <% $SortBy eq 'Date' ?  'selected="selected"' : '' |n%>><&|/l&>By Date</&></option>
           <option value="User" <% $SortBy eq 'User' ? 'selected="selected"' : '' |n%>><&|/l&>By User</&></option>
           <option value="Ticket" <% $SortBy eq 'Ticket' ? 'selected="selected"' : '' |n%>><&|/l&>By Ticket</&></option>
           <option value="Queue" <% $SortBy eq 'Queue' ? 'selected="selected"' : '' |n%>><&|/l&>By Queue</&></option>
         </select>
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="label col-3">
-        <&|/l&>Queue</&>:
-      </div>
-      <div class="value col-9">
-        <& /Elements/SelectQueue, Name => 'Queue', Id => 'queue', Default => $Queue &>
-      </div>
-    </div>
+    </&>
+    <&| /Elements/LabeledValue, Label => loc("Queue") &>
+      <& /Elements/SelectQueue, Name => 'Queue', Id => 'queue', Default => $Queue &>
+    </&>
     <div class="form-row">
       <div class="col-12">
         <& /Elements/Submit, Label => loc('See Time') &>

commit 3c5ad73285ba76c15dcc14374cedee19fbdc64ea
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 17:51:23 2022 -0700

    Port Admin to LabeledValue

diff --git a/share/html/Admin/Actions/Elements/EditBasics b/share/html/Admin/Actions/Elements/EditBasics
index 1f214fdf99..60eb32d3d8 100644
--- a/share/html/Admin/Actions/Elements/EditBasics
+++ b/share/html/Admin/Actions/Elements/EditBasics
@@ -45,42 +45,18 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Name</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Name") &>
     <input type="text" class="form-control" name="Name" size="60" value="<% $ARGS{"Name"} || $Action->Name || '' %>" />
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Description</&>:
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Description") &>
     <input type="text" class="form-control" name="Description" size="60" value="<% $ARGS{"Description"} || $Action->Description || '' %>" />
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Action Module</&>:
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Action Module") &>
     <input type="text" class="form-control" name="ExecModule" size="60" value="<% $ARGS{"ExecModule"} || $Action->ExecModule || ''%>" />
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Parameters to Pass</&>:
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Parameters to Pass") &>
     <input type="text" class="form-control" name="Argument" size="60" value="<% $ARGS{"Argument"} || $Action->Argument || '' %>"/>
-  </div>
-</div>
-
+</&>
 <%ARGS>
 $Action
 </%ARGS>
diff --git a/share/html/Admin/Actions/Elements/ShowBasics b/share/html/Admin/Actions/Elements/ShowBasics
index b22136e6cd..75bbf76607 100644
--- a/share/html/Admin/Actions/Elements/ShowBasics
+++ b/share/html/Admin/Actions/Elements/ShowBasics
@@ -45,41 +45,18 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Name</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Name") &>
     <span class="current-value"><% $ARGS{"Name"} || $Action->Name || '' %></span>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Description</&>:
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Description") &>
     <span class="current-value"><% $ARGS{"Description"} || $Action->Description || '' %></span>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Action Module</&>:
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Action Module") &>
     <span class="current-value"><% $ARGS{"ExecModule"} || $Action->ExecModule || ''%></span>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Parameters to Pass</&>:
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Parameters to Pass") &>
     <span class="current-value"><% $ARGS{"Argument"} || $Action->Argument || '' %></span>
-  </div>
-</div>
+</&>
 
 <%ARGS>
 $Action
diff --git a/share/html/Admin/Articles/Classes/Modify.html b/share/html/Admin/Articles/Classes/Modify.html
index 73cffd8645..ff0de8a58a 100644
--- a/share/html/Admin/Articles/Classes/Modify.html
+++ b/share/html/Admin/Articles/Classes/Modify.html
@@ -59,34 +59,20 @@
 
 <&| /Widgets/TitleBox, class => 'article-class-info-basics', content_class => 'mx-auto width-sm' &>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Class Name</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Class Name") &>
       <input type="text" class="form-control" name="Name" value="<% $ClassObj->Name || $Name || ''%>" />
-    </div>
-  </div>
+   </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Description</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Description") &>
       <input type="text" class="form-control" name="Description" value="<% $ClassObj->Description || $Description || '' %>" size=60 />
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => "" &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Enabled" name="Enabled" value="1" <%$EnabledChecked%>>
         <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this class)</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 
   <div class="form-row">
     <div class="col-12">
@@ -94,10 +80,7 @@
     </div>
   </div>
 
-  <div class="form-row">
-    <div class="label col-3">
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => "" &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Include-LinkToTicket" name="Include-LinkToTicket" value="1" <% $include{LinkToTicket} %>
 % if ( !RT->Config->Get('LinkArticlesOnInclude') ) {
@@ -106,50 +89,34 @@
 >
         <label class="custom-control-label" for="Include-LinkToTicket"><&|/l&>Link article to ticket</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => "" &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Include-Name" name="Include-Name" value="1" <% $include{Name} %>>
         <label class="custom-control-label" for="Include-Name"><&|/l&>Include article name</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => "" &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Include-Summary" name="Include-Summary" value="1" <% $include{Summary} %>>
         <label class="custom-control-label" for="Include-Summary"><&|/l&>Include article summary</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => "" &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Include-EscapeHTML" name="Include-EscapeHTML" value="1" <% $include{EscapeHTML} %>>
         <label class="custom-control-label" for="Include-EscapeHTML"><&|/l&>Escape HTML (Unchecking this box is potentially unsafe)</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 
 % if ( $cfs ) {
   <h5 class="mt-3"><&|/l&>Include custom field:</&></h5>
 % while (my $cf = $cfs->Next) {
-  <div class="form-row">
-    <div class="label col-3 pt-0">
-      <% $cf->Name %>:
-    </div>
-    <div class="value col-9">
+
+  <&| /Elements/LabeledValue, Label => $cf->Name &>
       <div class="form-row">
         <div class="col-auto">
           <div class="custom-control custom-checkbox">
@@ -164,8 +131,7 @@
           </div>
         </div>
       </div>
-    </div>
-  </div>
+    </&>
 % } }
 
 % if ( @$subject_cfs ) {
@@ -186,17 +152,10 @@
 <h5 class="mt-3"><&|/l&>Class Custom Fields:</&></h5>
 % }
 % while (my $CF = $CFs->Next) {
-  <div class="form-row">
-    <div class="label col-3">
-      <span class="<% $CF->EntryHint ? 'prev-icon-helper' : '' %>"><% $CF->Name %>:</span>\
-% if ( $CF->EntryHint ) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $CF->EntryHint %>"></span>
-% }
-    </div>
-    <div class="value col-9">
-      <& /Elements/EditCustomField, CustomField => $CF, Object => $ClassObj, &>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => $CF->Name, LabelSpanClass => ($CF->EntryHint ? 'prev-icon-helper' : '' ),
+  LabelTooltip =>  $CF->EntryHint &>
+    <& /Elements/EditCustomField, CustomField => $CF, Object => $ClassObj, &>
+  </&>
 % }
 
 %$m->callback( CallbackName => 'BeforeSubmit', CustomFields => $cfs, ClassObj => $ClassObj );
diff --git a/share/html/Admin/Articles/Elements/Topics b/share/html/Admin/Articles/Elements/Topics
index 3e27d7267a..aab1b41066 100644
--- a/share/html/Admin/Articles/Elements/Topics
+++ b/share/html/Admin/Articles/Elements/Topics
@@ -51,22 +51,13 @@
 <input type="hidden" name="id" value="<%$RootObj->Id%>" />
 
 % if (!$Modify) {
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Topic Name</&>
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Topic Name") &>
     <input class="form-control" type="text" name="Name" size="30" />
-  </div>
-</div>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Description</&>
-  </div>
-  <div class="value col-9">
+</&>
+
+<&| /Elements/LabeledValue, Label => loc("Description") &>
     <input class="form-control" type="text" name="Description" size="50" />
-  </div>
-</div>
+</&>
 % } else {
 <a href="Topics.html">New topic</a>
 % }
@@ -77,25 +68,17 @@
 
 <%def .edit>
  
-<div class="form-row">
-  <div class="label col-3">
-    Topic Name:
-  </div>
-  <div class="value col-9 input-group">
+<&| /Elements/LabeledValue, Label => loc("Topic Name"), ValueSpanClass => 'input-group' &>
+
+
       <input class="form-control" type="text" name="Topic-<%$topic->Id%>-Name" size="20" value="<%$topic->Name%>" />
       <input type="submit" class="btn btn-primary" name="Update" value="Update">
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    Description:
-  </div>
-  <div class="value col-9 input-group">
+</&>
+
+<&| /Elements/LabeledValue, Label => loc("Description"), ValueSpanClass => 'input-group' &>
       <input class="form-control" type="text" name="Topic-<%$topic->Id%>-Description" size="20" value="<%$topic->Description%>" />
       <input type="submit" class="btn btn-primary" name="Delete-Topic-<%$topic->Id%>" value="Delete" />
-  </div>
-</div>
+</&>
 <%args>
 $topic
 </%args>
diff --git a/share/html/Admin/Assets/Catalogs/Elements/EditBasics b/share/html/Admin/Assets/Catalogs/Elements/EditBasics
index d6759e13f1..94863ac494 100644
--- a/share/html/Admin/Assets/Catalogs/Elements/EditBasics
+++ b/share/html/Admin/Assets/Catalogs/Elements/EditBasics
@@ -45,48 +45,30 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Name</&>
-    </div>
-    <div class="value col-9">
+    <&| /Elements/LabeledValue, Label => loc("Name") &>
       <input type="text" class="form-control" name="Name" value="<% $current{Name} %>" size="40">
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Description</&>
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Description") &>
       <input type="text" class="form-control" name="Description" value="<% $current{Description} %>" size="40">
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Lifecycle</&>
-    </div>
-    <div class="value col-9">
+    <&| /Elements/LabeledValue, Label => loc("Lifecycle") &>
       <& /Widgets/Form/Select:InputOnly,
           Name         => 'Lifecycle',
           Values       => [ sort { loc($a) cmp loc($b) } RT::Lifecycle->List( $CatalogObj->LifecycleType ) ],
           CurrentValue => $current{Lifecycle},
           Default      => 0,
       &>
-    </div>
-  </div>
+    </&>
 
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <input name="SetDisabled" type="hidden" value="1">
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
+      <input name="SetDisabled" type="hidden" value="1">
       <div class="custom-control custom-checkbox">
         <input name="Disabled" type="checkbox" class="checkbox custom-control-input" id="Disabled" value="1" <% $current{Disabled} ? "checked" : "" %>>
         <label class="custom-control-label" for="Disabled"><&|/l&>Disabled?</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 <%args>
 $CatalogObj
 </%args>
diff --git a/share/html/Admin/Conditions/Elements/EditBasics b/share/html/Admin/Conditions/Elements/EditBasics
index b10108075f..850aca78c4 100644
--- a/share/html/Admin/Conditions/Elements/EditBasics
+++ b/share/html/Admin/Conditions/Elements/EditBasics
@@ -45,51 +45,21 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Name</&>:
-  </div>
-  <div class="value col-9">
-    <input type="text" class="form-control" name="Name" size="60" value="<% $ARGS{"Name"} || $Condition->Name || '' %>" />
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Description</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Name") &>
+  <input type="text" class="form-control" name="Name" size="60" value="<% $ARGS{"Name"} || $Condition->Name || '' %>" />
+</&>
+<&| /Elements/LabeledValue, Label => loc("Description") &>
     <input type="text" class="form-control" name="Description" size="60" value="<% $ARGS{"Description"} || $Condition->Description || '' %>" />
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Condition Module</&>:
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Condition Module") &>
     <input type="text" class="form-control" name="ExecModule" size="60" value="<% $ARGS{"ExecModule"} || $Condition->ExecModule || ''%>" />
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Parameters to Pass</&>:
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Parameters to Pass") &>
     <input type="text" class="form-control" name="Argument" size="60" value="<% $ARGS{"Argument"} || $Condition->Argument || '' %>"/>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Applicable Transaction Types</&>:
-  </div>
-  <div class="value col-9">
-    <input type="text" class="form-control" name="ApplicableTransTypes" size="60" value="<% $ARGS{"ApplicableTransTypes"} || $Condition->ApplicableTransTypes || '' %>" />
-  </div>
-</div>
-
+</&>
+<&| /Elements/LabeledValue, Label => loc("Applicable Transaction Types") &>
+  <input type="text" class="form-control" name="ApplicableTransTypes" size="60" value="<% $ARGS{"ApplicableTransTypes"} || $Condition->ApplicableTransTypes || '' %>" />
+</&>
 <%ARGS>
 $Condition
 </%ARGS>
diff --git a/share/html/Admin/Conditions/Elements/ShowBasics b/share/html/Admin/Conditions/Elements/ShowBasics
index 718642257a..8c6da127bd 100644
--- a/share/html/Admin/Conditions/Elements/ShowBasics
+++ b/share/html/Admin/Conditions/Elements/ShowBasics
@@ -45,50 +45,21 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Name</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $ARGS{"Name"} || $Condition->Name || '' %></span>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Description</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $ARGS{"Description"} || $Condition->Description || '' %></span>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Condition Module</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $ARGS{"ExecModule"} || $Condition->ExecModule || ''%></span>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Parameters to Pass</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $ARGS{"Argument"} || $Condition->Argument || '' %></span>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Applicable Transaction Types</&>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $ARGS{"ApplicableTransTypes"} || $Condition->ApplicableTransTypes || '' %></span>
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc("Name"), ValueSpanClass => 'current-value' &>
+  <% $ARGS{"Name"} || $Condition->Name || '' %>
+</&>
+<&| /Elements/LabeledValue, Label => loc("Description"), ValueSpanClass => 'current-value' &>
+  <% $ARGS{"Description"} || $Condition->Description || '' %>
+</&>
+<&| /Elements/LabeledValue, Label => loc("Condition Module"), ValueSpanClass => 'current-value' &>
+  <% $ARGS{"ExecModule"} || $Condition->ExecModule || ''%>
+</&>
+<&| /Elements/LabeledValue, Label => loc("Parameters to Pass"), ValueSpanClass => 'current-value' &>
+  <% $ARGS{"Argument"} || $Condition->Argument || '' %>
+</&>
+<&| /Elements/LabeledValue, Label => loc("Applicable Transaction Types"), ValueSpanClass => 'current-value' &>
+  <% $ARGS{"ApplicableTransTypes"} || $Condition->ApplicableTransTypes || '' %>
+</&>
 
 <%ARGS>
 $Condition
diff --git a/share/html/Admin/CustomFields/Modify.html b/share/html/Admin/CustomFields/Modify.html
index d026f760ec..2cfc5be13e 100644
--- a/share/html/Admin/CustomFields/Modify.html
+++ b/share/html/Admin/CustomFields/Modify.html
@@ -57,84 +57,50 @@
 
 <&| /Widgets/TitleBox, title => 'Basics', class => 'custom-field-info-basics', content_class => 'mx-auto width-sm' &>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Name</&>
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="Name" value="<% $CustomFieldObj->Name || $Name || '' %>" size="20" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc("Name") &>
+  <input class="form-control" type="text" name="Name" value="<% $CustomFieldObj->Name || $Name || '' %>" size="20" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Description</&>
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Description") &>
     <input class="form-control" type="text" name="Description" value="<% $CustomFieldObj->Description || $Description || '' %>" size="80" />
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Type</&>
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Type") &>
     <& /Admin/Elements/SelectCustomFieldType,
       Name => "TypeComposite",
       Default => $CustomFieldObj->TypeComposite,
     &>
-  </div>
-</div>
+</&>
 
 % if ( $CustomFieldObj->Id and $CustomFieldObj->HasRenderTypes ) {
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Render Type</&>
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Render Type") &>
     <& /Admin/Elements/SelectCustomFieldRenderType,
         Name            => "RenderType",
         TypeComposite   => $CustomFieldObj->TypeComposite,
         Default         => $CustomFieldObj->RenderType, 
         BasedOn         => $CustomFieldObj->BasedOnObj->id, &>
-  </div>
-</div>
+</&>
 % }
 
 % if ( $CustomFieldObj->Id and $CustomFieldObj->IsSelectionType and RT->Config->Get('CustomFieldValuesSources') and ( scalar(@{RT->Config->Get('CustomFieldValuesSources')}) > 0 ) ) {
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Field values source:</&>
-  </div>
-  <div class="value col-9">
+
+<&| /Elements/LabeledValue, Label => loc("Field values source") &>
     <& /Admin/Elements/EditCustomFieldValuesSource, CustomField => $CustomFieldObj &>
-  </div>
-</div>
+</&>
 % }
 
 % if ( $CustomFieldObj->Id and $CustomFieldObj->IsCanonicalizeType and RT->Config->Get('CustomFieldValuesCanonicalizers') and ( scalar(@{RT->Config->Get('CustomFieldValuesCanonicalizers')}) > 0 ) ) {
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Canonicalizer:</&>
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Canonicalizer") &>
     <& /Admin/Elements/EditCustomFieldValuesCanonicalizer, CustomField => $CustomFieldObj &>
-  </div>
-</div>
+</&>
 % }
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Applies to</&>
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Applies to") &>
     <& /Admin/Elements/SelectCustomFieldLookupType,
       Name => "LookupType",
       Default => $CustomFieldObj->LookupType || $LookupType,
     &>
-  </div>
-</div>
+</&>
 
 <script type="text/javascript">
 jQuery( function() {
@@ -154,59 +120,36 @@ jQuery( function() {
 });
 </script>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Entry Hint</&>
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Entry Hint") &>
     <input class="form-control" type="text" name="EntryHint" value="<% $CustomFieldObj->EntryHint // $EntryHint // '' %>" size="80" />
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Validation</&>
-  </div>
-  <div class="value col-9">
+</&>
+<&| /Elements/LabeledValue, Label => loc("Validation") &>
     <& /Widgets/ComboBox,
       Name    => 'Pattern',
       Default => $CustomFieldObj->Pattern || $Pattern,
       Size    => 20,
       Values  => \@CFvalidations,
     &>
-  </div>
-</div>
+</&>
 
 % if ( $CustomFieldObj->SupportDefaultValues ) {
-<div class="form-row">
-  <div class="label col-3 edit_default_values">
-    <&|/l, $CustomFieldObj->MaxValues &>Default [numerate,_1,value,values]</&>
-  </div>
-  <div class="value col-9">
-    <& /Elements/EditCustomField, NamePrefix => 'Default-', CustomField => $CustomFieldObj, ShowEmptyOption => 1 &>
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc("Default [numerate,_1,value,values]", $CustomFieldObj->MaxValues) &>
+  <& /Elements/EditCustomField, NamePrefix => 'Default-', CustomField => $CustomFieldObj, ShowEmptyOption => 1 &>
+</&>
 % }
 
 % if ( $CustomFieldObj->Id && $CustomFieldObj->IsSelectionType ) {
-<div class="form-row categoriesbasedon">
-  <div class="label col-3">
-    <&|/l&>Categories are based on</&>
-  </div>
-  <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Categories are based on") &>
     <& /Admin/Elements/SelectCustomField,
       Name => "BasedOn",
       LookupType => $CustomFieldObj->LookupType,
       Default => $CustomFieldObj->BasedOnObj || $BasedOn,
       Not => $CustomFieldObj->id,
     &>
-  </div>
-</div>
+  </&>
 % }
 
-<div class="form-row">
-  <div class="label col-3"></div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => "" &>
     <input type="hidden" class="hidden" name="SetUniqueValues" value="1" />
     <div class="custom-control custom-checkbox">
       <input type="checkbox" class="custom-control-input" id="UniqueValues" name="UniqueValues" value="1" <% $UniqueValuesChecked |n %> />
@@ -214,14 +157,11 @@ jQuery( function() {
         <&|/l&>New values must be unique</&>
       </label>
     </div>
-  </div>
-</div>
+</&>
 
 % $m->callback(CallbackName => 'BeforeEnabled', CustomField => $CustomFieldObj, CFvalidations => \@CFvalidations);
 
-<div class="form-row">
-  <div class="label col-3"></div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => "" &>
     <input type="hidden" class="hidden" name="SetEnabled" value="1" />
     <div class="custom-control custom-checkbox">
       <input type="checkbox" class="custom-control-input" id="Enabled" name="Enabled" value="1" <% $EnabledChecked |n %> />
@@ -229,8 +169,7 @@ jQuery( function() {
         <&|/l&>Enabled (Unchecking this box disables this custom field)</&>
       </label>
     </div>
-  </div>
-</div>
+</&>
 
 % $m->callback(CallbackName => 'EndOfTable', CustomField => $CustomFieldObj, CFvalidations => \@CFvalidations);
 
diff --git a/share/html/Admin/CustomRoles/Modify.html b/share/html/Admin/CustomRoles/Modify.html
index e213dfaf46..115a64588d 100644
--- a/share/html/Admin/CustomRoles/Modify.html
+++ b/share/html/Admin/CustomRoles/Modify.html
@@ -56,36 +56,19 @@
 % $m->callback( CallbackName => 'FormStart', Create => $Create, ARGSRef => \%ARGS );
 
 <&| /Widgets/TitleBox, class => 'custom-role-info-basics', content_class => 'mx-auto width-sm' &>
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Role Name</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Role Name") &>
     <input class="form-control" type="text" name="Name" value="<% $Create ? "" : $RoleObj->Name || $Name %>" />
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Description</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Descripton") &>
     <input class="form-control" type="text" name="Description" value="<% $Create ? "" : $RoleObj->Description || $Description || '' %>" size="60" />
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3">
-    <&|/l&>Entry Hint</&>:
-  </div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc("Entry Hint") &>
     <input class="form-control" type="text" name="EntryHint" value="<% $Create ? "" : $RoleObj->EntryHint || $EntryHint || '' %>" size="60" />
-  </div>
-</div>
+</&>
 
-<div class="form-row">
-  <div class="label col-3"></div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => "" &>
     <div class="custom-control custom-checkbox">
       <input type="checkbox" class="custom-control-input" id="Multiple" name="Multiple" value="1"
 % if ( $Create || $RoleObj->UnlimitedValues ) {
@@ -103,26 +86,23 @@ disabled="disabled"
 % }
       </label>
     </div>
-  </div>
-</div>
+</&>
 
 
 
 <input type="hidden" class="hidden" name="SetMultiple" value="1" />
 
-<div class="form-row">
-  <div class="label col-3"></div>
-  <div class="value col-9">
+<&| /Elements/LabeledValue, Label => "" &>
     <div class="custom-control custom-checkbox">
       <input type="checkbox" class="custom-control-input" id="Enabled" name="Enabled" value="1" <%$EnabledChecked|n%> />
       <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this custom role)</&></label>
     </div>
+</&>
+
     <input type="hidden" class="hidden" name="SetEnabled" value="1" />
 % $m->callback( %ARGS, RoleObj => $RoleObj, results => \@results );
-  </div>
-</div>
-
 </&>
+
   <div class="form-row">
     <div class="col-12">
 %   if ( $Create ) {
diff --git a/share/html/Admin/Elements/AddLinks b/share/html/Admin/Elements/AddLinks
index 87a31aa77f..8b212cf573 100644
--- a/share/html/Admin/Elements/AddLinks
+++ b/share/html/Admin/Elements/AddLinks
@@ -53,23 +53,14 @@
 <i><&|/l&>Enter objects or URIs to link objects to. Separate multiple entries with spaces.</&></i><br />
 % }
 
-  <div class="form-row">
-    <div class="label col-3">
-      <& /Elements/ShowRelationLabel, Object => $Object, Label => loc('Links to').':', Relation => 'RefersTo' &>
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="<%$id%>-RefersTo" value="<% $ARGSRef->{"$id-RefersTo"} || '' %>" <% $exclude |n%>/>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, RawLabel => $m->scomp('/Elements/ShowRelationLabel', Object => $Object, Label => loc('Links to'), Relation => 'RefersTo') &>
+    <input type="text" class="form-control" name="<%$id%>-RefersTo" value="<% $ARGSRef->{"$id-RefersTo"} || '' %>" <% $exclude |n%>/>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <& /Elements/ShowRelationLabel, Object => $Object, Label => loc('Linked to by').':', Relation => 'ReferredToBy' &>
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, RawLabel => $m->scomp('/Elements/ShowRelationLabel', Object => $Object, Label => loc('Linked to by'), Relation => 'ReferredToBy') &>
       <input type="text" class="form-control" name="RefersTo-<%$id%>" value="<% $ARGSRef->{"RefersTo-$id"} || '' %>" <% $exclude |n%>/>
-    </div>
-  </div>
+  </&>
+
   <& /Elements/EditCustomFields,
         Object          => $Object,
         Grouping        => 'Links',
diff --git a/share/html/Admin/Elements/EditCustomField b/share/html/Admin/Elements/EditCustomField
index 4fb1020d16..2c902230e4 100644
--- a/share/html/Admin/Elements/EditCustomField
+++ b/share/html/Admin/Elements/EditCustomField
@@ -52,32 +52,17 @@
 <input type="hidden" class="hidden" name="CustomField" value="<%$id %>" />
 <input type="hidden" class="hidden" name="Queue" value="<%$Queue%>" />
 
-<div class="form-row">
-  <div class="label col-3>
-    <&|/l&>Name</&>:
-  <div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="Name" value="<%$CustomFieldObj->Name%>" size="20" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc("Name") &>
+  <input class="form-control" type="text" name="Name" value="<%$CustomFieldObj->Name%>" size="20" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3>
-    <&|/l&>Description</&>:
-  </div>
-  <div class="value col-9">
-    <input class="form-control" type="text" name="Description" value="<%$CustomFieldObj->Description%>" size="80" />
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc("Description") &>
+  <input class="form-control" type="text" name="Description" value="<%$CustomFieldObj->Description%>" size="80" />
+</&>
 
-<div class="form-row">
-  <div class="label col-3>
-    <&|/l&>Type</&>:
-  </div>
-  <div class="value col-9">
-    <& /Admin/Elements/SelectCustomFieldType, Name => "Type", Default => $CustomFieldObj->Type &>
-  </div>
-</div>
+<&| /Elements/LabeledValue, Label => loc("Type") &>
+  <& /Admin/Elements/SelectCustomFieldType, Name => "Type", Default => $CustomFieldObj->Type &>
+</&>
 
 <input type="hidden" class="hidden" name="SetEnabled" value="1" />
 <div class="custom-control custom-checkbox">
@@ -89,15 +74,12 @@
 % if ($CustomFieldObj->Id and $CustomFieldObj->Type =~ /Select/) {
 <h2><&|/l&>Values</&></h2>
 <font size="-1">
-<& /Admin/Elements/EditCustomFieldValues, CustomField => $CustomFieldObj &>
-<& /Admin/Elements/AddCustomFieldValue, CustomField => $CustomFieldObj &>
+  <& /Admin/Elements/EditCustomFieldValues, CustomField => $CustomFieldObj &>
+  <& /Admin/Elements/AddCustomFieldValue, CustomField => $CustomFieldObj &>
 </font>
 % }
 <&/Elements/Submit, Label => loc('Create') &>
 </form>
-
-
-
 <%INIT>
 
 my $CustomFieldObj = RT::CustomField->new($session{'CurrentUser'});
diff --git a/share/html/Admin/Elements/EditLinks b/share/html/Admin/Elements/EditLinks
index 96098662ec..fb4685a017 100644
--- a/share/html/Admin/Elements/EditLinks
+++ b/share/html/Admin/Elements/EditLinks
@@ -53,11 +53,7 @@
         <h3><&|/l&>Current Links</&></h3>
       </div>
     </div>
-    <div class="form-row">
-      <div class="label col-3">
-        <& /Elements/ShowRelationLabel, Object => $Object, Label => loc('Links to').':', Relation => 'RefersTo' &>
-      </div>
-      <div class="value col-9">
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('/Elements/ShowRelationLabel', Object => $Object, Label => loc('Links to'), Relation => 'RefersTo') &>
         <div class="form-row">
           <div class="col-auto">
 % while (my $link = $Object->RefersTo->Next) {
@@ -65,13 +61,8 @@
 %}
           </div>
         </div>
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="label col-3">
-        <& /Elements/ShowRelationLabel, Object => $Object, Label => loc('Linked to by').':', Relation => 'ReferredToBy' &>
-      </div>
-      <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, RawLabel => $m->scomp('/Elements/ShowRelationLabel', Object => $Object, Label => loc('Linked to by'), Relation => 'ReferredToBy') &>
         <div class="form-row">
           <div class="col-auto">
 % while (my $link = $Object->ReferredToBy->Next) {
@@ -79,14 +70,10 @@
 % }
           </div>
         </div>
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="label col-3"></div>
-      <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, Label => '' &>
         <i><&|/l&>(Check box to remove link)</&></i>
-      </div>
-    </div>
+    </&>
   </div>
 
   <div class="col-6">
diff --git a/share/html/Admin/Elements/ShowKeyInfo b/share/html/Admin/Elements/ShowKeyInfo
index 165d6ac29a..f969fc23a3 100644
--- a/share/html/Admin/Elements/ShowKeyInfo
+++ b/share/html/Admin/Elements/ShowKeyInfo
@@ -78,72 +78,25 @@
 </div>
 
 % if ( $Type ne 'private' && $res{'info'}{'Trust'} ) {
-<div class="form-row">
-  <div class="label col-3">
-    <% loc('Trust') %>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% loc( $res{'info'}{'Trust'} ) %></span>
-  </div>
-</div>
+<& /Elements/LabeledValue, Label => loc('Trust'), Value => loc($res{'info'}{'Trust'}), ValueSpanClass => 'current-value' &>
 % }
 
-<div class="form-row">
-  <div class="label col-3">
-    <% loc('Fingerprint') %>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $res{'info'}{'Fingerprint'} %></span>
-  </div>
-</div>
-
+<& /Elements/LabeledValue, Label => loc('Fingerprint'), Value => $res{'info'}{'Fingerprint'}, ValueSpanClass => 'current-value' &>
 % $_->CurrentUser( $session{CurrentUser} ) for grep {$_} (@{$res{'info'}}{qw|Created Expire|});
-<div class="form-row">
-  <div class="label col-3">
-    <% loc('Created') %>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value">
-      <% $res{'info'}{'Created'}? $res{'info'}{'Created'}->AsString( Time => 0 ): loc('never') %>
-    </span>
-  </div>
-</div>
 
-<div class="form-row">
-  <div class="label col-3">
-    <% loc('Expire') %>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value">
-      <% $res{'info'}{'Expire'}? $res{'info'}{'Expire'}->AsString( Time => 0 ): loc('never') %>
-    </span>
-  </div>
-</div>
+<& /Elements/LabeledValue, Label => loc('Created'), Value =>$res{'info'}{'Created'}? $res{'info'}{'Created'}->AsString( Time => 0 ): loc('never'), ValueSpanClass => 'current-value' &>
+<& /Elements/LabeledValue, Label => loc('Expire'), Value =>$res{'info'}{'Expire'}? $res{'info'}{'Expire'}->AsString( Time => 0 ): loc('never'), ValueSpanClass => 'current-value' &>
+
 
 % foreach my $uinfo( @{ $res{'info'}{'User'} } ) {
 % if ($uinfo->{'Created'} or $uinfo->{'Expire'}) {
 %   $_->CurrentUser( $session{CurrentUser} ) for grep {$_} ($uinfo->{'Created'}, $uinfo->{'Expire'});
-<div class="form-row">
-  <div class="label col-3">
-    <% loc('User (created - expire)') %>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value">
+<&| /Elements/LabeledValue, Label => loc('User (created - expire)'), ValueSpanClass => 'current-value' &>
       <% $uinfo->{'String'} %> \
      (<% $uinfo->{'Created'}? $uinfo->{'Created'}->AsString( Time => 0 ): loc('never') %> - <% $uinfo->{'Expire'}? $uinfo->{'Expire'}->AsString( Time => 0 ): loc('never') %>)
-    </span>
-  </div>
-</div>
+</&>
 % } else {
-<div class="form-row">
-  <div class="label col-3">
-    <% loc('User') %>:
-  </div>
-  <div class="value col-9">
-    <span class="current-value"><% $uinfo->{'String'} %></span>
-  </div>
-</div>
-
+<& /Elements/LabeledValue, Label => loc('User'), Value => $uinfo->{'String'}, ValueSpanClass => 'current-value' &>
 % }
 % }
 
diff --git a/share/html/Admin/Groups/Modify.html b/share/html/Admin/Groups/Modify.html
index 8b96081b57..afeea7f37b 100644
--- a/share/html/Admin/Groups/Modify.html
+++ b/share/html/Admin/Groups/Modify.html
@@ -61,33 +61,21 @@
 % }
 
   <&| /Widgets/TitleBox, title => loc('Basics'), class => 'group-info-basics', content_class => 'mx-auto width-sm' &>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Name</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" name="Name" class="form-control" value="<%$Group->Name||$Name||''%>" />
-    </div>
-  </div>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Description</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Name') &>
+    <input type="text" name="Name" class="form-control" value="<%$Group->Name||$Name||''%>" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc('Description') &>
       <input type="text" name="Description" class="form-control" value="<%$Group->Description||$Description||''%>" size="60" />
-    </div>
-  </div>
-  <& /Elements/EditCustomFields, Object => $Group, Grouping => 'Basics', InTable => 1 &>
-  <div class="form-row">
-    <div class="value col-9 offset-md-3">
-      <div class="custom-control custom-checkbox">
-        <input type="hidden" class="hidden" name="SetEnabled" value="1" />
-        <input type="checkbox" id="Enabled" name="Enabled" class="custom-control-input" value="1" <%$EnabledChecked%> />
-        <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this group)</&></label><br />
-      </div>
-    </div>
+</&>
+<& /Elements/EditCustomFields, Object => $Group, Grouping => 'Basics', InTable => 1 &>
+<&| /Elements/LabeledValue, Label => '' &>
+  <div class="custom-control custom-checkbox">
+    <input type="hidden" class="hidden" name="SetEnabled" value="1" />
+    <input type="checkbox" id="Enabled" name="Enabled" class="custom-control-input" value="1" <%$EnabledChecked%> />
+    <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this group)</&></label><br />
   </div>
   </&>
+  </&>
   <& /Elements/EditCustomFieldCustomGroupings , Object => $Group, &>
 % $m->callback( %ARGS, GroupObj => $Group, results => \@results );
 
diff --git a/share/html/Admin/Lifecycles/Create.html b/share/html/Admin/Lifecycles/Create.html
index 0e942f5784..23dd716309 100644
--- a/share/html/Admin/Lifecycles/Create.html
+++ b/share/html/Admin/Lifecycles/Create.html
@@ -52,31 +52,20 @@
 <form action="<%RT->Config->Get('WebPath')%>/Admin/Lifecycles/Create.html" name="CreateLifecycle" method="post" enctype="multipart/form-data" class="mx-auto max-width-lg">
 
 <&| /Widgets/TitleBox, class => 'lifecycle-info-basics', content_class => 'mx-auto width-sm' &>
-  <div class="form-row">
-    <div class="col-3 label">
-      <&|/l&>Lifecycle Name</&>:
-    </div>
-    <div class="col-9 value">
+<&| /Elements/LabeledValue, Label => loc('Lifecycle Name') &>
       <input type="text" name="Name" value="<% $Name %>" class="form-control" />
-    </div>
-  </div>
+</&>
+
+<&| /Elements/LabeledValue, Label => loc('Type') &>
 
-  <div class="form-row">
-    <div class="col-3 label"><&|/l&>Type</&>:</div>
-    <div class="col-9 value">
       <select name="Type" class="form-control selectpicker">
 % for my $type (@types) {
         <option value="<% $type %>" <% $type eq $Type ? "selected=selected" : "" %>><% loc($type) %></option>
 % }
       </select>
-    </div>
-  </div>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc('Clone Lifecycle') &>
 
-  <div class="form-row">
-    <div class="col-3 label">
-      <&|/l&>Clone Lifecycle</&>:
-    </div>
-    <div class="col-9 value">
       <ul class="list-group list-group-compact">
         <li class="list-group-item">
           <div class="custom-control custom-radio">
@@ -96,9 +85,7 @@
 %   }
 % }
       </ul>
-    </div>
-  </div>
-
+  </&>
   <div class="form-row">
     <div class="col-12">
       <& /Elements/Submit, Name => 'Create', Label => loc('Create') &>
diff --git a/share/html/Admin/Queues/DefaultValues.html b/share/html/Admin/Queues/DefaultValues.html
index b2a4135132..0adde7522e 100644
--- a/share/html/Admin/Queues/DefaultValues.html
+++ b/share/html/Admin/Queues/DefaultValues.html
@@ -54,24 +54,14 @@
 
 <div class="ticket-info-basics">
   <&| /Widgets/TitleBox, title => loc('Basics'), content_class => 'mx-auto width-sm' &>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Priority</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectPriority, Name => "InitialPriority", Default => $queue->DefaultValue('InitialPriority'), QueueObj => $queue &>
-    </div>
-  </div>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Final Priority</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Priority') &>
+    <& /Elements/SelectPriority, Name => "InitialPriority", Default => $queue->DefaultValue('InitialPriority'), QueueObj => $queue &>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc('Final Priority') &>
       <& /Elements/SelectPriority, Name => "FinalPriority", Default => $queue->DefaultValue('FinalPriority'), QueueObj => $queue &>
       <span><em><&|/l&>requires running rt-crontool</&></em></span>
-    </div>
-  </div>
+  </&>
 
   <& /Elements/EditCustomFields,
       Object => RT::Ticket->new($session{CurrentUser}),
@@ -80,37 +70,21 @@
       CategoryObj => $queue,
   &>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Article</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Article') &>
       <& /Elements/SelectArticle, QueueObj => $queue, Default => $queue->DefaultValue('Article'), Name => 'Article' &>
-    </div>
-  </div>
+  </&>
 
   </&>
 </div>
 
 <div class="ticket-info-dates">
   <&|/Widgets/TitleBox, title => loc("Dates"), content_class => 'mx-auto width-sm' &>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Starts</&>:
-    </div>
-    <div class="value col-9">
-      <& /Elements/SelectDate, Name => "Starts", Default => $queue->DefaultValue('Starts') || '' &>
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Due</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Starts') &>
+    <& /Elements/SelectDate, Name => "Starts", Default => $queue->DefaultValue('Starts') || '' &>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc('Due') &>
       <& /Elements/SelectDate, Name => "Due", Default => $queue->DefaultValue('Due') || '' &>
-    </div>
-  </div>
+  </&>
 
   <& /Elements/EditCustomFields,
       Object => RT::Ticket->new($session{CurrentUser}),
diff --git a/share/html/Admin/Queues/Modify.html b/share/html/Admin/Queues/Modify.html
index 8262f752ea..c59b5216d4 100644
--- a/share/html/Admin/Queues/Modify.html
+++ b/share/html/Admin/Queues/Modify.html
@@ -56,33 +56,20 @@
 % $m->callback( CallbackName => 'FormStart', Create => $Create, ARGSRef => \%ARGS );
 
 <&| /Widgets/TitleBox, class => 'queue-info-basics', content_class => 'mx-auto width-sm' &>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Queue Name</&>:
-    </div>
-    <div class="value col-9">
+<&| /Elements/LabeledValue, Label => loc('Queue Name') &>
+
 % if ($InternalQueue) {
       <% $QueueObj->Name %>
 % } else {
       <input type="text" class="form-control" name="Name" value="<% $Create ? "" : $QueueObj->Name || $Name %>" />
 % }
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Description</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Description') &>
       <input type="text" class="form-control" name="Description" value="<% $Create ? "" : $QueueObj->Description || $Description || '' %>" size="60" />
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Lifecycle</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Lifecycle') &>
 % if ($InternalQueue) {
       <% $QueueObj->Lifecycle %>
 % } else {
@@ -93,49 +80,30 @@
           Default      => 0,
       &>
 % }
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Subject Tag</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="SubjectTag" value="<% $ARGS{'SubjectTag'} || ($Create ? "" : $QueueObj->SubjectTag || '' ) %>" size="60" />
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc('Subject Tag') &>
+    <input type="text" class="form-control" name="SubjectTag" value="<% $ARGS{'SubjectTag'} || ($Create ? "" : $QueueObj->SubjectTag || '' ) %>" size="60" />
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Sort Order</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Sort Order') &>
       <input type="text" class="form-control" name="SortOrder" value="<% $Create ? 0 : $QueueObj->SortOrder || $SortOrder || 0 %>" size="60" />
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Reply Address</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Reply Address') &>
       <input type="email" class="form-control" name="CorrespondAddress" value="<% $Create ? "" : $QueueObj->CorrespondAddress || $CorrespondAddress || '' %>" />
       <span><em><&|/l , RT->Config->Get('CorrespondAddress')&>(If left blank, will default to [_1])</&></em></span>
-    </div>
+  </&>
 
-    <div class="label col-3">
-      <&|/l&>Comment Address</&>:
-    </div>
-    <div class="value col-9">
-      <input type="email" class="form-control" name="CommentAddress" value="<% $Create ? "" : $QueueObj->CommentAddress || $CommentAddress || '' %>" />
-      <span><em><&|/l , RT->Config->Get('CommentAddress')&>(If left blank, will default to [_1])</&></em></span>
-    </div>
-  </div>
+  <&| /Elements/LabeledValue, Label => loc('Comment Address') &>
+
+    <input type="email" class="form-control" name="CommentAddress" value="<% $Create ? "" : $QueueObj->CommentAddress || $CommentAddress || '' %>" />
+    <span><em><&|/l , RT->Config->Get('CommentAddress')&>(If left blank, will default to [_1])</&></em></span>
+  </&>
 % $m->callback( CallbackName => 'AfterQueueAddresses', %ARGS, QueueObj => $QueueObj, results => \@results );
 
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
+
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="SLAEnabled" name="SLAEnabled" value="1" 
 % if ( $QueueObj->id && !$QueueObj->SLADisabled ) {
@@ -145,69 +113,49 @@
         <label class="custom-control-label" for="SLAEnabled"><&|/l&>SLA Enabled (Unchecking this box disables SLA for this queue)</&></label>
         <input type="hidden" class="hidden" name="SetSLAEnabled" value="1" />
       </div>
-    </div>
-  </div>
-
+  </&>
 % my $CFs = $QueueObj->CustomFields;
 % while (my $CF = $CFs->Next) {
-  <div class="form-row">
-    <div class="label col-3">
-      <span class="<% $CF->EntryHint ? 'prev-icon-helper' : '' %>"><% $CF->Name %>:</span>\
-% if ( $CF->EntryHint ) {
-<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $CF->EntryHint %>"></span>
-% }
-    </div>
-    <div class="value col-9">
+<&| /Elements/LabeledValue, Label => $CF->Name, LabelTooltip => $CF->EntryHint &>
+
       <& /Elements/EditCustomField, CustomField => $CF,
                                     Object => $QueueObj, &>
-    </div>
-  </div>
+</&>
 % }
 
 % if ( RT->Config->Get('Crypt')->{'Enable'} ) {
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Sign" name="Sign" value="1" <% $QueueObj->Sign? 'checked="checked"': '' |n%> />
         <label class="custom-control-label" for="Sign"><&|/l&>Sign by default</&></label>
       </div>
-    </div>
-  </div>
+   </&>
+
+   <&| /Elements/LabeledValue, Label => '' &>
 
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <div class="value col-9">
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Encrypt" name="Encrypt" value="1" <% $QueueObj->Encrypt? 'checked="checked"': '' |n%> />
         <label class="custom-control-label" for="Encrypt"><&|/l&>Encrypt by default</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="SignAuto" name="SignAuto" value="1" <% $QueueObj->SignAuto? 'checked="checked"': '' |n%> />
         <label class="custom-control-label" for="SignAuto"><&|/l_unsafe, "<b>","</b>","<i>","</i>"&>Sign all auto-generated mail.  [_1]Caution[_2]: Enabling this option alters the signature from providing [_3]authentication[_4] to providing [_3]integrity[_4].</&></label>
       </div>
-    </div>
-  </div>
+    </&>
 % }
 
 % unless ($InternalQueue) {
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Enabled" name="Enabled" value="1" <%$EnabledChecked|n%> />
         <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this queue)</&></label>
         <input type="hidden" class="hidden" name="SetEnabled" value="1" />
 % $m->callback( %ARGS, QueueObj => $QueueObj, results => \@results );
       </div>
-    </div>
-  </div>
+  </&>
 % }
 
 % if ( RT->Config->Get('Crypt')->{'Enable'} ) {
diff --git a/share/html/Admin/Scrips/Create.html b/share/html/Admin/Scrips/Create.html
index 75a7c6a986..43c8be477c 100644
--- a/share/html/Admin/Scrips/Create.html
+++ b/share/html/Admin/Scrips/Create.html
@@ -57,27 +57,18 @@
 
 <& Elements/EditBasics, %ARGS, Scrip => $scrip, Queue => $queue_obj &>
 
-  <div class="form-row">
-    <div class="label col-2">
-      <&|/l&>Stage</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc('Stage') &>
       <& /Admin/Elements/SelectStage, Default => $ARGS{"Stage"} &>
-    </div>
-  </div>
+  </&>
 
 <input type="hidden" class="hidden" name="SetEnabled" value="1" />
 
-  <div class="form-row">
-    <div class="label col-2">
-    </div>
-    <div class="value col-9">
-      <div class="custom-control custom-checkbox">
-        <input type="checkbox" class="custom-control-input checkbox" name="Enabled" id="Enabled" value="1" <% $ARGS{'Enabled'}? 'checked="checked"': '' |n%> />
-        <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this scrip)</&></label>
-      </div>
-    </div>
+<&| /Elements/LabeledValue, Label => '' &>
+  <div class="custom-control custom-checkbox">
+    <input type="checkbox" class="custom-control-input checkbox" name="Enabled" id="Enabled" value="1" <% $ARGS{'Enabled'}? 'checked="checked"': '' |n%> />
+    <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this scrip)</&></label>
   </div>
+ </&>
 
 </&>
 
diff --git a/share/html/Admin/Scrips/Elements/EditBasics b/share/html/Admin/Scrips/Elements/EditBasics
index b72c3a6000..78e940bdbe 100644
--- a/share/html/Admin/Scrips/Elements/EditBasics
+++ b/share/html/Admin/Scrips/Elements/EditBasics
@@ -45,42 +45,18 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="form-row">
-  <div class="label col-2">
-    <&|/l&>Description</&>:
-  </div>
-  <div class="value col-9">
-    <input type="text" class="form-control" name="Description" size="60" value="<% $ARGS{"Description"} || $Scrip->Description || '' %>" />
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-2">
-    <&|/l&>Condition</&>:
-  </div>
-  <div class="value col-9">
-    <& /Admin/Elements/SelectScripCondition, Default => $ARGS{"ScripCondition"} || $Scrip->ConditionObj->Id, &>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-2">
-    <&|/l&>Action</&>:
-  </div>
-  <div class="value col-9">
-    <& /Admin/Elements/SelectScripAction, Default => $ARGS{"ScripAction"} || $Scrip->ActionObj->Id, &>
-  </div>
-</div>
-
-<div class="form-row">
-  <div class="label col-2">
-    <&|/l&>Template</&>:
-  </div>
-  <div class="value col-9">
-    <& SelectTemplate, Default => $ARGS{"Template"}, Scrip => $Scrip, Queue => $Queue &>
-  </div>
-</div>
-
+<&| /Elements/LabeledValue, Label => loc('Description') &>
+  <input type="text" class="form-control" name="Description" size="60" value="<% $ARGS{"Description"} || $Scrip->Description || '' %>" />
+</&>
+<&| /Elements/LabeledValue, Label => loc('Condition') &>
+  <& /Admin/Elements/SelectScripCondition, Default => $ARGS{"ScripCondition"} || $Scrip->ConditionObj->Id, &>
+</&>
+<&| /Elements/LabeledValue, Label => loc('Action') &>
+  <& /Admin/Elements/SelectScripAction, Default => $ARGS{"ScripAction"} || $Scrip->ActionObj->Id, &>
+</&>
+<&| /Elements/LabeledValue, Label => loc('Template') &>
+  <& SelectTemplate, Default => $ARGS{"Template"}, Scrip => $Scrip, Queue => $Queue &>
+</&>
 <%ARGS>
 $Scrip
 $Queue => undef
diff --git a/share/html/Admin/Scrips/Modify.html b/share/html/Admin/Scrips/Modify.html
index a2ab8df999..e6660ebbc3 100644
--- a/share/html/Admin/Scrips/Modify.html
+++ b/share/html/Admin/Scrips/Modify.html
@@ -84,16 +84,12 @@
 
 <input type="hidden" class="hidden" name="SetEnabled" value="1" />
 
-  <div class="form-row">
-    <div class="label col-2">
+  <&| /Elements/LabeledValue, Label => '' &>
+    <div class="custom-control custom-checkbox">
+      <input type="checkbox" class="checkbox custom-control-input" name="Enabled" id="Enabled" value="1" <% $EnabledChecked |n%> />
+      <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this scrip)</&></label>
     </div>
-    <div class="value col-9">
-      <div class="custom-control custom-checkbox">
-        <input type="checkbox" class="checkbox custom-control-input" name="Enabled" id="Enabled" value="1" <% $EnabledChecked |n%> />
-        <label class="custom-control-label" for="Enabled"><&|/l&>Enabled (Unchecking this box disables this scrip)</&></label>
-      </div>
-    </div>
-  </div>
+  </&>
 
 </&>
 
diff --git a/share/html/Admin/Tools/GnuPG.html b/share/html/Admin/Tools/GnuPG.html
index 374a9ba68b..bc501e8e1f 100644
--- a/share/html/Admin/Tools/GnuPG.html
+++ b/share/html/Admin/Tools/GnuPG.html
@@ -55,49 +55,33 @@
 <&|/Widgets/TitleBox, title => loc('Import Keys'), content_class => 'mx-auto width-md' &>
 % my %options = RT->Config->Get('GnuPGOptions');
 % if ( $options{'keyserver'} ) {
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <div class="input-group col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
+  <div class="input-group">
       <input name="Query" class="form-control" value="<% $ARGS{Query} // '' %>" size="40" />
       <input name="Search" type="submit" class="button btn btn-primary" value="<&|/l&>Search</&>" />
-    </div>
-  </div>
+  </&>
 % if ( @search_results ) {
-  <div class="form-row">
-    <div class="label col-3"></div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => '' &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="KeyAll" name="KeyAll" value="1" onclick="setCheckbox(this, 'Key')" />
         <label class="custom-control-label" for="KeyAll"><&|/l&>Check All</&></label>
       </div>
-    </div>
-  </div>
+  </&>
 % for my $item ( @search_results ) {
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Key</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Key") &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Key-<% $item->{Key} %>" name="Key" value="<% $item->{Key} %>" />
         <label class="custom-control-label" for="Key-<% $item->{Key} %>"><% $item->{Summary} %></label>
       </div>
-    </div>
-  </div>
+  </&>
 % }
 % }
 
 % }
 
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Content</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Content") &>
       <textarea class="form-control" name="Content" rows="8"><% $ARGS{Content} // '' %></textarea>
-    </div>
-  </div>
-
+  </&>
   <div class="form-row">
     <div class="col-12">
       <& /Elements/Submit, Name => 'Import', Label => loc('Import') &>
diff --git a/share/html/Admin/Tools/Shredder/Elements/PluginArguments b/share/html/Admin/Tools/Shredder/Elements/PluginArguments
index ad25c85878..84ce563f0f 100644
--- a/share/html/Admin/Tools/Shredder/Elements/PluginArguments
+++ b/share/html/Admin/Tools/Shredder/Elements/PluginArguments
@@ -51,25 +51,21 @@ $Plugin => ''
 <div id="shredder-plugin-<% $Plugin %>-arguments" class="shredder-form">
 <&| /Widgets/TitleBox, title => loc("Search") &>
 % for my $a ( $plugin_obj->SupportArgs ) {
-  <div class="form-row">
 %  if( $plugin_obj->ArgIsBoolean( $a ) ) {
-    <div class="col-9 offset-md-3">
+  <&| /Elements/LabeledValue, Label => "" &>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" id="<% "$Plugin:$a" %>" name="<% "$Plugin:$a" %>" class="custom-control-input" value="<% $ARGS{ "$Plugin:$a" } || '' %>" />
         <label class="custom-control-label" for="<% "$Plugin:$a" %>"><% loc($a) %></label>
         <span class="hints d-block"><% $arguments_help{$a}->{help} |n%></span>
-      </div>
-    </div>
+   </&>
 %  } else {
-    <div class="label col-3"><% loc($a) %></div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc($a) &>
       <input type="text" name="<% "$Plugin:$a" %>" id="<% "$Plugin:$a" %>" class="form-control" value="<% $ARGS{ "$Plugin:$a" } || '' %>" />
 %     if( $arguments_help{$a} ) {
           <span class="hints d-block"><% $arguments_help{$a}->{type} . ' - ' . $arguments_help{$a}->{help} |n%></span>
 %     }
-    </div>
+  </&>
 %  }
-  </div>
 % }
   <div id="shredder-submit-button" class="<% $Plugin? '': 'hidden' %>">
     <div class="form-row">
diff --git a/share/html/Admin/Users/Modify.html b/share/html/Admin/Users/Modify.html
index 0ed8e68a34..0feafe9de5 100644
--- a/share/html/Admin/Users/Modify.html
+++ b/share/html/Admin/Users/Modify.html
@@ -60,78 +60,30 @@
   <div class="boxcontainer col-xl-6">
 
 <&| /Widgets/TitleBox, title => loc('Identity'), class => 'user-info-identity' &>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Username</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="Name" value="<%$UserObj->Name//$ARGS{Name}//''%>" /> <strong><&|/l&>(required)</&></strong>
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Email</&>:
-    </div>
-    <div class="value col-9">
-      <input type="email" class="form-control" name="EmailAddress" value="<%$UserObj->EmailAddress//$ARGS{EmailAddress}//''%>" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-       <&|/l&>Real Name</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="RealName" value="<%$UserObj->RealName//$ARGS{RealName}//''%>" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Nickname</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="NickName" value="<%$UserObj->NickName//$ARGS{NickName}//''%>" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Unix login</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Username") &>
+    <input type="text" class="form-control" name="Name" value="<%$UserObj->Name//$ARGS{Name}//''%>" /> <strong><&|/l&>(required)</&></strong>
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Email") &>
+    <input type="email" class="form-control" name="EmailAddress" value="<%$UserObj->EmailAddress//$ARGS{EmailAddress}//''%>" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Real Name") &>
+    <input type="text" class="form-control" name="RealName" value="<%$UserObj->RealName//$ARGS{RealName}//''%>" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Nickname") &>
+    <input type="text" class="form-control" name="NickName" value="<%$UserObj->NickName//$ARGS{NickName}//''%>" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Unix login") &>
       <input type="text" class="form-control" name="Gecos" value="<%$UserObj->Gecos//$ARGS{Gecos}//''%>" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Language</&>:
-    </div>
-    <div class="value col-9">
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Language") &>
       <& /Elements/SelectLang, Name => 'Lang', Default => $UserObj->Lang//$ARGS{Lang} &>
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Timezone</&>:
-    </div>
-    <div class="value col-9">
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Timezone") &>
       <& /Elements/SelectTimezone, Name => 'Timezone', Default => $UserObj->Timezone &>
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Extra info</&>:
-    </div>
-    <div class="value col-9">
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Extra info") &>
       <textarea class="form-control" name="FreeformContactInfo" cols="20" rows="5"><%$UserObj->FreeformContactInfo//$ARGS{FreeformContactInfo}//''%></textarea>
-    </div>
-  </div>
+  </&>
 
 <& /Elements/EditCustomFields, Object => $UserObj, Grouping => 'Identity' &>
 </&>
@@ -153,7 +105,7 @@
     <div class="col-12">
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input checkbox" id="Privileged" name="Privileged" value="1" <%$PrivilegedChecked|n%> />
-        <label class="custom-control-label" for="Privileged"><&|/l&>Let this user be granted rights</&> (<&|/l&>Privileged</&>)</label>
+        <label class="custom-control-label" for="Privileged"><&|/l&>Let this user be granted rights</&>(<&|/l&>Privileged</&>)</label>
       </div>
     </div>
   </div>
@@ -198,110 +150,44 @@
   <div class="boxcontainer col-xl-6">
 
 <&| /Widgets/TitleBox, title => loc('Location'), class => 'user-info-location' &>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Organization</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="Organization" value="<%$UserObj->Organization//$ARGS{Organization}//''%>" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Address1</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="Address1" value="<%$UserObj->Address1//$ARGS{Address1}//''%>" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Address2</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Organization") &>
+    <input type="text" class="form-control" name="Organization" value="<%$UserObj->Organization//$ARGS{Organization}//''%>" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Address1") &>
+    <input type="text" class="form-control" name="Address1" value="<%$UserObj->Address1//$ARGS{Address1}//''%>" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Address2") &>
       <input type="text" class="form-control" name="Address2" value="<%$UserObj->Address2//$ARGS{Address2}//''%>" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>City</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="City" value="<%$UserObj->City//$ARGS{City}//''%>" size="14" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>State</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="State" value="<%$UserObj->State//$ARGS{State}//''%>" size="3" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Zip</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="Zip" value="<%$UserObj->Zip//$ARGS{Zip}//''%>" size="9" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Country</&>:
-    </div>
-    <div class="value col-9">
-      <input type="text" class="form-control" name="Country" value="<%$UserObj->Country//$ARGS{Country}//''%>" />
-    </div>
-  </div>
-
-<& /Elements/EditCustomFields, Object => $UserObj, Grouping => 'Location' &>
-
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("City") &>
+    <input type="text" class="form-control" name="City" value="<%$UserObj->City//$ARGS{City}//''%>" size="14" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("State") &>
+    <input type="text" class="form-control" name="State" value="<%$UserObj->State//$ARGS{State}//''%>" size="3" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Zip") &>
+    <input type="text" class="form-control" name="Zip" value="<%$UserObj->Zip//$ARGS{Zip}//''%>" size="9" />
+  </&>
+  <&| /Elements/LabeledValue, Label => loc("Country") &>
+
+    <input type="text" class="form-control" name="Country" value="<%$UserObj->Country//$ARGS{Country}//''%>" />
+  </&>
+  <& /Elements/EditCustomFields, Object => $UserObj, Grouping => 'Location' &>
 </&>
 
 <&| /Widgets/TitleBox, title => loc('Phone numbers'), class => 'user-info-phones' &>
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Residence</&>:
-    </div>
-    <div class="value col-9">
+  <&| /Elements/LabeledValue, Label => loc("Residence") &>
       <input type="tel" class="form-control" name="HomePhone" value="<%$UserObj->HomePhone//$ARGS{HomePhone}//''%>" size="13" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Work</&>:
-    </div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, Label => loc("Work") &>
       <input type="tel" class="form-control" name="WorkPhone" value="<%$UserObj->WorkPhone//$ARGS{WorkPhone}//''%>" size="13" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Mobile</&>:
-    </div>
-    <div class="value col-9">
+    </&>
+    <&| /Elements/LabeledValue, Label => loc("Mobile") &>
       <input type="tel" class="form-control" name="MobilePhone" value="<%$UserObj->MobilePhone//$ARGS{MobilePhone}//''%>" size="13" />
-    </div>
-  </div>
-
-  <div class="form-row">
-    <div class="label col-3">
-      <&|/l&>Pager</&>:
-    </div>
-    <div class="value col-9">
-      <input type="tel" class="form-control" name="PagerPhone" value="<%$UserObj->PagerPhone//$ARGS{PagerPhone}//''%>" size="13" />
-    </div>
-  </div>
-
+    </&>
+  <&| /Elements/LabeledValue, Label => loc("Pager") &>
+    <input type="tel" class="form-control" name="PagerPhone" value="<%$UserObj->PagerPhone//$ARGS{PagerPhone}//''%>" size="13" />
+    </&>
 <& /Elements/EditCustomFields, Object => $UserObj, Grouping => 'Phones' &>
 
 </&>

commit 2749180dfd283e525a85543291c10b78680ee634
Author: Jesse Vincent <jesse at keyboard.io>
Date:   Mon Aug 8 17:39:30 2022 -0700

    Add a new "LabeledValue" component
    
    Provides a standard way to show some kind of a value
    with a label attached to it, usually in a list of such
    values. This is very common throughout RT and this centralizes
    the markup in one place, also reducing duplicated
    HTML nearly everywhere.

diff --git a/share/html/Elements/LabeledValue b/share/html/Elements/LabeledValue
new file mode 100644
index 0000000000..f711e6e6c6
--- /dev/null
+++ b/share/html/Elements/LabeledValue
@@ -0,0 +1,97 @@
+%# BEGIN BPS TAGGED BLOCK {{{
+%#
+%# COPYRIGHT:
+%#
+%# This software is Copyright (c) 1996-2022 Best Practical Solutions, LLC
+%#                                          <sales at bestpractical.com>
+%#
+%# (Except where explicitly superseded by other copyright notices)
+%#
+%#
+%# LICENSE:
+%#
+%# This work is made available to you under the terms of Version 2 of
+%# the GNU General Public License. A copy of that license should have
+%# been provided with this software, but in any event can be snarfed
+%# from www.gnu.org.
+%#
+%# This work is distributed in the hope that it will be useful, but
+%# WITHOUT ANY WARRANTY; without even the implied warranty of
+%# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+%# General Public License for more details.
+%#
+%# You should have received a copy of the GNU General Public License
+%# along with this program; if not, write to the Free Software
+%# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
+%# 02110-1301 or visit their web page on the internet at
+%# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.
+%#
+%#
+%# CONTRIBUTION SUBMISSION POLICY:
+%#
+%# (The following paragraph is not intended to limit the rights granted
+%# to you to modify and distribute this software under the terms of
+%# the GNU General Public License and is only of importance to you if
+%# you choose to contribute your changes and enhancements to the
+%# community by submitting them to Best Practical Solutions, LLC.)
+%#
+%# By intentionally submitting any modifications, corrections or
+%# derivatives to this work, or any other work intended for use with
+%# Request Tracker, to Best Practical Solutions, LLC, you confirm that
+%# you are the copyright holder for those contributions and you grant
+%# Best Practical Solutions,  LLC a nonexclusive, worldwide, irrevocable,
+%# royalty-free, perpetual, license to use, copy, create derivative
+%# works based on those contributions, and sublicense and distribute
+%# those contributions and any derivatives thereof.
+%#
+%# END BPS TAGGED BLOCK }}}
+<%args>
+$Class => undef
+$Label => undef
+$Value => undef
+$ValueSpanClass => undef
+$LabelSpanClass => undef
+$RawLabel => undef
+$RawValue => undef
+$LabelTooltip => undef
+</%args>
+<%init>
+if ( !defined($Value) && !defined($RawValue) && $m->content) {
+    $RawValue = $m->content;
+}
+
+</%init>
+<div class="<% $Class %> form-row">
+    <div class="label col-3">\
+<%perl>
+    if ($LabelSpanClass) {
+        $m->out('<span class="'.$m->interp->apply_escapes($LabelSpanClass,"h").'">');
+    }
+    if ($RawLabel) {
+        $m->out($RawLabel);
+    } elsif ($Label) {
+        $m->out($m->interp->apply_escapes($Label,"h"));
+        $m->out(":");
+    }
+    if ($LabelSpanClass) {
+        $m->out('</span>');
+    }
+    if ($LabelTooltip) {
+        $m->out('<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="'. $m->interp->apply_escapes($LabelTooltip, "h").'"></span>');
+    }
+    $m->out('</div>');
+    $m->out('<div class="value col-9">');
+     if ($ValueSpanClass) {
+        $m->out('<span class="'.$m->interp->apply_escapes($ValueSpanClass,"h").'">');
+    }
+    if ($RawValue) {
+        $m->out($RawValue);
+    } else {
+        $m->out($m->interp->apply_escapes($Value,"h"));
+    }
+    if ($ValueSpanClass) {
+        $m->out('</span>');
+    }
+</%perl>
+    </div>
+</div>

-----------------------------------------------------------------------


hooks/post-receive
-- 
rt


More information about the rt-commit mailing list