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

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_text_input/_text_input.scss

@@ -8,59 +8,59 @@
     margin-bottom: $space_xs;
     display: block;
   }
-
   .text_input_wrapper {
     margin-bottom: $space_sm;
     display: block;
-
     input::placeholder,
     .text_input .placeholder {
       @include pb_body_light;
     }
-
     input,
     .text_input {
+      max-height: 45px;
       @include pb_textarea_light;
-      @include pb_title_4;
       overflow: hidden;
     }
-
+    input:hover,
+    .text_input:hover{
+      background-color: rgba($focus_input_light,$opacity_5);
+    }
     input:focus,
     .text_input:focus,
     input:-webkit-autofill:focus,
     .text_input:-webkit-autofill:focus {
       @include pb_textarea_focus;
-      -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
-      transition: background-color 5000s ease-in-out 0s;
+      @include transition_default;
+      border-color: $primary;
+      background-color: rgba($focus_input_light,$opacity_5);
     }
   }
-
   &.dark {
     .text_input_wrapper {
       margin-bottom: 1rem;
-
       input::placeholder,
       .text_input .placeholder {
         @include pb_body_light_dark;
       }
-
       input, .text_input {
         @include pb_textarea_dark;
-        @include pb_title_4;
-        @include pb_title_dark;
+        @include pb_body_dark;
         overflow: hidden;
+        background-color: rgba($white,$opacity_1);
+        border-color: rgba($white, 0.15);
+      }
+      input:hover,
+      .text_input:hover{
+        background-color: rgba($white, 0.15);
       }
-
       input:focus,
       .text_input:focus,
       input:-webkit-autofill:focus,
       .text_input:-webkit-autofill:focus {
-        @include pb_textarea_focus_dark;
-        -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
-        transition: background-color 5000s ease-in-out 0s;
+        border-color: $active_dark;
+        background-color: rgba($white, 0.025);
       }
     }
-
     &.error {
       .text_input_wrapper {
         input, .text_input {
@@ -69,7 +69,6 @@
       }
     }
   }
-
   &.error {
     .text_input_wrapper {
       [class*=pb_body_kit] {

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_textarea/_textarea.scss

@@ -5,28 +5,30 @@
 
 [class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
+  
   [class^=pb_caption_kit] {
     margin-bottom: $space_xs;
     display: block;
   }
-  textarea::placeholder {
+  textarea::placeholder,
+  .pb_text_area_kit::placeholder {
     @include pb_body_light;
   }
-  > textarea {
+  textarea,
+  .pb_text_area_kit {
     @include pb_textarea_light;
   }
-  textarea:focus {
+  textarea:focus,
+  .pb_text_area_kit:focus {
+    border-color: $primary;
     @include pb_textarea_focus_light;
+    @include transition_default;
   }
-
-  &.error {
-    [class*=pb_body_kit] {
-      margin-top: $space_xs / 2;
-    }
-    > textarea {
-      border-color: $error;
-    }
+  textarea:hover,
+  .pb_text_area_kit:hover {
+    background-color: rgba($focus_input_light,$opacity_5);
   }
+  
   &.resize_both > textarea {
     resize: both;
     overflow: auto;
@@ -44,16 +46,24 @@
     textarea::placeholder {
       @include pb_body_light_dark;
     }
-    > textarea {
-      @include pb_textarea_dark;
+    textarea,
+    .pb_text_area_kit {
+      @include pb_body_dark;
+      background-color: rgba($white, $opacity_1);
+      border-color: rgba($white, 0.15);
     }
-    textarea:focus {
-      @include pb_textarea_focus_dark;
+    textarea:focus, .pb_text_area_kit:focus {
+      border-color: $active_dark;
+      background-color: rgba($white, 0.025);
     }
-    &.error {
-      > textarea {
-        border-color: $error_dark;
-      }
+  }
+
+  &.error {
+    [class*=pb_body_kit] {
+      margin-top: $space_xs / 2;
+    }
+    textarea {
+      border-color: $error;
     }
   }
 

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: .24s;
+  transition-duration: .3s;
   transition-timing-function: $bezier;
   &[type=number] {
     -moz-appearance:textfield;
@@ -40,9 +40,9 @@
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
   &:-internal-autofill-selected {
-    -webkit-text-fill-color: $text_color;
-    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
-    transition: background-color 5000s ease-in-out 0s;
+    color: $text_color;
+    background-color: rgba($focus_input_light, $opacity_5);
+    transition: background-color 0.3s ease-in-out 0s;
     font-family: $font_family_base;
   }
 }
@@ -68,3 +68,8 @@
 @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 = () => {
+const TextareaCharacterCounter = (props) => {
   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,6 +41,7 @@ const TextareaCharacterCounter = () => {
           label="Count Only"
           onChange={(event) => setCount1(event.target.value.length)}
           rows={4}
+          {...props}
       />
 
       <br />
@@ -52,6 +53,7 @@ const TextareaCharacterCounter = () => {
           onChange={() => handleMaxCount(event)}
           rows={4}
           value={value1}
+          {...props}
       />
 
       <br />
@@ -63,6 +65,7 @@ const TextareaCharacterCounter = () => {
           onChange={() => handleMaxCountWithBlocker(event, 100)}
           rows={4}
           value={value2}
+          {...props}
       />
 
       <br />
@@ -75,6 +78,7 @@ const TextareaCharacterCounter = () => {
           onChange={() => handleMaxCountWithError(event, 75)}
           rows={4}
           value={value3}
+          {...props}
       />
     </>
   )

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

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

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

@@ -4,9 +4,18 @@
 @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;
@@ -17,7 +26,6 @@
       transition: opacity .15s ease-in-out;
     }
   }
-
   [class^=pb_text_input_kit] {
     .text_input_wrapper {
       & > input:first-child {
@@ -25,7 +33,6 @@
       }
     }
   }
-
   .pb_item_kit {
     padding: ($space_xs + 2) 0;
 
@@ -35,7 +42,6 @@
       }
     }
   }
-
   [class^=pb_list_kit] {
     max-height: 18em;
     overflow-y: auto;
@@ -49,17 +55,14 @@
     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 {
@@ -69,7 +72,6 @@
       &:focus-within {
         background-color: $active_light;
       }
-
       > button {
         background: none;
         color: $text_lt_default;
@@ -84,7 +86,6 @@
       }
     }
   }
-
   &[class*=dark] {
     .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
       color: $text_dk_light;
@@ -97,7 +98,10 @@
       color: $white;
     }
     .typeahead-kit-select__option:hover {
-      background-color: tint($focus_input_dark, 5%);
+      background-color: $active_dark;
+    }
+    .typeahead-kit-select__indicator:hover {
+      color: $white;
     }
     .typeahead-kit-select__input {
       color: white;
@@ -105,13 +109,12 @@
         box-shadow: none;
       }
     }
-    .typeahead-kit-select__single-value{
+    .typeahead-kit-select__single-value {
       color: white;
     }
     .typeahead-kit-select__option--is-focused {
-      background-color: tint($focus_input_dark, 5%);
+      background-color: $active_dark;
     }
-  
     [class^=pb_list_kit] {
       background-color: $bg_dark;
     }
@@ -121,12 +124,11 @@
       }
       @media (hover:hover) {
         &:hover {
-          background-color: tint($focus_input_dark, 5%);
+          background-color: rgba($white,.1);
         }
       }
     }
   }
-
   &.react-select, &.react-select .dark {
     .text_input {
       display: inherit;
@@ -148,13 +150,4 @@
       box-sizing: border-box;
     }
   }
-
-  .typeahead-plus-icon {
-    color: $neutral;
-  }
-
-  [class^=pb_badge_kit] span {
-    line-height: 16.5px;
-    letter-spacing: normal;
-  }
 }