playbook_ui 14.5.0.pre.alpha.javascriptassets3939 → 14.5.0.pre.alpha.play1549upgradereactmodal4130

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb

@@ -0,0 +1,336 @@
+<%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      variant: "bubble",
+      size: "sm",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "sm",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+        size: "sm",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: { 
+      size: "sm",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+
+<%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+    <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "md",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "md",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+
+<%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "lg",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "lg",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>
+
+
+<%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        }
+      ]
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+      <%= pb_rails("multiple_users_stacked", props: {
+        size: "xl",
+        variant: "bubble",
+        users: [
+          {
+            name: "Patrick Welch",
+            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+          },
+          {
+            name: "Lucille Sanchez",
+            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+          },
+          {
+            name: "Beverly Reyes",
+            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+          },
+        ]
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
+    <%= pb_rails("multiple_users_stacked", props: {
+      size: "xl",
+      variant: "bubble",
+      users: [
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]
+    }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import Flex from '../../pb_flex/_flex'
+import Title from '../../pb_title/_title'
+import MultipleUsersStacked from '../_multiple_users_stacked'
+
+const MultipleUsersStackedSize = (props) => {
+  const sizes = [
+    { label: 'S', size: 'sm' },
+    { label: 'M', size: 'md' },
+    { label: 'L', size: 'lg' },
+    { label: 'XL', size: 'xl' },
+  ]
+
+  const usersList = [
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+      {
+        name: 'Beverly Reyes',
+        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+      },
+    ],
+    [
+      {
+        name: 'Patrick Welch',
+        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+      },
+      {
+        name: 'Lucille Sanchez',
+        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+      },
+      {
+        name: 'Beverly Reyes',
+        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+      },
+      {
+        name: 'Keith Craig',
+        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+      },
+      {
+        name: 'Alicia Cooper',
+        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+      },
+    ],
+  ]
+
+  return (
+    <>
+      {sizes.map(({ label, size }) => (
+        <Flex key={size}
+            orientation="column"
+        >
+          <Title paddingTop='sm' >{label}</Title>
+          <Flex>
+            {usersList.map((users, index) => (
+              <Flex key={index}
+                  paddingRight='sm'
+              >
+                <MultipleUsersStacked
+                    size={size}
+                    users={users}
+                    variant="bubble"
+                    {...props}
+                />
+              </Flex>
+            ))}
+          </Flex>
+          <br />
+        </Flex>
+      ))}
+    </>
+  )
+}
+
+export default MultipleUsersStackedSize

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

@@ -3,11 +3,13 @@ examples:
   rails:
   - multiple_users_stacked_default: Default
   - multiple_users_stacked_bubble: Bubble
+  - multiple_users_stacked_size: Sizes
 
 
   react:
   - multiple_users_stacked_default: Default
   - multiple_users_stacked_bubble: Bubble
+  - multiple_users_stacked_size: Sizes
 
   swift: 
   - multiple_users_stacked_default_swift: Default

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js

@@ -1,2 +1,3 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
 export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'
+export { default as MultipleUsersStackedSize } from './_multiple_users_stacked_size.jsx'

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

@@ -1,5 +1,15 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("avatar", props: object.users[0].merge({size: object.bubble ? "sm" : "xs", classname: "pb_multiple_users_stacked_item first_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}", dark: object.dark}) ) %>
+  <%= pb_rails(
+    "avatar",
+    props: object.users[0].merge({
+      classname: "pb_multiple_users_stacked_item first_item" +
+                 (object.double_bubble ? " double_bubble" : "") +
+                 (object.triple_bubble ? " triple_bubble" : "") +
+                 (object.quadruple_bubble ? " quadruple_bubble" : ""),
+      dark: object.dark,
+      size: 'xs'          
+    })
+  ) %>
 
   <% unless object.only_one %>
     <% if object.more_than_two && !object.bubble %>
@@ -8,14 +18,26 @@
         text: "+#{object.users.count - object.display_count}",
         variant: "primary",
         rounded: true,
-        classname: "pb_multiple_users_stacked_item second_item" }) %>
+        classname: "pb_multiple_users_stacked_item second_item"
+      }) %>
     <% elsif object.bubble %>
-      <% object.users.slice(1,3).each_with_index do |item, idx| %>
-        <%= pb_rails("avatar", props: item.merge({size: "xs", classname: "pb_multiple_users_stacked_item #{idx == 0 ? "second_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : idx == 1 ? "third_item#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : "fourth_item"}", dark: object.dark}) ) %>
+      <% object.users.slice(1, 3).each_with_index do |item, idx| %>
+        <%= pb_rails(
+          "avatar",
+          props: item.merge({
+            classname: object.bubble_classname(idx),
+            dark: object.dark
+          })
+        ) %>
       <% end %>
     <% else %>
-      <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item", dark: object.dark}) ) %>
+      <%= pb_rails(
+        "avatar",
+        props: object.users[1].merge({
+          classname: "pb_multiple_users_stacked_item second_item",
+          dark: object.dark
+        })
+      ) %>
     <% end %>
   <% end %>
-
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb

@@ -4,6 +4,9 @@ module Playbook
   module PbMultipleUsersStacked
     class MultipleUsersStacked < Playbook::KitBase
       prop :users, type: Playbook::Props::HashArray, required: true
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg xl],
+                  default: "sm"
 
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default bubble],
@@ -25,6 +28,10 @@ module Playbook
         variant == "bubble"
       end
 
+      def double_bubble
+        bubble && users.count === 2
+      end
+
       def triple_bubble
         bubble && users.count === 3
       end
@@ -33,8 +40,31 @@ module Playbook
         bubble && users.count > 3
       end
 
+      def size_class
+        "size_#{size}" if bubble
+      end
+
       def classname
-        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class)
+        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class, size_class)
+      end
+
+      def bubble_classname(index)
+        base_classname = "pb_multiple_users_stacked_item "
+
+        case index
+        when 0
+          base_classname += "second_item"
+          base_classname += " double_bubble" if double_bubble
+          base_classname += " triple_bubble" if triple_bubble
+          base_classname += " quadruple_bubble" if quadruple_bubble
+        when 1
+          base_classname += "third_item"
+          base_classname += " quadruple_bubble" if quadruple_bubble
+        else
+          base_classname += "fourth_item"
+        end
+
+        base_classname
       end
 
     private

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -136,12 +136,15 @@ const Typeahead = ({
     }
   }
 
+  const filteredProps: TypeaheadProps = {...props}
+  delete filteredProps.truncate
+
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
     `mb_${marginBottom}`,
-    globalProps(props),
+    globalProps(filteredProps),
     className
   )
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -16,7 +16,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor } = props.selectProps
+  const { dark, multiKit, pillColor, truncate } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -51,6 +51,7 @@ const MultiValue = (props: Props) => {
             name={label}
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
+            truncate={truncate}
             {...props}
         />
       }
@@ -64,6 +65,7 @@ const MultiValue = (props: Props) => {
             name=''
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
+            truncate={truncate}
             {...props}
         />
       }

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -65,10 +65,10 @@ module Playbook
       def typeahead_react_options
         base_options = {
           className: classname,
-          pillColor: pill_color,
           dark: dark,
           defaultValue: default_options,
           error: error,
+          htmlOptions: html_options,
           id: id,
           inline: inline,
           isMulti: is_multi,
@@ -77,8 +77,10 @@ module Playbook
           multiKit: multi_kit,
           name: name,
           options: options,
+          pillColor: pill_color,
           placeholder: placeholder,
           plusIcon: plus_icon,
+          truncate: truncate,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?