playbook_ui 7.15.0 → 7.16.0.pre.alpha4

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <div class="pb_date_range_inline_wrapper">
+    <% if object.icon == true %>
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
+    <% end %>
+
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.start_date_display }) %>
+
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, size: object.size, classname: "pb_date_range_inline_arrow"}) }) %>
+
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.end_date_display }) %>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb

@@ -2,13 +2,7 @@
 
 module Playbook
   module PbDateRangeInline
-    class DateRangeInline
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_date_range_inline/date_range_inline"
-
+    class DateRangeInline < Playbook::KitBase
       prop :end_date, type: Playbook::Props::Date, required: true
       prop :start_date, type: Playbook::Props::Date, required: true
       prop :icon, required: false

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateRangeStacked
-    class DateRangeStacked
-      include Playbook::Props
-
-      partial "pb_date_range_stacked/date_range_stacked"
-
+    class DateRangeStacked < Playbook::KitBase
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :end_date, type: Playbook::Props::Date, required: true
       prop :start_date, type: Playbook::Props::Date, required: true

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -2,13 +2,7 @@
 
 module Playbook
   module PbDateStacked
-    class DateStacked
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_date_stacked/date_stacked"
-
+    class DateStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date, required: true
       prop :align, type: Playbook::Props::Enum,
                   values: %w[left center right],

data/app/pb_kits/playbook/pb_date_time/_date_time.jsx

@@ -53,13 +53,13 @@ const DateTime = (props: DateTimeProps) => {
           vertical="baseline"
       >
         <FormattedDate
-            datetime={datetime}
             showDayOfWeek={showDayOfWeek}
             size={size}
             timeZone={timeZone}
+            value={datetime}
         />
         <Time
-            date={new Date()}
+            date={datetime}
             marginLeft="sm"
             showIcon={showIcon}
             size={size}

data/app/pb_kits/playbook/pb_date_time/{_date_time.html.erb → date_time.html.erb}

@@ -4,9 +4,9 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails("flex", props: { 
-      orientation: "row", 
-      horizontal: object.align, 
+    <%= pb_rails("flex", props: {
+      orientation: "row",
+      horizontal: object.align,
       vertical: "baseline" }) do %>
 
       <%= pb_rails("date", props: {

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateTime
-    class DateTime
-      include Playbook::Props
-
-      partial "pb_date_time/date_time"
-
+    class DateTime < Playbook::KitBase
       prop :date, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :align, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx

@@ -4,7 +4,7 @@ import DateTime from '../_date_time.jsx'
 const DateTimeDefault = (props) => (
   <div>
     <DateTime
-        datetime={new Date()}
+        datetime={new Date('2020-12-31 14:24:09')}
         showDayOfWeek
         showIcon
         {...props}
@@ -29,7 +29,7 @@ const DateTimeDefault = (props) => (
     <br />
 
     <DateTime
-        datetime={new Date()}
+        datetime={new Date('2020-12-31 14:24:09 -0500')}
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.html.erb → date_time_stacked.html.erb}

@@ -2,7 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
     <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
       <%= pb_rails("flex/flex_item") do %>
         <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
@@ -11,5 +10,4 @@
         <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", date: object.date, tag: "caption" }) %>
       <% end %>
     <% end %>
-
 <% end %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateTimeStacked
-    class DateTimeStacked
-      include Playbook::Props
-
-      partial "pb_date_time_stacked/date_time_stacked"
-
+    class DateTimeStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :dark, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateYearStacked
-    class DateYearStacked
-      include Playbook::Props
-
-      partial "pb_date_year_stacked/date_year_stacked"
-
+    class DateYearStacked < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -1,7 +1,7 @@
 @import "../tokens/colors";
 
 [class^=pb_distribution_bar] {
-  $bar_colors: map-values($data_colors);
+  $bar_colors: map-merge($data_colors, $status_colors);
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
@@ -10,8 +10,8 @@
   .pb_distribution_width {
     height: 100%;
     display: inline-block;
-    @each $name, $color in $data_colors {
-      &:nth-child(#{length($data_colors)}n+#{index(($data_colors), ($name $color))}) {
+    @each $name, $color in $bar_colors {
+      &:nth-child(#{length($bar_colors)}n+#{index(($bar_colors), ($name $color))}) {
         background-color: $color;
       }
       &.color_#{$name} {

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDistributionBar
-    class DistributionBar
-      include Playbook::Props
-
-      partial "pb_distribution_bar/distribution_bar"
-
+    class DistributionBar < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm],
                   default: "lg"

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("distribution_bar", props: {
   widths: [4,5,3],
-  colors: ["data_7", "data_1", "data_6"]
+  colors: ["data_7", "data_1", "neutral"]
 }) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx

@@ -6,7 +6,7 @@ const DistributionBarCustomColors = (props) => {
     <React.Fragment>
       <div>
         <DistributionBar
-            colors={['data_7', 'data_1', 'data_6']}
+            colors={['data_7', 'data_1', 'neutral']}
             widths={[4, 5, 3]}
             {...props}
         />

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -31,11 +31,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   )
   const icon = iconMap[status]
 
+  const handleClick = () => {
+    toggleToast(!closeable)
+  }
+
   return (
     <If condition={showToast}>
       <div
           className={css}
-          onClick={closeable && (() => toggleToast(false))}
+          onClick={handleClick}
       >
         <If condition={icon}>
           <Icon

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFixedConfirmationToast
-    class FixedConfirmationToast
-      include Playbook::Props
-
-      partial "pb_fixed_confirmation_toast/fixed_confirmation_toast"
-
+    class FixedConfirmationToast < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
                     values: %w[success error neutral tip],
                     default: "neutral"

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -10,19 +10,21 @@ type FlexItemPropTypes = {
   shrink: boolean,
   flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
   className: string,
+  overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, shrink, flex } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
   const growClass = grow === true ? 'grow' : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
+  const overflowClass = overflow ? `overflow_${overflow}` : ''
   const shrinkClass = shrink === true ? 'shrink' : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -12,6 +12,15 @@
     flex-shrink: 1;
   }
 
+
+  $overflow_values: auto, hidden, inherit, initial, scroll, visible;
+
+  @each $value in $overflow_values {
+    &.overflow_#{$value} {
+      overflow: #{$value}
+    }
+  }
+
   @for $i from 0 through 12 {
     &[class*=_flex_#{$i}]{
       flex: $i;

data/app/pb_kits/playbook/{pb_layout/_layout.html.erb → pb_flex/flex.html.erb}

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

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFlex
-    class Flex
-      include Playbook::Props
-
-      partial "pb_flex/flex"
-
+    class Flex < Playbook::KitBase
       prop :horizontal, type: Playbook::Props::Enum,
                         values: %w[left center right stretch none],
                         default: "left",

data/app/pb_kits/playbook/pb_flex/{_flex_item.html.erb → flex_item.html.erb}

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

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFlex
-    class FlexItem
-      include Playbook::Props
-
-      partial "pb_flex/flex_item"
-
+    class FlexItem < Playbook::KitBase
       prop :fixed_size, default: nil
       prop :grow, type: Playbook::Props::Boolean,
                   default: false
@@ -15,9 +11,12 @@ module Playbook
       prop :flex, type: Playbook::Props::Enum,
                   values: %w[0 1 2 3 4 5 6 7 8 9 10 11 12 none],
                   default: "none"
+      prop :overflow, type: Playbook::Props::Enum,
+                      values: %w[auto hidden inherit initial scroll visible] + [nil],
+                      default: nil
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class)
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class
       end
 
       def style_value
@@ -34,6 +33,10 @@ module Playbook
         grow ? "grow" : nil
       end
 
+      def overflow_class
+        overflow ? " overflow_#{overflow}" : ""
+      end
+
       def shrink_class
         shrink ? "shrink" : nil
       end

data/app/pb_kits/playbook/pb_form_group/{_form_group.html.erb → form_group.html.erb}

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

data/app/pb_kits/playbook/pb_form_group/form_group.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFormGroup
-    class FormGroup
-      include Playbook::Props
-
-      partial "pb_form_group/form_group"
-
+    class FormGroup < Playbook::KitBase
       def classname
         generate_classname("pb_form_group_kit")
       end

data/app/pb_kits/playbook/pb_form_pill/{_form_pill.html.erb → form_pill.html.erb}

@@ -2,7 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
     <% if object.name.present? %>
       <%= pb_rails("avatar", props: {
         name: object.name,
@@ -10,7 +9,6 @@
         size: "xs"
       }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
-
     <% elsif object.text.present? %>
       <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
     <% end %>
@@ -18,5 +16,4 @@
     <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
       <%= pb_rails("icon", props: { icon: 'times', fixed_width: true }) %>
     <% end %>
-
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFormPill
-    class FormPill
-      include Playbook::Props
-
-      partial "pb_form_pill/form_pill"
-
+    class FormPill < Playbook::KitBase
       prop :avatar_url
       prop :name
       prop :text

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb

@@ -1,23 +1,23 @@
 <%= pb_rails("flex", props: {wrap: true}) do %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing4",
         chart_data: [{ name: "Point 1", value: 100 }],
       }) %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing3",
         chart_data: [{ name: "Point 2", value: 75 }],
       }) %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing2",
         chart_data: [{ name: "Point 3", value: 50 }],
       }) %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing1",
         chart_data: [{ name: "Point 4", value: 25 }],