playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment4991 → 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/tokens/_titles.scss

@@ -33,6 +33,14 @@
   @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
+@mixin pb_title_dark {
+    color: $text_dk_default;
+} 
+
+@mixin pb_title_dark_link {
+    color: $active_dark;
+}
+
 @mixin pb_title_bold {
   font-weight: $bolder;
 }

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -20,13 +20,6 @@
   }
 }
 
-@mixin hover-underline {
-  .hover_underline:hover {
-    text-decoration: underline;
-    transition: text-decoration $transition-speed ease;
-  }
-}
-
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
       .hover_background-#{"" + $name}:hover {
@@ -39,9 +32,7 @@
       }
     }
   }
-
-
-  @include hover-underline;
+  
   @include hover-scale-classes($scales);
   @include hover-shadow-classes($box_shadows);
   @include hover-color-classes($product_colors);
@@ -73,4 +64,4 @@
   .group_hover.hover_visibility {
     opacity: 1;
   }
-}
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -64,7 +64,6 @@ type Hover = Shadow & {
   background?: string,
   color?: string,
   scale?: "sm" | "md" | "lg",
-  underline?: boolean,
   visibility?: boolean,
 }
 
@@ -237,7 +236,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
       css += hover.background ? `hover_background-${hover.background } ` : '';
-      css += hover.underline ? `hover_underline ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       css += hover.color ? `hover_color-${hover.color } ` : '';
       css += hover.visibility ? `hover_visibility` : '';

data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js

@@ -57,19 +57,6 @@ test('Hover Props: returns proper class name', () => {
   expectedClassName = `hover_scale_xl`;
   expect(kit).toHaveClass(expectedClassName);
 
-  const testIdUnderline = `${testSubject}-hover-underline`;
-  render(
-    <Body
-        data={{ testid: testIdUnderline }}
-        hover={{ underline: true }}
-        text="Hi"
-    />
-  );
-
-  kit = screen.getByTestId(testIdUnderline);
-  expectedClassName = `hover_underline`;
-  expect(kit).toHaveClass(expectedClassName);
-
   const testIdMultiple = `${testSubject}-hover-multiple`;
   render(
     <Body
@@ -79,7 +66,6 @@ test('Hover Props: returns proper class name', () => {
         background: 'error',
         shadow: 'deeper',
         scale: 'xl',
-        underline: true,
       }}
         text="Hi"
     />
@@ -90,5 +76,4 @@ test('Hover Props: returns proper class name', () => {
   expect(kit).toHaveClass('hover_background-error');
   expect(kit).toHaveClass('hover_shadow_deeper');
   expect(kit).toHaveClass('hover_scale_xl');
-  expect(kit).toHaveClass('hover_underline');
 });