playbook_ui 8.4.0.alpha.dependencies.2 → 9.0.0

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,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;

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

data/{app/pb_kits/playbook/pb_form/form_builder → lib/playbook/forms/builder}/action_area.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Playbook
-  module PbForm
-    module FormBuilder
+  module Forms
+    class Builder
       class ActionArea
         def initialize(view_context, submit_default_value)
           self.view_context = view_context

data/lib/playbook/forms/builder/checkbox_field.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def check_box(name, props: {}, **options)
+        label_text = @template.label(@object_name, name) if props[:label] == true
+        options[:required] = true if props[:required]
+        props[:margin_bottom] = "sm"
+        props[:form_spacing] = true
+
+        checked_value = options[:checked_value]
+        unchecked_value = options[:unchecked_value]
+        options.delete(:checked_value)
+        options.delete(:unchecked_value)
+
+        input = super(name, options, checked_value, unchecked_value)
+
+        if props[:label]
+          @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +
+            @template.pb_rails("checkbox", props: props) do
+              input
+            end
+        else
+          @template.pb_rails("checkbox", props: props) do
+            input
+          end
+        end
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder/collection_select_field.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {} )
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
+        options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
+        options[:prompt] = props[:blank_selection] || ""
+        html_options[:required] = "required" if props[:required]
+        input = super(name, collection, value_method, text_method, options, html_options)
+
+        @template.pb_rails("select", props: props) do
+          input
+        end
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder/date_picker_field.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def date_picker(name, props: {})
+        prefix = @object_name
+        html_attribute_name = "#{prefix}[#{name}]"
+        html_id = "#{prefix}_#{name}"
+
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
+        props[:label] = "Date Picker" if props[:label].nil?
+
+        props[:name] = html_attribute_name
+        props[:picker_id] = html_id
+
+        input = text_field(
+          name,
+          autocomplete: "off",
+          disabled: props[:disable_input],
+          data: props[:input_data],
+          aria: props[:input_aria],
+          props: {
+            error: props[:error],
+            label: props[:hide_label] ? nil : props[:label],
+            placeholder: props[:placeholder],
+            required: props[:required],
+          }
+        )
+
+        @template.pb_rails("date_picker", props: props) do
+          input
+        end
+      end
+    end
+  end
+end

data/{app/pb_kits/playbook/pb_form/form_builder → lib/playbook/forms/builder}/form_field_builder.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Playbook
-  module PbForm
-    module FormBuilder
+  module Forms
+    class Builder
       class FormFieldBuilder < Module
         def initialize(method_name, kit_name:)
           define_method method_name do |name, props: {}, **options, &block|

data/lib/playbook/forms/builder/select_field.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def select(name, choices = nil, options = {}, html_options = {}, props: {}, &block)
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
+        options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
+        options[:prompt] = props[:blank_selection] || ""
+        html_options[:required] = "required" if props[:required]
+        input = super(name, choices, options, html_options, &block)
+
+        @template.pb_rails("select", props: props) do
+          input
+        end
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder/typeahead_field.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def typeahead(name, _options = {}, _html_options = {}, props: {})
+        props[:name] = name
+        @template.pb_rails("typeahead", props: props)
+      end
+    end
+  end
+end

data/lib/playbook/pb_forms_helper.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFormsHelper
+    # Renders a pb form with ::Playbook::Forms::Builder, that can render
+    # Playbook kits in the most railsie way.
+    #
+    # I.e.:
+    #
+    #   pb_form_with model: @user do |f|
+    #     f.text_field :name
+    #   end
+    #
+    # The form can also validate the fields, and trigger the validation automatically:
+    #
+    # I.e.:
+    #
+    #   pb_form_with model: @user, validate: true do |f|
+    #     f.text_field :name, required: true
+    #   end
+    #
+    # @param data [Hash] hash of data attributes
+    # @param validate [Boolean] whether validation should be triggered or not
+    # @see [#form_with] for other options
+    def pb_form_with(data: {}, validate: false, **kwargs, &block)
+      data = data.merge("pb-form-validation" => validate)
+      classname = ["pb-form", kwargs[:class]].join(" ")
+      options = kwargs.merge(
+        class: classname,
+        data: data,
+        builder: ::Playbook::Forms::Builder
+      )
+
+      content_for(:pb_js, javascript_tag(<<~JS))
+        window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
+      JS
+
+      form_with(**options, &block)
+    end
+  end
+end