playbook_ui 8.2.1.pre.alpha5 → 8.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a51ba5ee8e976845e84ecf877719d0e520aaec19cbc8a38afdbeaf2cb29917f
-  data.tar.gz: 97896528a851b64bd127b17bc1019a01ee5792c9b72aef5d86b130fb605e2ffe
+  metadata.gz: 05e0cb64b2dbb3865e6c07d44fb325424871dc682900fb0e45a9b905f2c31342
+  data.tar.gz: 1cca131f6e0fa3df24bdbc6f004878067b3a7727e4dba9c44657726969ec2666
 SHA512:
-  metadata.gz: 901809eb6df1c4d038fa5f660a96427325cdbd31e99327c1d650aad64c046b5d2de127d585ff8db43380fc52ce72104476a118f2eca3297071c9a68ee4bc26da
-  data.tar.gz: d5b1ea7c134a326c681ba7c8b4b63813fe18d7d9f7b6f1f57309f8aa7511d973ccef356d3ca205c040cd1e237133fc9c701f56a6b37146183be6d1cf3024875c
+  metadata.gz: 0f6eb45fb6ba52e77cb6d57edee2ad886e7de1f69f4b8afd6bacbc3a5056cbd184863041e266d918dbf43056d225bebecf88d6e26649e660a913f8dcbf12cb1b
+  data.tar.gz: 35d56bb9d0ac9aca06af2f1f9326a1462f6b66cb641b26116be70c4d5acd34a590821116657eb00429d59125e4a177c310ddfb2ff0c639278f17d978da4135a0

data/Rakefile

@@ -4,12 +4,29 @@ rescue LoadError
   puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
 
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Playbook'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
 APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
 load 'rails/tasks/engine.rake'
+
 load 'rails/tasks/statistics.rake'
 
 require 'bundler/gem_tasks'
 
-Dir["private/tasks/*.rake"].each(&method(:load))
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'spec/**/*_spec.rb'
+  t.verbose = false
+end
 
 task default: :test

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

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

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

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

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

@@ -19,7 +19,6 @@ type TextInputProps = {
   id?: string,
   name: string,
   label: string,
-  onBlur: (String) => void,
   onChange: (String) => void,
   placeholder: string,
   required?: boolean,
@@ -42,7 +41,6 @@ const TextInput = (
     id,
     name,
     label,
-    onBlur = () => {},
     onChange = () => {},
     placeholder,
     required,
@@ -81,7 +79,6 @@ 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,7 +24,6 @@ type TextareaProps = {
   required?: boolean,
   rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
-  onBlur?: InputCallback<HTMLTextAreaElement>,
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -38,7 +37,6 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
-  onBlur = () => {},
   onChange = () => {},
   placeholder,
   required,
@@ -77,7 +75,6 @@ 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,14 +3,12 @@
 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'
@@ -28,7 +26,6 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
-  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -44,14 +41,12 @@ type Props = {
 
 const Typeahead = (props: Props) => {
   const selectProps = {
-    badges: false,
     cacheOptions: true,
     components: {
       Control,
       ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null,
-      Input,
       MenuList,
       MultiValue,
       Option,
@@ -63,8 +58,6 @@ const Typeahead = (props: Props) => {
     isClearable: true,
     isSearchable: true,
     name,
-    onCreate: () => {},
-    plusIcon: false,
     ...props,
   }
 
@@ -72,8 +65,7 @@ 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)
 
-  let Tag = props.async ? AsyncSelect : Select
-  if (props.createable) Tag = CreateableSelect
+  const Tag = props.async ? AsyncSelect : Select
 
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {

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

@@ -148,17 +148,4 @@
       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/MultiValue.jsx

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

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

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

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

@@ -13,7 +13,6 @@ 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 initOptions = [
+const options = [
   { label: 'Windows', value: '#FFA500' },
   { label: 'Siding', value: '#FF0000' },
   { label: 'Doors', value: '#00FF00' },
@@ -11,18 +11,13 @@ const initOptions = [
 ]
 
 const TypeaheadWithPills = (props) => {
-  // const [values, setValues] = useState([])
   return (
     <>
       <Typeahead
-          badges
-          createable
           isMulti
           label="Colors"
-          // onChange={(value) => console.log(value)}
-          options={initOptions}
-          placeholder="Placeholder"
-          plusIcon
+          options={options}
+          placeholder=""
           {...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.pre.alpha5"
+  VERSION = "8.2.1"
 end
 

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 8.2.1.pre.alpha5
+  version: 8.2.1
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-01 00:00:00.000000000 Z
+date: 2021-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1961,7 +1961,6 @@ 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
@@ -2104,7 +2103,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2115,12 +2114,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []

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

@@ -1,27 +0,0 @@
-/* @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