playbook_ui_docs 13.5.0 → 13.6.0.pre.alpha.tiptapreacthookformbug1210

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a52479a874399aede5baaf0aba7761ba2bc5356a4c5b181a86088e7c13ef96f6
-  data.tar.gz: 48e502ad78059d5db41e0cd873ae0e6f77f92ea560f2e21950f276068f1a6160
+  metadata.gz: 63100a9d6982f397ccaadd75ecf40e5c73434483c996c9337e0c0be4f436cd6a
+  data.tar.gz: 77591cf9bd6f29dc2d5c952c453cf2524591f37fe49405239c4cf397d7f3e4b4
 SHA512:
-  metadata.gz: 62f934b940778238c163fa0cd2586e2afc364a252492cacf13a1bc6a0e6ec2d368b1f8eb145e85eec156b3ea06aa261350fba93b5e7a22bee47bb20c16520a98
-  data.tar.gz: facc03fa04b8797492b8221b8813924e39886df2c66cb86b2d7126d29fe51b412a7e4c1fb422d6714575ae3eb889ffffd78bc1a290ad594cfb1780e4dd6cbca5
+  metadata.gz: 902996a2e597911ae9698f12331583e28755280d9e6b28741f6a93f2912ff29d9ed1fbb9191af4ce155b5489ac6706e23d09beb211d0ef83a34fdd0cd9cd7716
+  data.tar.gz: f0f0f01b74494e8ab35206385bde1ac331243d10dc1db519b512a28b2f60d9256a848d40f98798b37d6e031097ad586b9756388855b16dccb8e065d0a757d62c

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

@@ -2,27 +2,31 @@
   <thead>
     <tr>
       <%= pb_rails("table/table_header", props: {
-        id: "name",
-        colspan: 2,
+        text: "Territory",
+        id: "territory",
         sort_menu: [
-          { item: "Name", link: "?q[sorts]=name+desc", active: false, direction: "desc" },
-          { item: "Name", link: "?q[sorts]=name+asc", active: true, direction: "asc" },
+          { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
+          { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
-        text: "Age",
-        id: "age",
+        id: "name",
+        text: "Full Name",
+        colspan: 2,
         sort_menu: [
-          { item: "Age", link: "?q[sorts]=age+desc", active: false, direction: "desc" },
-          { item: "Age", link: "?q[sorts]=age+asc", active: false, direction: "asc" },
+          { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {
-        text: "Territory",
-        id: "territory",
+        text: "Age",
+        id: "age",
+        sort_dropdown: true,
         sort_menu: [
-          { item: "Territory", link: "?q[sorts]=territory+desc", active: false, direction: "desc" },
-          { item: "Territory", link: "?q[sorts]=territory+asc", active: false, direction: "asc" },
+          { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
+          { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
@@ -30,25 +34,25 @@
   </thead>
   <tbody>
     <tr>
-      <td>Name 1</td>
-      <td>Name 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
+      <td>Ter 1</td>
+      <td>First Name 1</td>
+      <td>Last Name 1</td>
+      <td>Age 1</td>
+      <td>Job 1</td>
     </tr>
     <tr>
-      <td>Name 1</td>
-      <td>Name 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
+      <td>Ter 2</td>
+      <td>First Name 2</td>
+      <td>Last Name 2</td>
+      <td>Age 2</td>
+      <td>Job 2</td>
     </tr>
     <tr>
-      <td>Name 1</td>
-      <td>Name 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
+      <td>Ter 3</td>
+      <td>First Name 3</td>
+      <td>Last Name 3</td>
+      <td>Age 3</td>
+      <td>Job 3</td>
     </tr>
   </tbody>
 <% end %>

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

@@ -1 +1,8 @@
-A kit that produces a `<th>` tag. You can also use the `sort_menu` prop to make the header a sortable link, just like <a href="https://playbook.powerapp.cloud/kits/filter#sort-only" target="_blank">our filter kit.</a>
+The `table_header` subcomponent creates `<th>` elements and optionally accepts:
+
+* `colspan` (number) for setting column span
+* `sort_menu` accepts sort options as an array of `item` objects.
+presence of `sort_menu` enables the sort link within the header
+* `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
+  * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
+* `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional