playbook_ui 13.30.0 → 13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
@@ -14,7 +15,7 @@ type ItemProps = {
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
-}
+} & GlobalProps
 
 const TimelineItem = ({
   className,
@@ -24,7 +25,7 @@ const TimelineItem = ({
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
-
+  ...props
 }: ItemProps) => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
@@ -32,23 +33,23 @@ const TimelineItem = ({
 
   return (
     <div 
-      {...htmlProps}
-      className={classnames(timelineItemCss, className)}
+        {...htmlProps}
+        className={classnames(timelineItemCss, globalProps(props), className)}
     >
       <div className="pb_timeline_item_left_block">
         {date &&
           <DateStacked
-            align="center"
-            date={date}
-            size="sm"
+              align="center"
+              date={date}
+              size="sm"
           />
         }
       </div>
       <div className="pb_timeline_item_step">
         <IconCircle
-          icon={icon}
-          size="xs"
-          variant={iconColor}
+            icon={icon}
+            size="xs"
+            variant={iconColor}
         />
         <div className="pb_timeline_item_connector" />
       </div>

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
 
@@ -14,7 +15,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-}
+} & GlobalProps
 
 const Timeline = ({
   aria = {},
@@ -25,6 +26,7 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
+  ...props
 }: TimelineProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -33,11 +35,11 @@ const Timeline = ({
   const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(timelineCss, className)}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(timelineCss, globalProps(props), className)}
+        id={id}
     >
       {children}
     </div>

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

@@ -520,6 +520,7 @@ export const domSafeProps = (props: {[key: string]: string}): {[key: string]: st
     'paddingY',
     'padding',
     'dark',
+    'enableDrag',
   ]
   return omit(props, notSafeProps)
 }