playbook_ui 14.11.0 → 14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5339

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fca7d9efb772457fd7a528a192266ea41f9b2f7ddc121b45878ecdade957c486
-  data.tar.gz: aa3ca1949f81bec391834148da1893501e4f05540d5cd0d340253f95fc8ea78f
+  metadata.gz: 9dca52c6de9bc88a8b2ce69d53315b7f3159f80097baff34f327cf5598142a80
+  data.tar.gz: e9920a4f8ff2773183bd2ae356900e72d93b346e83e4fac415b419f3bafd2372
 SHA512:
-  metadata.gz: b3d25d4aeac1ba58b3f62bfd92d51849501814e6d1ea1810b1f9126b1239307c6871b64e23c5c27dd090e3899b094ad68e60ece1e277b19c22bd24f21624e91e
-  data.tar.gz: 76e6d0e1522b3978378994a0ff7dd7718d9ed62876a67b9ff4f6922141212e54ca471d8f0737e11e21cdf5088ec735584d8b783a85eb5d9f5128251bf663cf4b
+  metadata.gz: adaa58f5dbdebc31ed781c93def51a17dce06d8a6134b2d1fdfa72ed046a0beffd9942c9910ad70f39d36c878ba7f532afc6d883fd8578d0bf705589fbfd6654
+  data.tar.gz: '005478448c5c35da3d9eeb0436958a3e58fa4bedacf649526de6331aa495a49429103ed131898681e6f9ac6fc9bd99dbfd8553c692f0512f282334c70226015e'

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

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }.merge(object.table_props)) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

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

@@ -13,6 +13,8 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "none"
+      prop :table_props, type: Playbook::Props::HashProp,
+                         default: {}
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, separator: " ")

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md

@@ -0,0 +1 @@
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
+  - advanced_table_table_props: Table Props
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 [class^=pb_avatar_action_button_kit] {
 
   $icon_size: 0px;
@@ -15,7 +13,7 @@
       color: $value;
     }
   }
-
+  
   @mixin icon-base {
     &.dark{
         background-color: $bg_dark
@@ -33,22 +31,22 @@
   }
 
   @each $name, $size in $avatar-sizes {
-
+    
     &[class*=_#{$name}] {
-
+      
       $avatar_size: map-get($avatar-sizes, $name);
-      $icon_size: math.div($avatar_size, 2);
-      $border_size: math.div($icon_size, 10);
+      $icon_size: $avatar_size / 2;
+      $border_size: $icon_size / 10;
 
       position: relative;
       width: $avatar_size * 1.25;
       height: $avatar_size * 1.1;
       display: flex;
-
+    
       [class^=pb_tooltip_kit] {
         justify-self: center;
       }
-
+    
       &[class*=_bottom] .icon {
         @include icon-base;
         top: $icon_size * 1.27;
@@ -61,8 +59,8 @@
         left: $icon_size * 1.5;
       }
       &[class*=_left] [class^=pb_avatar_kit] {
-        padding-left: math.div($icon_size , 2);
+        padding-left: $icon_size / 2;
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -13,7 +11,7 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 math.div($space_xs, 2);
+  padding: 0 $space_xs/2;
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
@@ -36,7 +34,7 @@
     height: $pb_badge_height;
     min-height: $pb_badge_height;
     min-width: $pb_badge_height;
-    border-radius: math.div($pb_badge_height, 2);
+    border-radius: $pb_badge_height / 2;
   }
 
   &[class*=_notification] {

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
@@ -11,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 math.div($space_xs, 2);
+  padding: 0 $space_xs/2;
 
   svg {
    margin-right: 8px;

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "./button_mixins";
 @import "../tokens/colors";
 @import "../tokens/border_radius";
@@ -19,7 +17,7 @@ $pb_button_sizes: (
   @each $name, $size in $pb_button_sizes {
     &[class*=size_#{$name}] {
       font-size: $size;
-      padding: math.div($size, 2) $size * 2.42;
+      padding: $size / 2 $size * 2.42;
       @if $name == "sm" {
         min-height: 0;
       }

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,6 +1,5 @@
-<%= content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options,
-                **combined_html_options) do %>
+<%= pb_content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:label, aria: object.aria,
-                        id: object.id,
-                        data: object.data,
-                        class: object.classname,
-                        **combined_html_options
-                ) do %>
+<%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_button/button";
 @import "../pb_button/button_mixins";
 
@@ -18,7 +16,7 @@ $pb_button_styles: (
   flex-grow: 0;
   width: $pb_button_size;
   height: $pb_button_size;
-  border-radius: math.div($pb_button_size, 2);
+  border-radius: $pb_button_size / 2;
   line-height: $pb_button_size;
   flex-basis: $pb_button_size;
   min-width: $pb_button_size;
@@ -55,4 +53,4 @@ $pb_button_styles: (
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,9 +1,5 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname + object.error_class,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    class: object.classname + object.error_class) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../../pb_textarea/textarea_mixin";
 
 [class^=pb_date_picker_kit] {
@@ -43,7 +41,7 @@
   &.error {
     .date_picker_input_wrapper {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
 
       input,

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
@@ -8,8 +6,8 @@
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: math.div($space_xs, 4);
-    margin-top: math.div($space_xs, 3);
+    margin-left: $space_xs / 4;
+    margin-top: $space_xs / 3;
   }
 }
 @media (max-width: 499px) {
@@ -21,7 +19,7 @@
   }
 }
 // Firefox Header Adjustments
-@supports (-moz-appearance:none) {
+@supports (-moz-appearance:none) { 
   select.flatpickr-monthDropdown-months {
       width: 97px !important;
       margin-left: $space_xs + 3;

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 [class^=pb_date_range_inline_kit] {
   &[class*=_center]  {
     & > [class^=pb_caption],
@@ -23,14 +21,14 @@
     display: flex;
     align-items: center;
     [class*=pb_date_range_inline_arrow] {
-      margin-left: math.div($space_xs, 2);
-      margin-right: math.div($space_xs, 2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: math.div($space_xs, 2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: math.div($space_xs, 2);
+      margin-right: $space_xs/2;
     }
   }
 }

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 [class^=pb_date_time_stacked] {
 
   [class^=padding_month] {
@@ -21,7 +19,7 @@
 
 }
 .date-time-padding {
-  padding-right: math.div($space_xs, 2);
-  padding-left: math.div($space_xs, 2);
+  padding-right: $space_xs / 2;
+  padding-left: $space_xs / 2;
 }
 

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/typography";
@@ -124,7 +122,7 @@
 
     &.error {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
 
       [class*="dropdown_trigger_wrapper"] {
@@ -148,7 +146,7 @@
   &[class*="subtle"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
-
+        
         [class*="pb_dropdown_option"]:first-child {
           margin-top: $space_xs;
         }
@@ -163,7 +161,7 @@
           border-radius: $border_radius_md;
           border-bottom: none;
           position: relative;
-
+        
           &::after {
             content: "";
             position: absolute;
@@ -174,20 +172,20 @@
             background: $border_light;
           }
         }
-
+        
         [class*="pb_dropdown_option"]:last-child::after {
-          display: none;
+          display: none; 
         }
       }
     }
-
+  
     &[class*="separators_hidden"] {
       .dropdown_wrapper {
         .pb_dropdown_container {
           [class*="pb_dropdown_option"]:first-child {
             margin-top: $space_xs;
           }
-
+  
           [class*="pb_dropdown_option"]:last-child {
             margin-bottom: $space_xs;
           }
@@ -195,7 +193,7 @@
           [class*="pb_dropdown_option"] {
             padding: $space_xxs $space_xs;
             margin: $space_xxs $space_xs;
-
+     
             &::after {
               height: 0px;
             }

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,19 +1,14 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input 
-            data-default-value="<%= input_default_value %>" 
-            id="dropdown-selected-option" 
-            name="<%= object.name %>" 
-            style="display: none" 
-            <%= object.required ? "required" : ""%> 
+        <input
+            data-default-value="<%= input_default_value %>"
+            id="dropdown-selected-option"
+            name="<%= object.name %>"
+            style="display: none"
+            <%= object.required ? "required" : ""%>
         />
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,20 +1,15 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %> 
+            <% if content.present? %>
                 <%= content.presence %>
-            <% else %> 
+            <% else %>
                 <%= pb_rails("list/item", props: {
-                    display: "flex", 
-                    justify_content: "center", 
-                    padding:"xs", 
-                    }) do %> 
+                    display: "flex",
+                    justify_content: "center",
+                    padding:"xs",
+                    }) do %>
                         <%= pb_rails("body", props: {text: "No option"}) %>
                 <% end %>
             <% end %>
-    <% end %>        
-<% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,15 +1,10 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.option[:id],
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list/item", props: {
-        display: "flex", 
-        justify_content: "center", 
-        padding:"none", 
+        display: "flex",
+        justify_content: "center",
+        padding:"none",
         cursor: "pointer"
-        }) do %> 
+        }) do %>
             <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
@@ -18,4 +13,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,21 +1,16 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if content.present? %>
         <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
     <%= pb_rails("flex", props: {
-        align: "center", 
-        border_radius:"lg", 
-        classname: object.trigger_wrapper_classes, 
-        cursor: "pointer", 
-        justify: "between", 
-        padding_x:"sm", 
+        align: "center",
+        border_radius:"lg",
+        classname: object.trigger_wrapper_classes,
+        cursor: "pointer",
+        justify: "between",
+        padding_x:"sm",
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
@@ -23,7 +18,7 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
+                        <div id="dropdown_trigger_custom_display" style="display: none;">
                             <%= object.custom_display %>
                         </div>
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
@@ -40,4 +35,3 @@
     <% end %>
     <% end %>
 <% end %>
-      

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -16,9 +14,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 math.div($space-md, 2);
+  padding: 0 $space-md/2;
   height: $pb_form_pill_height;
-  border-radius: math.div($pb_form_pill_height, 2);
+  border-radius: $pb_form_pill_height/2;
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
@@ -144,7 +142,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag,
+    + .pb_form_pill_text, + .pb_form_pill_tag, 
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
     + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
@@ -173,7 +171,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag,
+      + .pb_form_pill_text, + .pb_form_pill_tag, 
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
       + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/typography";
@@ -46,7 +44,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: math.div($size, 2);
+      border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
       font-size: if($name == "xxs", $size - 6px, $size * 0.38);

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -1,9 +1,7 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: math.div($space-xs, 1.5);
+    margin-bottom: $space-xs/1.5;
   }
-}
+}

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 
 @mixin pb_message {
@@ -19,7 +17,7 @@
     }
 
     .message_text {
-      margin: 0 0 math.div($space-xs, 2);
+      margin: 0 0 $space-xs/2;
     }
 
     .message_title {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../utilities/colors";
 @import "../tokens/opacity";
@@ -20,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: math.div($pb_multiple_users_size, 2) + 2;
+    border-radius: $pb_multiple_users_size / 2 + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/screen_sizes";
@@ -23,14 +21,14 @@
   }
 
   .passphrase-label {
-    margin-right: math.div($space_xs, 2);
+    margin-right: $space_xs / 2;
   }
 
   .passphrase-text-input-wrapper {
     position: relative;
 
     .pb_text_input_kit_label {
-      margin-bottom: math.div($space_xs, 2);
+      margin-bottom: $space_xs / 2;
     }
 
     .passphrase-text-input input {
@@ -59,7 +57,7 @@
   }
 
   .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
-    margin-bottom: math.div($space_xs, 2);
+    margin-bottom: $space_xs/2;
 
     &.progress-empty-input {
       visibility: hidden;