playbook_ui 16.8.0.pre.alpha.PLAY298616637 → 16.8.0.pre.alpha.tablewidths16466

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a7433137fdbca6402528b7760f24b18180f74ee7e365cf010286a3a8e80614b5
-  data.tar.gz: fd6226655188651cbdc783e6acb77deff35ebcaaea75a03f040cf2466505d3e8
+  metadata.gz: 0f46fd7de41487efa37647c36cc3d1d55e2260ccda34ff0f094dc4f3c21608c4
+  data.tar.gz: 60e1b0388423c2a75088ba9210b0e9456c27fb7a7b5822b5753f1c46f1abfa53
 SHA512:
-  metadata.gz: 8e022be82d66109e4e13e67776667c0fa952b4fb25b9ff961deb80a4e9801e490de9fa256a9acd0a9a4e7456a44a55ba0707be8f88cca0ca4551f510d90ab6d3
-  data.tar.gz: 9587bdc193b7be5422c15c21c8fec87a28cb7e1779ff566bac63d4c9bff0383ad0bc18062159667d447f972b44e99f6d43567892a04e62c1e08584cfe956bec9
+  metadata.gz: 236bb6ec1f254c88d37bfa99aa2bb530aba234550a5635bfd19c9bb76fe0240bf818ccd4f2b859424662c2e15d1f31cae47d0831e172a9c2926e1eaa4cf3ade7
+  data.tar.gz: 63776f5d3b77b41da7a95ad4d67e89d244a0981fb8cc2220c3fc8996f5506eb2b4f94cf30989d848afc83d2104dbe17092e00851e4b4cd46ebd5a63985ddb543

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -162,7 +162,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
           {
             dragHandle ? (
               <Flex>
-                <span className="card_draggable_handle pb_draggable_handle">
+                <span className="card_draggable_handle">
                   <Icon
                       icon="grip-dots-vertical"
                       paddingRight="xs"

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -4,7 +4,7 @@
             <% if object.draggable_item %>
                 <%= pb_rails("flex", props: { align: "center" }) do %>
                     <% if object.drag_handle %>
-                        <span class="card_draggable_handle pb_draggable_handle">
+                        <span classname="card_draggable_handle">
                             <%= pb_rails("icon", props: { icon: "grip-dots-vertical", padding_right: "xs" }) %>
                         </span>
                     <% end %>

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -59,13 +59,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
-  const isAmountEmpty = (value: string | number): boolean => (
-    value === '' || value == null || (typeof value === 'string' && value.trim() === '')
-  )
-
   // Convert numeric input to string format
   const convertAmount = (input: string | number): string => {
     if (typeof input === 'number') {
+      if (input === 0 && !nullDisplay) {
+        return ""
+      }
       return input.toFixed(2)
     }
     return input
@@ -82,9 +81,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [wholePart, decimalPart = '00'] = currencyAmount ? currencyAmount.split('.') : ['', '00']
-  const decimal = (decimalPart || '00').padEnd(2, '0').slice(0, 2)
-  const whole = currencyAmount === '' ? '' : (wholePart === '' ? '0' : wholePart)
+  const [whole, decimal = '00'] = currencyAmount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -138,7 +135,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && isAmountEmpty(amount) ? (
+          nullDisplay && !amount ? (
             <div>{nullDisplay}</div>
           ) : (
             <>
@@ -151,7 +148,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
             </>
           )
         ) : (
-          nullDisplay && isAmountEmpty(amount) ? (
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -68,7 +68,7 @@ module Playbook
       end
 
       def title_text
-        if null_display && amount.blank?
+        if null_display
           null_display
         elsif swap_negative
           absolute_amount(abbr_or_format_amount)
@@ -125,7 +125,14 @@ module Playbook
       # Convert numeric input to string format
       def convert_amount(input)
         if input.is_a?(Numeric)
-          Kernel.format("%.2f", input)
+          if input.zero? && null_display.nil?
+            ""
+          else
+            format("%.2f", input)
+          end
+        # Handle string representations of zero
+        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
+          ""
         else
           input.to_s
         end
@@ -135,7 +142,6 @@ module Playbook
         return "" if currency_amount.blank?
 
         value = currency_amount.split(".").first
-        value = "0" if value.blank?
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -146,8 +152,7 @@ module Playbook
       def decimal_value
         return "00" if currency_amount.blank?
 
-        fraction = currency_amount.split(".")[1] || "00"
-        fraction.ljust(2, "0")[0, 2]
+        currency_amount.split(".")[1] || "00"
       end
 
       def units_element

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -178,48 +178,5 @@ test('handles numeric amounts correctly', () => {
   expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
   expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
   expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
-  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$0.00')
-})
-
-test('renders zero values with leading digit', () => {
-  render(
-    <>
-      <Currency
-          amount="0"
-          data={{ testid: 'test-string-zero' }}
-      />
-      <Currency
-          amount={0}
-          data={{ testid: 'test-numeric-zero' }}
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-string-zero')).toHaveTextContent('$0.00')
-  expect(screen.getByTestId('test-numeric-zero')).toHaveTextContent('$0.00')
-})
-
-test('normalizes string zero with single decimal digit to .00', () => {
-  render(
-    <Currency
-        amount="0.0"
-        commaSeparator
-        data={{ testid: 'test-string-zero-single-decimal' }}
-    />
-  )
-
-  expect(screen.getByTestId('test-string-zero-single-decimal')).toHaveTextContent('$0.00')
-})
-
-test('nullDisplay only applies when amount is empty', () => {
-  render(
-    <Currency
-        amount="-.53"
-        data={{ testid: 'test-null-display-negative' }}
-        nullDisplay="$0.00"
-    />
-  )
-
-  expect(screen.getByTestId('test-null-display-negative')).toHaveTextContent('-$')
-  expect(screen.getByTestId('test-null-display-negative')).not.toHaveTextContent('$0.00')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
 })

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -12,41 +12,6 @@ import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 import colors from "../tokens/exports/_colors.module.scss"
 
-function isValidDateInstance(value: Date): boolean {
-  return !Number.isNaN(value.getTime())
-}
-
-function normalizeDefaultDate<T>(defaultDate: T): T {
-  if (defaultDate instanceof Date) {
-    return (isValidDateInstance(defaultDate) ? defaultDate : '') as unknown as T
-  }
-  if (Array.isArray(defaultDate)) {
-    const normalized = defaultDate.filter(
-      (d) => !(d instanceof Date) || isValidDateInstance(d)
-    )
-    return (normalized.length ? normalized : '') as unknown as T
-  }
-  return defaultDate
-}
-
-function serializeDefaultDateForFilterReset(defaultDate: unknown): string | undefined {
-  if (defaultDate === '' || defaultDate == null) return undefined
-  if (Array.isArray(defaultDate)) {
-    const parts = defaultDate.map((d) => {
-      if (d == null || d === '') return ''
-      if (d instanceof Date) {
-        return isValidDateInstance(d) ? d.toISOString() : ''
-      }
-      return String(d)
-    }).filter(Boolean)
-    return parts.length ? parts.join(',') : undefined
-  }
-  if (defaultDate instanceof Date) {
-    return isValidDateInstance(defaultDate) ? defaultDate.toISOString() : undefined
-  }
-  return String(defaultDate)
-}
-
 type DatePickerProps = {
   allowInput?: boolean,
   aria?: { [key: string]: string },
@@ -148,12 +113,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   } = props
 
   const ariaProps = buildAriaProps(aria)
-  const normalizedDefaultDate = normalizeDefaultDate(defaultDate)
-  const filterResetDefaultSerialized = serializeDefaultDateForFilterReset(normalizedDefaultDate)
-  const dataProps = buildDataProps({
-    ...data,
-    ...(filterResetDefaultSerialized ? { 'default-value': filterResetDefaultSerialized } : {}),
-  })
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
@@ -176,7 +136,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     datePickerHelper({
       allowInput,
       customQuickPickDates,
-      defaultDate: normalizedDefaultDate,
+      defaultDate,
       disableDate,
       disableRange,
       disableWeekdays,

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,11 +1,8 @@
-<% date_picker_root_attrs = {
-  class: object.classname + object.error_class,
-  'data-pb-date-picker' => true,
-  'data-validation-message' => object.validation_message,
-}
-  date_picker_root_attrs['data-default-value'] = object.serialized_default_date_for_dom if object.serialized_default_date_for_dom.present?
-%>
-<%= pb_content_tag(:div, date_picker_root_attrs) do %>
+<%= pb_content_tag(:div,
+    class: object.classname + object.error_class,
+    'data-pb-date-picker' => true,
+    'data-validation-message' => object.validation_message,
+      ) do %>
   <div class="input_wrapper">
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -145,18 +145,6 @@ module Playbook
       def angle_down_path
         "app/pb_kits/playbook/utilities/icons/angle-down.svg"
       end
-
-      # Serialized business default for opt-in smart filter reset (Nitro / data-default-value).
-      def serialized_default_date_for_dom
-        case default_date
-        when nil, ""
-          nil
-        when Array
-          default_date.compact_blank.map(&:to_s).join(",")
-        else
-          default_date.to_s.presence
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -40,66 +40,6 @@ describe('DatePicker Kit', () => {
     expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
   })
 
-  test('exposes data-default-value on kit root when defaultDate is set', () => {
-    const testId = 'datepicker-def-attr'
-    render(
-      <DatePicker
-          data={{ testid: testId }}
-          defaultDate={DEFAULT_DATE}
-          pickerId="date-picker-def-attr"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveAttribute('data-default-value', DEFAULT_DATE.toISOString())
-  })
-
-  test('omits data-default-value when defaultDate is empty', () => {
-    const testId = 'datepicker-no-def-attr'
-    render(
-      <DatePicker
-          data={{ testid: testId }}
-          defaultDate=""
-          pickerId="date-picker-no-def-attr"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).not.toHaveAttribute('data-default-value')
-  })
-
-  test('renders without error when defaultDate is an invalid Date', () => {
-    const testId = 'datepicker-invalid-date'
-    const invalidDate = new Date('UndefinedT00:00')
-
-    expect(() => {
-      render(
-        <DatePicker
-            data={{ testid: testId }}
-            defaultDate={invalidDate}
-            pickerId="date-picker-invalid-date"
-        />
-      )
-    }).not.toThrow()
-
-    const kit = screen.getByTestId(testId)
-    expect(kit).not.toHaveAttribute('data-default-value')
-  })
-
-  test('omits data-default-value when defaultDate is constructed from undefined', () => {
-    const testId = 'datepicker-undefined-date'
-    const invalidDate = new Date(undefined + 'T00:00')
-
-    render(
-      <DatePicker
-          data={{ testid: testId }}
-          defaultDate={invalidDate}
-          pickerId="date-picker-undefined-date"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    expect(kit).not.toHaveAttribute('data-default-value')
-  })
-
   test('inLine alone adds inline-date-picker class and inline control icons, not the calendar icon', () => {
     const testId = 'datepicker-inline-only'
     render(

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -278,9 +278,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // Default Date + Min/Max Date Initialization Helper Functions section ----/
   const toDateObject = (dateValue: any): Date | null => {
     if (!dateValue) return null
-    if (dateValue instanceof Date) {
-      return isNaN(dateValue.getTime()) ? null : dateValue
-    }
+    if (dateValue instanceof Date) return dateValue
     if (typeof dateValue === 'string') {
       const parsed = new Date(dateValue)
       return isNaN(parsed.getTime()) ? null : parsed

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -8,25 +8,6 @@
       cursor: grab;
     }
 
-    &.is_touch_active {
-      .pb_draggable_handle,
-      .card_draggable_handle {
-        color: $text_lt_default;
-      }
-    }
-
-    .pb_draggable_handle,
-    .card_draggable_handle {
-      touch-action: none;
-      -webkit-touch-callout: none;
-      user-select: none;
-      cursor: grab;
-
-      &:active {
-        color: $text_lt_default;
-      }
-    }
-
     &.is_dragging {
       position: relative;
 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md

@@ -5,5 +5,3 @@ Use the `draggable` kit and manage state as shown.
 `draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md

@@ -6,5 +6,4 @@ Use `DraggableProvider` and manage state as shown.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
 
-On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md

@@ -3,5 +3,3 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
 
 An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md

@@ -2,6 +2,4 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 
 Use `DraggableProvider` and manage state as shown.
 
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on ListItem to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md

@@ -1,5 +1,3 @@
 For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md

@@ -2,6 +2,4 @@ For a simplified version of the Draggable API for the SelectableList kit, you ca
 
 Use `DraggableProvider` and manage state as shown.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -211,14 +211,6 @@ test("Attached draggable HTML attributes", () => {
   expect(item).toHaveAttribute("draggable");
 });
 
-test("draggable items expose data-pb-drag-id for touch reordering", () => {
-  render(<DefaultDraggableKit />);
-  const kit = screen.getByTestId(testId);
-
-  const item = kit.querySelector(".pb_draggable_item");
-  expect(item).toHaveAttribute("data-pb-drag-id", "1");
-});
-
 test("generated dragHandle with List", () => {
   render(<DraggableKitWithList />);
   const kit = screen.getByTestId(testId);
@@ -310,14 +302,6 @@ const DraggableMultipleContainers = () => {
   );
 };
 
-test("draggable containers expose data-pb-drag-container when provided", () => {
-  render(<DraggableMultipleContainers />);
-  const kit = screen.getByTestId(testId);
-
-  const container = kit.querySelector('[data-testid="container-To Do"]');
-  expect(container).toHaveAttribute("data-pb-drag-container", "To Do");
-});
-
 test("renders multiple containers with correct items", () => {
   render(<DraggableMultipleContainers />);
   

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,5 +1,3 @@
-<%= pb_content_tag(object.tag, {
-  "data-pb-drag-container": object.container.presence
-}) do %>
+<%= pb_content_tag(object.tag) do %>
     <%= content.presence %>
   <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb

@@ -1,6 +1,5 @@
 <%= pb_content_tag(object.tag, {
 id: "item_#{object.drag_id}",
-"data-pb-drag-id": object.drag_id,
 draggable: true
 }) do %>
     <%= content.presence %>