playbook_ui 9.7.0.pre.alpha.a11y.btn → 9.7.0.pre.alphawidth1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d02c19ea477725a33c15757d8254c21348c16e9d8e5b82b85ec08ffb7e3ac4e
-  data.tar.gz: 75fd3538c8760afa2dcf2818bef4e91451ca0f985044223bdd118f33c740b568
+  metadata.gz: 3a4e16697962adfdbfb453aae9013b077e229bb1043d6584b6c872f7a876d57d
+  data.tar.gz: 565485a903d9e946589f765a24e2518e5380fa05818917780560f42eb02a08f3
 SHA512:
-  metadata.gz: 70a500505fe763ab166a92613bb5d3fbf6c6c7b88d53e1727003346c8f5d0e312e629167c840ec17272a63a2cf7f0b15b7657b3b89cd0065c68eb0683a08368e
-  data.tar.gz: 4a1e51d54b520cb7c40f32df8fca6e2f20760b9eb09cf40092b66b50a90a14b6744e50bcaccf5cbc604708861128db5fee6e4efd777eeecfc4ed9f56ac5cb900
+  metadata.gz: 3aae8d85a3f348aef5f23c41f22a4d5917bd729e007a2766a33cdc79b54ac60504063f31f1e2d021f3bc6ce16486e32832a0eca0c681560191a9d4ac1049b213
+  data.tar.gz: 95d568d4915960a1370c2200456c8f6d2a9f7d2963a86477e92e8158fa0f75a00ed305b4be7a04b5e007645f8fa177bf23773088d249e5eb8e40b1e1d399a769

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_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

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx

@@ -10,6 +10,7 @@ type FormGroupProps = {
   children?: Node,
   className?: string,
   data?: object,
+  fullWidth?: boolean,
   id?: string,
 }
 
@@ -18,13 +19,14 @@ const FormGroup = (props: FormGroupProps) => {
     aria = {},
     className,
     data = {},
+    fullWidth = false,
     id,
     children,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
+  const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
 
   return (
     <div

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -4,6 +4,14 @@
   align-items: flex-end;
   justify-content: flex-start;
 
+  &[class*=_full] {
+    display: flex;
+    justify-content: space-between;
+    & > div {
+      width: 100%;
+    }
+  }
+
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb

@@ -0,0 +1,13 @@
+<div>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+  <% end %>
+  <br/>
+  <br/>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button, FormGroup, TextInput } from '../../'
+
+const FormGroupFullWidth = (props) => (
+  <div>
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            label="First Name"
+            placeholder="Enter First Name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Intial"
+            placeholder="Enter Middle Initial"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter Last Name"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  </div>
+)
+
+export default FormGroupFullWidth

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md

@@ -0,0 +1 @@
+Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - form_group_default: Default
   - form_group_button: Button
+  - form_group_full_width: Full Width
   - form_group_date_picker: Date Picker
   # - form_group_typeahead: Typeahead
   - form_group_select: Select
@@ -13,6 +14,7 @@ examples:
   react:
   - form_group_default: Default
   - form_group_button: Button
+  - form_group_full_width: Full Width
   - form_group_date_picker: Date Picker
   # - form_group_typeahead: Typeahead
   - form_group_select: Select

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

@@ -1,7 +1,7 @@
 export { default as FormGroupDefault } from './_form_group_default.jsx'
 export { default as FormGroupButton } from './_form_group_button.jsx'
+export { default as FormGroupFullWidth } from './_form_group_full_width.jsx'
 export { default as FormGroupDatePicker } from './_form_group_date_picker.jsx'
-// export { default as FormGroupTypeahead } from './_form_group_typeahead.jsx'
 export { default as FormGroupSelect } from './_form_group_select.jsx'
 export { default as FormGroupSelectableCard } from './_form_group_selectable_card.jsx'
 export { default as FormGroupSelectableCardIcon } from './_form_group_selectable_card_icon.jsx'

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

@@ -3,8 +3,17 @@
 module Playbook
   module PbFormGroup
     class FormGroup < Playbook::KitBase
+      prop :full_width, type: Playbook::Props::Boolean,
+                        default: false
+
       def classname
-        generate_classname("pb_form_group_kit")
+        generate_classname("pb_form_group_kit", full_width_class)
+      end
+
+    private
+
+      def full_width_class
+        full_width ? "full" : nil
       end
     end
   end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.7.0.pre.alpha.a11y.btn"
+  VERSION = "9.7.0.pre.alphawidth1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.7.0.pre.alpha.a11y.btn
+  version: 9.7.0.pre.alphawidth1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-19 00:00:00.000000000 Z
+date: 2021-04-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1004,6 +1004,9 @@ files:
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.html.erb