playbook_ui 7.14.0.pre.alpha1 → 7.16.0.pre.alpha2

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 }],

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -9,6 +9,8 @@ const GaugeSizing = (props) => (
     >
       <FlexItem
           fixedSize="400px"
+          overflow="hidden"
+          shrink
           {...props}
       >
         <Gauge
@@ -19,6 +21,8 @@ const GaugeSizing = (props) => (
       </FlexItem>
       <FlexItem
           fixedSize="300px"
+          overflow="hidden"
+          shrink
           {...props}
       >
         <Gauge
@@ -29,6 +33,8 @@ const GaugeSizing = (props) => (
       </FlexItem>
       <FlexItem
           fixedSize="200px"
+          overflow="hidden"
+          shrink
           {...props}
       >
         <Gauge
@@ -37,7 +43,12 @@ const GaugeSizing = (props) => (
             {...props}
         />
       </FlexItem>
-      <FlexItem fixedSize="125px">
+      <FlexItem
+          fixedSize="125px"
+          overflow="hidden"
+          shrink
+          {...props}
+      >
         <Gauge
             chartData={[ { name: 'Point 4', value: 25 } ]}
             id="gauge-sizing1"

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md

@@ -1 +1,2 @@
-### Gauge resizes dynamically to fit whatever element it's placed within.
+### Gauge resizes dynamically to fit whatever element it's placed within.
+#### Note: set `overflow` to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

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

@@ -1,5 +1,5 @@
 examples:
-  
+
   rails:
   - gauge_default: Default
   - gauge_disable_animation: Disable Animation
@@ -9,16 +9,15 @@ examples:
   - gauge_min_max: Min Max Labels
   - gauge_sizing: Sizing
   - gauge_height: Height
-  
-  
+
+
   react:
   - gauge_default: Default
   - gauge_disable_animation: Disable Animation
-  - gauge_title: Title 
+  - gauge_title: Title
   - gauge_units: Units
   - gauge_full_circle: Full Circle
   - gauge_min_max: Min Max Labels
   - gauge_sizing: Sizing
   - gauge_height: Height
   - gauge_live_data: Live Data
-  

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbGauge
-    class Gauge
-      include Playbook::Props
-
-      partial "pb_gauge/gauge"
-
+    class Gauge < Playbook::KitBase
       prop :chart_data, type: Playbook::Props::Array,
                         default: [{ name: "Name", value: 0 }]
       prop :style, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_hashtag/{_hashtag.html.erb → hashtag.html.erb}

@@ -3,7 +3,6 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-
   <%= link_to object.url do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbHashtag
-    class Hashtag
-      include Playbook::Props
-
-      partial "pb_hashtag/hashtag"
-
+    class Hashtag < Playbook::KitBase
       prop :text
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home appointment],

data/app/pb_kits/playbook/pb_highlight/{_highlight.html.erb → highlight.html.erb}

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

data/app/pb_kits/playbook/pb_highlight/highlight.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbHighlight
-    class Highlight
-      include Playbook::Props
-
-      partial "pb_highlight/highlight"
-
+    class Highlight < Playbook::KitBase
       prop :text
 
       def classname

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= render file: object.emphasis_partial, locals: { object: object } %>
+<% end %>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbHomeAddressStreet
-    class HomeAddressStreet
-      include Playbook::Props
-
-      partial "pb_home_address_street/home_address_street"
-
+    class HomeAddressStreet < Playbook::KitBase
       prop :address
       prop :address_cont
       prop :city
@@ -26,11 +22,11 @@ module Playbook
       end
 
       def city_state_zip
-        "#{city.titleize}, #{state} #{zipcode}"
+        [city_state, zipcode].join(" ")
       end
 
       def city_state
-        "#{city.titleize}, #{state}"
+        [city.titleize, state].join(", ")
       end
 
       def zip
@@ -38,7 +34,7 @@ module Playbook
       end
 
       def address_house_style
-        "#{address&.titleize} #{separator} #{house_style}"
+        [address&.titleize, house_style].join(separator)
       end
 
       def address_house_style2
@@ -46,7 +42,11 @@ module Playbook
       end
 
       def separator
-        house_style ? "\u00b7" : ""
+        house_style ? " \u00b7 " : ""
+      end
+
+      def emphasis_partial
+        File.join(File.dirname(self.class.source_location), "_#{emphasis}_emphasis")
       end
 
     private

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbIcon
-    class Icon
-      include Playbook::Props
-
-      partial "pb_icon/icon"
-
+    class Icon < Playbook::KitBase
       prop :border, type: Playbook::Props::Boolean,
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,