playbook_ui 7.13.0.pre.alpha1 → 7.16.0

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

@@ -10,9 +10,17 @@ module Playbook
       prop :fixed_size, default: nil
       prop :grow, type: Playbook::Props::Boolean,
                   default: false
+      prop :shrink, type: Playbook::Props::Boolean,
+                    default: false
+      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)
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class
       end
 
       def style_value
@@ -28,6 +36,22 @@ module Playbook
       def grow_class
         grow ? "grow" : nil
       end
+
+      def overflow_class
+        overflow ? " overflow_#{overflow}" : ""
+      end
+
+      def shrink_class
+        shrink ? "shrink" : nil
+      end
+
+      def flex_class
+        if flex == "none"
+          nil
+        else
+          "flex_#{flex}"
+        end
+      end
     end
   end
 end

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

@@ -14,9 +14,14 @@ type FormPillProps = {
   onClick?: EventHandler,
   avatar?: boolean,
   avatarUrl?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
 }
 const FormPill = (props: FormPillProps) => {
-  const { className, text, name, onClick = () => {}, avatarUrl } = props
+  const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
@@ -46,6 +51,7 @@ const FormPill = (props: FormPillProps) => {
       <div
           className="pb_form_pill_close"
           onClick={onClick}
+          {...closeProps}
       >
         <Icon
             fixedWidth

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

@@ -18,6 +18,8 @@ $form_pill_colors: (
   padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
   border-radius: $pb_form_pill_height/2;
+  margin-bottom: 2px;
+  margin-top: 2px;
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {

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_icon/docs/example.yml

@@ -7,7 +7,7 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
-  - icon_default_dark: Icon Default Dark
+
   react:
   - icon_default: Icon Default
   - icon_rotate: Icon Rotate
@@ -16,4 +16,3 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
-  - icon_default_dark: Icon Default Dark

data/app/pb_kits/playbook/pb_icon/docs/index.js

@@ -5,4 +5,3 @@ export { default as IconAnimate } from './_icon_animate.jsx'
 export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
-export { default as IconDefaultDark } from './_icon_default_dark.jsx'

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

@@ -4,15 +4,8 @@ examples:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
-  - icon_circle_dark: Dark
-  - icon_circle_sizes_dark: Dark Size
-  - icon_circle_color_dark: Dark Color
-  
 
   react:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
-  - icon_circle_dark: Dark
-  - icon_circle_sizes_dark: Dark Size
-  - icon_circle_color_dark: Dark Color

data/app/pb_kits/playbook/pb_icon_circle/docs/index.js

@@ -1,6 +1,3 @@
 export { default as IconCircleColor } from './_icon_circle_color.jsx'
 export { default as IconCircleDefault } from './_icon_circle_default.jsx'
 export { default as IconCircleSizes } from './_icon_circle_sizes.jsx'
-export { default as IconCircleDark } from './_icon_circle_dark.jsx'
-export { default as IconCircleColorDark } from './_icon_circle_color_dark.jsx'
-export { default as IconCircleSizesDark } from './_icon_circle_sizes_dark.jsx'

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

@@ -3,12 +3,7 @@ examples:
   rails:
   - icon_value_default: Default
   - icon_value_align: Align
-  - icon_value_dark: Dark
-  - icon_value_align_dark: Align Dark
-
 
   react:
   - icon_value_default: Default
   - icon_value_align: Align
-  - icon_value_dark: Dark
-  - icon_value_align_dark: Align Dark

data/app/pb_kits/playbook/pb_icon_value/docs/index.js

@@ -1,4 +1,2 @@
 export { default as IconValueDefault } from './_icon_value_default.jsx'
 export { default as IconValueAlign } from './_icon_value_align.jsx'
-export { default as IconValueDark } from './_icon_value_dark.jsx'
-export { default as IconValueAlignDark } from './_icon_value_align_dark.jsx'

data/app/pb_kits/playbook/pb_image/_image.html.erb

@@ -4,5 +4,7 @@
     class: object.classname,
     aria: object.aria,
     src: object.url,
-    alt: object.alt)
+    alt: object.alt,
+    onerror: object.on_error,
+    )
 %>

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -11,6 +11,7 @@ type ImageProps = {
   className?: string,
   data?: object,
   id?: string,
+  onError?: () => {},
   size: "xs" | "sm" | "md" | "lg" | "xl",
   rounded?: boolean,
   url: string,
@@ -23,6 +24,7 @@ const Image = (props: ImageProps) => {
     className,
     data = {},
     id,
+    onError = null,
     rounded = false,
     size = '',
     url = '',
@@ -46,7 +48,8 @@ const Image = (props: ImageProps) => {
           className={classes}
           data-src={url}
           id={id}
-          rounded={rounded}
+          onError={onError}
+          rounded={+rounded}
           src={url}
       />
     </div>

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -11,6 +11,7 @@ $image-sizes: (
 
 [class^=pb_image_kit] {
   position: relative;
+  object-fit: cover;
 
   @each $name, $size in $image-sizes {
     &[class*=_#{$name}] {

data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb

@@ -0,0 +1,75 @@
+<style>
+  .image-error:before {
+    content: "Sorry, the image below seems to be broken.";
+    display: block;
+    margin-bottom: 10px;
+  }
+  .image-error {
+    margin: 5px;
+    padding: 5px;
+    outline: 1px solid red;
+  }
+</style>
+
+<%= pb_rails("body",
+  props: {
+    text: "Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time."
+  }
+) %>
+
+<br>
+<br>
+
+<%= pb_rails("body",
+  props: {
+    text: "Alter the display when the image fails to load:"
+  }
+) %>
+
+<%= pb_rails("image",
+  props: {
+    alt: "This is the alt text!",
+    on_error: "this.style.color = 'red'",
+    rounded: true,
+    size: "xs",
+    url: "not_a_picture"
+  }
+) %>
+
+<br>
+<br>
+
+<%= pb_rails("body",
+  props: {
+    text: "Give it an error class:"
+  }
+) %>
+
+<%= pb_rails("image",
+  props: {
+    alt: "This is the alt text!",
+    on_error: "this.classList.add('image-error')",
+    rounded: true,
+    size: "xs",
+    url: "not_a_picture"
+  }
+) %>
+
+<br>
+<br>
+
+<%= pb_rails("body",
+  props: {
+   text: "Or hide it completely:"
+  }
+) %>
+
+<%= pb_rails("image",
+  props: {
+    alt: "This is the alt text!",
+    on_error: "this.style.display = 'none'",
+    rounded: true,
+    size: "xs",
+    url: "not_a_picture",
+  }
+) %>

data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Body, Image } from '../../'
+
+const CustomErrorImage = (props) => {
+  return (
+    <>
+      <Body text="Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time." />
+      <br />
+      <Body text="Alter the display when the image fails to load:" />
+      <Image
+          alt="This is the alt text!"
+          onError={(e) => e.target.style.color = 'red'}
+          rounded
+          size="xs"
+          url="not_a_valid_url"
+          {...props}
+      />
+      <br />
+      <br />
+      <Body text="Give it an error class:" />
+      <Image
+          alt="This is the alt text!"
+          onError={(e) => e.target.classList.add('image-error')}
+          rounded
+          size="sm"
+          url="not_a_valid_url"
+          {...props}
+      />
+      <br />
+      <br />
+      <Body text="Set an inline style" />
+      <Image
+          alt="This is the alt text!"
+          onError={(e) => e.target.style.outline = '1px solid red'}
+          rounded
+          size="md"
+          url="not_a_valid_url"
+          {...props}
+      />
+      <br />
+      <br />
+      <Body text="Hide it completely!" />
+      <Image
+          alt="This is the alt text!"
+          onError={(e) => e.target.style.display = 'none'}
+          rounded
+          size="md"
+          url="not_a_valid_url"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CustomErrorImage

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

@@ -2,6 +2,8 @@ examples:
   rails:
   - default_image: Default
   - rounded_image: Rounded
+  - custom_error_image: Error Handling
   react:
   - default_image: Default
   - rounded_image: Rounded
+  - custom_error_image: Error Handling

data/app/pb_kits/playbook/pb_image/docs/index.js

@@ -1,2 +1,3 @@
 export { default as DefaultImage } from './_default_image.jsx'
 export { default as RoundedImage } from './_rounded_image.jsx'
+export { default as CustomErrorImage } from './_custom_error_image.jsx'

data/app/pb_kits/playbook/pb_image/image.rb

@@ -8,6 +8,8 @@ module Playbook
       partial "pb_image/image"
 
       prop :alt
+      prop :on_error, type: Playbook::Props::String,
+                      default: nil
       prop :rounded, type: Playbook::Props::Boolean,
                      default: false
       prop :size, type: Playbook::Props::Enum,