playbook_ui 16.5.0.pre.rc.1 → 16.5.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5bce66540e899088572589486b1f9e6d647078edabc776ba5b6db256c6de3b1c
-  data.tar.gz: f2b90505af083f2845541445031943f610c0a3c5de84f9f747df80328a49eecc
+  metadata.gz: 98207b8b5cdcfbfb88cfdb2a778ca623f572afc5e5817ce9d3cd0f1117b336b0
+  data.tar.gz: e603e243afe259f96d162f5bbdef58cb7efdb2ca05fabf942a0ae8f6452dc629
 SHA512:
-  metadata.gz: 2bbbd05955e4fcc484680e0c949f6654f5d159b8df3b496f5ee3f05b9ef570e9fb93eb53d42d9c1275c05354e38d7f9785c034e8e8899dba1ae260b891d0850a
-  data.tar.gz: 456721d5691e399da8ceb32f14300b71ca51d88dac42f5dcaf84b8e7c751657cab86593e13aa537569a55fa61d588a32af4caa3ef9789165303e851b8f7c1ed1
+  metadata.gz: 97ced981390eabf50717b0270dd0db9ba7798c0edcdfa0ef2eac929fa3aba2fa8a09492f4e76d26f077a0c37f58a479494d2c5ee2e36e2cedc4ada8158633711
+  data.tar.gz: 39b0df5624e178851b72acd00d548e346c0ab0526ac23f42f4bbb6718db73ccd6e6104edb780885eb7b45954a1368e6b1d6972105d2f93659451ccc66d1ed878

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -674,12 +674,18 @@
     @each $color_name, $color_value in $border_color_options {
       &.column-group-border-#{$color_name} {
         @if $theme == "light" {
+          &:not(.advanced-table-no-table-container) {
+            @include advanced-table-sticky-wrapper-frame($color_value);
+          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $white,
             lighten($silver, $opacity_7)
           );
         } @else if $theme == "dark" {
+          &:not(.advanced-table-no-table-container) {
+            @include advanced-table-sticky-wrapper-frame($color_value);
+          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $bg_dark_card,
@@ -715,6 +721,10 @@
       width: 100%;
       @include scrollbar-styling;
 
+      &:not(.advanced-table-no-table-container) {
+        @include advanced-table-sticky-wrapper-frame($border_light);
+      }
+
       // These are the responsive borders that should NOT inherit the custom color
       @include advanced-table-sticky-mixin(
         $border_light,
@@ -1008,6 +1018,11 @@
       .sticky-left {
         background-color: $bg_dark;
       }
+
+      &:not(.advanced-table-no-table-container) {
+        @include advanced-table-sticky-wrapper-frame($border_dark);
+      }
+
       @include advanced-table-sticky-mixin(
         $border_dark,
         $bg_dark_card,
@@ -1026,6 +1041,10 @@
           }
         }
 
+        &:not(.advanced-table-no-table-container) {
+          @include advanced-table-sticky-wrapper-frame($border_dark);
+        }
+
         // These are the responsive borders that should NOT inherit the custom color
         @include advanced-table-sticky-mixin(
           $border_dark,

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -127,6 +127,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     fullScreenControl,
   } = props;
 
+  const noTableCardContainer = tableProps?.container === false;
+
   // Component refs
   const tableWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -281,6 +283,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
+    { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -48,9 +48,16 @@ module Playbook
           hidden_action_bar_class,
         ]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
+        additional_classes << "advanced-table-no-table-container" if no_table_card_container?
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
 
+      def no_table_card_container?
+        return false unless table_props.is_a?(Hash)
+
+        table_props[:container] == false || table_props["container"] == false
+      end
+
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -1,3 +1,9 @@
+// Acts as outer “card frame” on the advanced-table wrapper (table-card from Table) is included from `_advanced_table.scss` only when `:not(.advanced-table-no-table-container)`/container: false is not present.
+@mixin advanced-table-sticky-wrapper-frame($border-color) {
+  border-radius: 4px;
+  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
+}
+
 @mixin advanced-table-sticky-mixin(
   $border-color,
   $bg-main,
@@ -5,8 +11,6 @@
   $highlight: #E5EEFA,
   $highlight-dark: #202850,
 ) {
-  border-radius: 4px;
-  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
   display: block;
   [class^="pb_table"].table-sm.table-card thead tr th:first-child,
   [class^="pb_table"].table-sm:not(.no-hover).table-card

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_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', () => {