playbook_ui_docs 14.5.0.pre.rc.15 → 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222

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_phone_number_input/docs/_phone_number_input_preferred_countries.md

@@ -1 +1 @@
-Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
+Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb

@@ -14,7 +14,7 @@
         trigger_element_id: "regular-popover-1",
         tooltip_id: "tooltip-1",
         offset: true,
-        position: "top"
+        position: "top",
     }) do %>
         I'm a popover. I can show content of any size.
     <% end %>