playbook_ui 14.19.0.pre.alpha.PLAY2033atactionbarrails7751 → 14.19.0.pre.alpha.PLAY2033atactionbarrails7773

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 17e10404283155ad2d2767e2acdf52c0bfae50af100e565e31adf7f403b3ac9a
-  data.tar.gz: fb8e75bd6a39e92574e9755db531c9bc09fa1c79d3a33537458535c57613b329
+  metadata.gz: f209ea18360af263680c28b3a73efdd51bf2bff536bf5dbfd7cf57b841fbfc1b
+  data.tar.gz: 926ffe8be1ae23cc857f6f57799bbc7f51e9ea8d124cee0cb653782ea1231d99
 SHA512:
-  metadata.gz: e1779f126d2b890116939dcb70297381a7a470f1c2fdc6e5efbc628d196ac4316c25d7ea1da587fe6b70f12ddb5d075b026622f812bf96e98079a49356d3d6be
-  data.tar.gz: bb1ef7cb05876677bc259b0efb1801415d2c0d288550142e1e59af0a81a1b12bc5e49e2b0646e891a4b2224221780a37b288a8fbc34a90d2117648b893320dec
+  metadata.gz: 488377e720d5631e3e50a8f285f3a0dda8ac57f7b238bfb6c5e587317ee54418757df986a45d7790de5e8be2a8f52c6ae7e6fc5a715e15f4ac3119731d2fe6f2
+  data.tar.gz: 99032673be39b4964a353e766ddc3605666933d1b7893dcf77595a89d01a3333a693b2c461dbdca3ff528a14c29968262fd72b96afae6a5a6b7941730106e5ad

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -11,7 +11,7 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
       <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -15,6 +15,8 @@ module Playbook
                         default: "scroll"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
+      prop :show_actions_bar, type: Playbook::Props::Boolean,
+                              default: true
 
       def classname
         additional_classes = []
@@ -27,6 +29,7 @@ module Playbook
       def th_classname(is_first_column: false)
         additional_classes = []
         additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
+        additional_classes << "header-cells-with-actions" if selectable_rows && show_actions_bar
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -20,9 +20,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
-  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
+  .pb_form_pill_text, .pb_form_pill_tag {
     font-size: $font_small !important;
   }
+  .pb_form_pill_close {
+    font-size: 17px;
+  }
 
   &[class*=wrapped] {
     height: max-content;
@@ -96,7 +99,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         display: flex;
         align-items: center;
         height: 17px;
-        border-radius: calc(50%);
+        width: 17px;
+        justify-content: center;
+        border-radius: 50%;
         cursor: pointer;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
@@ -146,8 +151,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     outline-offset: -1px;
   }
   .pb_form_pill_icon {
-    height: 12px !important;
-    width: 12px !important;
+    height: 0.875em;
     padding-right: $space_xs;
     + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
@@ -158,7 +162,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   &.small {
     height: 17px;
     padding: 0 $space-xs;
-    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
+    .pb_form_pill_text, .pb_form_pill_tag {
       font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
@@ -166,17 +170,20 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
       padding: 0 $space_xxs;
     }
     .pb_form_pill_close {
-      height: 10px;
-      border-radius: calc(50%);
+      height: 14px;
+      width: 14px;
+      font-size: 15px;
+      border-radius: 50%;
     }
     [class^=pb_avatar_kit] .avatar_wrapper {
-      flex-basis: 16px;
-      height: 16px;
-      margin-top: 2px;
-      width: 16px;
-      &::before { line-height: 16.5px; }
+      flex-basis: 14px;
+      height: 14px;
+      margin-top: 3px;
+      width: 14px;
+      &::before { line-height: 15px; }
     }
     .pb_form_pill_icon {
+      height: 0.75em;
       padding-right: $space_xxs;
       + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -81,6 +81,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
 
   const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
 
+  const uppercaseState = state?.toUpperCase() ?? ''
+
+  const fields = [address, addressCont, city, homeId, homeUrl, houseStyle, state, territory, zipcode]
+  const hasAllEmptyProps = fields.every(field => field === undefined || field === null || field === '')
+
   return (
     <div
         className={classes(className, dark)}
@@ -88,7 +93,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
         {...dataProps}
         {...htmlProps}
     >
-      {emphasis == 'street' &&
+      {hasAllEmptyProps && '—'}
+      {emphasis == 'street' && !hasAllEmptyProps &&
         <div>
           <Title
               className="pb_home_address_street_address"
@@ -105,11 +111,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
         </div>
       }
-      {emphasis == 'city' &&
+      {emphasis == 'city' && !hasAllEmptyProps &&
         <div>
           <Body color="light">
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -122,18 +128,18 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state.toUpperCase()}`}
+              {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}`}
             </Title>
             <Body
                 color="light"
                 tag="span"
             >
-              {` ${zipcode}`}
+              {` ${zipcode ?? ''}`}
             </Body>
           </div>
         </div>
       }
-      {emphasis == 'none' &&
+      {emphasis == 'none' && !hasAllEmptyProps &&
         <div>
           <Body dark={dark}>
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -144,7 +150,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
           </div>
         </div>

data/app/pb_kits/playbook/pb_person/_person.tsx

@@ -41,6 +41,16 @@ const Person = (props: PersonProps): React.ReactElement => {
     className
   )
 
+  const hasAllEmptyProps = [firstName, lastName].every(field => field === undefined || field === null || field === '')
+
+  if (hasAllEmptyProps) {
+    return (
+      <>
+        —
+      </>
+    )
+  }
+
   return (
     <div
         {...ariaProps}
@@ -53,13 +63,13 @@ const Person = (props: PersonProps): React.ReactElement => {
           className="pb_person_first"
           tag="span"
       >
-        {firstName}
+        {firstName ?? ''}
       </Body>
       {lastName && 
         <Title
             className="pb_person_first"
             size={4}
-            text={` ${lastName}`}
+            text={lastName ? ` ${lastName}` : ''}
         />
       }
     </div>