playbook_ui 8.3.0.alpha.select.pre.margin → 8.3.0.deps2

data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss

@@ -22,7 +22,7 @@
   overflow-wrap: break-word;
   resize: none;
   transition-property: box-shadow, color, background-color;
-  transition-duration: .3s;
+  transition-duration: .24s;
   transition-timing-function: $bezier;
   &[type=number] {
     -moz-appearance:textfield;
@@ -40,9 +40,9 @@
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
   &:-internal-autofill-selected {
-    color: $text_color;
-    background-color: rgba($focus_input_light, $opacity_5);
-    transition: background-color 0.3s ease-in-out 0s;
+    -webkit-text-fill-color: $text_color;
+    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
+    transition: background-color 5000s ease-in-out 0s;
     font-family: $font_family_base;
   }
 }
@@ -68,8 +68,3 @@
 @mixin pb_textarea_focus_dark {
   @include pb_textarea_focus($focus_input_dark);
 }
-
-// Transitions ======================
-@mixin transition_default{
-  transition: background-color 0.3s ease-in-out 0s, border-color 0.3s ease-in-out 0s;
-}

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_character_counter.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Textarea } from '../../'
 
-const TextareaCharacterCounter = (props) => {
+const TextareaCharacterCounter = () => {
   const [value1, setValue1] = useState('Counting characters!')
   const [value2, setValue2] = useState('This counter prevents the user from exceeding the maximum number of allowed characters. Just try it!')
   const [value3, setValue3] = useState('This counter alerts the user that they have exceeded the maximum number of allowed characters.')
@@ -41,7 +41,6 @@ const TextareaCharacterCounter = (props) => {
           label="Count Only"
           onChange={(event) => setCount1(event.target.value.length)}
           rows={4}
-          {...props}
       />
 
       <br />
@@ -53,7 +52,6 @@ const TextareaCharacterCounter = (props) => {
           onChange={() => handleMaxCount(event)}
           rows={4}
           value={value1}
-          {...props}
       />
 
       <br />
@@ -65,7 +63,6 @@ const TextareaCharacterCounter = (props) => {
           onChange={() => handleMaxCountWithBlocker(event, 100)}
           rows={4}
           value={value2}
-          {...props}
       />
 
       <br />
@@ -78,7 +75,6 @@ const TextareaCharacterCounter = (props) => {
           onChange={() => handleMaxCountWithError(event, 75)}
           rows={4}
           value={value3}
-          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx

@@ -4,14 +4,12 @@ import { Textarea } from '../../'
 const TextareaCustom = (props) => {
   return (
     <div>
-      <Textarea
-          label="Label"
-          {...props}
-      >
+      <Textarea label="Label">
         <textarea
             className="my_custom_class"
             name="custom_textarea"
             rows={4}
+            {...props}
         >
           {'Content goes here.'}
         </textarea>

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

@@ -4,18 +4,9 @@
 @import "../tokens/shadows";
 
 [class^=pb_typeahead_kit] {
-  .typeahead-kit-select__option {
-    cursor: pointer;
-  }
   .pb_typeahead_wrapper {
     position: relative;
-    .text_input_value_container{
-      cursor: text;
-    }
-    .text_input_indicators,
-    .pb_list_kit {
-      cursor: pointer;
-    }
+
     .pb_typeahead_loading_indicator {
       position: absolute;
       width: min-content;
@@ -26,6 +17,7 @@
       transition: opacity .15s ease-in-out;
     }
   }
+
   [class^=pb_text_input_kit] {
     .text_input_wrapper {
       & > input:first-child {
@@ -33,6 +25,7 @@
       }
     }
   }
+
   .pb_item_kit {
     padding: ($space_xs + 2) 0;
 
@@ -42,6 +35,7 @@
       }
     }
   }
+
   [class^=pb_list_kit] {
     max-height: 18em;
     overflow-y: auto;
@@ -55,14 +49,17 @@
     border-radius: $border_rad_heavier;
     transition: opacity .25s ease-in-out;
   }
+
   &:focus-within [class^=pb_list_kit] {
     display: block;
     opacity: 1;
   }
+
   &:not(:focus-within) [class^=pb_list_kit] {
     display: none;
     opacity: 0;
   }
+
   [class^=pb_list_kit] {
     margin-top: -$space-sm;
     li {
@@ -72,6 +69,7 @@
       &:focus-within {
         background-color: $active_light;
       }
+
       > button {
         background: none;
         color: $text_lt_default;
@@ -86,6 +84,7 @@
       }
     }
   }
+
   &[class*=dark] {
     .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
       color: $text_dk_light;
@@ -98,10 +97,7 @@
       color: $white;
     }
     .typeahead-kit-select__option:hover {
-      background-color: $active_dark;
-    }
-    .typeahead-kit-select__indicator:hover {
-      color: $white;
+      background-color: tint($focus_input_dark, 5%);
     }
     .typeahead-kit-select__input {
       color: white;
@@ -109,12 +105,13 @@
         box-shadow: none;
       }
     }
-    .typeahead-kit-select__single-value {
+    .typeahead-kit-select__single-value{
       color: white;
     }
     .typeahead-kit-select__option--is-focused {
-      background-color: $active_dark;
+      background-color: tint($focus_input_dark, 5%);
     }
+  
     [class^=pb_list_kit] {
       background-color: $bg_dark;
     }
@@ -124,11 +121,12 @@
       }
       @media (hover:hover) {
         &:hover {
-          background-color: rgba($white,.1);
+          background-color: tint($focus_input_dark, 5%);
         }
       }
     }
   }
+
   &.react-select, &.react-select .dark {
     .text_input {
       display: inherit;

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

@@ -90,7 +90,6 @@ 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/tokens/_colors.scss

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

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 8.3.0.alpha.select.pre.margin
+  version: 8.3.0.deps2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-01 00:00:00.000000000 Z
+date: 2021-03-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -75,128 +75,128 @@ dependencies:
   name: react-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.6.0
+        version: '2.6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.6.0
+        version: '2.6'
 - !ruby/object:Gem::Dependency
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.5.1
+        version: '3.5'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.5.1
+        version: '3.5'
 - !ruby/object:Gem::Dependency
   name: rouge
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.15.0
+        version: '3.15'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.15.0
+        version: '3.15'
 - !ruby/object:Gem::Dependency
   name: sassc-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.3.0
+        version: '1.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.3.0
+        version: '1.3'
 - !ruby/object:Gem::Dependency
   name: slim-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.2.0
+        version: '3.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.2.0
+        version: '3.2'
 - !ruby/object:Gem::Dependency
   name: sprockets-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.3.3
+        version: '2.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.3.3
+        version: '2.3'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.23.2
+        version: '2.23'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.23.2
+        version: '2.23'
 - !ruby/object:Gem::Dependency
   name: webpacker
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.2.2
+        version: '4.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.2.2
+        version: '4.2'
 - !ruby/object:Gem::Dependency
   name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.3.2
+        version: '0.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.3.2
+        version: '0.3'
 - !ruby/object:Gem::Dependency
   name: better_errors
   requirement: !ruby/object:Gem::Requirement