playbook_ui 14.5.0.pre.alpha.PLAY1601updatereactzoompanpinch4128 → 14.5.0.pre.alpha.PLAY15814040

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -14,7 +14,6 @@ type MultipleUsersStackedProps = {
   data?: { [key: string]: string },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  size?: "md" | "lg" | "sm" | "xl" 
   users: Array<{ [key: string]: string }>,
   variant: "default" | "bubble",
 }
@@ -28,17 +27,14 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     htmlOptions = {},
     id,
     users,
-    size = "sm",
     variant = "default",
   } = props
 
   const moreThanTwo = users.length > 2
   const onlyOne = users.length == 1
   const isBubble = variant === "bubble"
-  const doubleBubble = isBubble && users.length === 2
   const tripleBubble = isBubble && users.length === 3
   const quadrupleBubble = isBubble && users.length > 3
-  const sizeClass = isBubble ? `size_${size}` : ""  
   const displayCount = () => {
     return moreThanTwo ? 1 : users.length
   }
@@ -47,19 +43,17 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss(
     'pb_multiple_users_stacked_kit',
-    { single: onlyOne, bubble: isBubble }, sizeClass),
-    globalProps(props),
-    className)
+    { single: onlyOne, bubble: isBubble }), globalProps(props), className)
 
   const firstUser = () => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
             {...userObject}
-            className={`pb_multiple_users_stacked_item first_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
+            className={`pb_multiple_users_stacked_item first_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
             dark={dark}
             key={index}
-            size={isBubble ? "md" : "xs"}
+            size={isBubble ? "sm" : "xs"}
         />
       )
     })
@@ -71,10 +65,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className={`pb_multiple_users_stacked_item second_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
+              className={`pb_multiple_users_stacked_item second_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
               dark={dark}
               key={index}
-              size={isBubble ? "md" : "xs"}
+              size="xs"
           />
         )
       })
@@ -87,10 +81,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className={`pb_multiple_users_stacked_item third_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
+              className={`pb_multiple_users_stacked_item third_item${quadrupleBubble ? " quadruple_bubble" : ""}`}
               dark={dark}
               key={index}
-              size="md"
+              size="xs"
           />
         )
       })
@@ -103,10 +97,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         return (
           <Avatar
               {...userObject}
-              className="pb_multiple_users_stacked_item fourth_item quadruple_bubble"
+              className="pb_multiple_users_stacked_item fourth_item"
               dark={dark}
               key={index}
-              size="md"
+              size="xs"
           />
         )
       })

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

@@ -3,13 +3,11 @@ 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,3 +1,2 @@
 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,15 +1,5 @@
 <%= pb_content_tag do %>
-  <%= 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'          
-    })
-  ) %>
+  <%= 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}) ) %>
 
   <% unless object.only_one %>
     <% if object.more_than_two && !object.bubble %>
@@ -18,26 +8,14 @@
         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({
-            classname: object.bubble_classname(idx),
-            dark: object.dark
-          })
-        ) %>
+      <% 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}) ) %>
       <% end %>
     <% else %>
-      <%= pb_rails(
-        "avatar",
-        props: object.users[1].merge({
-          classname: "pb_multiple_users_stacked_item second_item",
-          dark: object.dark
-        })
-      ) %>
+      <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", 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,9 +4,6 @@ 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],
@@ -28,10 +25,6 @@ module Playbook
         variant == "bubble"
       end
 
-      def double_bubble
-        bubble && users.count === 2
-      end
-
       def triple_bubble
         bubble && users.count === 3
       end
@@ -40,31 +33,8 @@ 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, 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
+        generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class)
       end
 
     private

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -21,7 +21,7 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from 'lodash';
 
-type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -1,4 +1,7 @@
 export default [
+  "minHeight",
+  "maxHeight",
+  "height",
   "left",
   "bottom",
   "right",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -170,12 +170,24 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
+type Height = {
+  height?: string 
+}
+
+type MaxHeight = {
+  maxHeight?: string
+}
+
+type MinHeight = {
+  minHeight?: string
+}
+
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -498,7 +510,22 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
-  }
+  },
+
+}
+
+const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
+  heightProps: ({ height }: Height) => {
+    return height ? { height } : {}; 
+  },
+
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    return maxHeight ? { maxHeight } : {};
+  },
+
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    return minHeight ? { minHeight } : {}; 
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -510,6 +537,16 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
+// New function for inline styles
+export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
+  const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
+    const result = PROP_INLINE_CATEGORIES[key](props);
+    return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
+  }, {});
+
+  return styles; // Return the styles object directly
+}
+
 
 export const deprecatedProps = (): void => {
   // if (process.env.NODE_ENV === 'development') {