playbook_ui 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936 → 13.27.0.pre.alpha.PLAY11782916

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb

@@ -30,19 +30,14 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("flex") do %>
+                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
                 <% end %>
             <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md

@@ -1 +1 @@
-By default, dropdown option paddingX is set to `sm` and paddingY is set to `xs`, but this padding can be overridden using our global padding props. In this example we are setting the option padding to `sm` all around.
+By default, dropdown option padding is set to `xs`, but this padding can be overridden using our global prop spacing token. In this example we are increasing the option padding to `sm`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -51,10 +51,7 @@ const [selectedOption, setSelectedOption] = useState();
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon} 
@@ -68,7 +65,7 @@ const [selectedOption, setSelectedOption] = useState();
                     text={option.areaCode} 
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
       </Dropdown.Container>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb

@@ -32,20 +32,15 @@
     <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
                 <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
-              <% end %>
+                    <%= pb_rails("flex") do %>
+                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                <% end %>
             <% end %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -203,5 +203,5 @@ test('selected option on click', () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   option.click()
-  expect(option).toHaveClass('pb_dropdown_option_selected')
+  expect(option).toHaveClass('pb_dropdown_option_selected p_xs')
 })

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -10,12 +10,18 @@
         padding:"none", 
         cursor: "pointer"
         }) do %> 
-            <div class="dropdown_option_wrapper">
+            <%= pb_rails("flex", props: {
+                align: "center",
+                classname:"dropdown_option_wrapper",
+                justify: "between",
+                padding_x:"sm",
+                padding_y:"xxs",
+                }) do %>
                 <% if content.present? %>
                     <%= content.presence %>
                 <% else %>
                     <%= pb_rails("body", props: {text: object.option[:label]}) %>
                 <% end %>
-            </div>
+            <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb

@@ -10,8 +10,12 @@ module Playbook
         Hash(prop(:data)).merge("dropdown_option_label": option)
       end
 
+      def padding_helper
+        " p_xs"
+      end
+
       def classname
-        generate_classname("pb_dropdown_option", "list")
+        generate_classname("pb_dropdown_option", "list") + padding_helper
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -10,6 +10,7 @@ import { globalProps, GlobalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
+import Flex from "../../pb_flex/_flex";
 import Body from "../../pb_body/_body";
 import ListItem from "../../pb_list/_list_item";
 import { GenericObject } from "../../types";
@@ -38,6 +39,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
     id,
     key,
     option,
+    padding = "xs",
   } = props;
 
   const {
@@ -75,7 +77,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
-    globalProps(props),
+    globalProps(props, {padding}),
     className
   );
 
@@ -96,12 +98,20 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option.label}
           padding="none"
       >
+        <Flex
+            align="center"
+            className="dropdown_option_wrapper"
+            justify="between"
+            paddingX="sm"
+            paddingY="xxs"
+        >
           {children ? 
-          <div className="dropdown_option_wrapper">{children}</div> :
+              children : 
               <Body dark={dark} 
                   text={option.label} 
               />
           }
+        </Flex>
       </ListItem>
     </div>
   );

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml

@@ -14,12 +14,3 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
-
-  swift:
-  - fixed_confirmation_toast_default_swift: Default
-  - fixed_confirmation_toast_multi_line_swift: Multi Line
-  #- fixed_confirmation_toast_close_swift: Click to Close
-  #- fixed_confirmation_toast_positions_swift: Click to Show Positions
-  - fixed_confirmation_toast_children_swift: Children
-  #- fixed_confirmation_toast_dismiss_with_timer_swift: Timer
-  - fixed_confirmation_toast_props_swift: ""

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -16,7 +16,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -15,7 +15,7 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -19,7 +19,7 @@ export type IconSizes = "lg"
 | "10x"
 | ""
 
-type IconProps = {
+export type IconProps = {
   aria?: {[key: string]: string},
   border?: string,
   className?: string,

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -1,8 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
-        <%= content %>
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  aria: object.aria,
+  **combined_html_options) do %>
+    <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <% object.users.take(object.display_count).each do |user| %>
       <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -11,7 +11,7 @@ $top_bottom_radius: 0px;
   border-radius: $border_rad_light;
   border: $border_rad_lightest solid $border_light;
   background-color: $white;
-  padding: $space_xxs 0px !important;
+  padding: $space_xxs 0px;
   li {
     display: inline;
     > a, li > span {

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
      <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: {
         tag: "span",
         classname: "pb_person_first" }) { object.first_name } %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <% if object.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

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

@@ -102,9 +102,6 @@
     pointer-events: none;
   }
   &.inline {
-    svg {
-      right: 6px;
-    }
     @mixin active_arrow_style {
       svg {
         color: $primary !important;
@@ -133,7 +130,6 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;
@@ -217,9 +213,6 @@
     }
   }
   &.inline {
-    svg {
-      right: 6px;
-    }
     &:not(:hover) {
       svg {
         display: none;
@@ -240,7 +233,6 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;

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

@@ -7,7 +7,7 @@ import type { InputCallback } from '../types'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
+import Icon, { IconProps } from '../pb_icon/_icon'
 
 type SelectOption = {
   value: string,
@@ -25,6 +25,7 @@ type SelectProps = {
   disabled?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  iconProps?: IconProps,
   id?: string,
   includeBlank?: string,
   inline?: boolean,
@@ -36,6 +37,7 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
+  selectProps?: GlobalProps & { [key: string]: any },
   showArrow?: boolean,
   value?: string,
 } & GlobalProps
@@ -59,6 +61,7 @@ const Select = ({
   data = {},
   disabled = false,
   error,
+  iconProps,
   label,
   htmlOptions = {},
   inline = false,
@@ -67,6 +70,7 @@ const Select = ({
   onChange = () => undefined,
   options = [],
   required = false,
+  selectProps = {},
   showArrow = false,
   value,
   ...props
@@ -90,6 +94,12 @@ const Select = ({
     compactClass
   );
 
+  const selectClasses = classnames(
+    buildCss('pb_html_select'),
+    globalProps(selectProps), 
+    selectProps.className 
+  )
+
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
     if (children) return children
@@ -97,6 +107,7 @@ const Select = ({
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
+          className={selectClasses}
           disabled={disabled}
           id={name}
           multiple={multiple}
@@ -137,6 +148,7 @@ const Select = ({
               className="pb_select_kit_caret"
               fixedWidth
               icon="angle-down"
+              {...iconProps}
           />
           :
           null

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

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

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

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

@@ -76,25 +76,6 @@
         .text_input {
           border-color: $error_dark;
         }
-        [class*=pb_body_kit_negative] {
-          color: $error_dark;
-        }
-      }
-      .text_input_wrapper_add_on {
-        .add-on {
-          &-right {
-            .add-on-card {
-              border: 1px solid $error_dark;
-              border-left: 0;
-            }
-          }
-          &-left {
-            .add-on-card {
-              border: 1px solid $error_dark;
-              border-right: 0;
-            }
-          }
-        }
       }
     }
   }

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

data/app/pb_kits/playbook/pb_title_count/title_count.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,