playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

data/app/pb_kits/playbook/pb_table/table.rb

@@ -23,8 +23,6 @@ module Playbook
       prop :text
       prop :sticky, type: Playbook::Props::Boolean,
                     default: false
-      prop :sticky_left_column, type: Playbook::Props::Array,
-                                default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -39,16 +37,12 @@ module Playbook
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
-          collapse_class, vertical_border_class, striped_class, outer_padding_class,
+          disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
+          vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
 
-      def responsive_classname
-        responsive ? "table-responsive-#{responsive}" : nil
-      end
-
     private
 
       def dark_class
@@ -79,19 +73,6 @@ module Playbook
         sticky ? "sticky-header" : nil
       end
 
-      def sticky_left_column_class
-        if sticky_left_column.empty?
-          nil
-        else
-          sticky_col_classname = "sticky-left-column sticky-columns"
-          sticky_left_column.each do |id|
-            sticky_col_classname += "-#{id}"
-          end
-
-          sticky_col_classname
-        end
-      end
-
       def striped_class
         striped ? "striped" : nil
       end

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

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

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, ChangeEvent } from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
@@ -10,8 +10,6 @@ import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 
-import { INPUTMASKS } from './inputMask'
-
 type TextInputProps = {
   aria?: { [key: string]: string },
   className?: string,
@@ -24,7 +22,6 @@ type TextInputProps = {
   inline?: boolean,
   name: string,
   label: string,
-  mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
   onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
@@ -50,7 +47,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     htmlOptions = {},
     id,
     inline = false,
-    mask = null,
     name,
     label,
     onChange = () => { void 0 },
@@ -94,42 +90,8 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     />
   )
 
-  const isMaskedInput = mask && mask in INPUTMASKS
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (isMaskedInput) {
-      const inputValue = e.target.value
-
-      let cursorPosition = e.target.selectionStart;
-      const isAtEnd = cursorPosition === inputValue.length;
-      
-      const formattedValue = INPUTMASKS[mask].format(inputValue)
-      e.target.value = formattedValue
-      
-      // Keep cursor position
-      if (!isAtEnd) {
-        // Account for extra characters (e.g., commas added/removed in currency)
-        if (formattedValue.length - inputValue.length === 1) {
-          cursorPosition = cursorPosition + 1
-        } else if (mask === "currency" && formattedValue.length - inputValue.length === -1) {
-          cursorPosition = cursorPosition - 1
-        }
-        e.target.selectionStart = e.target.selectionEnd = cursorPosition
-      }
-    }
-    
-    onChange(e)
-  }
-
   const childInput = children ? children.type === "input" : undefined
 
-  let formattedValue;
-  if (isMaskedInput && value) {
-    formattedValue = INPUTMASKS[mask].formatDefaultValue(value.toString())
-  } else {
-    formattedValue = value
-  }
-
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
@@ -139,13 +101,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         id={id}
         key={id}
         name={name}
-        onChange={isMaskedInput ? handleChange : onChange}
-        pattern={isMaskedInput ? INPUTMASKS[mask]?.pattern : undefined}
-        placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
+        onChange={onChange}
+        placeholder={placeholder}
         ref={ref}
         required={required}
         type={type}
-        value={formattedValue}
+        value={value}
      />)
   )
 

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

@@ -16,7 +16,6 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
-  - text_input_mask: Mask
 
   swift:
     - text_input_default_swift: Default

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

@@ -5,4 +5,3 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
 export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
-export { default as TextInputMask } from './_text_input_mask.jsx'

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { render, screen, fireEvent, within } from '../utilities/test-utils'
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
 
 import TextInput from './_text_input'
 
@@ -89,220 +89,3 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} mb_lg`)
 })
-
-
-const TextInputCurrencyMask = (props) => {
-  const [currency, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="currency"
-        onChange={handleOnChange}
-        value={currency}
-        {...props}
-    />
-  )
-}
-
-test('returns masked currency value', () => {
-  render(
-    <TextInputCurrencyMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456' } });
-
-  expect(input.value).toBe('$1,234.56')
-
-  fireEvent.change(input, { target: { value: '1' } });
-
-  expect(input.value).toBe('$0.01')
-
-  fireEvent.change(input, { target: { value: '' } });
-
-  expect(input.value).toBe('')
-})
-
-const TextInputZipCodeMask = (props) => {
-  const [zipCode, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="zipCode"
-        onChange={handleOnChange}
-        value={zipCode}
-        {...props}
-    />
-  )
-}
-
-test('returns masked zip code value', () => {
-  render(
-    <TextInputZipCodeMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456' } });
-
-  expect(input.value).toBe('12345')
-})
-
-const TextInputPostalCodeMask = (props) => {
-  const [postalCode, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="postalCode"
-        onChange={handleOnChange}
-        value={postalCode}
-        {...props}
-    />
-  )
-}
-
-test('returns masked postal code value', () => {
-  render(
-    <TextInputPostalCodeMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456789' } });
-
-  expect(input.value).toBe('12345-6789')
-})
-
-const TextInputSSNMask = (props) => {
-  const [ssn, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="ssn"
-        onChange={handleOnChange}
-        value={ssn}
-        {...props}
-    />
-  )
-}
-
-test('returns masked ssn value', () => {
-  render(
-    <TextInputSSNMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456789' } });
-
-  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,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
 @import "../tokens/spacing";
@@ -62,7 +60,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: math.div($space_xs, 2);
+      margin-top: $space_xs / 2;
     }
     textarea {
       border-color: $error;

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

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

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

@@ -1,14 +1,12 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: math.div($space_xs, 2);
+$icon_margin: $space_xs/2;
 $icon_height: 28px;
-$height_from_top: (math.div($icon_height, 2)) - (math.div($connector_width, 2));
+$height_from_top: $icon_height/2 - $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,
-  itemGap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -32,15 +32,15 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  itemGap = 'none',
+  gap = '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 = itemGap === 'none' ? '' : `gap_${itemGap}`
-  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, itemGapStyle)
+  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
+  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
 
   return (
     <div
@@ -60,4 +60,4 @@ Timeline.Step = TimelineStep
 Timeline.Label = TimelineLabel
 Timeline.Detail = TimelineDetail
 
-export default Timeline
+export default Timeline

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", item_gap: "xs"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", 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", item_gap: "sm"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", 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", item_gap: "md"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", 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", item_gap: "lg"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -91,3 +91,4 @@
         <% end %>
     <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx

@@ -10,7 +10,7 @@ const TimelineWithGap = (props) => (
     <Flex justify="evenly">
     <FlexItem>
         <Timeline
-            itemGap="xs"
+            gap="xs"
             orientation="vertical"
         >
           <Timeline.Item
@@ -51,7 +51,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="sm"
+            gap="sm"
             orientation="vertical"
         >
           <Timeline.Item
@@ -92,7 +92,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="md"
+            gap="md"
             orientation="vertical"
         >
           <Timeline.Item
@@ -134,7 +134,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="lg"
+            gap="lg"
             orientation="vertical"
         >
           <Timeline.Item

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md

@@ -1 +1 @@
-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.
+Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -8,15 +8,15 @@ module Playbook
                          default: "horizontal"
       prop :show_date, type: Playbook::Props::Boolean,
                        default: false
-      prop :item_gap, type: Playbook::Props::Enum,
-                      values: %w[xs sm md lg none],
-                      default: "none"
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[xs sm md lg none],
+                 default: "none"
 
       def classname
         generate_classname("pb_timeline_kit",
                            orientation,
                            date_class,
-                           item_gap_class)
+                           gap_class)
       end
 
     private
@@ -25,8 +25,8 @@ module Playbook
         show_date ? "with_date" : nil
       end
 
-      def item_gap_class
-        item_gap == "none" ? nil : "gap_#{item_gap}"
+      def gap_class
+        gap == "none" ? nil : "gap_#{gap}"
       end
     end
   end

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -49,11 +49,10 @@
   }
 
   &.dark {
-    @include title_dark;
-    @each $name, $color in $pb_dark_title_colors {
-      &[class*="_#{$name}"] {
-        color: $color;
-      }
-    }
+    @include pb_title_dark; 
+  }
+
+  &.dark[class*=_link] { 
+    @include pb_title_dark_link; 
   }
 }

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -9,15 +9,6 @@ $pb_title_colors: (
   link: $primary
 );
 
-$pb_dark_title_colors: (
-  default: $text_dk_default,
-  light: $text_dk_light,
-  lighter: $text_dk_lighter,
-  success: $success,
-  error: $error_dark,
-  link: $active_dark
-);
-
 @mixin title_colors {
   @each $name, $color in $pb_title_colors {
     &[class*=_#{$name}] {
@@ -25,7 +16,3 @@ $pb_dark_title_colors: (
     }
   }
 }
-
-@mixin title_dark {
-  color: $text_dk_default;
-}

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 
 $color_checkbox_success: $data_1;
@@ -10,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: math.div($width, 2);
+  $height: $width / 2;
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -29,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: math.div($width, 2) - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -70,7 +68,7 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: math.div($width, 2) + 2px;
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }