playbook_ui 14.7.0.pre.rc.0 → 14.7.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 656e9e66e2df384c9f3d9ad833d269551418aa20f70c3e8cb4b8b017ce1b2db1
-  data.tar.gz: 28c337d7bd834f0d8448010014dc8bbbab8162f02ee5afe95cd8caacc250aee6
+  metadata.gz: fc1f15170a37c4e0a95525dd16e0955d6170914fbd511a61c442f98d646f3476
+  data.tar.gz: 9d864a804ab29324b83d8d1ecbea235ce00b1e2ee00588939a72a446c649bc19
 SHA512:
-  metadata.gz: 6578a809aafafb0bbe3be5e2ad11701e14dc359fb34d4157153a1909fc6d06ca9b3ac9c98461a7205bd9f3565d51fa626b64500fcea13b55d79302c9e011f7b0
-  data.tar.gz: 598e947939ac29bdc05f48871d9a63d41295836bc44cf225a3374a1c72c6f92e13c9e684b26d26ba9d04095b50a126dac0d79f4e322c54470021efbe51b29ce5
+  metadata.gz: cd6c658e8df27a922ea5340ed4d9fe91708b07874481513ab5399e7c24203381ceed1f7cda25a1f82aa760d3ca31ac67f293378b499f13455161effd2b6ce28d
+  data.tar.gz: d099a2b025574b8e10e3f7719797cfd4ad3c91fd7fa432fbc7214798802ff3616b52ce371d3c0004931c36e51ec40afb9f6488de32634e3f329ebf2c8a478f60

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -49,7 +49,6 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 
-
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -108,7 +107,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
-  const dynamicInlineProps = globalInlineProps(props);
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -137,7 +135,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
-            style={dynamicInlineProps}
         >
           {subComponentTags('Header')}
           {
@@ -166,7 +163,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
-              style={dynamicInlineProps}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps, globalInlineProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,8 +91,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
-  const dynamicInlineProps = globalInlineProps(props); 
-
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -186,7 +184,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
-            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -195,7 +192,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
-              
               >
                 <Flex align="center"
                     orientation="column"

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -9,7 +9,7 @@
 
 @import "./scss_partials/dropdown_animation";
 
-.pb_dropdown {
+[class*="pb_dropdown"] {
   .dropdown_wrapper {
     [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
@@ -131,7 +131,7 @@
     }
   }
 
-  &.separators_hidden {
+  &[class*="separators_hidden"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
 
@@ -142,7 +142,7 @@
     }
   }
 
-  &.subtle {
+  &[class*="subtle"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
         
@@ -178,7 +178,7 @@
       }
     }
   
-    &.separators_hidden {
+    &[class*="separators_hidden"] {
       .dropdown_wrapper {
         .pb_dropdown_container {
           [class*="pb_dropdown_option"]:first-child {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -74,10 +74,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const htmlProps = buildHtmlProps(htmlOptions);
     const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
-        buildCss("pb_dropdown"),
+        buildCss("pb_dropdown", variant, separatorsClass),
         globalProps(props),
-        variant,
-        separatorsClass,
         className
     );
 

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -24,7 +24,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
+        generate_classname("pb_dropdown", variant, separators_class)
       end
 
     private
@@ -38,7 +38,7 @@ module Playbook
       end
 
       def separators_class
-        separators ? "" : "separators_hidden"
+        separators ? nil : "separators_hidden"
       end
 
       def options_with_blank

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -50,7 +50,7 @@ test('generated default kit and classname', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_dropdown')
+  expect(kit).toHaveClass('pb_dropdown_default')
 })
 
 test('generated default Trigger and Container when none passed in', () => {

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,7 +61,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const dynamicInlineProps = globalInlineProps(props)
 
 
   return (
@@ -84,7 +83,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
-        style={dynamicInlineProps}
         {...dataProps}
         {...htmlProps}
     >

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,20 +35,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
-  const dynamicInlineProps = globalInlineProps(props)
-  const combinedStyles = {
-    ...fixedStyle,
-    ...dynamicInlineProps
-  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
-
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={combinedStyles}
+        style={fixedStyle}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,5 +1,8 @@
-<%= pb_content_tag(:div, 
-  style: object.inline_styles
-) do %> 
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    style: object.style_value,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -20,13 +20,8 @@ module Playbook
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def inline_styles
-        styles = []
-        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
-        styles << "height: #{height};" if height.present?
-        styles << "min-height: #{min_height};" if min_height.present?
-        styles << "max-height: #{max_height};" if max_height.present?
-        styles.join(" ")
+      def style_value
+        "flex-basis: #{fixed_size};" if fixed_size.present?
       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' | 'maxHeight' | 'minHeight'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };

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

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

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

@@ -170,24 +170,12 @@ 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 & Height & MaxHeight & MinHeight;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -510,22 +498,7 @@ 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>
@@ -537,16 +510,6 @@ 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') {