From eae58d1c4d188785498d5ffe0fa1eaa282a20526 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Tue, 1 Oct 2024 11:32:54 -0400
Subject: [PATCH 01/15] Initial Height Work

---
 .../app/pb_kits/playbook/pb_card/_card.tsx    |  6 +++++-
 .../playbook/pb_card/docs/_card_light.jsx     |  8 +++++++-
 .../pb_kits/playbook/pb_dialog/_dialog.tsx    |  5 ++++-
 .../pb_dialog/docs/_dialog_default.jsx        |  3 +++
 .../pb_form/docs/_form_form_with.html.erb     |  2 +-
 .../pb_kits/playbook/utilities/globalProps.ts | 19 ++++++++++++++++++-
 6 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/_card.tsx b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
index 149130d8b2..5a30a22724 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card.tsx
+++ b/playbook/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 } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -49,6 +49,7 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 
+
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -107,6 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
+  const inlineStyles = globalInlineProps(props);
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -135,6 +137,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
+            style={inlineStyles}
         >
           {subComponentTags('Header')}
           {
@@ -163,6 +166,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
+              style={inlineStyles}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
index 5b2b94c9dc..d0bde44106 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
@@ -4,7 +4,13 @@ import Card from '../_card'
 const CardLight = (props) => {
   return (
     <div>
-      <Card {...props}>{'Card content'}</Card>
+      <Card borderNone
+          height="100vh"
+          margin="xl"
+          position="absolute"
+          top={{value: 'xs', inset: 'true'}}
+          {...props}
+      >{'Card content'}</Card>
     </div>
   )
 }
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
index e25eb702ae..22654a5169 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
+++ b/playbook/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 } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,6 +91,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
+  const inlineStyles = globalInlineProps(props); 
+
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -192,6 +194,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
+                  style={inlineStyles} 
               >
                 <Flex align="center"
                     orientation="column"
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
index d76930fb9a..1e9552f895 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
+++ b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
@@ -12,6 +12,7 @@ const DialogDefault = () => {
       <Dialog
           cancelButton="Cancel Button"
           confirmButton="Okay"
+          height="30%"
           onCancel={close}
           onClose={close}
           onConfirm={close}
@@ -25,3 +26,5 @@ const DialogDefault = () => {
 }
 
 export default DialogDefault
+
+
diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
index 2e81609bcc..6bcabbb242 100644
--- a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
@@ -22,7 +22,7 @@
 
 %>
 
-<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
+<%= pb_form_with(url: rails_pg_render_path, method: :post, local: false, data: { remote: true, disable_with: "Loading..." }) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
index 9dd67b7223..9bc2382ec4 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts
+++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -170,12 +170,16 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
+type Height = {
+  height?: string | number;
+}
+
 // 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;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -498,6 +502,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
+  },
+  heightProps: ({ height }: Height) => {
+    return height ? { height } : {}; // Return height as an object
   }
 }
 
@@ -510,6 +517,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_CATEGORIES).reduce((acc, key) => {
+    const result = PROP_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') {

From bd1cad23c98a7d302222bcec1358bb99d47c2818 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Thu, 3 Oct 2024 12:59:13 -0400
Subject: [PATCH 02/15] Typed Global Props Correctly

---
 .../playbook/pb_card/docs/_card_light.jsx     |  4 +--
 .../pb_kits/playbook/utilities/globalProps.ts | 32 +++++++++++++++----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
index d0bde44106..624bb8490f 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
@@ -4,11 +4,9 @@ import Card from '../_card'
 const CardLight = (props) => {
   return (
     <div>
-      <Card borderNone
+      <Card 
           height="100vh"
           margin="xl"
-          position="absolute"
-          top={{value: 'xs', inset: 'true'}}
           {...props}
       >{'Card content'}</Card>
     </div>
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
index 9bc2382ec4..06e57dfe84 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts
+++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -171,7 +171,15 @@ type ZIndex = {
 } | ZIndexResponsiveType
 
 type Height = {
-  height?: string | number;
+  height?: string | number
+}
+
+type MaxHeight = {
+  maxHeight?: string | number
+}
+
+type MinHeight = {
+  minHeight?: string | number
 }
 
 // keep this as the last type definition
@@ -179,7 +187,7 @@ 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;
+  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)
@@ -503,9 +511,21 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
   },
+
+}
+
+const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
   heightProps: ({ height }: Height) => {
-    return height ? { height } : {}; // Return height as an object
-  }
+    return height ? { height } : {}; 
+  },
+
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    return maxHeight ? { maxHeight } : {};
+  },
+
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    return minHeight ? { minHeight } : {}; 
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -519,8 +539,8 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
 
 // New function for inline styles
 export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
-  const styles = Object.keys(PROP_CATEGORIES).reduce((acc, key) => {
-    const result = PROP_CATEGORIES[key](props);
+  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
   }, {});
 

From 1a2ead5924049c52497c5591ee60fa3f4fecea14 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Fri, 4 Oct 2024 14:45:12 -0400
Subject: [PATCH 03/15] Fixed Eslint Errors

---
 playbook/app/pb_kits/playbook/pb_card/card.rb     |  1 +
 .../playbook/pb_card/docs/_card_light.html.erb    |  1 +
 .../pb_kits/playbook/pb_card/docs/_card_light.jsx |  2 +-
 playbook/app/pb_kits/playbook/pb_flex/_flex.tsx   |  4 +++-
 .../app/pb_kits/playbook/pb_flex/_flex_item.tsx   | 10 ++++++++--
 .../playbook/utilities/globalPropNames.mjs        |  3 +++
 .../app/pb_kits/playbook/utilities/globalProps.ts |  2 +-
 playbook/lib/playbook/kit_base.rb                 | 15 +++++++++++++++
 8 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/card.rb b/playbook/app/pb_kits/playbook/pb_card/card.rb
index a7c2dd2bd1..395b07716f 100755
--- a/playbook/app/pb_kits/playbook/pb_card/card.rb
+++ b/playbook/app/pb_kits/playbook/pb_card/card.rb
@@ -17,6 +17,7 @@ class Card < Playbook::KitBase
       prop :background, type: Playbook::Props::Enum,
                         values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
+      prop :height, type: Playbook::Props::String
 
       def classname
         generate_classname("pb_card_kit",
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
index 0e6cc6d393..5a2df6e241 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
@@ -1,4 +1,5 @@
 <%= pb_rails("card", props: {
+  height: "143px",
 })  do %>
   Card content
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
index 624bb8490f..e3e707b050 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
@@ -5,8 +5,8 @@ const CardLight = (props) => {
   return (
     <div>
       <Card 
-          height="100vh"
           margin="xl"
+          minHeight="100px"
           {...props}
       >{'Card content'}</Card>
     </div>
diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx b/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
index e683f5407a..9bcacdc416 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
+++ b/playbook/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 } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,6 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const inlineStyles = globalInlineProps(props)
 
 
   return (
@@ -83,6 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
+        style={inlineStyles}
         {...dataProps}
         {...htmlProps}
     >
diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx b/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
index 6c61d55cb0..c270ca978d 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
+++ b/playbook/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 } from '../utilities/globalProps'
+import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,14 +35,20 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
+  const inlineStyles = globalInlineProps(props)
+  const combinedStyles = {
+    ...fixedStyle,
+    ...inlineStyles
+  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={fixedStyle}
+        style={combinedStyles}
     >
       {children}
     </div>
diff --git a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
index d41b00be0b..a9f5db1490 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
+++ b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs
@@ -1,4 +1,7 @@
 export default [
+  "minHeight",
+  "maxHeight",
+  "height",
   "left",
   "bottom",
   "right",
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
index 06e57dfe84..df973e815e 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts
+++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -171,7 +171,7 @@ type ZIndex = {
 } | ZIndexResponsiveType
 
 type Height = {
-  height?: string | number
+  height?: string | number 
 }
 
 type MaxHeight = {
diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb
index 470a296929..8a53a1e333 100644
--- a/playbook/lib/playbook/kit_base.rb
+++ b/playbook/lib/playbook/kit_base.rb
@@ -73,6 +73,8 @@ class KitBase < ViewComponent::Base
     prop :aria, type: Playbook::Props::HashProp, default: {}
     prop :html_options, type: Playbook::Props::HashProp, default: {}
     prop :children, type: Playbook::Props::Proc
+    prop :style, type: Playbook::Props::HashProp, default: {}
+    prop :height
 
     def object
       self
@@ -82,6 +84,14 @@ def combined_html_options
       default_html_options.merge(html_options.deep_merge(data_attributes))
     end
 
+    # Method to generate inline styles based on kit properties
+    def global_inline_props
+      {
+        height: height,
+        # Add other global props here
+      }.compact
+    end
+
     # rubocop:disable Layout/CommentIndentation
     # pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
     # The pb_content_tag generates HTML content tags for rails kits with flexible options.
@@ -118,6 +128,7 @@ def default_options
         data: data,
         class: classname,
         aria: aria,
+        style: inline_styles,
       }
     end
 
@@ -131,5 +142,9 @@ def data_attributes
         aria: aria,
       }.transform_keys { |key| key.to_s.tr("_", "-").to_sym }
     end
+
+    def inline_styles
+      global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" }.join(" ")
+    end
   end
 end

From 4ac503c5012d07c6027a99319cc8baa5e880fd96 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Mon, 14 Oct 2024 13:13:27 -0400
Subject: [PATCH 04/15] Working Rails Version

---
 playbook/app/pb_kits/playbook/pb_card/card.rb                   | 1 -
 playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb | 2 +-
 .../app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb  | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/card.rb b/playbook/app/pb_kits/playbook/pb_card/card.rb
index 395b07716f..a7c2dd2bd1 100755
--- a/playbook/app/pb_kits/playbook/pb_card/card.rb
+++ b/playbook/app/pb_kits/playbook/pb_card/card.rb
@@ -17,7 +17,6 @@ class Card < Playbook::KitBase
       prop :background, type: Playbook::Props::Enum,
                         values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
-      prop :height, type: Playbook::Props::String
 
       def classname
         generate_classname("pb_card_kit",
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
index 5a2df6e241..df200f5aae 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
@@ -1,5 +1,5 @@
 <%= pb_rails("card", props: {
-  height: "143px",
+  height: "170px",
 })  do %>
   Card content
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
index 6bcabbb242..2e81609bcc 100644
--- a/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
@@ -22,7 +22,7 @@
 
 %>
 
-<%= pb_form_with(url: rails_pg_render_path, method: :post, local: false, data: { remote: true, disable_with: "Loading..." }) do |form| %>
+<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>

From 95a66a13d16633fc6a66abc8d21381c1b4bb7441 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Mon, 14 Oct 2024 13:47:54 -0400
Subject: [PATCH 05/15] Added Max and Min

---
 playbook/lib/playbook/kit_base.rb | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb
index 8a53a1e333..02373c90f3 100644
--- a/playbook/lib/playbook/kit_base.rb
+++ b/playbook/lib/playbook/kit_base.rb
@@ -75,6 +75,8 @@ class KitBase < ViewComponent::Base
     prop :children, type: Playbook::Props::Proc
     prop :style, type: Playbook::Props::HashProp, default: {}
     prop :height
+    prop :min_height
+    prop :max_height
 
     def object
       self
@@ -84,11 +86,11 @@ def combined_html_options
       default_html_options.merge(html_options.deep_merge(data_attributes))
     end
 
-    # Method to generate inline styles based on kit properties
     def global_inline_props
       {
         height: height,
-        # Add other global props here
+        min_height: min_height,
+        max_height: max_height,
       }.compact
     end
 
@@ -136,7 +138,7 @@ def default_html_options
       {}
     end
 
-    def data_attributes
+    def data_attributesx
       {
         data: data,
         aria: aria,

From a7bc48ef4e46f4d675e842305ddb1832b9749754 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Mon, 14 Oct 2024 14:20:34 -0400
Subject: [PATCH 06/15] Height Work Finished for Card, Flex, FlexItem, Dialog

---
 playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb | 9 +++------
 playbook/app/pb_kits/playbook/pb_flex/flex_item.rb       | 7 +++++--
 playbook/lib/playbook/kit_base.rb                        | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb b/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
index 240e1ce109..96c6c7af2f 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_flex/flex_item.html.erb
@@ -1,8 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    style: object.style_value,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, 
+  style: object.inline_styles
+) do %> 
   <%= content.presence %>
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb b/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
index dc99471511..cdcf0f64ed 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
+++ b/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
@@ -20,8 +20,11 @@ def classname
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def style_value
-        "flex-basis: #{fixed_size};" if fixed_size.present?
+      def inline_styles
+        styles = []
+        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
+        styles << "height: #{height};" if height.present?
+        styles.join(" ")
       end
 
     private
diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb
index 02373c90f3..c08cc7f958 100644
--- a/playbook/lib/playbook/kit_base.rb
+++ b/playbook/lib/playbook/kit_base.rb
@@ -138,7 +138,7 @@ def default_html_options
       {}
     end
 
-    def data_attributesx
+    def data_attributes
       {
         data: data,
         aria: aria,

From 1c5b2bd482d4ec7c0598000f26469e9ab77d3009 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Mon, 14 Oct 2024 14:34:42 -0400
Subject: [PATCH 07/15] Fixed Typescript Error

---
 playbook/app/pb_kits/playbook/pb_popover/_popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
index d77febae64..a302194c67 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
+++ b/playbook/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 };

From 8c948c58e86a23e78f44ecb6562a9f03a818d63c Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Mon, 14 Oct 2024 14:39:39 -0400
Subject: [PATCH 08/15] Reverting Doc Examples from Testing

---
 .../app/pb_kits/playbook/pb_card/docs/_card_light.html.erb  | 1 -
 playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx  | 6 +-----
 .../app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx | 3 ---
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
index df200f5aae..0e6cc6d393 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
@@ -1,5 +1,4 @@
 <%= pb_rails("card", props: {
-  height: "170px",
 })  do %>
   Card content
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
index e3e707b050..5b2b94c9dc 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
@@ -4,11 +4,7 @@ import Card from '../_card'
 const CardLight = (props) => {
   return (
     <div>
-      <Card 
-          margin="xl"
-          minHeight="100px"
-          {...props}
-      >{'Card content'}</Card>
+      <Card {...props}>{'Card content'}</Card>
     </div>
   )
 }
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
index 1e9552f895..d76930fb9a 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
+++ b/playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
@@ -12,7 +12,6 @@ const DialogDefault = () => {
       <Dialog
           cancelButton="Cancel Button"
           confirmButton="Okay"
-          height="30%"
           onCancel={close}
           onClose={close}
           onConfirm={close}
@@ -26,5 +25,3 @@ const DialogDefault = () => {
 }
 
 export default DialogDefault
-
-

From 1b260eb6ff6143ff35a6b67540fe530b77bbb28d Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Mon, 14 Oct 2024 15:37:35 -0400
Subject: [PATCH 09/15] Fixing Dialog TSX and failed jests

---
 playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx    | 3 ++-
 playbook/app/pb_kits/playbook/utilities/globalProps.ts | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
index 22654a5169..c82331a291 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
@@ -186,6 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
+            style={{ content: inlineStyles }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -194,7 +195,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
-                  style={inlineStyles} 
+              
               >
                 <Flex align="center"
                     orientation="column"
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
index df973e815e..b4b093fa5b 100644
--- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts
+++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -171,15 +171,15 @@ type ZIndex = {
 } | ZIndexResponsiveType
 
 type Height = {
-  height?: string | number 
+  height?: string 
 }
 
 type MaxHeight = {
-  maxHeight?: string | number
+  maxHeight?: string
 }
 
 type MinHeight = {
-  minHeight?: string | number
+  minHeight?: string
 }
 
 // keep this as the last type definition

From baaec0dbc13b7f1203872ed790962d58fa584f11 Mon Sep 17 00:00:00 2001
From: Jasper Furniss <jasper.furniss@powerhrg.com>
Date: Tue, 15 Oct 2024 09:33:26 -0400
Subject: [PATCH 10/15] Update
 playbook/app/pb_kits/playbook/pb_flex/flex_item.rb

---
 playbook/app/pb_kits/playbook/pb_flex/flex_item.rb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb b/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
index cdcf0f64ed..caa11d6c9f 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
+++ b/playbook/app/pb_kits/playbook/pb_flex/flex_item.rb
@@ -24,6 +24,8 @@ 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(" ")
       end
 

From 842e91f97a7c34028cfd75646c666fcaa52f8b6b Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Tue, 22 Oct 2024 09:00:37 -0400
Subject: [PATCH 11/15] Fixed Rubocop Errors

---
 playbook/app/pb_kits/playbook/pb_card/_card.tsx      |  6 +++---
 playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx  |  4 ++--
 playbook/app/pb_kits/playbook/pb_flex/_flex.tsx      |  4 ++--
 playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx |  4 ++--
 playbook/lib/playbook/kit_base.rb                    | 11 +++++++----
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/_card.tsx b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
index 5a30a22724..4c0a4eb6f5 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card.tsx
+++ b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
-  const inlineStyles = globalInlineProps(props);
+  const dynamicInlineProps = globalInlineProps(props);
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -137,7 +137,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
-            style={inlineStyles}
+            style={dynamicInlineProps}
         >
           {subComponentTags('Header')}
           {
@@ -166,7 +166,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
-              style={inlineStyles}
+              style={dynamicInlineProps}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}
diff --git a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
index c82331a291..32e5443019 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
+++ b/playbook/app/pb_kits/playbook/pb_dialog/_dialog.tsx
@@ -91,7 +91,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
-  const inlineStyles = globalInlineProps(props); 
+  const dynamicInlineProps = globalInlineProps(props); 
 
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
@@ -186,7 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
-            style={{ content: inlineStyles }}
+            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx b/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
index 9bcacdc416..d5de3e6067 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
+++ b/playbook/app/pb_kits/playbook/pb_flex/_flex.tsx
@@ -61,7 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const inlineStyles = globalInlineProps(props)
+  const dynamicInlineProps = globalInlineProps(props)
 
 
   return (
@@ -84,7 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
-        style={inlineStyles}
+        style={dynamicInlineProps}
         {...dataProps}
         {...htmlProps}
     >
diff --git a/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx b/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
index c270ca978d..b8a27e9704 100644
--- a/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
+++ b/playbook/app/pb_kits/playbook/pb_flex/_flex_item.tsx
@@ -35,10 +35,10 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
-  const inlineStyles = globalInlineProps(props)
+  const dynamicInlineProps = globalInlineProps(props)
   const combinedStyles = {
     ...fixedStyle,
-    ...inlineStyles
+    ...dynamicInlineProps
   }
 
   const htmlProps = buildHtmlProps(htmlOptions)
diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb
index c08cc7f958..8920188997 100644
--- a/playbook/lib/playbook/kit_base.rb
+++ b/playbook/lib/playbook/kit_base.rb
@@ -125,13 +125,15 @@ def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}
   private
 
     def default_options
-      {
+      options = {
         id: id,
         data: data,
         class: classname,
         aria: aria,
-        style: inline_styles,
       }
+      inline_styles = dynamic_inline_props
+      options[:style] = inline_styles if inline_styles.present?
+      options
     end
 
     def default_html_options
@@ -145,8 +147,9 @@ def data_attributes
       }.transform_keys { |key| key.to_s.tr("_", "-").to_sym }
     end
 
-    def inline_styles
-      global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" }.join(" ")
+    def dynamic_inline_props
+      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" if value.present? }.compact
+      styles.join(" ").presence
     end
   end
 end

From 243ab443c7d728e3d59f505dfe36f3f036a51366 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Thu, 24 Oct 2024 15:57:11 -0400
Subject: [PATCH 12/15] Fixed Height/HtmlOptions Conflict

---
 .../app/pb_kits/playbook/pb_card/_card.tsx    | 14 ++++++++-----
 .../playbook/pb_card/docs/_card_light.jsx     | 20 ++++++++++++++++---
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/_card.tsx b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
index 4c0a4eb6f5..5de39c9d61 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card.tsx
+++ b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
@@ -109,6 +109,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   // coerce to array
   const cardChildren = React.Children.toArray(children)
   const dynamicInlineProps = globalInlineProps(props);
+  const { style: htmlStyle, ...restHtmlProps } = htmlProps;
+  const mergedStyles = { ...htmlStyle, ...dynamicInlineProps };
+
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -124,7 +127,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-
+  
   return (
     <>
     {
@@ -132,12 +135,13 @@ const Card = (props: CardPropTypes): React.ReactElement => {
         <Draggable.Item dragId={dragId} 
             key={dragId}
         >
+          <h1>{htmlProps}</h1>
         <Tag
             {...ariaProps}
             {...dataProps}
-            {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
-            style={dynamicInlineProps}
+            {...restHtmlProps}
+            style={mergedStyles} 
         >
           {subComponentTags('Header')}
           {
@@ -164,9 +168,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
           <Tag
               {...ariaProps}
               {...dataProps}
-              {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
-              style={dynamicInlineProps}
+              {...restHtmlProps}
+              style={mergedStyles} 
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
index 5b2b94c9dc..f47d2ad754 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
@@ -1,12 +1,26 @@
-import React from 'react'
-import Card from '../_card'
+import React from "react"
+import Card from "../_card"
 
 const CardLight = (props) => {
   return (
     <div>
-      <Card {...props}>{'Card content'}</Card>
+      <Card
+          height="100%"
+          htmlOptions={{
+            style: {
+              width: "100%",
+              backgroundColor: "blue",
+            },
+            tabIndex: 7
+          }}
+          minHeight="189px"
+          {...props}
+      >
+        {"HELLO WORLD!!!"}
+      </Card>
     </div>
   )
 }
 
 export default CardLight
+

From 2f65ed36b087f276b5b9bb16f3d366f276a0eaf0 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Mon, 4 Nov 2024 14:37:21 -0500
Subject: [PATCH 13/15] Last Rubocop Error

---
 .../pb_card/docs/_card_light.html.erb         | 38 ++++++++++-
 playbook/lib/playbook/kit_base.rb             | 65 ++++++++++---------
 2 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
index 0e6cc6d393..5cfbf1981d 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
@@ -1,4 +1,40 @@
 <%= pb_rails("card", props: {
-})  do %>
+  html_options: {
+    class: "pb-card-light"
+  },
+  height: "600px"
+}) do %>
   Card content
 <% end %>
+
+<%# Example showing html_options style also works %>
+<%= pb_rails("card", props: {
+  html_options: {
+    class: "pb-card-light",
+    style: { height: "422px", background_color: "orange" }
+  }
+}) do %>
+  Card content with html_options style
+<% end %>
+
+
+<%# Example showing just html_options %>
+<%= pb_rails("card", props: {
+  html_options: {
+    width: "60px",
+  }
+}) do %>
+  Card content with just html_options style
+<% end %>
+
+<%= pb_rails("card", props: {
+  height: "100%",
+  html_options: {
+    style: { width: "100%", background_color: "blue" },
+    tabindex: 7
+  },
+  min_height: "189px"
+}) do %>
+  HELLO WORLD!!!
+<% end %>
+
diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb
index 8920188997..2b398e02d6 100644
--- a/playbook/lib/playbook/kit_base.rb
+++ b/playbook/lib/playbook/kit_base.rb
@@ -82,8 +82,35 @@ def object
       self
     end
 
+    def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape: true, &block)
+      combined_options = options
+                         .merge(combined_html_options)
+                         .merge(default_options.merge(content_or_options_with_block))
+      content_tag(name, combined_options, options, escape, &block)
+    end
+
     def combined_html_options
-      default_html_options.merge(html_options.deep_merge(data_attributes))
+      merged = default_html_options.dup
+
+      html_options.each do |key, value|
+        if key == :style && value.is_a?(Hash)
+          # Convert style hash to CSS string
+          merged[:style] = value.map { |k, v| "#{k.to_s.gsub('_', '-')}: #{v}" }.join("; ")
+        else
+          merged[key] = value
+        end
+      end
+
+      inline_styles = dynamic_inline_props
+      if inline_styles.present?
+        merged[:style] = if merged[:style].present?
+                           "#{merged[:style]}; #{inline_styles}"
+                         else
+                           inline_styles
+                         end
+      end
+
+      merged.deep_merge(data_attributes)
     end
 
     def global_inline_props
@@ -94,34 +121,6 @@ def global_inline_props
       }.compact
     end
 
-    # rubocop:disable Layout/CommentIndentation
-    # pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
-    # The pb_content_tag generates HTML content tags for rails kits with flexible options.
-    # Modify a generated kit.html.erb file accordingly (the default_options listed below no longer need to be explictly outlined in that file, only modifications).
-    # name - the first argument is for HTML tag. The default is :div.
-    # content_or_options_with_block - additional content or options for the tag (i.e., the customizations a dev adds to kit.html.erb).
-    # options - Within combined_options, the empty options hash allows for customizations to
-        # merge with the default_options and combined_html_options.
-    # escape - set to true, this allows for HTML-escape.
-    # block - an optional block for content inside the tag.
-    # The return is a HTML tag that includes any provided customizations. If nothing is specified in kit.html.erb, the default shape is:
-        # :div,
-        # aria: object.aria,
-        # class: object.classname,
-        # data: object.data,
-        # id: object.id,
-        # **combined_html_options
-    # rubocop:enable Layout/CommentIndentation
-
-    # rubocop:disable Style/OptionalBooleanParameter
-    def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape = true, &block)
-      combined_options = options
-                         .merge(combined_html_options)
-                         .merge(default_options.merge(content_or_options_with_block))
-      content_tag(name, combined_options, options, escape, &block)
-    end
-    # rubocop:enable Style/OptionalBooleanParameter
-
   private
 
     def default_options
@@ -131,8 +130,10 @@ def default_options
         class: classname,
         aria: aria,
       }
+
       inline_styles = dynamic_inline_props
-      options[:style] = inline_styles if inline_styles.present?
+      options[:style] = inline_styles if inline_styles.present? && !html_options.key?(:style)
+
       options
     end
 
@@ -148,8 +149,8 @@ def data_attributes
     end
 
     def dynamic_inline_props
-      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" if value.present? }.compact
-      styles.join(" ").presence
+      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value}" if value.present? }.compact
+      styles.join("; ").presence
     end
   end
 end

From 7c32c55a73da1b0525cea51c41eafe545bbce577 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Tue, 5 Nov 2024 15:02:51 -0500
Subject: [PATCH 14/15] Working Examples

---
 .../pb_card/docs/_card_light.html.erb         | 38 +------------------
 .../playbook/pb_card/docs/_card_light.jsx     | 20 ++--------
 playbook/lib/playbook/kit_base.rb             | 33 ++++++++++++----
 3 files changed, 29 insertions(+), 62 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
index 5cfbf1981d..0e6cc6d393 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
@@ -1,40 +1,4 @@
 <%= pb_rails("card", props: {
-  html_options: {
-    class: "pb-card-light"
-  },
-  height: "600px"
-}) do %>
+})  do %>
   Card content
 <% end %>
-
-<%# Example showing html_options style also works %>
-<%= pb_rails("card", props: {
-  html_options: {
-    class: "pb-card-light",
-    style: { height: "422px", background_color: "orange" }
-  }
-}) do %>
-  Card content with html_options style
-<% end %>
-
-
-<%# Example showing just html_options %>
-<%= pb_rails("card", props: {
-  html_options: {
-    width: "60px",
-  }
-}) do %>
-  Card content with just html_options style
-<% end %>
-
-<%= pb_rails("card", props: {
-  height: "100%",
-  html_options: {
-    style: { width: "100%", background_color: "blue" },
-    tabindex: 7
-  },
-  min_height: "189px"
-}) do %>
-  HELLO WORLD!!!
-<% end %>
-
diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
index f47d2ad754..5b2b94c9dc 100755
--- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
+++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light.jsx
@@ -1,26 +1,12 @@
-import React from "react"
-import Card from "../_card"
+import React from 'react'
+import Card from '../_card'
 
 const CardLight = (props) => {
   return (
     <div>
-      <Card
-          height="100%"
-          htmlOptions={{
-            style: {
-              width: "100%",
-              backgroundColor: "blue",
-            },
-            tabIndex: 7
-          }}
-          minHeight="189px"
-          {...props}
-      >
-        {"HELLO WORLD!!!"}
-      </Card>
+      <Card {...props}>{'Card content'}</Card>
     </div>
   )
 }
 
 export default CardLight
-
diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb
index 2b398e02d6..65583833b1 100644
--- a/playbook/lib/playbook/kit_base.rb
+++ b/playbook/lib/playbook/kit_base.rb
@@ -82,12 +82,33 @@ def object
       self
     end
 
-    def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape: true, &block)
+    # rubocop:disable Layout/CommentIndentation
+    # pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
+    # The pb_content_tag generates HTML content tags for rails kits with flexible options.
+    # Modify a generated kit.html.erb file accordingly (the default_options listed below no longer need to be explictly outlined in that file, only modifications).
+    # name - the first argument is for HTML tag. The default is :div.
+    # content_or_options_with_block - additional content or options for the tag (i.e., the customizations a dev adds to kit.html.erb).
+    # options - Within combined_options, the empty options hash allows for customizations to
+        # merge with the default_options and combined_html_options.
+    # escape - set to true, this allows for HTML-escape.
+    # block - an optional block for content inside the tag.
+    # The return is a HTML tag that includes any provided customizations. If nothing is specified in kit.html.erb, the default shape is:
+        # :div,
+        # aria: object.aria,
+        # class: object.classname,
+        # data: object.data,
+        # id: object.id,
+        # **combined_html_options
+    # rubocop:enable Layout/CommentIndentation
+
+    # rubocop:disable Style/OptionalBooleanParameter
+    def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape = true, &block)
       combined_options = options
                          .merge(combined_html_options)
                          .merge(default_options.merge(content_or_options_with_block))
       content_tag(name, combined_options, options, escape, &block)
     end
+    # rubocop:enable Style/OptionalBooleanParameter
 
     def combined_html_options
       merged = default_html_options.dup
@@ -102,13 +123,9 @@ def combined_html_options
       end
 
       inline_styles = dynamic_inline_props
-      if inline_styles.present?
-        merged[:style] = if merged[:style].present?
-                           "#{merged[:style]}; #{inline_styles}"
-                         else
-                           inline_styles
-                         end
-      end
+      merged[:style] = if inline_styles.present?
+                         merged[:style].present? ? "#{merged[:style]}; #{inline_styles}" : inline_styles
+                       end
 
       merged.deep_merge(data_attributes)
     end

From 183312db2c97ac9885502548c80ba2725157b112 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Tue, 5 Nov 2024 16:55:35 -0500
Subject: [PATCH 15/15] Fixing Typescript Errors

---
 playbook/app/pb_kits/playbook/pb_card/_card.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_card/_card.tsx b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
index 5de39c9d61..225f40def0 100755
--- a/playbook/app/pb_kits/playbook/pb_card/_card.tsx
+++ b/playbook/app/pb_kits/playbook/pb_card/_card.tsx
@@ -109,8 +109,8 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   // coerce to array
   const cardChildren = React.Children.toArray(children)
   const dynamicInlineProps = globalInlineProps(props);
-  const { style: htmlStyle, ...restHtmlProps } = htmlProps;
-  const mergedStyles = { ...htmlStyle, ...dynamicInlineProps };
+  const { style: htmlStyle = {}, ...restHtmlProps } = htmlProps as { style?: React.CSSProperties };
+  const mergedStyles: React.CSSProperties = { ...htmlStyle, ...dynamicInlineProps };
 
 
   const subComponentTags = (tagName: string) => {
@@ -135,7 +135,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
         <Draggable.Item dragId={dragId} 
             key={dragId}
         >
-          <h1>{htmlProps}</h1>
         <Tag
             {...ariaProps}
             {...dataProps}