playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -130,7 +130,7 @@
             <div class="pb_filter_responsive_sort">
               <%= pb_rails("caption", props: { text: "sort by:", classname: "pb_filter_responsive_sort_label"}) %>
               <% unless object.sort_menu == [{}] %>
-                <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
+                <%= pb_rails("button", props: object.sort_button_props) do %>
                   <% object.sort_menu.each do |item| %>
                     <% if item[:active] == true %>
                       <%= item[:item] %>
@@ -153,7 +153,7 @@
 
         <% if (object.template == "single" ) || (object.template == "sort_only") %>
           <% unless object.sort_menu == [{}] %>
-            <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
+            <%= pb_rails("button", props: object.sort_button_props) do %>
               <% object.sort_menu.each do |item| %>
                 <% if item[:active] == true %>
                   <%= item[:item] %>
@@ -171,7 +171,7 @@
           <%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
             <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
               <%= pb_rails("caption", props: { text: "sort by:"}) %>
-              <%= pb_rails("button", props: {variant: "link", padding_right: "none", id: "sort-button#{object.id}"}) do %>
+              <%= pb_rails("button", props: object.sort_button_props) do %>
                 <% object.sort_menu.each do |item| %>
                   <% if item[:active] == true %>
                     <%= item[:item] %>
@@ -191,7 +191,7 @@
       <% end %>
     <%end%>
 
-    <% if object.template != "filter_only"%>
+    <% if object.template != "filter_only" && !object.single_sort_option? %>
       <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -123,6 +123,19 @@ module Playbook
         end
       end
 
+      def single_sort_option?
+        available_sort_options.one?
+      end
+
+      def sort_button_props
+        {
+          variant: "link",
+          id: "sort-button#{id}",
+          padding_right: "none",
+          link: single_sort_link,
+        }.compact
+      end
+
     private
 
       def responsive_classname
@@ -142,6 +155,21 @@ module Playbook
       def interactive_quickpick?(config)
         config[:type].to_s == "dropdown" && config[:variant].to_s == "quickpick"
       end
+
+      def available_sort_options
+        Array(sort_menu).filter_map do |item|
+          next unless item.is_a?(Hash)
+
+          option = item.with_indifferent_access
+          option if option[:item].present? || option[:link].present?
+        end
+      end
+
+      def single_sort_link
+        return unless single_sort_option?
+
+        available_sort_options.first[:link].presence
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -215,6 +215,47 @@ test("responsive stacked merges kit className with caller className", () => {
   expect(container.querySelector(".pb_filter_kit.pb_filter_responsive.consumer-class")).toBeInTheDocument();
 });
 
+test("toggles a single sort option without opening the popover", () => {
+  const handleSortChange = jest.fn();
+
+  const { rerender } = render(
+    <Filter
+        onSortChange={handleSortChange}
+        results={1}
+        sortOptions={{ popularity: "Popularity" }}
+        sortValue={[{ name: "popularity", dir: "desc" }]}
+    />
+  );
+
+  fireEvent.click(screen.getByRole("button", { name: /Popularity/ }));
+
+  expect(handleSortChange).toHaveBeenCalledWith([{ name: "popularity", dir: "asc" }]);
+  expect(document.querySelector(".pb_filter_sort_menu")).not.toBeInTheDocument();
+
+  rerender(
+    <Filter
+        onSortChange={handleSortChange}
+        results={1}
+        sortOptions={{ popularity: "Popularity" }}
+        sortValue={[{ name: "popularity", dir: "asc" }]}
+    />
+  );
+
+  fireEvent.click(screen.getByRole("button", { name: /Popularity/ }));
+
+  expect(handleSortChange).toHaveBeenLastCalledWith([{ name: "popularity", dir: "desc" }]);
+  expect(document.querySelector(".pb_filter_sort_menu")).not.toBeInTheDocument();
+});
+
+test("opens the sort popover when multiple options are available", () => {
+  render(<FilterTest />);
+
+  fireEvent.click(screen.getByRole("button", { name: /Popularity/ }));
+
+  expect(screen.getByText("Manager's Title")).toBeInTheDocument();
+  expect(document.querySelector(".pb_filter_sort_menu")).toBeInTheDocument();
+});
+
 test("responsive stacked without children keeps sort-only FilterSingle", () => {
   const { container } = render(
     <Filter

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_playground.json

@@ -2,15 +2,15 @@
   "template": "<FixedConfirmationToast{{props}} />",
   "propTargets": {},
   "defaults": {
+    "autoClose": 0,
     "closeable": false,
     "multiLine": false,
     "navMarginTop": false,
+    "open": true,
     "status": "success",
-    "autoClose": 0,
+    "zIndex": "max",
     "onClose": "() => {}",
-    "open": true,
-    "text": "Items Successfully Moved",
-    "zIndex": "max"
+    "text": "Items Successfully Moved"
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -11,8 +11,7 @@ beforeEach(() => {
 })
   
 afterEach(() => {
-    // eslint-disable-next-line
-    console.error.mockRestore()
+    jest.restoreAllMocks()
 })
 
 test('renders with default props', () => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/kit.schema.json

@@ -12,7 +12,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": 0
     },
     "closeable": {
       "type": "boolean",
@@ -68,7 +69,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     },
     "status": {
       "type": "enum",
@@ -107,7 +109,8 @@
       "type": "number | string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": "max"
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_flex/docs/_playground.json

@@ -18,6 +18,9 @@
     "reverse": false,
     "vertical": "top",
     "align": "none",
+    "gap": "none",
+    "rowGap": "none",
+    "columnGap": "none",
     "wrap": false,
     "alignSelf": "none"
   },

data/app/pb_kits/playbook/pb_flex/kit.schema.json

@@ -28,15 +28,27 @@
         "react",
         "rails"
       ],
-      "values": [
-        "start",
-        "center",
-        "end",
-        "around",
-        "between",
-        "evenly",
-        "none"
-      ],
+      "values": {
+        "react": [
+          "start",
+          "center",
+          "end",
+          "around",
+          "between",
+          "evenly",
+          "none"
+        ],
+        "rails": [
+          "start",
+          "center",
+          "end",
+          "stretch",
+          "around",
+          "between",
+          "evenly",
+          "none"
+        ]
+      },
       "default": "none"
     },
     "inline": {
@@ -118,21 +130,24 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": "none"
     },
     "rowGap": {
       "type": "SizeType | SizeResponsiveType",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": "none"
     },
     "columnGap": {
       "type": "SizeType | SizeResponsiveType",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": "none"
     },
     "wrap": {
       "type": "boolean",

data/app/pb_kits/playbook/pb_form/docs/_description_react.md

@@ -0,0 +1,3 @@
+Use `Controller` to build React forms with Playbook kits and [react-hook-form](https://react-hook-form.com/). It keeps every field's binding consistent, and it's required for kits that don't forward a ref to a native element or whose `onChange` sends a value instead of a DOM event.
+
+Pick an input below to see Defaults, Validation, Default Values, and Multi-Column layout patterns one field at a time.