playbook_ui 16.4.0.pre.alpha.PLAY2718containerfalseborderradiusresponsiveonly15164 → 16.4.0.pre.alpha.PLAY2839singlefilterresultscomma15414

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: deb30921ab6e5e0a134bf71decaef200f0a7e9393ab5ae6a926f6267604f80b9
-  data.tar.gz: b5ea71e20d11bffda695d920587c509123a5f31f59c7833a784a6d380a5112f7
+  metadata.gz: 115aff089c8f7a57d0223d7ba79a99a9d3bfafdd06c96f3947ef3dac58a81859
+  data.tar.gz: 789a51c4ad1191ef16dfd8a6c75c93c010f234796618981289812473b544091b
 SHA512:
-  metadata.gz: 9eebe12c7de1c4073455e4bb2aea103157aa92c7a27f75bb11d75bd85914b414076700d3468c062e80dea2966cc62c68779398c44eb64ff791ff399904ab05c1
-  data.tar.gz: c3051d4e9ef1e226b78c3d486fec6cb2c972c2a0e076d4d68a8e1a74246b36e6496e90e64d0e554e6ad1ce681c705abcb41b644ca0bf0dc6312a3511c3f8d9a8
+  metadata.gz: 6c1ee782cb55a7acf867b302c861e69d90ac74941fd21ab0122d983cb12905d737e59272e7ce282e191b103a911209f8525a79ed12b45a480ceebf0779fce417
+  data.tar.gz: a39f67a9251ec17e4eb4a2aa7e6419334afaaf4e1cc06fe5d8aeb427f417b03ad4b4856e4aa2846de065d670c5736e0814d8ff8be4ec7d242e69b790b8d1be8a

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,34 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("caption", props: { text: "Default Advanced Table Table Props Doc Example" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
-
-<%= pb_rails("caption", props: { text: "Advanced Table with just container: false" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table_2", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false }}) %>
-
-<%= pb_rails("caption", props: { text: "Typical set up: Card and Flex around Filter, SectionSeparator, and AdvancedTable with container: false" }) %>
-<%= pb_rails("card", props: { padding: "none", margin_bottom: "xl" }) do %>
-  <%= pb_rails("flex", props: { align: "stretch", orientation: "column", gap: "none" }) do %>
-    <%= pb_rails("filter", props: {
-      background: false,
-      max_height: (@table_data.to_a.size < 10) ? "50vh" : "none",
-      min_width: "xs",
-      popover_props: { width: "350px" },
-      id: "rails-table-props-filter-with-data",
-      template: "single",
-      results: @table_data.to_a.size,
-    }) do %>
-      <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-        <%= form.number_field :new_leads_eq, props: { label: "New Leads" } %>
-        <%= form.text_field :conversion_rate_eq, props: { label: "Conversion Rate" } %>
-        <%= form.actions do |action| %>
-          <%= action.submit props: { text: "Filter" } %>
-          <%= action.button props: { type: "reset", text: "Defaults", variant: "secondary" } %>
-        <% end %>
-      <% end %>
-    <% end %>
-    <%= pb_rails("section_separator") %>
-    <%= pb_rails("advanced_table", props: { id: "rails_template_advanced_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false } }) %>
-  <% end %>
-<% end %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,13 +1,6 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
-import Button from "../../pb_button/_button"
-import Caption from "../../pb_caption/_caption"
-import Card from "../../pb_card/_card"
-import Filter from "../../pb_filter/_filter"
-import Flex from "../../pb_flex/_flex"
-import SectionSeparator from "../../pb_section_separator/_section_separator"
-import TextInput from "../../pb_text_input/_text_input"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -47,100 +40,14 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
-  const filterPopoverProps = { width: "350px" }
-
-  const filterForm = (closePopover) => (
-    <form>
-      <TextInput
-          label="New Leads"
-          name="new_leads_eq"
-          placeholder="0"
-          type="number"
-          {...props}
-      />
-      <TextInput
-          label="Conversion Rate"
-          name="conversion_rate_eq"
-          placeholder="e.g. 12%"
-          {...props}
-      />
-      <Flex
-          spacing="between"
-          {...props}
-      >
-        <Button
-            onClick={closePopover}
-            text="Filter"
-            {...props}
-        />
-        <Button
-            text="Defaults"
-            type="reset"
-            variant="secondary"
-            {...props}
-        />
-      </Flex>
-    </form>
-  )
-
   return (
     <div>
-      <Caption
-          text="Default Advanced Table Table Props Doc Example"
-      />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
-      <Caption
-          text="Advanced Table with just container: false"
-      />
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={{container: false}}
-          {...props}
-      />
-
-      <Caption
-          text="Typical set up: Card and Flex around Filter, SectionSeparator, and AdvancedTable with container: false"
-      />
-      <Card
-          marginBottom="xl"
-          padding="none"
-          {...props}
-      >
-        <Flex
-            align="stretch"
-            gap="none"
-            orientation="column"
-            {...props}
-        >
-          <Filter
-              background={false}
-              id="react-table-props-filter-with-data"
-              maxHeight={MOCK_DATA.length < 10 ? "50vh" : "none"}
-              minWidth="xs"
-              popoverProps={filterPopoverProps}
-              results={MOCK_DATA.length}
-              {...props}
-          >
-            {({ closePopover }) => filterForm(closePopover)}
-          </Filter>
-          <SectionSeparator {...props} />
-          <AdvancedTable
-              columnDefinitions={columnDefinitions}
-              id="react_template_advanced_table"
-              tableData={MOCK_DATA}
-              tableProps={{container: false}}
-              {...props}
-          />
-        </Flex>
-      </Card>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_button/docs/_button_full_width_rails.md

@@ -0,0 +1,19 @@
+This button is used many times for mobile or other things like cards and sidebars.
+
+### Responsive `display` and `full_width`
+
+`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
+
+Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
+
+**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `full_width` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
+
+```erb
+<%= pb_rails("flex", props: {
+  display: { xs: "flex", default: "none" },
+  orientation: "column",
+  width: "100%",
+}) do %>
+  <%= pb_rails("button", props: { full_width: true, text: "Add" }) %>
+<% end %>
+```

data/app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md

@@ -0,0 +1,23 @@
+This button is used many times for mobile or other things like cards and sidebars.
+
+### Responsive `display` and `full_width`
+
+`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
+
+Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
+
+**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `fullWidth` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
+
+```jsx
+import { Flex, Button } from "playbook-ui"
+
+const Example = () => (
+  <Flex
+    display={{ xs: "flex", default: "none" }}
+    orientation="column"
+    width="100%"
+  >
+    <Button fullWidth text="Add" />
+  </Flex>
+)
+```

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -43,6 +43,11 @@ $pb_button_styles: (
       @include pb_circle_icon_button;
     }
   }
+
+  .pb_button_kit.pb_button_loading svg.loading-icon {
+    position: absolute;
+  }
+
   :first-child {
     &.pb_button_kit.pb_button_link {
       @include pb_circle_icon_button_active;

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx

@@ -5,6 +5,8 @@ import TitleCount from '../../pb_title_count/_title_count'
 
 const resultsText = (results: number): string => results == 1 ? 'Result' : 'Results'
 
+const formatResultsCount = (n: number): string => n.toLocaleString()
+
 type ResultsCountProps = {
   dark?: boolean,
   results?: number | null,
@@ -31,7 +33,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
           className="filter-results"
           dark={dark}
           size="xs"
-          text={`${results} ${resultsText(results)}`}
+          text={`${formatResultsCount(results)} ${resultsText(results)}`}
       />
     )
   }

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

@@ -29,7 +29,7 @@ module Playbook
         when nil
           nil
         else
-          "#{results} Results"
+          "#{number_with_delimiter(results)} Results"
         end
       end
 

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -51,6 +51,7 @@ type MultiLevelSelectProps = {
   treeData?: { [key: string]: string }[] | any;
   onChange?: (event: { target: { name?: string; value: any } }) => void;
   onSelect?: (prop: { [key: string]: any }) => void;
+  placeholder?: string;
   selectedIds?: string[] | any;
   variant?: "multi" | "single";
   wrapped?: boolean;
@@ -100,6 +101,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       treeData,
       onChange = () => null,
       onSelect = () => null,
+      placeholder: placeholderText = "Start typing...",
       selectedIds,
       variant = "multi",
       wrapped,
@@ -675,7 +677,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
                       ? `${itemsSelectedLength()} ${
                           itemsSelectedLength() === 1 ? "item" : "items"
                         } selected`
-                      : "Start typing..."
+                      : placeholderText
                   }
                     required={required}
                     value={singleSelectedItem.value || filterItem}

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb

@@ -0,0 +1,109 @@
+<%
+  tree_base = [{
+      label: "Power Home Remodeling",
+      value: "powerHomeRemodeling",
+      id: "100",
+      expanded: true,
+      children: [
+        {
+          label: "People",
+          value: "people",
+          id: "101",
+          expanded: true,
+          children: [
+            {
+              label: "Talent Acquisition",
+              value: "talentAcquisition",
+              id: "102",
+            },
+            {
+              label: "Business Affairs",
+              value: "business Affairs",
+              id: "103",
+              children: [
+                {
+                  label: "Initiatives",
+                  value: "initiatives",
+                  id: "104",
+                },
+                {
+                  label: "Learning & Development",
+                  value: "learningAndDevelopment",
+                  id: "105",
+                },
+              ],
+            },
+            {
+              label: "People Experience",
+              value: "peopleExperience",
+              id: "106",
+            },
+          ],
+        },
+        {
+          label: "Contact Center",
+          value: "contactCenter",
+          id: "107",
+          children: [
+            {
+              label: "Appointment Management",
+              value: "appointmentManagement",
+              id: "108",
+            },
+            {
+              label: "Customer Service",
+              value: "customerService",
+              id: "109",
+            },
+            {
+              label: "Energy",
+              value: "energy",
+              id: "110",
+            },
+          ],
+        },
+      ],
+  }]
+
+  prefix_mls_ids = nil
+  prefix_mls_ids = ->(nodes, pfx) {
+    nodes.map do |n|
+      h = n.dup
+      h[:id] = "#{pfx}#{n[:id]}"
+      h[:children] = prefix_mls_ids.call(n[:children], pfx) if n[:children].present?
+      h
+    end
+  }
+
+  tree_multi = prefix_mls_ids.call(tree_base, "phm_")
+  tree_return_all = prefix_mls_ids.call(tree_base, "phr_")
+  tree_single = prefix_mls_ids.call(tree_base, "phs_")
+%>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-multi-rails",
+  label: "Multi (default)",
+  margin_bottom: "sm",
+  name: "placeholder_multi",
+  tree_data: tree_multi,
+  placeholder: "Search or choose options…",
+}) %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-return-all-rails",
+  label: "Multi (return all selected)",
+  margin_bottom: "sm",
+  name: "placeholder_return_all",
+  placeholder: "Departments...",
+  return_all_selected: true,
+  tree_data: tree_return_all,
+}) %>
+
+<%= pb_rails("multi_level_select", props: {
+  id: "multi-level-select-placeholder-single-rails",
+  label: "Single",
+  name: "placeholder_single",
+  placeholder: "Select one option…",
+  tree_data: tree_single,
+  variant: "single",
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx

@@ -0,0 +1,127 @@
+import React from "react";
+
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeTemplate = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+function prefixTreeIds(nodes, prefix) {
+  return nodes.map((node) => ({
+    ...node,
+    id: `${prefix}${node.id}`,
+    children:
+      node.children && node.children.length > 0
+        ? prefixTreeIds(node.children, prefix)
+        : node.children,
+  }));
+}
+
+const treeDataMulti = prefixTreeIds(treeTemplate, "phm_");
+const treeDataReturnAll = prefixTreeIds(treeTemplate, "phr_");
+const treeDataSingle = prefixTreeIds(treeTemplate, "phs_");
+
+const MultiLevelSelectPlaceholder = () => (
+  <>
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-multi"
+        label="Multi (default)"
+        marginBottom="sm"
+        name="placeholder_multi"
+        onSelect={(selectedNodes) =>
+          console.log("Multi — default", selectedNodes)
+        }
+        placeholder="Search or choose options…"
+        treeData={treeDataMulti}
+    />
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-return-all"
+        label="Multi (return all selected)"
+        marginBottom="sm"
+        name="placeholder_return_all"
+        onSelect={(selectedNodes) =>
+          console.log("Multi — return all selected", selectedNodes)
+        }
+        placeholder="Departments..."
+        returnAllSelected
+        treeData={treeDataReturnAll}
+    />
+    <MultiLevelSelect
+        id="multi-level-select-placeholder-single"
+        label="Single"
+        name="placeholder_single"
+        onSelect={(selectedNodes) =>
+          console.log("Single", selectedNodes)
+        }
+        placeholder="Select one option…"
+        treeData={treeDataSingle}
+        variant="single"
+    />
+  </>
+);
+
+export default MultiLevelSelectPlaceholder;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md

@@ -0,0 +1 @@
+Use the `placeholder` prop to customize the initial text shown in the input when nothing is selected. The default is `Start typing...`.

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

@@ -18,6 +18,7 @@ examples:
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
+    - multi_level_select_placeholder: Placeholder
 
   react:
     - multi_level_select_default: Default
@@ -40,3 +41,4 @@ examples:
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
     - multi_level_select_react_reset_key: Reset with Key (React)
+    - multi_level_select_placeholder: Placeholder

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -18,3 +18,4 @@ export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.js
 export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
 export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
 export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
+export { default as MultiLevelSelectPlaceholder } from "./_multi_level_select_placeholder.jsx"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -32,6 +32,8 @@ module Playbook
                    default: ""
       prop :label, type: Playbook::Props::String,
                    default: ""
+      prop :placeholder, type: Playbook::Props::String,
+                         default: "Start typing..."
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
       prop :show_checked_children, type: Playbook::Props::Boolean,
@@ -50,6 +52,7 @@ module Playbook
           inputDisplay: input_display,
           name: name,
           label: label,
+          placeholder: placeholder,
           treeData: tree_data,
           required: required,
           requiredIndicator: required_indicator,

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -173,6 +173,33 @@ describe('MultiLevelSelect', () => {
     expect(label).toHaveTextContent("Select Location")
     expect(label).not.toHaveTextContent("*")
   })
+
+  test('should use default placeholder when none is passed', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="mls-placeholder-default"
+          treeData={treeData}
+      />
+    )
+    expect(
+      screen.getByPlaceholderText('Start typing...')
+    ).toBeInTheDocument()
+  })
+
+  test('should use custom placeholder when passed', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          id="mls-placeholder-custom"
+          placeholder="Choose items…"
+          treeData={treeData}
+      />
+    )
+    expect(
+      screen.getByPlaceholderText('Choose items…')
+    ).toBeInTheDocument()
+  })
 })
 
 describe('MultiLevelSelect multi variant', () => {

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -55,6 +55,7 @@ sections:
       - table_with_clickable_rows
       - table_with_selectable_rows
       - table_with_filter_variant
+      - table_with_filter_variant_external_filter_rails
       - table_with_filter_variant_with_pagination
       - table_disable_hover
 

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

@@ -0,0 +1,45 @@
+<%# External filter: capture any filter markup and pass it via the filter prop.
+    Use your own helper (e.g. a search/filter form) or pb_rails("filter") as shown here. %>
+<% users = [
+  { name: "Alex", role: "Engineer" },
+  { name: "Sam", role: "Designer" },
+  { name: "Jordan", role: "Manager" },
+] %>
+
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: {
+    id: "external-filter-demo",
+    template: "single",
+    results: 3,
+    background: false,
+    sort_menu: [
+      { item: "Name", link: "#", active: true, direction: "asc" },
+      { item: "Role", link: "#", active: false },
+    ],
+  }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("text_input", props: { label: "Role", placeholder: "e.g. Engineer, Designer" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "Table with External Filter",
+  filter: filter_output,
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Role" }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell") { user[:name] } %>
+        <%= pb_rails("table/table_cell") { user[:role] } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>