playbook_ui 8.2.1.alpha.iconacc → 8.2.1.pre.alpha5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b7526c42c57c64b2f20becc559569747cda234e5478190b62e170ad5be74ac4a
-  data.tar.gz: c2167d4d617d1fa829b96ee32d6b8ca490734b416dabd261806756868b6b4431
+  metadata.gz: 4a51ba5ee8e976845e84ecf877719d0e520aaec19cbc8a38afdbeaf2cb29917f
+  data.tar.gz: 97896528a851b64bd127b17bc1019a01ee5792c9b72aef5d86b130fb605e2ffe
 SHA512:
-  metadata.gz: 61791c852673487ced56bfa3eb2e47c336017172b79ecb447ff48fb02d5b800ce85cb335f93347d7771c7e5dbe5ce2c92ba8ddf4d4dc07d776516de703d47e77
-  data.tar.gz: af3ccf64210ecba24d6898579f51333f3b9be8e8f85d6d4feb6cf1ca5002e927f63e70eb2c51188270dde52b85f228c1f789acda840a7931b7b39327e6c23539
+  metadata.gz: 901809eb6df1c4d038fa5f660a96427325cdbd31e99327c1d650aad64c046b5d2de127d585ff8db43380fc52ce72104476a118f2eca3297071c9a68ee4bc26da
+  data.tar.gz: d5b1ea7c134a326c681ba7c8b4b63813fe18d7d9f7b6f1f57309f8aa7511d973ccef356d3ca205c040cd1e237133fc9c701f56a6b37146183be6d1cf3024875c

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

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

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

@@ -25,6 +25,8 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
+  inputOnChange?: (String) => void,
+  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
+    inputOnChange,
+    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -114,7 +118,6 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
-      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -126,7 +129,9 @@ 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,6 +166,9 @@ 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_flex/_flex.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
@@ -22,11 +22,12 @@ type FlexProps = {
   wrap?: boolean,
 }
 
-const Flex = (props: FlexProps) => {
+const Flex = (props: FlexProps, ref: React.ElementRef<"div">) => {
   const {
     align = 'none',
     children,
     className,
+    id,
     inline = false,
     horizontal = 'left',
     justify = 'none',
@@ -70,10 +71,12 @@ const Flex = (props: FlexProps) => {
         globalProps(props),
         className
       )}
+        id={id}
+        ref={ref}
     >
       {children}
     </div>
   )
 }
 
-export default Flex
+export default forwardRef(Flex)

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -2,14 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type IconProps = {
-  aria?: object,
+  aria?: Object,
   border?: boolean,
   className?: string,
-  data?: object,
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
   icon: string,
@@ -43,10 +41,8 @@ const flipMap = {
 
 const Icon = (props: IconProps) => {
   const {
-    aria = {},
     border = false,
     className,
-    data = {},
     fixedWidth = true,
     flip = false,
     icon,
@@ -79,22 +75,11 @@ const Icon = (props: IconProps) => {
     className
   )
 
-  aria.label ? null : aria.label = `${icon} icon`
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-
   return (
-    <>
-      <i
-          {...dataProps}
-          className={classes}
-          id={id}
-      />
-      <span
-          {...ariaProps}
-          hidden="true"
-      />
-    </>
+    <i
+        className={classes}
+        id={id}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,7 +1,5 @@
 <%= content_tag(:i, nil,
     id: object.id,
     data: object.data,
-    class: object.classname ) %>
-<%= content_tag(:span, nil,
-    aria: { label: "#{object.icon} icon" }.merge(object.aria),
-    hidden: true ) %>
+    class: object.classname,
+    aria: object.aria) %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -22,7 +22,6 @@ const LoadingInline = (props: LoadingInlineProps) => {
     >
       <Body color="light">
         <Icon
-            aria={{ label: 'loading icon' }}
             fixedWidth
             icon="spinner"
             pulse

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -4,6 +4,6 @@
     class: object.classname) do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
+    <%= pb_rails("icon", props: { fixed_width: true, icon: "spinner", pulse: true }) %> Loading
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -75,6 +75,7 @@ const NavItem = (props: NavItemProps) => {
               key={iconLeft}
           >
             <Icon
+                aria={{ label: iconLeft }}
                 className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
@@ -90,6 +91,7 @@ const NavItem = (props: NavItemProps) => {
               key={iconRight}
           >
             <Icon
+                aria={{ label: iconRight }}
                 className="pb_nav_list_item_icon_right"
                 fixedWidth
                 icon={iconRight}

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -9,13 +9,13 @@
       <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
     <% end %>
     <% if object.icon_left %>
-      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { aria: { label: object.icon_left }, icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>
     <span class="pb_nav_list_item_text">
       <%= object.text %><%= content.presence %>
     </span>
     <% if object.icon_right %>
-      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { aria: { label: object.icon_right }, icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { useEffect, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import useFocus from './useFocus.js'
 import Trix from 'trix'
@@ -22,7 +22,7 @@ type RichTextEditorProps = {
   value?: string,
 }
 
-const RichTextEditor = (props: RichTextEditorProps) => {
+const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input">) => {
   const {
     aria = {},
     className,
@@ -120,6 +120,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       <input
           id={id}
           name={name}
+          ref={ref}
           type="hidden"
           value={value}
       />
@@ -133,4 +134,4 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   )
 }
 
-export default RichTextEditor
+export default forwardRef(RichTextEditor)

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -19,6 +19,7 @@ type TextInputProps = {
   id?: string,
   name: string,
   label: string,
+  onBlur: (String) => void,
   onChange: (String) => void,
   placeholder: string,
   required?: boolean,
@@ -41,6 +42,7 @@ const TextInput = (
     id,
     name,
     label,
+    onBlur = () => {},
     onChange = () => {},
     placeholder,
     required,
@@ -79,6 +81,7 @@ const TextInput = (
               disabled={disabled}
               id={id}
               name={name}
+              onBlur={onBlur}
               onChange={onChange}
               placeholder={placeholder}
               ref={ref}

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -24,6 +24,7 @@ type TextareaProps = {
   required?: boolean,
   rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
+  onBlur?: InputCallback<HTMLTextAreaElement>,
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -37,6 +38,7 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
+  onBlur = () => {},
   onChange = () => {},
   placeholder,
   required,
@@ -75,6 +77,7 @@ const Textarea = ({
             className="pb_textarea_kit"
             disabled={disabled}
             name={name}
+            onBlur={onBlur}
             onChange={onChange}
             placeholder={placeholder}
             ref={ref}

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -3,12 +3,14 @@
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
+import CreateableSelect from 'react-select/creatable'
 import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Control from './components/Control'
 import ClearIndicator from './components/ClearIndicator'
 import IndicatorsContainer from './components/IndicatorsContainer'
+import Input from './components/Input'
 import MenuList from './components/MenuList'
 import MultiValue from './components/MultiValue'
 import Option from './components/Option'
@@ -26,6 +28,7 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
+  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -41,12 +44,14 @@ type Props = {
 
 const Typeahead = (props: Props) => {
   const selectProps = {
+    badges: false,
     cacheOptions: true,
     components: {
       Control,
       ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null,
+      Input,
       MenuList,
       MultiValue,
       Option,
@@ -58,6 +63,8 @@ const Typeahead = (props: Props) => {
     isClearable: true,
     isSearchable: true,
     name,
+    onCreate: () => {},
+    plusIcon: false,
     ...props,
   }
 
@@ -65,7 +72,8 @@ const Typeahead = (props: Props) => {
   if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
   if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
 
-  const Tag = props.async ? AsyncSelect : Select
+  let Tag = props.async ? AsyncSelect : Select
+  if (props.createable) Tag = CreateableSelect
 
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -148,4 +148,17 @@
       box-sizing: border-box;
     }
   }
+  .placeholder+.input-wrapper .typeahead-plus-icon {
+    display: none;
+  }
+  .typeahead-kit-select__control--is-focused .typeahead-plus-icon {
+    display: none;
+  }
+  .typeahead-plus-icon {
+    color: $text_lt_lighter;
+  }
+  [class^=pb_badge_kit] span {
+    line-height: 16.5px;
+    letter-spacing: normal;
+  }
 }

data/app/pb_kits/playbook/pb_typeahead/components/Input.jsx

@@ -0,0 +1,27 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+import { Flex, Icon } from '../../'
+
+const Input = (props: any) => (
+  <>
+    <Flex
+        align="center"
+        className="input-wrapper"
+    >
+      <If condition={props.selectProps.plusIcon}>
+        <Icon
+            className="typeahead-plus-icon"
+            icon="plus"
+        />
+      </If>
+      <components.Input
+          className="input"
+          {...props}
+      />
+    </Flex>
+  </>
+)
+
+export default Input

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import { FormPill } from '../../'
+import { Badge, FormPill } from '../../'
 
 type Props = {
   data: object,
@@ -15,6 +15,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
+  const { badges } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -28,19 +29,28 @@ const MultiValue = (props: Props) => {
         className="text_input_multivalue_container"
         {...props}
     >
-      <If condition={imageUrl}>
-        <FormPill
-            avatarUrl={imageUrl}
+      <If condition={badges}>
+        <Badge
             closeProps={removeProps}
-            marginRight="xs"
-            name={label}
-        />
-        <Else />
-        <FormPill
-            closeProps={removeProps}
-            marginRight="xs"
+            removeIcon
             text={label}
+            variant="primary"
         />
+        <Else />
+        <If condition={imageUrl}>
+          <FormPill
+              avatarUrl={imageUrl}
+              closeProps={removeProps}
+              marginRight="xs"
+              name={label}
+          />
+          <Else />
+          <FormPill
+              closeProps={removeProps}
+              marginRight="xs"
+              text={label}
+          />
+        </If>
       </If>
     </components.MultiValueContainer>
   )

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx

@@ -1,13 +1,26 @@
 /* @flow */
 
 import React from 'react'
+import { Flex, Icon } from '../../'
 import { components } from 'react-select'
 
 const Placeholder = (props: any) => (
-  <components.IndicatorsContainer
-      className="placeholder"
-      {...props}
-  />
+  <>
+    <Flex
+        align="center"
+        className="placeholder"
+    >
+      <components.IndicatorsContainer
+          {...props}
+      />
+      <If condition={props.selectProps.plusIcon}>
+        <Icon
+            className="typeahead-plus-icon"
+            icon="plus"
+        />
+      </If>
+    </Flex>
+  </>
 )
 
 export default Placeholder

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -13,6 +13,7 @@ const options = [
 const TypeaheadDefault = (props) => {
   return (
     <Typeahead
+        // badges
         label="Colors"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Typeahead } from '../..'
 
-const options = [
+const initOptions = [
   { label: 'Windows', value: '#FFA500' },
   { label: 'Siding', value: '#FF0000' },
   { label: 'Doors', value: '#00FF00' },
@@ -11,13 +11,18 @@ const options = [
 ]
 
 const TypeaheadWithPills = (props) => {
+  // const [values, setValues] = useState([])
   return (
     <>
       <Typeahead
+          badges
+          createable
           isMulti
           label="Colors"
-          options={options}
-          placeholder=""
+          // onChange={(value) => console.log(value)}
+          options={initOptions}
+          placeholder="Placeholder"
+          plusIcon
           {...props}
       />
     </>

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

@@ -7,8 +7,8 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
 
   react:
-    - typeahead_default: Default
+    # - typeahead_default: Default
     - typeahead_with_pills: With Pills
-    - typeahead_with_pills_async: With Pills (Async Data)
-    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
-    - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
+    # - typeahead_with_pills_async: With Pills (Async Data)
+    # - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    # - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "8.2.1.alpha.iconacc"
+  VERSION = "8.2.1.pre.alpha5"
 end
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 8.2.1.alpha.iconacc
+  version: 8.2.1.pre.alpha5
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-03-31 00:00:00.000000000 Z
+date: 2021-04-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1961,6 +1961,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
 - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
+- app/pb_kits/playbook/pb_typeahead/components/Input.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Option.jsx