playbook_ui_docs 13.28.0.pre.alpha.PBNTR297gradientoverlay3029 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68319a6bec5bf342bcc43c82ea9f60eea9b3998bbc731ec509cc9045935afde3
-  data.tar.gz: 587805464e81282168cf9035f2100486356f4ceca8495879fcd10f0360d3df7e
+  metadata.gz: 3fdca61b26fda48aa6b5331f6a7de27efecd3e1618fe07ef010a17390ee1b328
+  data.tar.gz: 42f46eb60a91d7b41365436b6e40d636159fc5695c61b4eb849074566388a3da
 SHA512:
-  metadata.gz: 76cedfd8ebd4cfb5cf29a38f03e646d52044cb058c486e26c82a0f8e84b30e051b5320591c86d605c14988719392e799cbff4c200580e8a063b85b074c12aaa4
-  data.tar.gz: dc466cd04903c60c0173f5e62ade2a93c92da6760c3f74da08d42adfcb07d677befe201b04435750b61688f6e82d80c57574c67e85d63d483417c46fdfc8cc51
+  metadata.gz: 69eb11de117b6fda6fd8b6e98eb0710339df7fff41e5aef6c8732d17308a7ec315e80b5ec080828be5ade18f43b7f3dc3636c9831fdbb203aa610ed88f7bba80
+  data.tar.gz: 4cdf8fd4c336906ec936c4c7d22cf5247a0ce36afa1ea17ae51e99cb2e9e507f154ae108477038350b3f7643e8f4dd838711e5a974a95312cb4977bd4509d230

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md

@@ -1,3 +1,3 @@
 `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.

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

@@ -1,7 +1,6 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  - advanced_table_beta_subrow_headers: SubRow Headers
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -13,3 +12,4 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: inline Row Loading
+

data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom_rails.html.erb → _bar_graph_custom.html.erb}

@@ -15,7 +15,7 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-<% bar_graph_options = {
+<% custom_options = {
     customOptions: {
         subtitle: {
             text: "Overwritten subtitle",
@@ -45,5 +45,5 @@
     y_axis_min: 0,
     subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
-    custom_options: bar_graph_options
-}) %>
+    custom_options: custom_options
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -1,2 +1 @@
-The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
- It's important to note that certain options may require specific script imports to function properly.
+See https://api.highcharts.com/highcharts/ for a comprehensive list of available options.

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

@@ -8,7 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
-  - bar_graph_custom_rails: Custom Overrides
+  - bar_graph_custom: Custom Overrides
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -13,15 +13,6 @@
   ]
 %>
 
-<% 
-  example_dropdown_options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
@@ -32,7 +23,6 @@
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities

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

@@ -7,40 +7,39 @@ const TableAlignmentColumn = (props) => {
     <Table
         {...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 textAlign="center">{'Rating'}</Table.Header>
-                <Table.Header textAlign="right">{'Money'}</Table.Header>
-            </Table.Row>
-        </Table.Head>
-        <Table.Body>
-            <Table.Row>
-                <Table.Cell>{'Value 1'}</Table.Cell>
-                <Table.Cell>{'Value 2'}</Table.Cell>
-                <Table.Cell>{'Value 3'}</Table.Cell>
-                <Table.Cell textAlign="center">{'3'}</Table.Cell>
-                <Table.Cell textAlign="right">{'$57.32'}</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 textAlign="center">{'2'}</Table.Cell>
-                <Table.Cell textAlign="right">{'$5,657.08'}</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 textAlign="center">{'4'}</Table.Cell>
-                <Table.Cell textAlign="right">{'$358.77'}</Table.Cell>
-            </Table.Row>
-        </Table.Body>
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th align="center">{'Rating'}</th>
+          <th align="right">{'Money'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'3'}</td>
+          <td align="right">{'$57.32'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'2'}</td>
+          <td align="right">{'$5,657.08'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'4'}</td>
+          <td align="right">{'$358.77'}</td>
+        </tr>
+      </tbody>
     </Table>
-
   )
 }
 

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

@@ -1,2 +1,2 @@
-Pass our `textAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
+You can individually align a piece of table data, but a more practical use would be applied to align a column.
 In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

data/app/pb_kits/playbook/pb_table/docs/{_table_outer_padding.html.erb → _table_alignment_row.html.erb}

@@ -1,11 +1,11 @@
-<%= pb_rails("table", props: { outer_padding: "sm", size: "sm" }) do %>
+<%= pb_rails("table") do %>
   <thead>
     <tr>
       <th>Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
       <th>Column 4</th>
-      <th></th>
+      <th>Column 5</th>
     </tr>
   </thead>
   <tbody>
@@ -14,21 +14,21 @@
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td>Value 5</td>
     </tr>
-    <tr>
+    <tr align="center">
       <td>Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td>Value 5</td>
     </tr>
-    <tr>
+    <tr align="right">
       <td>Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td>Value 5</td>
     </tr>
   </tbody>
 <% end %>

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

@@ -7,39 +7,39 @@ const TableAlignmentRow = (props) => {
     <Table
         {...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.Row>
-    </Table.Head>
-    <Table.Body>
-      <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.Row>
-      <Table.Row textAlign="center">
-        <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.Row>
-      <Table.Row textAlign="right">
-        <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.Row>
-    </Table.Body>
-  </Table>
+      <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 align="center">
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr align="right">
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
   )
 }
 

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

@@ -1,2 +1,2 @@
-Pass our `textAlign` global prop to any `table.row` subcomponent to change the text alignment of all cells within that row.
+This is to be used to shift the whole row.
 The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

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

@@ -0,0 +1,63 @@
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>Price</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td shift="down">Total</td>
+      <td>
+        $12
+        <br/>
+        $46
+        <br/>
+        $25
+        <br/>
+        -------
+        <br/>
+        $83
+      </td>
+    </tr>
+  </tbody>
+<% end %>
+<br/>
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>Espresso Drinks</th>
+      <th>Ingredients</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td shift="up">Cappuccino</td>
+      <td>
+        Espresso
+        <br/>
+        Steamed Milk
+        <br/>
+        Milk Foam
+      </td>
+    </tr>
+    <tr>
+      <td shift="up">Macchiato</td>
+      <td>
+        Espresso
+        <br/>
+        Steamed Milk
+      </td>
+    </tr>
+    <tr>
+      <td shift="up">Mocha</td>
+      <td>
+        Espresso
+        <br/>
+        Hot Chocolate
+        <br/>
+        Steamed Milk
+      </td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -9,16 +9,16 @@ const TableAlignmentShiftData = (props) => {
           marginBottom="md"
           {...props}
       >
-        <Table.Head>
-          <Table.Row>
-            <Table.Header>&nbsp;</Table.Header>
-            <Table.Header>{'Price'}</Table.Header>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell verticalAlign="bottom">{'Total'}</Table.Cell>
-            <Table.Cell>
+        <thead>
+          <tr>
+            <th>&nbsp;</th>
+            <th>{'Price'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td shift="down">{'Total'}</td>
+            <td>
               {'$12'}
               <br />
               {'$46'}
@@ -28,51 +28,50 @@ const TableAlignmentShiftData = (props) => {
               {'-------'}
               <br />
               {'$83'}
-            </Table.Cell>
-          </Table.Row>
-        </Table.Body>
+            </td>
+          </tr>
+        </tbody>
       </Table>
-
       <Table
           {...props}
       >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Espresso Drinks'}</Table.Header>
-          <Table.Header>{'Ingredients'}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell verticalAlign="top">{'Cappuccino'} </Table.Cell>
-          <Table.Cell>
-          {'Steamed Milk'}
-          <br />
-          {'Milk Foam'}
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell verticalAlign="top">
-            {'Macchiato'}
-            </Table.Cell>
-            <Table.Cell verticalAlign="top">
-            {'Espresso'}
-            <br />
-            {'Steamed Milk'}
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            {'Mocha'}
-            </Table.Cell>
-          <Table.Cell>
-            {'Hot Chocolate'}
-            <br />
-            {'Steamed Milk'}
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
+        <thead>
+          <tr>
+            <th>{'Espresso Drinks'}</th>
+            <th>{'Ingredients'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td shift="up">{'Cappuccino'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Steamed Milk'}
+              <br />
+              {'Milk Foam'}
+            </td>
+          </tr>
+          <tr>
+            <td shift="up">{'Macchiato'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Steamed Milk'}
+            </td>
+          </tr>
+          <tr>
+            <td shift="up">{'Mocha'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Hot Chocolate'}
+              <br />
+              {'Steamed Milk'}
+            </td>
+          </tr>
+        </tbody>
+      </Table>
     </div>
   )
 }

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

@@ -1,2 +1,2 @@
-Pass our `verticalAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
+You can individually shift a piece of table data, or shift an entire column.
 The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

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

@@ -0,0 +1,52 @@
+<%= pb_rails("table") 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 1a
+        <br/>
+        Value 1a
+        <br/>
+        Value 1a
+      </td>
+      <td>Value 2a</td>
+      <td>Value 3a</td>
+      <td>Value 4a</td>
+      <td>Value 5a</td>
+    </tr>
+    <tr shift="middle">
+      <td>
+        Value 1b
+        <br/>
+        Value 1b
+        <br/>
+        Value 1b
+      </td>
+      <td>Value 2b</td>
+      <td>Value 3b</td>
+      <td>Value 4b</td>
+      <td>Value 5b</td>
+    </tr>
+    <tr shift="down">
+      <td>
+        Value 1c
+        <br/>
+        Value 1c
+        <br/>
+        Value 1c
+      </td>
+      <td>Value 2c</td>
+      <td>Value 3c</td>
+      <td>Value 4c</td>
+      <td>Value 5c</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -4,59 +4,60 @@ import Table from '../_table'
 
 const TableAlignmentShiftRow = (props) => {
   return (
-    <Table {...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.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>
+    <Table
+        {...props}
+    >
+      <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 1a'}
             <br />
             {'Value 1a'}
             <br />
             {'Value 1a'}
-          </Table.Cell>
-          <Table.Cell>{'Value 2a'}</Table.Cell>
-          <Table.Cell>{'Value 3a'}</Table.Cell>
-          <Table.Cell>{'Value 4a'}</Table.Cell>
-          <Table.Cell>{'Value 5a'}</Table.Cell>
-        </Table.Row>
-        <Table.Row verticalAlign="middle">
-          <Table.Cell>
+          </td>
+          <td>{'Value 2a'}</td>
+          <td>{'Value 3a'}</td>
+          <td>{'Value 4a'}</td>
+          <td>{'Value 5a'}</td>
+        </tr>
+        <tr shift="middle">
+          <td>
             {'Value 1b'}
             <br />
             {'Value 1b'}
             <br />
             {'Value 1b'}
-          </Table.Cell>
-          <Table.Cell>{'Value 2b'}</Table.Cell>
-          <Table.Cell>{'Value 3b'}</Table.Cell>
-          <Table.Cell>{'Value 4b'}</Table.Cell>
-          <Table.Cell>{'Value 5b'}</Table.Cell>
-        </Table.Row>
-        <Table.Row verticalAlign="bottom">
-          <Table.Cell>
+          </td>
+          <td>{'Value 2b'}</td>
+          <td>{'Value 3b'}</td>
+          <td>{'Value 4b'}</td>
+          <td>{'Value 5b'}</td>
+        </tr>
+        <tr shift="down">
+          <td>
             {'Value 1c'}
             <br />
             {'Value 1c'}
             <br />
             {'Value 1c'}
-          </Table.Cell>
-          <Table.Cell>{'Value 2c'}</Table.Cell>
-          <Table.Cell>{'Value 3c'}</Table.Cell>
-          <Table.Cell>{'Value 4c'}</Table.Cell>
-          <Table.Cell>{'Value 5c'}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+          </td>
+          <td>{'Value 2c'}</td>
+          <td>{'Value 3c'}</td>
+          <td>{'Value 4c'}</td>
+          <td>{'Value 5c'}</td>
+        </tr>
+      </tbody>
     </Table>
-
   )
 }