playbook_ui 8.3.0.deps2 → 8.3.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9ec789bb91a24cba8a449733dd2695b067f1aa224e3b871b917bc5a95a896382
-  data.tar.gz: bf501dfb78c8cc977d1f7ddde8a1314ac93dbf64bf9bd57105cd58a7d0dde406
+  metadata.gz: ce6fc42c5e35b98e211b6039d6cfe3f638ceffb3a108b1491b91109202b2f111
+  data.tar.gz: 4f9bc62b51a8e6c8a72f8d5351645e8bd9a06447c3f8806b0f2bd22c587d02e8
 SHA512:
-  metadata.gz: c59c45f9a192416934d4c442641e9f94d75f6fed0df1ac210d7d62ffd126abf7eb500ac28e55ccf13218f29d19db767c1963aed03fac1492dfd8077a73a8b830
-  data.tar.gz: f6f81ef9765baa467cf99697747bc262171c972ac46e3cc99a227cfc2445bd9141799509b4b5461d31bdfc484e20720f73f7896dd98da74f2c812088c3b19de3
+  metadata.gz: 50867043ffa155cfed91f6a84b349de9da8ab9ed05848feda20b2a198895376e0c3b11f98386a729d6b7016c2a369cf99b441bb08cca6441ad8600b5cd9da7c0
+  data.tar.gz: a8711b9503e9aa150fb5edf7c588a13a986a39e91aa92cbd6a65fbc0e1165632dd323433dc6dca2ea425d19e261e71a51febde3a2ea8fe04ea3f3b7af2ff227f

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/data/menu.yml

@@ -7,7 +7,6 @@ kits:
     - button_toolbar
     - circle_icon_button
   - card
-  - checkbox
   - collapsible
   - charts_and_graphs:
     - bar_graph
@@ -21,12 +20,14 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - checkbox
     - date_picker
     - file_upload
     - form
     - form_group
     - form_pill
     - radio
+    - rich_text_editor
     - select
     - selectable_card
     - selectable_card_icon
@@ -57,7 +58,6 @@ kits:
     - progress_pills
     - progress_simple
     - progress_step
-  - rich_text_editor
   - section_separator
   - source
   - star_rating
@@ -96,4 +96,3 @@ kits:
     - weekday_stacked
   - user
   - user_badge
-

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

@@ -9,6 +9,7 @@
 @import "./trix_styles";
 
 
+
 .trix-content pre {
   display: inline-block;
   width: 100%;
@@ -25,9 +26,6 @@
 
 [class^=pb_rich_text_editor_kit] {
 
-
-
-  // trix-toolbar { display: none; }
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {
     display: none;
@@ -64,6 +62,19 @@
       border-top-right-radius: $border_rad_heavier !important;
     }
   }
+  &:focus-within{
+    .trix-button-row, trix-editor {
+      background-color: $focus_input_light;
+      border-color: $primary;
+    }
+  }
+  .trix-dialog.trix-dialog--link{
+      background-color: $white ;
+      border: 1px solid $border_light;
+      box-shadow: none;
+      margin-top: $space_sm;
+      margin-left: $space_sm;
+    }
 
   &.sticky {
     trix-toolbar {
@@ -87,7 +98,7 @@
       height: $space_lg;
       width: $space_lg;
       margin: $space_xs / 2;
-      border-radius: $space_xs / 4;
+      border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
       }
@@ -113,6 +124,12 @@
         }
       } 
     }
+
+    button.trix-button.trix-button--icon.trix-button{
+      &:hover{
+        background-color: rgba($border_light, 0.50);
+      }
+    }
   }
 
 
@@ -121,6 +138,7 @@
   // https://github.com/basecamp/trix/issues/464#issuecomment-564683997
   
   &[class*=dark] {
+    
     // Dark SVG Icon Styles
     .trix-button--icon-bold::before {
       background-image: url("data:image/svg+xml,%3Csvg width='11px' height='14px' viewBox='0 0 11 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-19.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M20.6,16.79 C21.565,16.115 22.25,15.025 22.25,14 C22.25,11.745 20.505,10 18.25,10 L12,10 L12,24 L19.04,24 C21.135,24 22.75,22.3 22.75,20.21 C22.75,18.69 21.885,17.395 20.6,16.79 Z M15,12.5 L18,12.5 C18.83,12.5 19.5,13.17 19.5,14 C19.5,14.83 18.83,15.5 18,15.5 L15,15.5 L15,12.5 L15,12.5 Z M18.5,21.5 L15,21.5 L15,18.5 L18.5,18.5 C19.33,18.5 20,19.17 20,20 C20,20.83 19.33,21.5 18.5,21.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");    
@@ -183,34 +201,62 @@
 
     // Dark Mode Placeholder 
     trix-editor:empty:not(:focus)::before {
-      color: $text_dk_light;
+      color: $focus_input_dark;
     }
 
     trix-editor {
-      @include pb_textarea_dark;
-      background: #2f3968;
+      background-color: rgba($white, 0.1);
+      border-color: rgba($white, 0.15);
       border-top-left-radius: 0;
       border-top-right-radius: 0;
+      color: $text_dk_default;
     }
 
     trix-toolbar {
       .trix-button-row {
-        background: #2f3968;
-        border: 1px solid rgba(255, 255, 255, 0.1) !important;
+        background-color: rgba($white, 0.1);
+        border: 1px solid rgba($white, 0.15);
+        border-bottom: 0;
+      }
+      .trix-active{
+        background: $active_dark !important;
+      }
+      button.trix-button.trix-button--icon.trix-button{
+        &:hover{
+          background-color: rgba($white, 0.15);
+        }
+        &:focus{
+          background-color: $active_dark !important;
+        }
+      }
+      &:focus{
+        border-color:$active_dark;
       }
-    }
 
-    trix-editor:focus {
-      @include pb_textarea_focus_dark;
+    }
+    
+    &:focus-within{
+      .trix-button-row, trix-editor {
+        background-color: rgba($white, 0.03);
+        border-color: $active_dark !important;
+      }
     }
 
     &.error {
-      > trix-editor {
+      trix-editor {
         border-color: $error_dark;
       }
     }
+
+    .trix-dialog.trix-dialog--link.trix-active{
+      background-color: tint($bg_dark, 10%) !important;
+      border: 1px solid rgba($white, 0.1);
+      box-shadow: none;
+      margin-top: $space_sm;
+      margin-left: $space_sm;
+    }
+    .trix-button--dialog{
+      color: $white;
+    }
   }
 }
-
-
- 

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx

@@ -5,7 +5,7 @@ import {
   RichTextEditor,
 } from '../../'
 
-const RichTextEditorPreview = () => {
+const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
   const [previewText, setPreviewText] = useState(<div />)
 
@@ -19,6 +19,7 @@ const RichTextEditorPreview = () => {
       <RichTextEditor
           id="content-preview-editor"
           onChange={handleChange}
+          {...props}
       />
       <If condition={showPreview}>
         <Card marginTop="md">

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -7,7 +7,9 @@
   margin-bottom: $space_sm;
   select {
     @include pb_textarea_light;
-    @include pb_title_4;
+    @include pb_body_light;
+    background: none;
+    background-color: $white;
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
@@ -22,6 +24,9 @@
         background-color: $focus_input_light;
       }
     }
+    &:focus{
+      border-color: $primary;
+    }
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
     }
@@ -61,9 +66,10 @@
   &.dark {
     select {
       @include pb_textarea_dark;
-      @include pb_title_4;
-      @include pb_title_dark;
-      background: $focus_input_dark;
+      @include pb_body_light_dark;
+      background: none;
+
+      background-color: rgba($white,.10);
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
       text-shadow: 0 0 0 $text_dk_default;
       padding-right: $space_xl;
@@ -72,9 +78,12 @@
       text-overflow: ellipsis;
       @media (hover:hover) {
         &:hover, &:active, &:focus {
-          background-color: tint($focus_input_dark, 5%);
+          background-color: rgba($white,.05);
         }
       }
+      &:focus{
+        border-color: $active_dark;
+      }
     }
     .pb_select_kit_caret {
       color: $white;

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx

@@ -4,7 +4,10 @@ import { Select } from '../../'
 const SelectCustomSelect = (props) => {
   return (
     <div>
-      <Select label="Favorite Holiday">
+      <Select
+          label="Favorite Holiday"
+          {...props}
+      >
         <select
             id="holiday"
             name="holiday"

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -111,7 +111,7 @@ $pb_selectable_card_border: 2px;
     }
 
     .separator {
-      background: $bg_dark;
+      background: rgba($white,.1);
     }
 
     &.error {

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx

@@ -1,158 +1,168 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Body,
   SelectableCard,
   Title,
 } from '../../'
 
-class SelectableCardInput extends React.Component {
-  state = {
+const SelectableCardInput = (props) => {
+  const [state, setState] = useState({
     firstCheckbox: true,
     secondCheckbox: true,
     thirdCheckbox: false,
     forthCheckbox: false,
     radioSelected: 'first',
-  }
+  })
 
-  handleSelect = (event) => {
-    this.setState({
+  const handleSelect = (event) => {
+    setState({ ...state,
       [event.target.name]: event.target.checked,
     })
   }
 
-  handleRadioSelect = (event) => {
-    this.setState({
+  const handleRadioSelect = (event) => {
+    setState({
+      ...state,
       radioSelected: event.target.value,
     })
   }
 
-  render() {
-    return (
-      <>
-        <Title
-            size={3}
-            text="What programming languages do you know?"
-        />
-
-        <br />
-
-        <SelectableCard
-            checked={this.state.firstCheckbox}
-            inputId="firstCheckbox"
-            name="firstCheckbox"
-            onChange={this.handleSelect}
-            value="firstCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'Ruby'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.secondCheckbox}
-            inputId="secondCheckbox"
-            name="secondCheckbox"
-            onChange={this.handleSelect}
-            value="secondCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'JavaScript'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.thirdCheckbox}
-            inputId="thirdCheckbox"
-            name="thirdCheckbox"
-            onChange={this.handleSelect}
-            value="thirdCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'TypeScript'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.fourthCheckbox}
-            inputId="fourthCheckbox"
-            name="fourthCheckbox"
-            onChange={this.handleSelect}
-            value="fourthCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'Swift'}</Body>
-        </SelectableCard>
-
-        <br />
-
-        <Title
-            size={3}
-            text="How likely are you to recommend Playbook to a friend?"
-        />
-
-        <br />
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'first'}
-            inputId="radio-1"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="first"
-            variant="displayInput"
-        >
-          <Body>{'5'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'second'}
-            inputId="radio-2"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="second"
-            variant="displayInput"
-        >
-          <Body>
-            {'4'}
-          </Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'third'}
-            inputId="radio-3"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="third"
-            variant="displayInput"
-        >
-          <Body>{'3'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'fourth'}
-            inputId="radio-4"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="fourth"
-            variant="displayInput"
-        >
-          <Body>{'2'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'fifth'}
-            inputId="radio-5"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="fifth"
-            variant="displayInput"
-        >
-          <Body>{'1'}</Body>
-        </SelectableCard>
-      </>
-    )
-  }
+  return (
+    <>
+      <Title
+          size={3}
+          text="What programming languages do you know?"
+          {...props}
+      />
+
+      <br />
+
+      <SelectableCard
+          checked={state.firstCheckbox}
+          inputId="firstCheckbox"
+          name="firstCheckbox"
+          onChange={handleSelect}
+          value="firstCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'Ruby'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.secondCheckbox}
+          inputId="secondCheckbox"
+          name="secondCheckbox"
+          onChange={handleSelect}
+          value="secondCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'JavaScript'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.thirdCheckbox}
+          inputId="thirdCheckbox"
+          name="thirdCheckbox"
+          onChange={handleSelect}
+          value="thirdCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'TypeScript'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.fourthCheckbox}
+          inputId="fourthCheckbox"
+          name="fourthCheckbox"
+          onChange={handleSelect}
+          value="fourthCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'Swift'}</Body>
+      </SelectableCard>
+
+      <br />
+
+      <Title
+          size={3}
+          text="How likely are you to recommend Playbook to a friend?"
+          {...props}
+      />
+
+      <br />
+
+      <SelectableCard
+          checked={state.radioSelected === 'first'}
+          inputId="radio-1"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="first"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'5'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'second'}
+          inputId="radio-2"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="second"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>
+          {'4'}
+        </Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'third'}
+          inputId="radio-3"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="third"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'3'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'fourth'}
+          inputId="radio-4"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="fourth"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'2'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'fifth'}
+          inputId="radio-5"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="fifth"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'1'}</Body>
+      </SelectableCard>
+    </>
+  )
 }
 
 export default SelectableCardInput

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

@@ -21,15 +21,20 @@
     input,
     .text_input {
       @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;
+      border-color: $primary;
       -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
       transition: background-color 5000s ease-in-out 0s;
     }
@@ -46,18 +51,25 @@
 
       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);
+        -webkit-box-shadow: none;
+
       }
     }
 

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

@@ -5,28 +5,31 @@
 
 [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;
   }
 
-  &.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 +47,29 @@
     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);
+      -webkit-box-shadow: none;
     }
-    &.error {
-      > textarea {
-        border-color: $error_dark;
-      }
+    textarea:hover,
+    .pb_text_area_kit:hover {
+      background-color: rgba($white, 0.15);
+    }
+  }
+
+  &.error {
+    [class*=pb_body_kit] {
+      margin-top: $space_xs / 2;
+    }
+    textarea {
+      border-color: $error;
     }
   }
 

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

@@ -4,9 +4,23 @@
 @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;
@@ -97,8 +111,12 @@
       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;
       input:focus {
@@ -109,7 +127,7 @@
       color: white;
     }
     .typeahead-kit-select__option--is-focused {
-      background-color: tint($focus_input_dark, 5%);
+      background-color: $active_dark;
     }
   
     [class^=pb_list_kit] {
@@ -121,7 +139,7 @@
       }
       @media (hover:hover) {
         &:hover {
-          background-color: tint($focus_input_dark, 5%);
+          background-color: rgba($white,.1);
         }
       }
     }

data/lib/playbook/version.rb

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

metadata

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