playbook_ui 9.7.0.pre.alpha.a11y.btn → 9.10.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d02c19ea477725a33c15757d8254c21348c16e9d8e5b82b85ec08ffb7e3ac4e
-  data.tar.gz: 75fd3538c8760afa2dcf2818bef4e91451ca0f985044223bdd118f33c740b568
+  metadata.gz: 7b36c79f834fafef501c48ece8fc72990708ab4323f3c172527d9a9a31bb9fa4
+  data.tar.gz: ddc237d11376abb37c4e0d8630fbf06f4f2510dd0bdadefebc364bdf4b4e735a
 SHA512:
-  metadata.gz: 70a500505fe763ab166a92613bb5d3fbf6c6c7b88d53e1727003346c8f5d0e312e629167c840ec17272a63a2cf7f0b15b7657b3b89cd0065c68eb0683a08368e
-  data.tar.gz: 4a1e51d54b520cb7c40f32df8fca6e2f20760b9eb09cf40092b66b50a90a14b6744e50bcaccf5cbc604708861128db5fee6e4efd777eeecfc4ed9f56ac5cb900
+  metadata.gz: 71667f6a96f25e9fee0bd7d741b38c09eeced8c397c1126fafc1b3525b984d6a717e6332d2690818df67c0eb7da370429bbc50481f17c820256121d9972f48ae
+  data.tar.gz: 953083fe2726a16fbbd33b7b550c1136230b6dec1043e0fd4f3c6ed47c52249c47b98a9da5e889cec15c05b11a42257f32cc1824d62e6109a8ad0009c1824f5e

data/app/pb_kits/playbook/pb_background/background.rb

@@ -12,7 +12,6 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "div"
 
-
       def classname
         generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
       end

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,14 +2,16 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
-  aria?: object,
+  aria?: {
+    label: string,
+  },
   children?: array<React.ReactChild>,
   className?: string | array<string>,
   data?: object,
@@ -53,9 +55,20 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
+const buttonAriaProps = (props: ButtonPropTypes) => {
+  const { aria } = props
+  if (typeof aria !== 'object') return {}
+  const { label } = aria
+
+  const ariaProps = {}
+
+  if (label !== null) ariaProps['aria-label'] = label
+
+  return ariaProps
+}
+
 const Button = (props: ButtonPropTypes) => {
   const {
-    aria = {},
     children,
     className,
     data = {},
@@ -71,7 +84,7 @@ const Button = (props: ButtonPropTypes) => {
     value,
   } = props
 
-  const ariaProps = buildAriaProps(aria)
+  const buttonAria = buttonAriaProps(props)
   const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
@@ -101,12 +114,11 @@ const Button = (props: ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-          {...ariaProps}
+          {...buttonAria}
           {...dataProps}
           className={css}
           href={link}
           id={id}
-          role="link"
           target={newWindow ? '_blank' : null}
       >
         <If condition={loading}>{loadingIcon}</If>
@@ -114,13 +126,12 @@ const Button = (props: ButtonPropTypes) => {
       </a>
       <Else />
       <button
-          {...ariaProps}
+          {...buttonAria}
           {...dataProps}
           className={css}
           disabled={disabled}
           id={id}
           onClick={onClick}
-          role="button"
           type={htmlType}
           value={value}
       >

data/app/pb_kits/playbook/pb_button/button.rb

@@ -21,12 +21,11 @@ module Playbook
 
       def options
         {
-          aria: aria,
-          class: classname,
+          id: id,
           data: data,
+          class: classname,
           disabled: disabled,
-          id: id,
-          role: "button",
+          aria: aria,
           type: type,
           value: value,
         }.compact
@@ -35,8 +34,7 @@ module Playbook
       def link_options
         options.merge(
           href: link,
-          role: "link",
-          target: new_window ? "_blank" : "_self",
+          target: new_window ? "_blank" : "_self"
         )
       end
 

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -1 +1 @@
-<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, tag: "a", link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

@@ -4,7 +4,7 @@ import { Button } from '../../'
 const ButtonAccessibility = (props) => (
   <div>
     <Button
-        aria={{ label: 'Go to Google' }}
+        aria={{ label: 'button' }}
         link="https://google.com"
         tag="a"
         text="Button with ARIA"

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", new_window: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", disabled: true, link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -4,14 +4,12 @@ import { Button } from '../../'
 const ButtonLink = (props) => (
   <div>
     <Button
-        aria={{ label: 'Link to Google' }}
         link="https://google.com"
         text="A Tag Button"
         {...props}
     />
     {' '}
     <Button
-        aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
         newWindow
         text="Open in New Window"
@@ -19,7 +17,6 @@ const ButtonLink = (props) => (
     />
     {' '}
     <Button
-        aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
         text="A Tag Button Disabled"

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>
+<%= pb_rails("button", props: { text: "Button Primary", loading: true }) %>
+<%= pb_rails("button", props: { text: "Button Primary", variant: "secondary", loading: true }) %>
+<%= pb_rails("button", props: { text: "Button Primary", variant: "link", loading: true }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -4,14 +4,12 @@ import { Button } from '../../'
 const ButtonLoading = (props) => (
   <div>
     <Button
-        aria={{ label: 'Loading' }}
         loading
         text="Button Primary"
         {...props}
     />
     {' '}
     <Button
-        aria={{ label: 'Loading' }}
         loading
         text="Button Secondary"
         variant="secondary"
@@ -19,7 +17,6 @@ const ButtonLoading = (props) => (
     />
     {' '}
     <Button
-        aria={{ label: 'Loading' }}
         loading
         text="A Tag Button Disabled"
         variant="link"

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -6,37 +6,36 @@ module Playbook
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       prop :style, type: Playbook::Props::Enum,
-                         values: %w[pie],
-                         default: "pie"
+                   values: %w[pie],
+                   default: "pie"
 
       prop :data_labels, type: Playbook::Props::Boolean, default: false
       prop :min_point_size, type: Playbook::Props::Numeric
       prop :max_point_size, type: Playbook::Props::Numeric
       prop :inner_size, type: Playbook::Props::Enum,
-                              values: %w[sm md lg none],
-                              default: "md"
+                        values: %w[sm md lg none],
+                        default: "md"
       prop :z_min, type: Playbook::Props::Numeric
       prop :start_angle, type: Playbook::Props::Numeric
       prop :header_format
-      prop :data_label_html, default: '<div>{point.name}</div>'
+      prop :data_label_html, default: "<div>{point.name}</div>"
       prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
                                       {point.name}: ' + '<b>{point.y}
                                     </b>'
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
-      prop :title, default: ''
+      prop :title, default: ""
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,
                     default: []
 
-
       def chart_type
         style == "variablepie" ? "variablepie" : "pie"
       end
 
       def chart_data_formatted
-        chart_data.map{ |hash| hash[:y] = hash.delete :value}
-        return chart_data
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
       end
 
       def inner_size_format
@@ -57,7 +56,7 @@ module Playbook
       end
 
       def rounded_border_color
-        rounded == true ? 'null' : nil
+        rounded == true ? "null" : nil
       end
 
       def chart_options

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbCircleIconButton
     class CircleIconButton < Playbook::KitBase
@@ -8,11 +10,11 @@ module Playbook
                      values: %w[primary secondary link],
                      default: "primary"
       prop :disabled, type: Playbook::Props::Boolean,
-                     default: false
+                      default: false
       prop :icon, required: true
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
-                     default: false
+                        default: false
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

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

@@ -5,13 +5,13 @@ module Playbook
     class DateStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date, required: true
       prop :align, type: Playbook::Props::Enum,
-                  values: %w[left center right],
-                  default: "left"
+                   values: %w[left center right],
+                   default: "left"
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md],
                   default: "sm"
       prop :reverse, type: Playbook::Props::Boolean,
-                  default: false
+                     default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
 
@@ -20,20 +20,20 @@ module Playbook
       end
 
       def title_size
-        size == "md" ? 3: 4
+        size == "md" ? 3 : 4
       end
 
       def day
         day = Playbook::PbKit::PbDateTime.new(date)
         content_tag(:time, datetime: day.to_iso) do
-          "#{day.to_day}"
+          day.to_day.to_s
         end
       end
 
       def month
         month = Playbook::PbKit::PbDateTime.new(date)
         content_tag(:time, datetime: month.to_iso) do
-          "#{month.to_month}"
+          month.to_month.to_s
         end
       end
 
@@ -42,9 +42,8 @@ module Playbook
         year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
         if current_year != year
           content_tag(:time, datetime: year) do
-            "#{year}"
+            year.to_s
           end
-        else
         end
       end
 
@@ -57,7 +56,6 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
-
     end
   end
 end

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

@@ -7,9 +7,9 @@ module Playbook
                   values: %w[lg sm],
                   default: "lg"
       prop :widths, type: Playbook::Props::NumberArray,
-                  default: [1]
+                    default: [1]
       prop :colors, type: Playbook::Props::Array,
-                  default: []
+                    default: []
 
       def classname
         generate_classname("pb_distribution_bar", size)

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -3,7 +3,7 @@
 module Playbook
   module PbFilter
     class Filter < Playbook::KitBase
-      prop :filters, type: Playbook::Props::HashArray, default: [{name: ''}]
+      prop :filters, type: Playbook::Props::HashArray, default: [{ name: "" }]
       prop :sort_menu, type: Playbook::Props::HashArray, default: [{}]
       prop :results, type: Playbook::Props::Numeric
       prop :template, type: Playbook::Props::Enum,

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

@@ -17,15 +17,17 @@ type FixedConfirmationToastProps = {
   closeable?: boolean,
   data?: string,
   id?: string,
-  status?: "success" | "error" | "neutral" | "tip",
+  multiLine?: boolean,
+  status?: 'success' | 'error' | 'neutral' | 'tip',
   text: string,
 }
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true)
-  const { className, closeable = false, status = 'neutral', text } = props
+  const { className, closeable = false, multiLine = false, status = 'neutral', text } = props
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
+    { '_multi_line': multiLine },
     globalProps(props),
     className
   )

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

@@ -47,6 +47,13 @@ $confirmation_toast_colors: (
       .pb_icon {
         color: $white;
       }
+
+      &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
+        color: $white;
+        margin: 0 $space_md 0 $space_md;
+        max-width: 100%;
+        white-space: break-spaces;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items.\nClick here to generate report",
+  multi_line: true,
+  text: "Scan to Assign Selected Items. Click here to generate report",
   status: "tip",
 }) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -5,8 +5,9 @@ const FixedConfirmationToastMultiLine = (props) => {
   return (
     <div>
       <FixedConfirmationToast
+          multiLine
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          text="Scan to Assign Selected Items. Click here to generate report"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md

@@ -1,2 +1,2 @@
 
-Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow.
+Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.

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

@@ -7,6 +7,8 @@ module Playbook
                     values: %w[success error neutral tip],
                     default: "neutral"
       prop :text, type: Playbook::Props::String
+      prop :multi_line, type: Playbook::Props::Boolean,
+                        default: false
       prop :closeable, type: Playbook::Props::Boolean,
                        default: false
 
@@ -18,6 +20,10 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
+      def multi_line_class
+        multi_line.present? ? "multi_line" : nil
+      end
+
       def icon_value
         case status
         when "success"
@@ -32,7 +38,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class
       end
     end
   end