playbook_ui 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118 → 14.17.0.pre.alpha.PLAY1823maskedsanitizedtextinput7271

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
+    <thead>
+        <tr>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+            <th>Column 4</th>
+            <th>Column 5</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+    </tbody>
+<% end %>

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

@@ -0,0 +1 @@
+Customize your header by removing the header borders with the `header_style: "borderless"` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb

@@ -0,0 +1,36 @@
+<%= pb_rails("card", props: { background: "light" })  do %>
+    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
+        <%= pb_rails("table/table_head") do %>
+            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
+                <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
+            <% end %>
+        <% end %>
+        <%= pb_rails("table/table_body") do %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

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

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 `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 `background` or `backgroundColor` for the element in which it is nested).

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

@@ -37,6 +37,8 @@ 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/styles/_headers.scss

@@ -6,8 +6,20 @@
   &.table-lg {
     thead, .pb_table_thead {
       tr, .pb_table_tr {
-        th, .pb_table_th {
+        th:not(:has(
+          [class*="pb_body_kit"],
+          [class*="pb_detail_kit"],
+          [class*="pb_title_kit"]
+        )),
+        .pb_table_th:not(:has(
+          [class*="pb_body_kit"],
+          [class*="pb_detail_kit"],
+          [class*="pb_title_kit"]
+        )) {
           @include caption;
+        }
+
+        th, .pb_table_th {
           border-bottom: 1px solid $border_light;
         }
       }
@@ -83,10 +95,10 @@
 
 // flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
 .header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
-  border-top-left-radius: 0 !important; 
-} 
-.header-floating > thead > tr:first-child > th:last-child, 
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
-  border-top-right-radius: 0 !important; 
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
+  border-top-left-radius: 0 !important;
+}
+.header-floating > thead > tr:first-child > th:last-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
+  border-top-right-radius: 0 !important;
 }

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

@@ -37,13 +37,16 @@ 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}", separator: " "
+          "table-responsive-#{responsive}", header_style_class, separator: " "
         )
       end
 
@@ -123,6 +126,15 @@ 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,9 +26,12 @@ 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) + tag_class
+        generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
       end
 
       def tag_class
@@ -106,6 +109,15 @@ 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>) => void,
+  onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
   placeholder: string,
   required?: boolean,
   type: string,
@@ -102,10 +102,16 @@ 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)
@@ -116,9 +122,11 @@ 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,6 +3,7 @@ type InputMask = {
     formatDefaultValue: (value: string) => string
     pattern: string
     placeholder: string
+    sanitize?: (value: string) => string;
 }
 
 type InputMaskDictionary = {
@@ -73,35 +74,41 @@ 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,
     },
-} 
+}