playbook_ui 14.9.0.pre.alpha.PLAY1731inputmasking4927 → 14.9.0.pre.alpha.PLAY16264818

data/lib/playbook/hover.rb

@@ -29,16 +29,12 @@ module Playbook
       []
     end
 
-    def hover_underline_values
-      [true, false]
-    end
-
     def hover_values
       hover_options.keys.select { |sk| try(sk) }
     end
 
     def hover_attributes
-      %w[background shadow scale color underline]
+      %w[background shadow scale color]
     end
 
     def hover_props
@@ -55,8 +51,6 @@ module Playbook
           value.each do |key, val|
             if %i[background color].include?(key)
               css += "#{prefix}_#{key}-#{val} " if hover_attributes.include?(key.to_s)
-            elsif %i[underline].include?(key) && val == true
-              css += "hover_underline "
             elsif hover_attributes.include?(key.to_s) && send("hover_#{key}_values").include?(val.to_s)
               css += "#{prefix}_#{key}_#{val} "
             end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.9.0"
-  VERSION = "14.9.0.pre.alpha.PLAY1731inputmasking4927"
+  VERSION = "14.9.0.pre.alpha.PLAY16264818"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.9.0.pre.alpha.PLAY1731inputmasking4927
+  version: 14.9.0.pre.alpha.PLAY16264818
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-12-16 00:00:00.000000000 Z
+date: 2024-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2370,6 +2370,7 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_error.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_error.md
 - app/pb_kits/playbook/pb_select/docs/_select_error_swift.md
+- app/pb_kits/playbook/pb_select/docs/_select_form.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_inline.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb
@@ -2617,7 +2618,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.md
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb
@@ -2633,16 +2633,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
@@ -2655,7 +2645,6 @@ files:
 - app/pb_kits/playbook/pb_table/index.ts
 - app/pb_kits/playbook/pb_table/styles/_alignment.scss
 - app/pb_kits/playbook/pb_table/styles/_all.scss
-- app/pb_kits/playbook/pb_table/styles/_collapsible.scss
 - app/pb_kits/playbook/pb_table/styles/_content.scss
 - app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
 - app/pb_kits/playbook/pb_table/styles/_headers.scss
@@ -2719,14 +2708,12 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md
 - app/pb_kits/playbook/pb_text_input/docs/example.yml
 - app/pb_kits/playbook/pb_text_input/docs/index.js
-- app/pb_kits/playbook/pb_text_input/inputMask.ts
 - app/pb_kits/playbook/pb_text_input/text_input.html.erb
 - app/pb_kits/playbook/pb_text_input/text_input.rb
 - app/pb_kits/playbook/pb_text_input/text_input.test.js
@@ -3178,6 +3165,7 @@ files:
 - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
 - app/pb_kits/playbook/utilities/globalPropNames.mjs
 - app/pb_kits/playbook/utilities/globalProps.ts
+- app/pb_kits/playbook/utilities/hookFormProps.ts
 - app/pb_kits/playbook/utilities/icons/allicons.tsx
 - app/pb_kits/playbook/utilities/icons/angle-down.svg
 - app/pb_kits/playbook/utilities/icons/clock.svg
@@ -3203,11 +3191,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-l1kq1p9m.js
-- dist/chunks/_weekday_stacked-B28kYXl9.js
+- dist/chunks/_typeahead-B8fkIeXA.js
+- dist/chunks/_weekday_stacked-DxlPBh55.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-CuCy3_xO.js
-- dist/chunks/pb_form_validation-D37k10a0.js
+- dist/chunks/lib-SyD3buPZ.js
+- dist/chunks/pb_form_validation-Dt8UJgrJ.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

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

@@ -1,95 +0,0 @@
-<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
-  <thead>
-    <tr>
-      <th id="1">Column 1</th>
-      <th id="2">Column 2</th>
-      <th id="3">Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-      <th>Column 6</th>
-      <th>Column 7</th>
-      <th>Column 8</th>
-      <th>Column 9</th>
-      <th>Column 10</th>
-      <th>Column 11</th>
-      <th>Column 12</th>
-      <th>Column 13</th>
-      <th>Column 14</th>
-      <th>Column 15</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
-
-    </tr>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
-
-    </tr>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
-
-    </tr>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Column 6</td>
-      <td>Column 7</td>
-      <td>Column 8</td>
-      <td>Column 9</td>
-      <td>Column 10</td>
-      <td>Column 11</td>
-      <td>Column 12</td>
-      <td>Column 13</td>
-      <td>Column 14</td>
-      <td>Column 15</td>
-
-    </tr>
-  </tbody>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import { Table, Icon, Body, Card } from 'playbook-ui'
-
-const TableWithCollapsible = (props) => {
-
-  const Content = () => {
-    return (
-      <Card 
-          borderNone
-          borderRadius="none"
-          padding="md"
-          {...props}
-      >
-        <Body {...props}>Nested content inside a Table Row</Body>
-      </Card>
-    );
-  };
-
-return (
-      <Table
-          size="sm"
-          {...props}
-      >
-        <Table.Head>
-          <Table.Row>
-            <Table.Header>{'Column 1'}</Table.Header>
-            <Table.Header>{'Column 2'}</Table.Header>
-            <Table.Header>{'Column 3'}</Table.Header>
-            <Table.Header>{'Column 4'}</Table.Header>
-            <Table.Header>{'Column 5'}</Table.Header>
-            <Table.Header>{''}</Table.Header>
-          </Table.Row>
-
-        </Table.Head>
-        <Table.Body>
-          <Table.Row collapsible 
-              collapsibleContent={<Content/>}
-              {...props}
-          >
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell textAlign="right">{ 
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon="chevron-down"
-              />}
-            </Table.Cell>
-
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell>{''}</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell>{''}</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-  )
-}
-
-export default TableWithCollapsible

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

@@ -1 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -1,108 +0,0 @@
-import React from 'react'
-import { Table, Card, Icon, Body } from 'playbook-ui'
-
-const TableWithCollapsibleWithCustomClick = (props) => {
-
-  const Content = () => {
-    return (
-      <Card 
-          borderNone
-          borderRadius="none"
-          padding="md"
-          {...props}
-      >
-        <Body {...props}>Nested content inside a Table Row</Body>
-      </Card>
-    );
-  };
-
-
-return (
-      <Table
-          size="sm"
-          {...props}
-      >
-        <Table.Head>
-          <Table.Row>
-            <Table.Header>{'Column 1'}</Table.Header>
-            <Table.Header>{'Column 2'}</Table.Header>
-            <Table.Header>{'Column 3'}</Table.Header>
-            <Table.Header>{'Column 4'}</Table.Header>
-            <Table.Header>{'Column 5'}</Table.Header>
-            <Table.Header>{''}</Table.Header>
-          </Table.Row>
-
-        </Table.Head>
-        <Table.Body>
-          <Table.Row collapsible 
-              collapsibleContent={<Content/>}
-              toggleCellId="cell-1"
-              {...props}
-          >
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
-                id="cell-1"
-                textAlign="right"
-            >
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon="chevron-down"
-              />
-            </Table.Cell>
-
-          </Table.Row>
-          <Table.Row collapsible 
-              collapsibleContent={<Content/>}
-              toggleCellId="cell-2"
-              {...props}
-          >
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
-                id="cell-2"
-                textAlign="right"
-            >
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon="chevron-down"
-              />
-            </Table.Cell>
-
-          </Table.Row>
-          <Table.Row collapsible 
-              collapsibleContent={<Content/>}
-              toggleCellId="cell-3"
-              {...props}
-          >
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
-                id="cell-3"
-                textAlign="right"
-            >
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon="chevron-down"
-              />
-            </Table.Cell>
-
-          </Table.Row>
-        </Table.Body>
-      </Table>
-  )
-}
-
-export default TableWithCollapsibleWithCustomClick

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

@@ -1,2 +0,0 @@
-When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
-__NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same. 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -1,94 +0,0 @@
-import React from 'react'
-import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
-
-const TableWithCollapsibleWithCustomContent = (props) => {
-
-  const Content = () => {
-    return (
-      <Card 
-          borderNone
-          borderRadius="none"
-          color="light" 
-          paddingX="xl"
-          paddingY="md"
-          {...props}
-      >
-         <Body paddingBottom="sm" 
-             text="Expanded Custom Layout"
-             {...props}
-         />
-         <Flex justify="between">
-           <Image
-               url="https://via.placeholder.com/150"
-           />
-           <Image
-               url="https://via.placeholder.com/150"
-           />
-           <Image
-               url="https://via.placeholder.com/150"
-           />
-           <Image
-               url="https://via.placeholder.com/150"
-           />
-          </Flex>
-      </Card>
-    );
-  };
-
-    return (
-    <Table
-        size="sm"
-        {...props}
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-          <Table.Header>{''}</Table.Header>
-        </Table.Row>
-
-      </Table.Head>
-      <Table.Body>
-        <Table.Row collapsible 
-            collapsibleContent={<Content/>}
-            {...props}
-        >
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{ 
-            <Icon
-                color="primary"
-                fixedWidth
-                icon="chevron-down"
-            />}
-          </Table.Cell>
-
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithCollapsibleWithCustomContent

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import { Table, Background, Icon } from 'playbook-ui'
-
-const TableWithCollapsibleWithNestedRows = (props) => {
-
-  const Content = () => {
-    return (
-      <Table 
-          borderRadius="none"
-          container={false}
-          size="sm" 
-          {...props}
-      >
-      <Background tag="tr" 
-          {...props}
-      >
-        <Table.Cell>Expanded</Table.Cell>
-        <Table.Cell>Expanded</Table.Cell>
-        <Table.Cell>Expanded</Table.Cell>
-        <Table.Cell>Expanded</Table.Cell>
-        <Table.Cell>Expanded</Table.Cell>
-      </Background>
-      </Table>
-    );
-  };
-
-    return (
-    <Table
-        size="sm"
-        {...props}
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-          <Table.Header>{''}</Table.Header>
-        </Table.Row>
-
-      </Table.Head>
-      <Table.Body>
-        <Table.Row collapsible 
-            collapsibleContent={<Content/>}
-            collapsibleSideHighlight={false}
-        >
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{ 
-            <Icon
-                color="primary"
-                fixedWidth
-                icon="chevron-down"
-            />}
-          </Table.Cell>
-
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithCollapsibleWithNestedRows

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

@@ -1,3 +0,0 @@
-The `collapsibleContent` can display any content, including nested Table Rows. 
-
-Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.