playbook_ui_docs 13.5.0.pre.alpha.PLAY823globalpropoverflow1191 → 13.5.0.pre.alpha.play984collapsiblekithidestooltips1203

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f6ec1ed1376960252be753472457fd1a68df5724a0517ecc167d9846b99c95c
-  data.tar.gz: 87d31f3c89a2134b7d74a270a674fb1aa38fc9d51c82729de855f05e8b827e8c
+  metadata.gz: bdffe95c54b0757edbf916c158fe0e74794fff71c94d99bac09c95d7387c12df
+  data.tar.gz: 0ec99686bb3b620cb3411ee6921b9611df02d2435ecfaac59cbfeb0c41160a46
 SHA512:
-  metadata.gz: 8e7bbc2a3be4f717101e8a274603ee0b5918c6dace9f430e81d9840047a97d2c2b3d6c23e25385c9b752e678aaf4e3ef66ab3d2e072cb9880954350c58351773
-  data.tar.gz: 620653b24b3214f13d0a6eb07a5afd05a7dfa7e10e51975298d6cabecddbec7f99253fb7a4a1243065c7c938624b6ffb4dd9767920b1db3a2a7ec274188d7d8e
+  metadata.gz: 10ee5bd3ffb489721c0e3df6a8f4885e617550c70d8e49f59cb6d19d7a4c593b662e6ca1155e7414beefe64194f6c2005806cfb4e48a30c01a485d36dfd5bf7c
+  data.tar.gz: 465f237b14da61176f586b812ee67c243ed002d3d0b0710f96d6ad1b6b0245c3b0937d0576a7d88c238941c1dbca17cf7ddea8f81242e538bec3f8be4e937b50

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