playbook_ui 7.15.1 → 7.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 314da7ed0bc2cb7982bfaf10af7826efbb8822ad5ab5030433daf1bde9267398
-  data.tar.gz: 4ee326fa35a415359b0633ce7138526ce1c1346a0991ad079fb3307f350c432f
+  metadata.gz: ba7ca0e1a8dbb832e4553d4ca3c0c8c328ead105c57d691a0181ca169197b53a
+  data.tar.gz: a8c51729b2dfcfb7dc54d448abc6a305cb89fb367933b4a01893a8a455dd0fcb
 SHA512:
-  metadata.gz: 25a9b84de3294b16d92378e48d5192ba6b444623a5161f3e64d0a68b52637cbef1949334d6cc72852dd4f85e414e827b413857afea83a0d1092c6331d79928ee
-  data.tar.gz: c565fd03afa4505e9e0126a868d1acd67baa86fe293f9c84db4248ebd417b8da4c3ab8042092d6130ed9353343f79c87ef59066ce5a699807624dce1c129bd93
+  metadata.gz: e2ff1660024fbfc09a674433414caf39bc8b1c50220f51dc642c76d5de7d11f2b8056ae70ab924944c2828ee362f7b9986d1e5226672e9feda680606fc4ba7c2
+  data.tar.gz: 01b2ae4f1a7abed5972b1394f9a2b13ac31de8814050adef4f78ca81cab284c82fab7b966a88428b94c326f6319b72774443f00894c29e273773279d97388696

data/app/pb_kits/playbook/index.js

@@ -108,8 +108,8 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
 export datePickerHelper from './pb_date_picker/date_picker_helper.js'
-export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'
-export PbTooltip from './pb_tooltip'
 export PbTextarea from './pb_textarea'
+export PbTooltip from './pb_tooltip'
+export PbTypeahead from './pb_typeahead'

data/app/pb_kits/playbook/pb_avatar/_avatar.html.erb

@@ -3,10 +3,8 @@
     data: object.data.merge(initials: object.initials),
     class: object.classname,
     aria: object.aria) do %>
-  <%= content_tag(:div,
-      data: { initials: object.initials },
-      class: "avatar_wrapper") do %>
-       <%= pb_rails("image", props: { url: object.image_url }) if object.image_url.present? %>
-      <% end %>
-       <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
+  <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
+    <%= pb_rails("image", props: { url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+  <% end %>
+  <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
 <% end %>

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { map } from 'lodash'
 
@@ -39,6 +39,9 @@ const Avatar = (props: AvatarProps) => {
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials
 
+  const [error, setError] = useState(false)
+  const handleError = () => setError(true)
+
   return (
     <div
         {...ariaProps}
@@ -50,9 +53,10 @@ const Avatar = (props: AvatarProps) => {
           className="avatar_wrapper"
           data-initials={initials}
       >
-        <If condition={imageUrl}>
+        <If condition={imageUrl && !error}>
           <Image
               alt={name}
+              onError={handleError}
               url={imageUrl}
           />
         </If>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -25,6 +25,10 @@ module Playbook
       def online_status_props
         { status: status, classname: "size_#{size}" }
       end
+
+      def handle_img_error
+        "this.style.display = 'none'"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("avatar", props: { image_url: true, name: "Terry Johnson", size: "xs" }) %>
+<%= pb_rails("avatar", props: { image_url: 4, name: "Terry Johnson", size: "sm" }) %>
+<%= pb_rails("avatar", props: { image_url: "https://google.com", name: "Terry Johnson", size: "md" }) %>
+<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "lg" }) %>
+<%= pb_rails("avatar", props: { image_url: "https://randomuser.me/api/portraits/men/notapicture.jpg", name: "Terry Johnson", size: "xl" }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Avatar } from '../../'
+
+const AvatarNoImage = (props) => {
+  return (
+    <div>
+      <Avatar
+          imageUrl="Just some text here"
+          name="Terry Johnson"
+          size="xs"
+          {...props}
+      />
+      <Avatar
+          imageUrl={4}
+          name="Terry Johnson"
+          size="sm"
+          {...props}
+      />
+      <Avatar
+          imageUrl="https://google.com"
+          name="Terry Johnson"
+          size="md"
+          {...props}
+      />
+      <Avatar
+          imageUrl=""
+          name="Terry Johnson"
+          size="lg"
+          {...props}
+      />
+      <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/notapicture.jpg"
+          name="Terry Johnson"
+          size="xl"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AvatarNoImage

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.md

@@ -0,0 +1,2 @@
+
+A monagram is used as a fallback when an invalid or missing image url is provided.

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

@@ -2,8 +2,10 @@ examples:
   rails:
     - avatar_default: Default
     - avatar_monogram: Monogram
+    - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
+    - avatar_no_image: "Bad Image Link"
     - avatar_status: Status

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

@@ -1,3 +1,4 @@
 export { default as AvatarDefault } from './_avatar_default.jsx'
 export { default as AvatarMonogram } from './_avatar_monogram.jsx'
 export { default as AvatarStatus } from './_avatar_status.jsx'
+export { default as AvatarNoImage } from './_avatar_no_image.jsx'

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

@@ -49,6 +49,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <If condition={icon}>
         <Body
             color="light"
+            key={Math.random()}
             tag="span"
         >
           <Icon

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/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_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_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_flex/flex_item.rb

@@ -15,9 +15,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 +37,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_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_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/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",
+  }
+) %>