Fix legacy popover prop problem

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

@@ -21,6 +21,8 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import _uniqueId from 'lodash/uniqueId';
 
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
+
 type PbPopoverProps = {
   aria?: { [key: string]: string };
   className?: string;
@@ -32,7 +34,7 @@ type PbPopoverProps = {
   reference: PopperReference & any;
   show?: boolean;
   shouldClosePopover?: (arg0: boolean) => void;
-} & GlobalProps & Omit<PopperProps<any>, 'children'>
+} & ModifiedGlobalProps & Omit<PopperProps<any>, 'children'>
 & { children?: React.ReactChild[] | React.ReactChild }
 
 // Prop enabled default modifiers here
@@ -80,10 +82,13 @@ const Popover = (props: PbPopoverProps) => {
     targetId,
   } = props;
 
+  const items = globalProps(props).split(' '); // Split the string into an array of items
+  const filteredItems = items.filter(item => !item.includes('min_width')); // Filter out items with 'min_width'
+  const filteredGlobalProps = filteredItems.join(' '); // Join the filtered items back into a string
   const popoverSpacing =
-    globalProps(props).includes("dark") || !globalProps(props)
+    filteredGlobalProps.includes("dark") || !filteredGlobalProps
       ? "p_sm"
-      : globalProps(props);
+      : filteredGlobalProps 
   const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
@@ -100,7 +105,7 @@ const Popover = (props: PbPopoverProps) => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_popover_kit"),
-    globalProps(props),
+    filteredGlobalProps,
     className
   );
 
@@ -250,4 +255,4 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   );
 };
 
-export default PbReactPopover;
+export default PbReactPopover;

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

@@ -94,6 +94,10 @@ type MaxWidth = {
   maxWidth?: Sizes,
 }
 
+type MinWidth = {
+  minWidth?: Sizes,
+}
+
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -170,7 +174,7 @@ type ZIndex = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -320,6 +324,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += numberSpacing ? `ns_${numberSpacing} ` : ''
     return css
   },
+  minWidthProps: ({ minWidth }: MinWidth) => {
+    let css = ''
+    css += minWidth ? `min_width_${minWidth } ` : ''
+    return css
+  },
   maxWidthProps: ({ maxWidth }: MaxWidth) => {
     let css = ''
     css += maxWidth ? `max_width_${maxWidth } ` : ''

playbook/lib/playbook/spacing.rb

@@ -104,7 +104,6 @@ def min_width_props
 
       selected_minw_props.map do |k|
         width_value = send(k)
-        puts "min_width_value: ", width_value
         "min_width_#{width_value}" if min_width_values.include? width_value
       end.compact.join(" ")
     end
@@ -115,7 +114,6 @@ def max_width_props
 
       selected_mw_props.map do |k|
         width_value = send(k)
-        puts "max_width_value: ", width_value
         "max_width_#{width_value}" if max_width_values.include? width_value
       end.compact.join(" ")
     end