playbook_ui 8.4.0.alpha.dependencies.2 → 9.2.2.pre.alpha.margin

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -25,6 +25,7 @@ const StatValue = (props: StatValueProps) => {
       return (
         <Title
             size={1}
+            tag="span"
             text={`${value}`}
         />
       )
@@ -36,6 +37,7 @@ const StatValue = (props: StatValueProps) => {
       return (
         <Title
             size={3}
+            tag="span"
             text={unit}
         />
       )

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -6,10 +6,12 @@
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
       size: 1,
+      tag: "span",
       text: object.formatted_value } %>
       &nbsp;
       <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
+      tag: "span",
       size: 3,
       text: object.unit } %>
   </div>

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

@@ -4,9 +4,19 @@
 @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,15 +27,16 @@
       transition: opacity .15s ease-in-out;
     }
   }
-
   [class^=pb_text_input_kit] {
     .text_input_wrapper {
+      .text_input {
+        max-height: none;
+      }
       & > input:first-child {
         padding-right: $space_xl;
       }
     }
   }
-
   .pb_item_kit {
     padding: ($space_xs + 2) 0;
 
@@ -35,7 +46,6 @@
       }
     }
   }
-
   [class^=pb_list_kit] {
     max-height: 18em;
     overflow-y: auto;
@@ -49,17 +59,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 +76,6 @@
       &:focus-within {
         background-color: $active_light;
       }
-
       > button {
         background: none;
         color: $text_lt_default;
@@ -84,7 +90,6 @@
       }
     }
   }
-
   &[class*=dark] {
     .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
       color: $text_dk_light;
@@ -97,7 +102,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 +113,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 +128,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;

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/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.rb

@@ -6,8 +6,11 @@ require "webpacker"
 require "webpacker/react"
 require "view_component/engine"
 
-require "playbook/props"
 require "playbook/version"
+
+require "playbook/props"
+require "playbook/forms"
+require "playbook/pb_forms_helper"
 require "playbook/pb_kit_helper"
 require "playbook/pb_doc_helper"
 require "playbook/kit_base"

data/lib/playbook/forms.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require_relative "forms/builder"

data/lib/playbook/forms/builder.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder < ::ActionView::Helpers::FormBuilder
+      require_relative "builder/action_area"
+      require_relative "builder/checkbox_field"
+      require_relative "builder/collection_select_field"
+      require_relative "builder/date_picker_field"
+      require_relative "builder/form_field_builder"
+      require_relative "builder/select_field"
+      require_relative "builder/typeahead_field"
+
+      prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:search_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:telephone_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:text_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
+
+      def actions
+        context = @template.respond_to?(:view_context) ? @template.view_context : @template
+        context.content_tag :ol, class: "pb-form-actions" do
+          yield ActionArea.new(@template, submit_default_value)
+        end
+      end
+    end
+  end
+end