Add height props to Image, Collapsible, Drawer, Overlay, Section Sepa…

…rator, and Table
powerhome · Nov 22, 2024 · e17575f · e17575f
1 parent 7e9dffd
commit e17575f
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 6 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx b/playbook/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -75,6 +75,7 @@ const Collapsible = ({
     globalProps(props),
     className
   )
+  const dynamicInlineProps = globalInlineProps(props)
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
       <div
@@ -83,6 +84,7 @@ const Collapsible = ({
           {...htmlProps}
           className={classes}
           id={id}
+          style={dynamicInlineProps}
       >
         {Main ? (
           <CollapsibleMain {...mainProps}>

diff --git a/playbook/app/pb_kits/playbook/pb_drawer/_drawer.tsx b/playbook/app/pb_kits/playbook/pb_drawer/_drawer.tsx
@@ -7,7 +7,7 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
 
@@ -101,6 +101,8 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
 
   const classes = classnames(buildCss("pb_drawer_wrapper"), className);
 
+  const dynamicInlineProps = globalInlineProps(props)
+
   const [triggerOpened, setTriggerOpened] = useState(false);
 
   const breakpointWidths: Record<DrawerProps["breakpoint"], number> = {
@@ -198,6 +200,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
           {...dataProps}
           {...htmlProps}
           className={classes}
+          style={dynamicInlineProps}
       >
           {isModalVisible && (
             <div

diff --git a/playbook/app/pb_kits/playbook/pb_image/_image.tsx b/playbook/app/pb_kits/playbook/pb_image/_image.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type ImageType = {
@@ -41,6 +41,7 @@ const Image = (props: ImageType): React.ReactElement => {
     globalProps(props),
     className
   )
+  const dynamicInlineProps = globalInlineProps(props)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -56,6 +57,7 @@ const Image = (props: ImageType): React.ReactElement => {
         id={id}
         onError={onError}
         src={url}
+        style={dynamicInlineProps}
     />
   )
 }

diff --git a/playbook/app/pb_kits/playbook/pb_overlay/_overlay.tsx b/playbook/app/pb_kits/playbook/pb_overlay/_overlay.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import OverlayPercentage from './subcomponents/_overlay_percentage'
 import OverlayToken from './subcomponents/_overlay_token'
 
@@ -39,6 +39,7 @@ const Overlay = (props: OverlayProps) => {
     const dataProps = buildDataProps(data)
     const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
+    const dynamicInlineProps = globalInlineProps(props)
 
     const getPosition = () => {
         return Object.keys(layout)[0]
@@ -57,6 +58,7 @@ const Overlay = (props: OverlayProps) => {
             {...htmlProps}
             className={classes}
             id={id}
+            style={dynamicInlineProps}
         >
             {isSizePercentage ?
                 OverlayPercentage({

diff --git a/playbook/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx b/playbook/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -38,6 +38,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
+  const dynamicInlineProps = globalInlineProps(props)
 
   return (
 
@@ -47,6 +48,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
         {...htmlProps}
         className={classes}
         id={id}
+        style={dynamicInlineProps}
     >
       {
         children && children ||

diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.tsx b/playbook/app/pb_kits/playbook/pb_table/_table.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
   TableHead,
@@ -64,6 +64,7 @@ const Table = (props: TableProps): React.ReactElement => {
     const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
+    const dynamicInlineProps = globalInlineProps(props)
 
     const classNames = classnames(
         'pb_table',
@@ -99,6 +100,7 @@ const Table = (props: TableProps): React.ReactElement => {
                     {...htmlProps}
                     className={classNames}
                     id={id}
+                    style={dynamicInlineProps}
                 >
                     {children}
                 </table>