playbook_ui 16.9.0.pre.rc.2 → 16.9.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 767e8550794164361093c1a0d6af22791b7a0a1662e680535494704ba4c08210
-  data.tar.gz: 83c41c8410774f11eb7e314e140a25a6b0f016120fa6b5fb73fe3e24af84e376
+  metadata.gz: f17c4655e2a4b80fd14e4abb8a3c155cf75b89c71c4b6be4b0b5220a2f2fb9ef
+  data.tar.gz: 2ad9638177b35d44155813d7436599bf5cf4a962b303eff2acb8d7708c5d70bf
 SHA512:
-  metadata.gz: 8d45b541fb4afce34a9e6c14dc71dff2426a3a802e02ac56fd1923a226abbfd706e1c8ca2ad5f58a35efdc1f370f2d46852f9ee70da3aec57ceb9c1330a87348
-  data.tar.gz: 17987cc62b5d10f84cbacacd4f9759641e6fa0d362131ac373771b9e51e896ade7e5fb70846c969df926564195f5f7da9e1d8d59a1ef752667fcfd6b8bb276cf
+  metadata.gz: b549ef4f057161685df07f751c2ed6939e0e9f7098776a2d59332cedac1189ac2f05b8e98c22eb978f34a5bd81bec32e1b1c498f3588d637590207b422bcd570
+  data.tar.gz: 1ae761f8f4514bbcd3db95149c168c8ebf972b62d5f2e078d0d689f8d2c6197ee80826c372b8bbc2a2c89ecfac51e1bdaf40ad9806f463352789ea98fa2f232a

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

@@ -0,0 +1,62 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("title", props: { size: 4, text: "Normal Structure", margin_bottom: "sm" }) %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "enable-toggle-expansion-normal",
+  table_data: @table_data,
+  column_definitions: column_definitions,
+  enable_toggle_expansion: "all"
+}) %>
+
+<%= pb_rails("title", props: { size: 4, text: "Subcomponent Structure", margin_top: "lg", margin_bottom: "sm" }) %>
+
+<%= pb_rails("advanced_table", props: { id: "enable-toggle-expansion-subcomponents" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: {
+    table_id: "enable-toggle-expansion-subcomponents",
+    table_data: @table_data,
+    column_definitions: column_definitions,
+    enable_toggle_expansion: "all"
+  }) %>
+  <%= pb_rails("advanced_table/table_body", props: {
+    table_id: "enable-toggle-expansion-subcomponents",
+    table_data: @table_data,
+    column_definitions: column_definitions,
+    subrow_headers: subrow_headers,
+    enable_toggle_expansion: "all"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md

@@ -0,0 +1,7 @@
+`enable_toggle_expansion` controls where AdvancedTable renders toggle-all expansion controls. It accepts `"header"`, `"all"`, or `"none"` and defaults to `"header"`.
+
+When using the normal Rails structure, pass `enable_toggle_expansion` to `advanced_table`. The parent kit renders its own `table_header` and `table_body`, so the prop is passed down automatically.
+
+When using the Rails subcomponent structure, pass `enable_toggle_expansion` directly to the subcomponents that need it. `advanced_table/table_header` uses it for the table header toggle-all button. **NOTE**: you must pass `table_data` to `advanced_table/table_header` as well so it can detect whether expandable rows exist. `advanced_table/table_body` uses it for nested subrow header toggle controls, such as when `subrow_headers` is present.
+
+Use `"all"` when you want toggle-all controls in both the table header and subrow headers. Use `"header"` when you only want the table header toggle-all control. Use `"none"` to suppress the header toggle-all control.

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

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -40,11 +48,11 @@ const AdvancedTableStickyHeader = (props) => {
   }
 
   return (
-    <div>
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           responsive="none"
-          tableData={MOCK_DATA}
+          tableData={tableData}
           tableProps={tableProps}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md

@@ -1,3 +1,7 @@
 The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
 
+This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

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

@@ -2,7 +2,6 @@
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -30,4 +29,19 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
+</div>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md

@@ -1,3 +1,7 @@
 The `table_props` prop can also be used to render a sticky header for the Advanced Table.
 
+This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

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

@@ -0,0 +1,68 @@
+import React from "react"
+import AdvancedTable from "../../pb_advanced_table/_advanced_table"
+import Title from "../../pb_title/_title"
+
+const COLUMN_COUNT = 10
+const ROW_COUNT = 40
+
+const columnDefinitions = [
+  {
+    accessor: "region",
+    label: "Region",
+    id: "region",
+    columnStyling: { minWidth: 160 },
+  },
+  ...Array.from({ length: COLUMN_COUNT }, (_, index) => ({
+    accessor: `metric${index + 1}`,
+    label: `Metric ${index + 1}`,
+    id: `metric${index + 1}`,
+    columnStyling: { minWidth: 180 },
+  })),
+]
+
+const tableData = Array.from({ length: ROW_COUNT }, (_, row) => ({
+  region: `Region ${row + 1}`,
+  ...Object.fromEntries(
+    Array.from({ length: COLUMN_COUNT }, (_, col) => [
+      `metric${col + 1}`,
+      String((row + 1) * (col + 1)),
+    ])
+  ),
+}))
+
+const tableProps = { sticky: true }
+
+const AdvancedTableStickyScrollLimitation = (props) => (
+  <div>
+    <Title
+        size={4}
+        text="Without maxHeight"
+        {...props}
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        responsive="none"
+        stickyLeftColumn={["region"]}
+        tableData={tableData}
+        tableProps={tableProps}
+        {...props}
+    />
+    <Title
+        paddingTop="sm"
+        size={4}
+        text="With maxHeight"
+        {...props}
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        maxHeight="sm"
+        responsive="none"
+        stickyLeftColumn={["region"]}
+        tableData={tableData}
+        tableProps={tableProps}
+        {...props}
+    />
+  </div>
+)
+
+export default AdvancedTableStickyScrollLimitation

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md

@@ -0,0 +1,7 @@
+`stickyLeftColumn` adds horizontal overflow to the table wrapper. Without `maxHeight`, the page scrolls vertically while the table scrolls horizontally — two scroll containers.
+
+Sticky columns work in that setup, but the sticky header cannot stick to the page. Scroll down on the page, then scroll the first table horizontally to see the conflict.
+
+The second table uses `maxHeight` so both axes share one scroll container. The header sticks to the top of the table box instead of the page.
+
+For a typical implementation with subrows, see [Sticky Columns with Sticky Header](#sticky-columns-with-sticky-header).

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

@@ -2,7 +2,6 @@
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -30,4 +29,19 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
+<% table_data = 15.times.map do |index|
+  {
+    year: (2020 + index).to_s,
+    id: (2020 + index).to_s,
+    newEnrollments: (20 + index).to_s,
+    scheduledMeetings: (10 + index).to_s,
+    attendanceRate: "#{50 + index}%",
+    completedClasses: (3 + index).to_s,
+    classCompletionRate: "#{30 + index}%",
+    graduatedStudents: (19 + index).to_s,
+  }
+end %>
+
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
+</div>

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

@@ -1,13 +1,21 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const tableData = Array.from({ length: 15 }, (_, index) => ({
+  year: String(2020 + index),
+  newEnrollments: String(20 + index),
+  scheduledMeetings: String(10 + index),
+  attendanceRate: `${50 + index}%`,
+  completedClasses: String(3 + index),
+  classCompletionRate: `${30 + index}%`,
+  graduatedStudents: String(19 + index),
+}))
 
 const AdvancedTableTablePropsStickyHeader = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
       label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
     },
     {
       accessor: "newEnrollments",
@@ -40,11 +48,10 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
   }
 
   return (
-    <div>
+    <div style={{ maxHeight: "320px", overflowY: "auto" }}>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          tableData={MOCK_DATA}
+          tableData={tableData}
           tableProps={tableProps}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md

@@ -2,6 +2,10 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 
+Scroll inside the table preview to see the header stick.
+
+This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
+
 Expand the table above to see this in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md

@@ -1,7 +1,9 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
 
-**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
+**NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
 
-Expand the table above to see this in action.
+This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
+
+Expand the table above to see responsive behavior in action.
 
 A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
@@ -52,6 +53,7 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
+  - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell

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

@@ -27,6 +27,7 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
 export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -79,42 +79,57 @@
 
   <%= javascript_tag do %>
     (function() {
+      const initQuickPickChangeListener = (input) => {
+        if (!<%= object.selection_type == "quickpick" %>) return
+        if (input.dataset.quickpickInitialized) return
+
+        input.dataset.quickpickInitialized = "true"
+        input.addEventListener("change", ({ target }) => {
+          const startDate = document.getElementById("<%= object.start_date_id %>")
+          const endDate = document.getElementById("<%= object.end_date_id %>")
+          const splittedValue = target.value.split(" to ")
+          startDate.value = splittedValue[0]
+          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+        })
+      }
+
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        const input = document.getElementById("<%= object.picker_id %>")
+
+        if (!input || input._flatpickr) return true
+        if (typeof window.datePickerHelper !== "function") return false
 
-          if (<%= object.selection_type == "quickpick" %>) {
-            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-              const startDate = document.getElementById("<%= object.start_date_id %>")
-              const endDate = document.getElementById("<%= object.end_date_id %>")
-              const splittedValue = target.value.split(" to ")
-              startDate.value = splittedValue[0]
-              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-            })
-          }
+        window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        initQuickPickChangeListener(input)
+
+        return true
+      }
+
+      let attempts = 0
+      const retryLoad = () => {
+        if (loadDatePicker()) return
+
+        if (attempts++ < 20) {
+          setTimeout(retryLoad, 100)
         }
       }
 
-      // Try to initialize immediately if DOM is ready
       if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", loadDatePicker)
+        window.addEventListener("DOMContentLoaded", retryLoad)
       } else {
-        loadDatePicker()
+        retryLoad()
       }
 
       // For dynamically added content (modals, etc.), check again after a brief delay
       setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>");
+        const input = document.getElementById("<%= object.picker_id %>")
         if (input && !input._flatpickr) {
-          loadDatePicker();
+          retryLoad()
         }
-      }, 100);
+      }, 100)
 
       if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", () => {
-          loadDatePicker()
-        })
+        window.addEventListener("<%= object.custom_event_type %>", retryLoad)
       }
     })()
   <% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={`fixed-${pickerInstance}`}
+                        key={"fixed-" + pickerInstance}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={`datePickerFixed-${pickerInstance}`}
+                        pickerId={"datePickerFixed-" + pickerInstance}
                         staticPosition={false}
                     />
                 </Dialog.Body>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -21,6 +21,58 @@ import {
     handleClickOutside,
 } from "./utilities";
 
+function serializeDropdownFilterResetDefault(
+    variant: "default" | "subtle" | "quickpick" | undefined,
+    multiSelect: boolean,
+    defaultValue: GenericObject | GenericObject[] | string | undefined,
+    dropdownOptions: GenericObject[] | GenericObject | undefined,
+): string | undefined {
+    const optionList: GenericObject[] = Array.isArray(dropdownOptions)
+        ? dropdownOptions
+        : [];
+    const optionDefaultId = (option: GenericObject | undefined): string | undefined => {
+        if (!option) return undefined;
+
+        const id = option.id;
+        if (id != null && id !== "") return String(id);
+
+        const matched = optionList.find((listOption: GenericObject) => (
+            (option.value != null && listOption.value === option.value) ||
+            (option.label != null && listOption.label === option.label)
+        ));
+
+        if (matched?.id != null && matched.id !== "") return String(matched.id);
+        return undefined;
+    };
+
+    if (variant === "quickpick") {
+        if (typeof defaultValue === "string" && defaultValue) {
+            const matched = optionList.find(
+                (opt: GenericObject) => opt.label?.toLowerCase() === defaultValue.toLowerCase()
+            );
+            if (matched?.id != null && matched.id !== "") return String(matched.id);
+        }
+        return undefined;
+    }
+    if (multiSelect) {
+        const arr = Array.isArray(defaultValue)
+            ? defaultValue
+            : defaultValue && typeof defaultValue === "object" && Object.keys(defaultValue).length
+                ? [defaultValue as GenericObject]
+                : [];
+        if (!arr.length) return undefined;
+        const ids = arr
+            .map((v) => optionDefaultId(v as GenericObject))
+            .filter((id) => id != null && id !== "");
+        return ids.length ? ids.join(",") : undefined;
+    }
+    if (defaultValue && typeof defaultValue === "object" && !Array.isArray(defaultValue)) {
+        const id = optionDefaultId(defaultValue as GenericObject);
+        if (id) return id;
+    }
+    return undefined;
+}
+
 type CustomQuickPickDate = {
     label: string;
     value: string[] | { timePeriod: string; amount: number };
@@ -157,6 +209,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       initialSelected
     );
 
+    const filterResetDefaultSerialized = useMemo(
+        () => serializeDropdownFilterResetDefault(variant, multiSelect, defaultValue, dropdownOptions),
+        [variant, multiSelect, defaultValue, dropdownOptions]
+    );
+
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -432,6 +489,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         <div {...ariaProps}
             {...dataProps}
             {...htmlProps}
+            {...(filterResetDefaultSerialized ? { "data-default-value": filterResetDefaultSerialized } : {})}
             className={classes}
             id={id}
             ref={outerDivRef}

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -12,7 +12,9 @@
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
+            <% if input_default_value.present? %>
             data-default-value="<%= input_default_value %>"
+            <% end %>
             data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -51,6 +51,7 @@ test('generated default kit and classname', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toBeInTheDocument()
   expect(kit).toHaveClass('pb_dropdown_default')
+  expect(kit).not.toHaveAttribute('data-default-value')
 })
 
 test('generated default Trigger and Container when none passed in', () => {
@@ -433,12 +434,16 @@ test("defaultValue works with multiSelect", () => {
     render(
       <Dropdown
           data={{ testid: testId }}
-          defaultValue={[options[0], options[2]]}
+          defaultValue={[
+            { label: options[0].label, value: options[0].value },
+            { label: options[2].label, value: options[2].value },
+          ]}
           multiSelect
           options={options}
       />
     )
     const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute("data-default-value", "United-states,pakistan")
     expect(kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary")).toHaveLength(2)
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
@@ -499,6 +504,7 @@ test("quickpick variant accepts string defaultValue", () => {
   const trigger = kit.querySelector('.pb_dropdown_trigger')
   
   expect(trigger).toHaveTextContent("This Month")
+  expect(kit).toHaveAttribute("data-default-value", "quickpick-this-month")
 })
 
 test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -69,9 +69,10 @@ svg {
       transform: scaleX(-1) scaleY(-1);
     }
     &.svg-inline--fa {
+      box-sizing: content-box;
       height: 1em;
       overflow: visible;
-      vertical-align: -.125em
+      vertical-align: -.125em;
     }
     &.svg_inverse {
       color: #fff;

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

@@ -8,7 +8,6 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   react:
@@ -20,7 +19,6 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   swift:

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

@@ -6,5 +6,4 @@ export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
-export { default as IconFaKit} from './_icon_fa_kit.jsx'
 export { default as IconColor } from './_icon_color.jsx'