playbook_ui 8.2.1.pre.alpha2 → 8.3.0.alpha.select.pre.margin

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/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/_typeahead_with_pills_async_users.jsx

@@ -90,6 +90,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
           isMulti
           label="Github Users"
           loadOptions={promiseOptions}
+          noOptionsMessage={() => 'Type to Search'}
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"

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/app/pb_kits/playbook/tokens/_colors.scss

@@ -114,7 +114,7 @@ $shadow_colors: (
 
 /* Text colors ------------------------*/
 $text_lt_default:     $charcoal;
-$text_lt_light:       #919EAB;
+$text_lt_light:       #687887;
 $text_lt_lighter:     $slate;
 $text_dk_default:     $white;
 $text_dk_light:       rgba($white, $opacity_6);

data/lib/playbook/version.rb

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "8.2.1.pre.alpha2"
+  VERSION = "8.3.0.alpha.select-margin"
 end
-

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 8.2.1.pre.alpha2
+  version: 8.3.0.alpha.select.pre.margin
 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,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
@@ -2119,7 +2118,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project:
+rubygems_version: 2.7.3
 signing_key:
 specification_version: 4
 summary: Playbook Design System

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

@@ -1,43 +0,0 @@
-/* @flow */
-
-import React, { useEffect, useRef } from 'react'
-import { components } from 'react-select'
-import { Flex, Icon } from '../../'
-
-const Input = (props: any) => {
-  const { plusIcon } = props.selectProps
-  const inputWrapper = useRef(null)
-
-  if (plusIcon) {
-    useEffect(() => {
-      const plusIcon = inputWrapper.current.querySelector('.typeahead-plus-icon')
-      const values = props.selectProps.value
-      if (!values || values.length == 0){
-        const offset = inputWrapper.current.parentElement.querySelector('.placeholder').clientWidth
-        plusIcon.style.marginLeft = `${offset + 2}px`
-      } else {
-        plusIcon.style.marginLeft = '0px'
-      }
-    })
-  }
-
-  return (
-    <Flex
-        align="center"
-        ref={inputWrapper}
-    >
-      <If condition={plusIcon}>
-        <Icon
-            className="typeahead-plus-icon"
-            icon="plus"
-        />
-      </If>
-      <components.Input
-          className="input"
-          {...props}
-      />
-    </Flex>
-  )
-}
-
-export default Input