playbook_ui 8.2.1.pre.alpha4 → 8.2.1.pre.alpha5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 314e6230c5179ecceaeb56ca63191603784c7af71c836268e97e9ab7069b68b4
-  data.tar.gz: 341436409bbcaab017560735de6746411f1e81a78f32931ad2cb3688b6d7bf27
+  metadata.gz: 4a51ba5ee8e976845e84ecf877719d0e520aaec19cbc8a38afdbeaf2cb29917f
+  data.tar.gz: 97896528a851b64bd127b17bc1019a01ee5792c9b72aef5d86b130fb605e2ffe
 SHA512:
-  metadata.gz: 546260d3d96158a93ea855723b52a20675165b784bbe02937249bd91afd18ad342c745b2893173b8653d6902e50c70d4234854838ee26c50fdad67413d2dba80
-  data.tar.gz: 83946aff7454d94f5eca74409560e844628cbec5eb6ceba521d2f61e14203a4131c02bfecd89a4e229c51f62a36f4ba5e29d96079329f153922b712a6b35817c
+  metadata.gz: 901809eb6df1c4d038fa5f660a96427325cdbd31e99327c1d650aad64c046b5d2de127d585ff8db43380fc52ce72104476a118f2eca3297071c9a68ee4bc26da
+  data.tar.gz: d5b1ea7c134a326c681ba7c8b4b63813fe18d7d9f7b6f1f57309f8aa7511d973ccef356d3ca205c040cd1e237133fc9c701f56a6b37146183be6d1cf3024875c

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

@@ -148,11 +148,15 @@
       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: $neutral;
+    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

@@ -1,32 +1,16 @@
 /* @flow */
 
-import React, { useEffect, useRef } from 'react'
+import React 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 placeholder = inputWrapper.current.parentElement.querySelector('.placeholder')
-      if (placeholder){
-        const offset = placeholder.clientWidth
-        plusIcon.style.marginLeft = `${offset + 2}px`
-      } else {
-        plusIcon.style.marginLeft = '0px'
-      }
-    })
-  }
-
-  return (
+const Input = (props: any) => (
+  <>
     <Flex
         align="center"
-        ref={inputWrapper}
+        className="input-wrapper"
     >
-      <If condition={plusIcon}>
+      <If condition={props.selectProps.plusIcon}>
         <Icon
             className="typeahead-plus-icon"
             icon="plus"
@@ -37,7 +21,7 @@ const Input = (props: any) => {
           {...props}
       />
     </Flex>
-  )
-}
+  </>
+)
 
 export default Input

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/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "8.2.1.pre.alpha4"
+  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.pre.alpha4
+  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