correct item_gap to itemGap for react

powerhome · Jan 8, 2025 · fa7f97d · fa7f97d
1 parent 44c5ca4
commit fa7f97d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx b/playbook/app/pb_kits/playbook/pb_timeline/_timeline.tsx
@@ -20,7 +20,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-  item_gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
+  itemGap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -32,14 +32,14 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  item_gap = 'none',
+  itemGap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const itemGapStyle = item_gap === 'none' ? '' : `gap_${item_gap}`
+  const itemGapStyle = itemGap === 'none' ? '' : `gap_${itemGap}`
   const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, itemGapStyle)
 
   return (

diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx
@@ -10,7 +10,7 @@ const TimelineWithGap = (props) => (
     <Flex justify="evenly">
     <FlexItem>
         <Timeline
-            item_gap="xs"
+            itemGap="xs"
             orientation="vertical"
         >
           <Timeline.Item
@@ -51,7 +51,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            item_gap="sm"
+            itemGap="sm"
             orientation="vertical"
         >
           <Timeline.Item
@@ -92,7 +92,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            item_gap="md"
+            itemGap="md"
             orientation="vertical"
         >
           <Timeline.Item
@@ -134,7 +134,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            item_gap="lg"
+            itemGap="lg"
             orientation="vertical"
         >
           <Timeline.Item

diff --git a/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md b/playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md
@@ -1 +1 @@
-Use the optional `item_gap` prop to render the timeline kit with adjusted spacing between nodes. The `item_gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
+Use the optional `itemGap` prop to render the timeline kit with adjusted spacing between nodes. The `itemGap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Use the optional `item_gap` prop to render the timeline kit with adjusted spacing between nodes. The `item_gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
		Use the optional `itemGap` prop to render the timeline kit with adjusted spacing between nodes. The `itemGap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.