playbook_ui 8.3.0.pre.alpha1 → 9.1.0

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

@@ -22,14 +22,13 @@
   .pb_text_area_kit:focus {
     border-color: $primary;
     @include pb_textarea_focus_light;
+    @include transition_default;
   }
-
   textarea:hover,
   .pb_text_area_kit:hover {
     background-color: rgba($focus_input_light,$opacity_5);
   }
-
-
+  
   &.resize_both > textarea {
     resize: both;
     overflow: auto;
@@ -56,11 +55,6 @@
     textarea:focus, .pb_text_area_kit:focus {
       border-color: $active_dark;
       background-color: rgba($white, 0.025);
-      -webkit-box-shadow: none;
-    }
-    textarea:hover,
-    .pb_text_area_kit:hover {
-      background-color: rgba($white, 0.15);
     }
   }
 

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

@@ -14,13 +14,9 @@
       cursor: text;
     }
     .text_input_indicators,
-    .pb_list_kit{
+    .pb_list_kit {
       cursor: pointer;
     }
-
-
-      
-    
     .pb_typeahead_loading_indicator {
       position: absolute;
       width: min-content;
@@ -31,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;
 
@@ -49,7 +46,6 @@
       }
     }
   }
-
   [class^=pb_list_kit] {
     max-height: 18em;
     overflow-y: auto;
@@ -63,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 {
@@ -83,7 +76,6 @@
       &:focus-within {
         background-color: $active_light;
       }
-
       > button {
         background: none;
         color: $text_lt_default;
@@ -98,7 +90,6 @@
       }
     }
   }
-
   &[class*=dark] {
     .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
       color: $text_dk_light;
@@ -113,23 +104,21 @@
     .typeahead-kit-select__option:hover {
       background-color: $active_dark;
     }
-    .typeahead-kit-select__indicator:hover{
+    .typeahead-kit-select__indicator:hover {
       color: $white;
     }
- 
     .typeahead-kit-select__input {
       color: white;
       input:focus {
         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;
     }
-  
     [class^=pb_list_kit] {
       background-color: $bg_dark;
     }
@@ -144,7 +133,6 @@
       }
     }
   }
-
   &.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

data/lib/playbook/pb_kit_helper.rb

@@ -2,6 +2,8 @@
 
 module Playbook
   module PbKitHelper
+    include ::Playbook::PbFormsHelper
+
     def pb_rails(kit_name, props: {}, &block)
       kit = Playbook::KitResolver.resolve(kit_name.to_s)
       render_component kit.new(props, &block), &block

data/lib/playbook/props/base.rb

@@ -20,7 +20,7 @@ module Playbook
       end
 
       def validate!(input_value)
-        warn("#{kit} Kit: The prop '#{name}' is deprecated and will be removed in a future release!") if deprecated #TODO: add some color for pop
+        warn("#{kit} Kit: The prop '#{name}' is deprecated and will be removed in a future release!") if deprecated && input_value #TODO: add some color for pop
 
         raise(Playbook::Props::Error, "#{kit} prop '#{name}' of type #{inspect.class} is required and needs a value") if required && input_value.nil?