diff --git a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx index fd422d5776..cf5d654262 100644 --- a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx +++ b/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 + 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, 'children'> +} & ModifiedGlobalProps & Omit, '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; \ No newline at end of file +export default PbReactPopover; diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts index 8e1526c277..5774ddbe7b 100644 --- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts +++ b/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 } ` : '' diff --git a/playbook/lib/playbook/spacing.rb b/playbook/lib/playbook/spacing.rb index ab8820beb0..c78dabe262 100644 --- a/playbook/lib/playbook/spacing.rb +++ b/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