playbook_ui 9.9.0.alpha.inline1 → 9.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aad061e395898f02d246cad01fc3ca3c158c910c058c546fdff62258f99ceced
-  data.tar.gz: fb468e1242133f77abb769f74805a44c6a3caa88fb40dd10cf48791b98683466
+  metadata.gz: b9945857d72557eecdaac3f4cff4f8d02d7941118ea741fa43eb13a7fb8af86f
+  data.tar.gz: 9a8c82315215fce86c9b34e6418f9a44a4656d7afebc2a0e15a2ec94ba4fdf0b
 SHA512:
-  metadata.gz: e23d91eb54be1797a2cfb44c35941b3c0302d7bb02cb880ee61a21710a540014a0c4a0bc9b82c3b09d47d38d0b030a702f33a2d3b54fdf0ceec805d674958545
-  data.tar.gz: e04139cbbbf7a5e9b93e47ec464583715fae88a10463047c08da99ffae60986832117ae533c880de82cf54989bfe2914191dc1d87cf37763f8426c2bca571662
+  metadata.gz: f2da5e8f1f95b18fd53919a99c18ff28e2039eb5dd2cb1ce30939db84f1abf46358279a63993e71eb5c2151bfb3812797b49984fab77537ffe5cdf82bc9623d7
+  data.tar.gz: cf5b9ff8408fb77863c81bb1ddaf4668835f5a97cd926729e743c6845e3c4a283c7148355186c24dcbfb2316b5d0800ef0ada9747387a112828701f27bfef32f

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -3,7 +3,6 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
-import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -14,15 +13,8 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
-  closeProps?: {
-    onClick?: EventHandler,
-    onMouseDown?: EventHandler,
-    onTouchEnd?: EventHandler,
-  },
   data?: object,
   id?: string,
-  removeIcon?: Boolean,
-  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -31,11 +23,8 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
-    closeProps = {},
     data = {},
     id,
-    removeIcon = false,
-    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -55,21 +44,7 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>
-        {text}
-        <If condition={removeIcon}>
-          <span
-              onClick={removeOnClick}
-              style={{ cursor: 'pointer' }}
-              {...closeProps}
-          >
-            <Icon
-                fixedWidth
-                icon="times"
-            />
-          </span>
-        </If>
-      </span>
+      <span>{text}</span>
     </div>
   )
 }

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

@@ -2,16 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildDataProps } from '../utilities/props'
+import { buildAriaProps, 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?: {
-    label: string,
-  },
+  aria?: object,
   children?: array<React.ReactChild>,
   className?: string | array<string>,
   data?: object,
@@ -55,20 +53,9 @@ 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 = {},
@@ -84,7 +71,7 @@ const Button = (props: ButtonPropTypes) => {
     value,
   } = props
 
-  const buttonAria = buttonAriaProps(props)
+  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
@@ -114,11 +101,12 @@ const Button = (props: ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           href={link}
           id={id}
+          role="link"
           target={newWindow ? '_blank' : null}
       >
         <If condition={loading}>{loadingIcon}</If>
@@ -126,12 +114,13 @@ const Button = (props: ButtonPropTypes) => {
       </a>
       <Else />
       <button
-          {...buttonAria}
+          {...ariaProps}
           {...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,11 +21,12 @@ module Playbook
 
       def options
         {
-          id: id,
-          data: data,
+          aria: aria,
           class: classname,
+          data: data,
           disabled: disabled,
-          aria: aria,
+          id: id,
+          role: "button",
           type: type,
           value: value,
         }.compact
@@ -34,7 +35,8 @@ module Playbook
       def link_options
         options.merge(
           href: link,
-          target: new_window ? "_blank" : "_self"
+          role: "link",
+          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: "button"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, 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: 'button' }}
+        aria={{ label: 'Go to Google' }}
         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", 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" }) %>
+<%= 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" }) %>

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

@@ -4,12 +4,14 @@ 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"
@@ -17,6 +19,7 @@ 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: { 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 }) %>
+<%= 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 }) %>

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

@@ -4,12 +4,14 @@ 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"
@@ -17,6 +19,7 @@ const ButtonLoading = (props) => (
     />
     {' '}
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="A Tag Button Disabled"
         variant="link"

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -25,8 +25,6 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
-  inputOnChange?: (String) => void,
-  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -57,8 +55,6 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
-    inputOnChange,
-    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -118,6 +114,7 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
+      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -129,9 +126,7 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
-            onChange={inputOnChange}
             placeholder={placeholder}
-            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -166,9 +166,6 @@ const datePickerHelper = (config) => {
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }
-
-  // Fix event bubbling bug on wrapper
-  document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
 }
 
 export default datePickerHelper

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

@@ -14,7 +14,6 @@ type FormPillProps = {
   onClick?: EventHandler,
   avatar?: boolean,
   avatarUrl?: string,
-  size?: string,
   closeProps?: {
     onClick?: EventHandler,
     onMouseDown?: EventHandler,
@@ -22,20 +21,11 @@ type FormPillProps = {
   },
 }
 const FormPill = (props: FormPillProps) => {
-  const {
-    className,
-    text,
-    name,
-    onClick = () => {},
-    avatarUrl,
-    closeProps = {},
-    size = '',
-  } = props
+  const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
-    className,
-    size === 'small' ? 'small' : null,
+    className
   )
   return (
     <div className={css}>

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

@@ -51,23 +51,4 @@ $form_pill_colors: (
       }
     }
   }
-  &.small {
-    height: fit-content;
-    height: -moz-fit-content;
-    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: 16px;
-      font-weight: 400;
-    }
-    .pb_form_pill_text, .pb_form_pill_tag {
-      line-height: 1.7;
-      padding-left: $space_xs;
-      padding-right: 2px;
-    }
-    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
-      width: 20px;
-      height: 20px;
-      flex-basis: 20px;
-      &::before { line-height: 21px; }
-    }
-  }
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,11 +1,12 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-}) %>
 
-<br />
-<br />
+   }) %>
+
+<br>
+<br>
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
-}) %>
+   }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -8,14 +8,18 @@ const FormPillDefault = (props) => {
       <FormPill
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
-          onClick={() => alert('Click!')}
+          onClick={() => {
+ alert('Click!')
+}}
           {...props}
       />
       <br />
       <br />
       <FormPill
           name="Anna Black"
-          onClick={() => alert('Click!')}
+          onClick={() => {
+ alert('Click!')
+}}
           {...props}
       />
     </div>

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

@@ -2,11 +2,9 @@ examples:
 
   rails:
   - form_pill_user: Form Pill User
-  - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
 
 
   react:
   - form_pill_user: Form Pill User
-  - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag

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

@@ -1,3 +1,2 @@
 export { default as FormPillUser } from './_form_pill_user.jsx'
-export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname + object.size_class) do %>
+    class: object.classname) do %>
     <% if object.name.present? %>
       <%= pb_rails("avatar", props: {
         name: object.name,

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -6,7 +6,6 @@ module Playbook
       prop :avatar_url
       prop :name
       prop :text
-      prop :size
 
       def classname
         generate_classname("pb_form_pill_kit", "primary", name, text)
@@ -15,10 +14,6 @@ module Playbook
       def display_text
         name.downcase
       end
-
-      def size_class
-        size == "small" ? " small" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js

@@ -15,9 +15,9 @@ export default function useZxcvbn(options) {
 
   useEffect(() => {
     if (confirmation) return
-
-    setResult(calculator(passphrase))
-    const str = result.score
+    const newResult = calculator(passphrase)
+    setResult(newResult)
+    const str = newResult.score
 
     const noPassphrase = passphrase.length <= 0
     const commonPassphrase = common || isPwned