playbook_ui 14.17.0.pre.alpha.PLAY1823maskedsanitizedtextinput7271 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27198

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1 +1,7 @@
-Overlays help shift focus by dimming or masking background content. This kit supports gradient and solid color modes, with adjustable opacity to suit the context.
+Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
+
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
+
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s). 

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

@@ -1,9 +1,6 @@
 examples:
   react:
   - overlay_default: Default
-  - overlay_gradient_opacity: Gradient & Opacity
-  - overlay_color: Color
-  - overlay_layout: Layout
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

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

@@ -1,7 +1,4 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
-export { default as OverlayGradientOpacity } from './_overlay_gradient_opacity.jsx'
-export { default as OverlayColor } from './_overlay_color.jsx'
-export { default as OverlayLayout } from './_overlay_layout.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -71,46 +71,8 @@ test('should add overlay-hide-scrollbar class when scrollBarNone is true', () =>
       data: { testid: testId },
       scrollBarNone: true
     }
-
+  
     render(<Overlay {...props} />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('overlay-hide-scrollbar')
 })
-
-test('should have no_gradient class if gradient prop is false', () => {
-    const props = {
-        children,
-        data: { testid: testId },
-        id: testId,
-        gradient: false
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('no_gradient')
-})
-
-test('should not have no_gradient class if gradient is not passed', () => {
-    const props = {
-        children,
-        data: { testid: testId },
-        id: testId
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).not.toHaveClass('no_gradient')
-})
-
-test('should have the correct opacity class if opacity prop is passed', () => {
-    const props = {
-        children,
-        data: { testid: testId },
-        id: testId,
-        opacity: "opacity_5"
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('opacity_5')
-})

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md

@@ -1 +1 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `background` or `backgroundColor` for the element in which it is nested).
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).

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

@@ -37,8 +37,6 @@ examples:
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
-    - table_with_header_style_borderless: Header Style Borderless
-    - table_with_header_style_floating: Header Style Floating
 
   react:
     - table_sm: Small

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

@@ -37,16 +37,13 @@ module Playbook
       prop :outer_padding, type: Playbook::Props::Enum,
                            values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
                            default: nil
-      prop :header_style, type: Playbook::Props::Enum,
-                          values: %w[default borderless floating],
-                          default: "default"
 
       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,
           sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
-          "table-responsive-#{responsive}", header_style_class, separator: " "
+          "table-responsive-#{responsive}", separator: " "
         )
       end
 
@@ -126,15 +123,6 @@ module Playbook
           outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
         end
       end
-
-      def header_style_class
-        case header_style
-        when "borderless"
-          "header-borderless"
-        when "floating"
-          "header-floating"
-        end
-      end
     end
   end
 end

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

@@ -26,12 +26,9 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
-      prop :header_style, type: Playbook::Props::Enum,
-                          values: %w[default borderless floating],
-                          default: "default"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
+        generate_classname("pb_table_header_kit", align_class) + tag_class
       end
 
       def tag_class
@@ -109,15 +106,6 @@ module Playbook
         end
         active_item
       end
-
-      def header_style_class
-        case header_style
-        when "borderless"
-          "header-borderless"
-        when "floating"
-          "header-floating"
-        end
-      end
     end
   end
 end

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

@@ -25,7 +25,7 @@ type TextInputProps = {
   name: string,
   label: string,
   mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
-  onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
+  onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
   type: string,
@@ -102,16 +102,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
       let cursorPosition = e.target.selectionStart;
       const isAtEnd = cursorPosition === inputValue.length;
-
+      
       const formattedValue = INPUTMASKS[mask].format(inputValue)
-
-      let sanitizedValue = formattedValue;
-      if (INPUTMASKS[mask].sanitize) {
-        sanitizedValue = INPUTMASKS[mask].sanitize(formattedValue)
-      }
-
       e.target.value = formattedValue
-
+      
       // Keep cursor position
       if (!isAtEnd) {
         // Account for extra characters (e.g., commas added/removed in currency)
@@ -122,11 +116,9 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         }
         e.target.selectionStart = e.target.selectionEnd = cursorPosition
       }
-
-      onChange(e, sanitizedValue);
-    } else {
-      onChange(e)
     }
+    
+    onChange(e)
   }
 
   const childInput = children ? children.type === "input" : undefined

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

@@ -3,7 +3,6 @@ type InputMask = {
     formatDefaultValue: (value: string) => string
     pattern: string
     placeholder: string
-    sanitize?: (value: string) => string;
 }
 
 type InputMaskDictionary = {
@@ -74,41 +73,35 @@ export const INPUTMASKS: InputMaskDictionary = {
         // eslint-disable-next-line no-useless-escape
         pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
         placeholder: '$0.00',
-        sanitize: (value: string) => value.replace(/[$,]/g, ''),
     },
     zipCode: {
         format: formatBasicPostal,
         formatDefaultValue: formatBasicPostal,
         pattern: '\\d{5}',
         placeholder: '12345',
-        sanitize: (value: string) => value,
     },
     postalCode: {
         format: formatExtendedPostal,
         formatDefaultValue: formatExtendedPostal,
         pattern: '\\d{5}-\\d{4}',
         placeholder: '12345-6789',
-        sanitize: (value: string) => value.replace(/-/g, ''),
     },
     ssn: {
         format: formatSSN,
         formatDefaultValue: formatSSN,
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
-        sanitize: (value: string) => value.replace(/-/g, ''),
     },
     creditCard: {
         format: formatCreditCard,
         formatDefaultValue: formatCreditCard,
         pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
         placeholder: '1234 5678 9012 3456',
-        sanitize: (value: string) => value.replace(/\s/g, ''),
     },
     cvv: {
         format: formatCVV,
         formatDefaultValue: formatCVV,
         pattern: '\\d{3,4}',
         placeholder: '123',
-        sanitize: (value: string) => value,
     },
-}
+}