playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment5060 → 14.9.0.pre.alpha.play1742globalheightfixes4766

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -7,21 +7,14 @@ import {
   buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
-import Collapsible from "../../pb_collapsible/_collapsible";
-import useCollapsible from "../../pb_collapsible/useCollapsible";
 
 type TableRowPropTypes = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   className: string;
-  collapsible?: boolean;
-  collapsibleContent?: React.ReactNode[] | React.ReactNode;
-  collapsibleSideHighlight?: boolean;
   data?: { [key: string]: string };
-  dark?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  toggleCellId?: string;
   sideHighlightColor: string;
   tag?: "table" | "div";
 };
@@ -30,15 +23,10 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,
-    collapsible,
-    collapsibleContent,
-    collapsibleSideHighlight = true,
     className,
     data = {},
-    dark = false,
     htmlOptions = {},
     id,
-    toggleCellId,
     sideHighlightColor = "none",
     tag = "table",
   } = props;
@@ -48,110 +36,17 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-  
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true);
-
-  const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
-    collapsibleRow,
     globalProps(props),
     className
   );
   const isTableTag = tag === "table";
 
-  // const [isCollapsed, setIsCollapsed] = useCollapsible(true);
-
-  const colSpan = React.Children.count(children);
-
-  const handleRowClick = (event: React.MouseEvent) => {
-    if (toggleCellId) {
-      const target = event.target as HTMLElement;
-      const clickedCell = target.closest(`#${toggleCellId}`);
-      const isIconClick =
-      target instanceof SVGElement &&
-      (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
-
-        if (clickedCell || isIconClick) { 
-      setIsCollapsed(!isCollapsed);
-      }
-    } else {
-      setIsCollapsed(!isCollapsed);
-    }
-  };
-    
   return (
     <>
-      {collapsible ? (
-        isTableTag ? (
-          <>
-            <tr
-                {...ariaProps}
-                {...dataProps}
-                {...htmlProps}
-                className={classes}
-                id={id}
-                onClick={(e)=>handleRowClick(e)}
-                style={{ cursor: toggleCellId ? "default" : "pointer" }}
-            >
-              {children}
-            </tr>
-            <tr>
-              <Collapsible
-                  collapsed={isCollapsed}
-                  dark={dark}
-                  htmlOptions={{ colSpan: colSpan }}
-                  padding="none"
-                  tag="td"
-              >
-                <tr/>
-                <Collapsible.Content 
-                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
-                    dark={dark}
-                    margin="none"
-                    padding="none"
-                >
-                 {collapsibleContent}
-                </Collapsible.Content>
-              </Collapsible>
-            </tr>
-          </>
-        ) : (
-          <>
-            <div
-                {...ariaProps}
-                {...dataProps}
-                {...htmlProps}
-                className={classes}
-                id={id}
-                onClick={handleRowClick}
-                style={{ cursor: "pointer" }}
-            >
-              {children}
-            </div>
-            <tr>
-              <Collapsible
-                  collapsed={isCollapsed}
-                  dark={dark}
-                  htmlOptions={{ colSpan: colSpan }}
-                  padding="none"
-                  tag="td"
-              >
-                <tr/>
-                <Collapsible.Content 
-                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
-                    dark={dark}
-                    margin="none"
-                    padding="none"
-                >
-                 {collapsibleContent}
-                </Collapsible.Content>
-              </Collapsible>
-            </tr>
-          </>
-        )
-      ) : isTableTag ? (
+      {isTableTag ? (
         <tr
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -18,4 +18,4 @@
       <%= content.presence %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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,8 +37,8 @@ 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
@@ -75,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.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,33 +90,6 @@ 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
 
   const textInput = (
@@ -132,9 +101,8 @@ 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}

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,140 +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')
-})

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_typeahead/_typeahead.scss

@@ -90,7 +90,50 @@
       }
     }
   }
-
+  &[class*=dark] {
+    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
+      color: $text_dk_light;
+    }
+    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
+      display: inherit !important;
+    }
+    .typeahead-kit-select__menu {
+      background-color: $bg_dark;
+      color: $white;
+      z-index: $z_1;
+    }
+    .typeahead-kit-select__option:hover {
+      background-color: $active_dark;
+    }
+    .typeahead-kit-select__indicator:hover {
+      color: $white;
+    }
+    .typeahead-kit-select__input {
+      color: white;
+      input:focus {
+        box-shadow: none;
+      }
+    }
+    .typeahead-kit-select__single-value {
+      color: white;
+    }
+    .typeahead-kit-select__option--is-focused {
+      background-color: $active_dark;
+    }
+    [class^=pb_list_kit] {
+      background-color: $bg_dark;
+    }
+    .pb_item_kit {
+      button {
+        color: white !important;
+      }
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($white,.1);
+        }
+      }
+    }
+  }
   &.react-select, &.react-select .dark {
     .text_input {
       display: inherit;
@@ -139,7 +182,7 @@
       }
     }
   }
-
+ 
   .typeahead-kit-select__menu {
     z-index: $z_1;
     .typeahead-kit-select__menu-list {
@@ -172,117 +215,5 @@
       }
     }
   }
-
-  &[class*=dark] {
-    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
-      color: $text_dk_light;
-    }
-    .pb_text_input_kit_label {
-      color: $text_dk_light;
-    }
-    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
-      display: inherit !important;
-    }
-    .typeahead-kit-select__menu {
-      background-color: $bg_dark;
-      color: $white;
-      z-index: $z_1;
-      .typeahead-kit-select__menu-list {
-        padding: 0;
-      }
-      .typeahead-kit-select__single-value {
-        color: white;
-      }
-
-      .typeahead-kit-select__option {
-        &.typeahead-kit-select__option--is-focused {
-          background-color: $hover_dark;
-        }
-        &.typeahead-kit-select__option--is-selected {
-          background-color: $active_dark;
-        }
-      }
-    }
-    .text_input_wrapper{
-      color: text_dk_default;
-    }
-    .typeahead-kit-select__option:hover {
-      background-color: $active_dark;
-    }
-    .typeahead-kit-select__indicator {
-      color: $text_dk_default;
-    }
-    .typeahead-kit-select__indicator:hover {
-      color: $text_dk_lighter;
-    }
-    .typeahead-kit-select__input {
-      color: white;
-      input:focus {
-        box-shadow: none;
-      }
-    }
-    .typeahead-kit-select__option--is-focused {
-      background-color: $active_dark;
-    }
-    [class^=pb_list_kit] {
-      background-color: $bg_dark;
-    }
-    .pb_item_kit {
-      button {
-        color: white !important;
-      }
-      @media (hover:hover) {
-        &:hover {
-          background-color: $hover_dark;
-        }
-      }
-    }
-
-    .text_input {
-      .typeahead-kit-select__input-container{
-        color: $text_dk_default
-      }
-      .typeahead-kit-select {
-        &__single-value{
-          color: $text_dk_default;
-        }
-      }
-      &.typeahead-kit-select {
-        &__single-value{
-          color: $text_dk_default;
-        }
-        &__control {
-          &--is-focused {
-            @include pb_textarea_focus;
-            @include transition_default;
-            border-color: $active_dark;
-            background-color: rgba($focus_input_dark,$opacity_5);
-            box-shadow: none;
-            .typeahead-plus-icon {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    &.inline {
-      &:not(:hover) {
-        .text_input {
-          background-color: transparent;
-          border-color: transparent;
-        }
-        .typeahead-kit-select__indicator {
-          color: transparent;
-        }
-      }
-
-      &:hover {
-        .text_input {
-          background-color: $hover_dark;
-        }
-      }
-    }
-
-  }
 }
+

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -55,18 +55,11 @@ const TypeaheadWithHighlight = (props) => {
               marginRight="sm"
               name={name}
               size="sm"
-              {...props}
           />
         </FlexItem>
         <FlexItem>
-          <Title
-              size={4}
-              {...props}
-          >
-            <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
-          <Body color="light"
-              {...props}
-          >
+          <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+          <Body color="light">
             <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
             {territory}
           </Body>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -25,9 +25,8 @@
         validation: object.validation,
         label: object.label,
         id: object.input_options[:id],
-        dark: object.dark,
       }) %>
-      <%= pb_rails("list", props: { ordered: false, borderless: true, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+      <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>
     </div>
 
@@ -37,4 +36,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>