playbook_ui 14.10.0.pre.alpha.play16825244 → 14.10.0.pre.alpha.play16825301

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -14,9 +16,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-md/2;
+  padding: 0 math.div($space-md, 2);
   height: $pb_form_pill_height;
-  border-radius: $pb_form_pill_height/2;
+  border-radius: math.div($pb_form_pill_height, 2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
@@ -142,7 +144,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag, 
+    + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
     + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
@@ -171,7 +173,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag, 
+      + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
       + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/typography";
@@ -44,7 +46,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: $size/2;
+      border-radius: math.div($size, 2);
       background: $silver;
       color: $text_lt_light;
       font-size: if($name == "xxs", $size - 6px, $size * 0.38);

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -1,7 +1,9 @@
+@use "sass:math";
+
 @import "../tokens/spacing";
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: $space-xs/1.5;
+    margin-bottom: math.div($space-xs, 1.5);
   }
-}
+}

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/spacing";
 
 @mixin pb_message {
@@ -17,7 +19,7 @@
     }
 
     .message_text {
-      margin: 0 0 $space-xs/2;
+      margin: 0 0 math.div($space-xs, 2);
     }
 
     .message_title {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/colors";
 @import "../utilities/colors";
 @import "../tokens/opacity";
@@ -18,7 +20,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: $pb_multiple_users_size / 2 + 2;
+    border-radius: math.div($pb_multiple_users_size, 2) + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/screen_sizes";
@@ -21,14 +23,14 @@
   }
 
   .passphrase-label {
-    margin-right: $space_xs / 2;
+    margin-right: math.div($space_xs, 2);
   }
 
   .passphrase-text-input-wrapper {
     position: relative;
 
     .pb_text_input_kit_label {
-      margin-bottom: $space_xs / 2;
+      margin-bottom: math.div($space_xs, 2);
     }
 
     .passphrase-text-input input {
@@ -57,7 +59,7 @@
   }
 
   .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
-    margin-bottom: $space_xs/2;
+    margin-bottom: math.div($space_xs, 2);
 
     &.progress-empty-input {
       visibility: hidden;

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "./intlTelInput";
 @import "../tokens/colors";
 
@@ -39,7 +41,7 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
-  // iti-spacer-horizontal's default is 8px, or $space_xs 
+  // iti-spacer-horizontal's default is 8px, or $space_xs
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -73,7 +75,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;  
+    border-bottom: 1px solid $border_light !important;
   }
 
   .iti__selected-country-primary {
@@ -93,7 +95,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs; 
+    border-radius: $space_xxs;
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -163,7 +165,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-($transform-rotate-deg/3));
+    transform: rotate(-(math.div($transform-rotate-deg, 3)));
     top: $space_xs + 4px;
     color: $primary_action;
   }
@@ -196,7 +198,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs; 
+    border-radius: $space_xs;
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -225,12 +227,12 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs; 
+      border-radius: $space_xs;
       border: 1px solid $border_dark !important;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;  
+      border-bottom: 1px solid $border_dark !important;
     }
 
     .iti__country-list {
@@ -265,7 +267,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -9,9 +11,9 @@ $pb_pill_height: 22px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-sm/1.8;
+  padding: 0 math.div($space-sm, 1.8);
   height: $pb_pill_height;
-  border-radius: $pb_pill_height/2;
+  border-radius: math.div($pb_pill_height, 2);
   white-space: nowrap;
 
   &[class*=lowercase] {

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/colors";
@@ -21,7 +23,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: $pb_progress_simple_height/2;
+  border-radius: math.div($pb_progress_simple_height, 2);
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -42,7 +44,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: $pb_progress_simple_height/2;
+    border-radius: math.div($pb_progress_simple_height, 2);
     background: $primary;
   }
 

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../pb_textarea/textarea_mixin";
 @import "../pb_button/_button_mixins";
 @import "../tokens/border_radius";
@@ -94,7 +96,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: $space_xs / 2;
+      margin: math.div($space_xs, 2);
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -104,7 +106,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: $space_xs / 2;
+      padding: math.div($space_xs, 2);
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
@@ -81,7 +83,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: math.div($space_xs, 2);
       }
       > select:first-child {
         border-color: $error;
@@ -133,7 +135,7 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg; 
+      padding-right: $space_lg;
       border-radius: 4px;
       option {
         background-color: $white;
@@ -240,7 +242,7 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg; 
+      padding-right: $space_lg;
       border-radius: 4px;
       option {
         background-color: $white;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../tokens/animation-curves";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -60,7 +62,7 @@ $pb_selectable_paddings: (
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: $pb_selectable_card_indicator_size/2 + $pb_selectable_card_border/2;
+      border-radius: (math.div($pb_selectable_card_indicator_size, 2)) + (math.div($pb_selectable_card_border, 2));
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -69,8 +71,8 @@ $pb_selectable_paddings: (
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -($pb_selectable_card_indicator_size/2);
-      right: -($pb_selectable_card_indicator_size/2);
+      top: -(math.div($pb_selectable_card_indicator_size, 2));
+      right: -(math.div($pb_selectable_card_indicator_size, 2));
       opacity: 0;
     }
   }

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -69,6 +69,7 @@ const Table = (props: TableProps): React.ReactElement => {
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
     const dynamicInlineProps = globalInlineProps(props)
+    const stickyRightColumnReversed = stickyRightColumn.reverse()
 
     const classNames = classnames(
         'pb_table',
@@ -148,7 +149,7 @@ const Table = (props: TableProps): React.ReactElement => {
             if (!stickyRightColumn.length) return;
             let accumulatedWidth = 0;
 
-            stickyRightColumn.reverse().forEach((colId, index) => {
+            stickyRightColumnReversed.forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
@@ -186,6 +187,12 @@ const Table = (props: TableProps): React.ReactElement => {
         setTimeout(() => {
             handleStickyRightColumns();
         }, 10);
+
+        window.addEventListener('resize', handleStickyRightColumns);
+
+        return () => {
+            window.removeEventListener('resize', handleStickyRightColumns);
+        };
     }, [stickyRightColumn]);
 
     useEffect(() => {

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -35,6 +35,8 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_sticky_left_columns: Sticky Left Column
+    - table_sticky_right_columns: Sticky Right Column
+    - table_sticky_columns: Sticky Left and Right Columns
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -26,6 +26,8 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
 export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
+export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
+export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
 export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
 @import "../tokens/colors";
@@ -100,7 +102,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: $space_xs / 2;
+        margin-top: math.div($space_xs, 2);
       }
       input,
       .text_input {

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx

@@ -16,6 +16,8 @@ const TextInputMask = (props) => {
     zipCode: '',
     postalCode: '',
     ssn: '',
+    creditCard: '',
+    cvv: ''
   })
 
   const handleOnChangeFormField =  ({ target }) => {
@@ -57,6 +59,22 @@ const TextInputMask = (props) => {
           value={formFields.ssn}
           {...props}
       />
+      <TextInput
+          label="Credit Card"
+          mask="creditCard"
+          name="creditCard"
+          onChange={handleOnChangeFormField}
+          value={formFields.creditCard}
+          {...props}
+      />
+      <TextInput
+          label="CVV"
+          mask="cvv"
+          name="cvv"
+          onChange={handleOnChangeFormField}
+          value={formFields.cvv}
+          {...props}
+      />
 
       <br />
       <br />

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -6,7 +6,7 @@ type InputMask = {
 }
 
 type InputMaskDictionary = {
-    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
+    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn' | 'creditCard' | 'cvv']: InputMask
 }
 
 const formatCurrencyDefaultValue = (value: string): string => {
@@ -58,6 +58,15 @@ const formatSSN = (value: string): string => {
         .replace(/(\d{3})(?=\d)/, '$1-')
 }
 
+const formatCreditCard = (value: string): string => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 16)
+    return cleaned.replace(/(\d{4})(?=\d)/g, '$1 ')
+}
+
+const formatCVV = (value: string): string => {
+    return value.replace(/\D/g, '').slice(0, 4)
+}
+
 export const INPUTMASKS: InputMaskDictionary = {
     currency: {
         format: formatCurrency,
@@ -84,4 +93,16 @@ export const INPUTMASKS: InputMaskDictionary = {
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
     },
+    creditCard: {
+        format: formatCreditCard,
+        formatDefaultValue: formatCreditCard,
+        pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
+        placeholder: '1234 5678 9012 3456',
+    },
+    cvv: {
+        format: formatCVV,
+        formatDefaultValue: formatCVV,
+        pattern: '\\d{3,4}',
+        placeholder: '123',
+    },
 } 

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -226,3 +226,83 @@ test('returns masked ssn value', () => {
 
   expect(input.value).toBe('123-45-6789')
 })
+
+const TextInputCreditCardMask = (props) => {
+  const [creditCard, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="creditCard"
+        onChange={handleOnChange}
+        value={creditCard}
+        {...props}
+    />
+  )
+}
+
+test('returns masked credit card value', () => {
+  render(
+    <TextInputCreditCardMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: '1234567890123456' } })
+
+  expect(input.value).toBe('1234 5678 9012 3456')
+
+  fireEvent.change(input, { target: { value: '1234' } })
+
+  expect(input.value).toBe('1234')
+
+  fireEvent.change(input, { target: { value: '' } })
+
+  expect(input.value).toBe('')
+})
+
+const TextInputCVVMask = (props) => {
+  const [cvv, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="cvv"
+        onChange={handleOnChange}
+        value={cvv}
+        {...props}
+    />
+  )
+}
+
+test('returns masked CVV value', () => {
+  render(
+    <TextInputCVVMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: '1234' } })
+
+  expect(input.value).toBe('1234')
+
+  fireEvent.change(input, { target: { value: '123' } })
+
+  expect(input.value).toBe('123')
+
+  fireEvent.change(input, { target: { value: '' } })
+
+  expect(input.value).toBe('')
+})

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
 @import "../tokens/spacing";
@@ -60,7 +62,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: $space_xs / 2;
+      margin-top: math.div($space_xs, 2);
     }
     textarea {
       border-color: $error;

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 
 [class^=pb_time_range_inline_kit] {
   &[class*=_center]  {
@@ -22,14 +23,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: math.div($space_xs, 2);
+      margin-right:math.div($space_xs, 2);
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: math.div($space_xs, 2);
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: math.div($space_xs, 2);
     }
   }
 }

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

@@ -1,12 +1,14 @@
+@use "sass:math";
+
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: $space_xs/2;
+$icon_margin: math.div($space_xs, 2);
 $icon_height: 28px;
-$height_from_top: $icon_height/2 - $connector_width/2;
+$height_from_top: (math.div($icon_height, 2)) - (math.div($connector_width, 2));
 
 // Add gap variables
 $gap_xs: $height_from_top + $space_xs;

data/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 (

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("flex", props: { justify: "evenly" }) do %>
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "xs"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -23,7 +23,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "sm"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -46,7 +46,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "md"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -69,7 +69,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "lg"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -91,4 +91,3 @@
         <% end %>
     <% end %>
 <% end %>
-