playbook_ui 7.16.0.pre.alpha5 → 7.16.0

data/app/pb_kits/playbook/pb_section_separator/{section_separator.html.erb → _section_separator.html.erb}

@@ -8,6 +8,6 @@
     <% end %>
     <% if object.orientation === 'vertical' %>
         <%= pb_rails("flex", props: { orientation: "column"}) do %>
-        <% end %>
+        <% end %>    
     <%end%>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbSectionSeparator
-    class SectionSeparator < Playbook::KitBase
+    class SectionSeparator
+      include Playbook::Props
+
+      partial "pb_section_separator/section_separator"
+
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[card background],

data/app/pb_kits/playbook/pb_select/{select.html.erb → _select.html.erb}

@@ -8,8 +8,8 @@
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
-    <% if content.present? %>
-      <%= content %>
+    <% if object.children %>
+      <%= capture(&object.children) %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -66,10 +66,6 @@
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
       text-shadow: 0 0 0 $text_dk_default;
-      padding-right: $space_xl;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
       @media (hover:hover) {
         &:hover, &:active, &:focus {
           background-color: tint($focus_input_dark, 5%);

data/app/pb_kits/playbook/pb_select/select.rb

@@ -4,7 +4,13 @@ require "action_view"
 
 module Playbook
   module PbSelect
-    class Select < Playbook::KitBase
+    class Select
+      include ActionView::Helpers::FormTagHelper
+      include ActionView::Context
+      include Playbook::Props
+
+      partial "pb_select/select"
+
       prop :blank_selection
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error

data/app/pb_kits/playbook/pb_selectable_card/{selectable_card.html.erb → _selectable_card.html.erb}

@@ -25,18 +25,18 @@
           <% end %>
           <div class="separator"></div>
           <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
-            <% if content.nil? %>
+            <% if object.children.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>
-              <%= content %>
+              <%= capture(&object.children) %>
             <% end %>
           <% end %>
         <% end %>
       <% else %>
-        <% if content.nil? %>
+        <% if object.children.nil? %>
           <%= pb_rails("body", props: { text: object.text }) %>
         <% else %>
-          <%= content %>
+          <%= capture(&object.children) %>
         <% end %>
         <% if object.icon %>
           <div class="pb_selectable_card_circle">

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbSelectableCard
-    class SelectableCard < Playbook::KitBase
+    class SelectableCard
+      include Playbook::Props
+
+      partial "pb_selectable_card/selectable_card"
+
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :disabled, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbSelectableCardIcon
-    class SelectableCardIcon < Playbook::KitBase
+    class SelectableCardIcon
+      include Playbook::Props
+
+      partial "pb_selectable_card_icon/selectable_card_icon"
+
       # Icon and text props
       prop :icon, type: Playbook::Props::String
       prop :title_text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbSelectableIcon
-    class SelectableIcon < Playbook::KitBase
+    class SelectableIcon
+      include Playbook::Props
+
+      partial "pb_selectable_icon/selectable_icon"
+
       # Icon props
       prop :icon, type: Playbook::Props::String
       # Title text

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= pb_rails("list") do %>
+        <% object.items.each do |item| %>
+          <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
+        <% end %>
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_list/{selectable_list_item.html.erb → _selectable_list_item.html.erb}

@@ -3,15 +3,16 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
+    <% puts object.variant %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if content.present? %>
-      <%= content %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
     <% end %>
   <% else %>
     <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if content.present? %>
-      <%= content %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbSelectableList
-    class SelectableList < Playbook::KitBase
+    class SelectableList
+      include Playbook::Props
+
+      partial "pb_selectable_list/selectable_list"
+
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[radio checkbox],
                      default: "checkbox"

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -2,7 +2,9 @@
 
 module Playbook
   module PbSelectableList
-    class SelectableListItem < Playbook::KitBase
+    class SelectableListItem
+      include Playbook::Props
+
       prop :tabindex
 
       prop :checked, type: Playbook::Props::Boolean,
@@ -16,6 +18,8 @@ module Playbook
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 
+      partial "pb_selectable_list/selectable_list_item"
+
       def classname
         generate_classname("pb_selectable_list_item_kit")
       end

data/app/pb_kits/playbook/pb_source/source.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbSource
-    class Source < Playbook::KitBase
+    class Source
+      include Playbook::Props
+
+      partial "pb_source/source"
+
       prop :hide_icon, type: Playbook::Props::Boolean,
                        default: false
       prop :source, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_star_rating/{star_rating.html.erb → _star_rating.html.erb}

@@ -3,7 +3,9 @@
     data: object.data,
     class: object.classname) do %>
     <%# Rating value %>
-    <% if !object.hide_rating %>
+    <% if object.hide_rating %>
+      <%= content_tag(:div, "", class: "pb_star_rating_number") %>
+    <% else %>
       <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
     <% end %>
 
@@ -11,21 +13,20 @@
       <%# Gold stars generated by rating value %>
       <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
         <% object.star_count.times do %>
-          <%= pb_rails("icon", props: { icon: "star" }) %>
+          <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
         <% end %>
         <% unless object.star_full %>
-          <%= pb_rails("icon", props: { icon: "star-half" }) %>
+          <%= pb_rails("icon", props: { icon: "star-half", fixed_width: true }) %>
         <% end %>
       <% end %>
 
       <%# Grey background stars as base %>
       <%= content_tag(:div, class: "pb_star_rating_base") do %>
-        <%= pb_rails("icon", props: { icon: "star" }) %>
-        <%= pb_rails("icon", props: { icon: "star" }) %>
-        <%= pb_rails("icon", props: { icon: "star" }) %>
-        <%= pb_rails("icon", props: { icon: "star" }) %>
-        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
       <% end %>
-
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -52,17 +52,17 @@ const StarRating = ({
         className={css}
         id={id}
     >
-      <If condition={!hideRating}>
-        <div className="pb_star_rating_number">
+      <div className="pb_star_rating_number">
+        <If condition={!hideRating}>
           {rating}
-        </div>
-      </If>
+        </If>
+      </div>
 
       <div className="pb_star_rating_wrapper">
         <div className="pb_star_rating_highlight">
           {starCount().map((_, index) => (
             <Icon
-                fixedWidth={false}
+                fixedWidth
                 icon="star"
                 key={index}
             />
@@ -70,7 +70,7 @@ const StarRating = ({
 
           <If condition={hasHalfStar()}>
             <Icon
-                fixedWidth={false}
+                fixedWidth
                 icon="star-half"
             />
           </If>
@@ -78,23 +78,23 @@ const StarRating = ({
 
         <div className="pb_star_rating_base">
           <Icon
-              fixedWidth={false}
+              fixedWidth
               icon="star"
           />
           <Icon
-              fixedWidth={false}
+              fixedWidth
               icon="star"
           />
           <Icon
-              fixedWidth={false}
+              fixedWidth
               icon="star"
           />
           <Icon
-              fixedWidth={false}
+              fixedWidth
               icon="star"
           />
           <Icon
-              fixedWidth={false}
+              fixedWidth
               icon="star"
           />
         </div>

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 
 $pb_star_rating_number_width: 30px;
-$pb_star_rating_wrapper_width: 90px;
+$pb_star_rating_wrapper_width: 150px;
 $pb_star_rating_height: 26px;
 
 [class^=pb_star_rating_kit] {
@@ -35,18 +35,16 @@ $pb_star_rating_height: 26px;
     min-height: $pb_star_rating_height;
 
     .pb_star_rating_highlight {
-      display: flex;
       position: absolute;
-      top: 5px;
+      top: 0;
       left: 0;
       z-index: 5;
       color: $yellow;
       line-height: $pb_star_rating_height;
     }
     .pb_star_rating_base {
-      display: flex;
       position: absolute;
-      top: 5px;
+      top: 0;
       left: 0;
       z-index: 0;
       color: rgba($slate, $opacity-4);

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbStarRating
-    class StarRating < Playbook::KitBase
+    class StarRating
+      include Playbook::Props
+
+      partial "pb_star_rating/star_rating"
+
       prop :hide_rating, type: Playbook::Props::Boolean,
                          default: false
 

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbStatChange
-    class StatChange < Playbook::KitBase
+    class StatChange
+      include Playbook::Props
+
+      partial "pb_stat_change/stat_change"
+
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb

@@ -2,7 +2,12 @@
 
 module Playbook
   module PbStatValue
-    class StatValue < Playbook::KitBase
+    class StatValue
+      include Playbook::Props
+      include ActionView::Helpers::NumberHelper
+
+      partial "pb_stat_value/stat_value"
+
       prop :unit
       prop :value, type: Playbook::Props::Number
 

data/app/pb_kits/playbook/pb_table/{table.html.erb → _table.html.erb}

@@ -4,6 +4,6 @@
       class: object.classname,
       data: object.data,
       id: object.id) do %>
-    <%= content.presence %>
+    <%= capture(&object.children) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/{table_row.html.erb → _table_row.html.erb}

@@ -3,5 +3,5 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= content.presence %>
+  <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -1,5 +1,4 @@
 @import "../../tokens/border_radius";
-@import "../../tokens/positioning";
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xl-min) {
@@ -12,9 +11,9 @@
 
       thead {
         tr {
-          left: $offscreen;
+          left: -9999px;
           position: absolute;
-          top: $offscreen;
+          top: -9999px;
 
           th {
             display: block;

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -1,5 +1,4 @@
 @import "../../tokens/border_radius";
-@import "../../tokens/positioning";
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xs-max) {
@@ -12,9 +11,9 @@
 
       thead {
         tr {
-          left: $offscreen;
+          left: -9999px;
           position: absolute;
-          top: $offscreen;
+          top: -9999px;
 
           th {
             display: block;