RubyGems - playbook_ui_docs - Versions diffs - 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.alpha.play273614090 - Mend

playbook_ui_docs 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.alpha.play273614090

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 270693654cf8df95e641e41ebcf7188ff30496755370bf37e4dcb699f1ae47ad
-  data.tar.gz: 85d7b133f544df07dbe6705a073a91eed4386a7b507cabeb92311b86be96b17f
+  metadata.gz: dc6fd2100ed7e07e50d2ecc68a0fd5d3ad5bc78c75ebe2e3bd32922f64148fba
+  data.tar.gz: 6b3b4ca002965ef6d2397007f7e678ae6c464790bede076e1fc080f53904c00b
 SHA512:
-  metadata.gz: d5b1c743b2e85acf3c2cd23507e9b4c56a3180e65b519abd6eb131532e43518299da0536a0a87ce3aa4dc6bda5daf882a5e2964052648acd181f98d883b65fed
-  data.tar.gz: 59568738b074f7a7ced06aef05a1f663b044fafce0f6bc9af52cf2ea6ce6feae6cb3c72551095b307056c472d659f84a1cae3a9f70cd0addc82f478c53d24cbf
+  metadata.gz: 70e0f7e55f56b1b413aeb8e7da55483322f200cb96424afe07eb09da255c111339811a2b75df592b16ab053e615dbf19db601a82be104acb77f9b7ccc7b19982
+  data.tar.gz: 8f8f6ed24ee2bb6a8580606ab8236a3af324a24961d40590cea87a5f51e6e31d014738c1f4192553b8c0913c0e5f027faea475068886253a9565d50086ec48a9

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx ADDED Viewed

@@ -0,0 +1,71 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+import  Flex  from '../../pb_flex/_flex'
+import  Title  from '../../pb_title/_title'
+import  Body  from '../../pb_body/_body'
+const AdvancedTableColumnStylingBackgroundCustom = (props) => {
+  const columnDefinitions = [
+{
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      customRenderer: (row, value) => (
+        <Flex flexDirection="column">
+          <Title size={4}
+              text={value}
+          />
+          <Body text="lorem ipsum" />
+          <Body text="lorem ipsum" />
+        </Flex>
+      ),
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{
+        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
+        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
+      },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      columnStyling:{
+        cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
+      },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+export default AdvancedTableColumnStylingBackgroundCustom

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md ADDED Viewed

@@ -0,0 +1,4 @@
+`cellBackgroundColor` and `fontColor` can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.
+See the code snippet below for more details.

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

@@ -78,6 +78,7 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
+  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

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

@@ -47,4 +47,5 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb CHANGED Viewed

@@ -1,36 +1,4 @@
-<%= pb_rails("flex", props: {
-  gap: "md",
-  orientation: "column"
-}) do %>
-  <%= pb_rails("caption", props: { text: "flex direction responsive: row on md + xl, column as default" }) %>
-  <%= pb_rails("card", props: {
-    flex_direction: { default: "column", md: "row", xl:"row" }
-  })  do %>
-      <%= pb_rails("body", props: { text: "Item 1", color: "default" }) %>
-    <%= pb_rails("body", props: { text: "Item 2", color: "default" }) %>
-    <%= pb_rails("body", props: { text: "Item 3", color: "default" }) %>
-  <% end %>
-  <%= pb_rails("caption", props: { text: "align items responsive: start on default, center on md, end on lg" }) %>
-  <%= pb_rails("card", props: {
-    display: "flex",
-    flex_direction: "row",
-    align_items: { default: "start", md: "center", lg: "end" },
-  })  do %>
-    <%= pb_rails("card", props: {height:"xs" }) do %> Card 1 <% end %>
-    <%= pb_rails("card", props: { height:"sm" }) do %> Card 2 <% end %>
-    <%= pb_rails("card", props: { height:"xs" }) do %> Card 3 <% end %>
-  <% end %>
-<%= pb_rails("caption", props: { text: "Text Align responsive: left on default, center on md, right on lg" }) %>
-  <%= pb_rails("card", props: {
-    text_align: { default: "left", md: "center", lg: "right" },
-    width: "100%"
-  })  do %>
-    <%= pb_rails("body", props: { }) do %> text 1 <% end %>
-    <%= pb_rails("body", props: { }) do %> text 2 <% end %>
-    <%= pb_rails("body", props: { }) do %> text 3 <% end %>
-  <% end %>
+<%= pb_rails("card", props: {
+})  do %>
+  Card content
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= pb_rails("checkbox" , props: {
+  required_indicator: true,
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react'
+import Checkbox from '../_checkbox'
+const CheckboxRequiredIndicator = () => {
+  return (
+    <div>
+      <Checkbox
+          name="checkbox-name"
+          requiredIndicator
+          text="Checkbox label"
+          value="check-box value"
+      />
+    </div>
+  )
+}
+export default CheckboxRequiredIndicator

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml CHANGED Viewed

@@ -8,6 +8,7 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
+    # - checkbox_required_indicator: Required Indicator
   react:
   - checkbox_default: Default
@@ -17,6 +18,7 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
+  # - checkbox_required_indicator: Required Indicator
   swift:
     - checkbox_default_swift: Default

data/app/pb_kits/playbook/pb_checkbox/docs/index.js CHANGED Viewed

@@ -5,3 +5,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
+export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `pickerId`/`picker_id` is a required prop to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
+The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
+The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb ADDED Viewed

@@ -0,0 +1,52 @@
+<%
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+%>
+<%= pb_rails("dropdown", props: {
+  id: "date-range-quickpick-reset-closeable",
+  label: "Quick Pick",
+  variant: "quickpick",
+  clearable: false
+}) %>
+<%= pb_rails("button", props: {
+  margin_y: "md",
+  text: "Reset",
+  html_options: {
+    onclick: "handleReset()"
+  }
+}) %>
+<%= pb_rails("dropdown", props: {
+  id: "closeable-default",
+  options: options,
+  clearable: false,
+  default_value: options.last,
+  margin_bottom: "md",
+  label: "Default"
+}) %>
+<%= pb_rails("dropdown", props: {
+  id: "closeable-subtle",
+  options: options,
+  clearable: false,
+  default_value: options.second,
+  variant: "subtle",
+  separators: false,
+  label: "Subtle"
+}) %>
+<script>
+  function handleReset() {
+    const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
+    const instance = dropdown?._pbDropdownInstance;
+    if (instance) {
+      instance.clearSelection();
+    }
+  }
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx ADDED Viewed

@@ -0,0 +1,72 @@
+import React, { useRef } from 'react'
+import Button from '../../pb_button/_button'
+import Dropdown from '../../pb_dropdown/_dropdown'
+const DropdownWithClearable = (props) => {
+    const dropdownRef = useRef(null)
+    const options = [
+        {
+            label: "United States",
+            value: "unitedStates",
+            id: "us"
+        },
+        {
+            label: "Canada",
+            value: "canada",
+            id: "ca"
+        },
+        {
+            label: "Pakistan",
+            value: "pakistan",
+            id: "pk"
+        }
+    ]
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+    return (
+        <>
+            <Dropdown
+                clearable={false}
+                label="Quick Pick"
+                onSelect={() => {}}
+                ref={dropdownRef}
+                variant="quickpick"
+                {...props}
+            />
+            <Button
+                marginY="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+            <Dropdown
+                clearable={false}
+                defaultValue={options[options.length - 1]}
+                label="Default"
+                marginBottom="md"
+                options={options}
+                variant="default"
+                {...props}
+            />
+            <Dropdown
+                clearable={false}
+                defaultValue={options[1]}
+                label="Subtle"
+                options={options}
+                separators={false}
+                variant="subtle"
+                {...props}
+            />
+        </>
+    )
+}
+export default DropdownWithClearable

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md ADDED Viewed

@@ -0,0 +1,5 @@
+The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
+This is useful in two scenarios:
+1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
+2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+const DropdownWithConstrainHeight = (props) => {
+  // Create a long list of options to demonstrate height constraint
+  const options = Array.from({ length: 30 }, (_, i) => ({
+    label: `Option ${i + 1}`,
+    value: `option_${i + 1}`,
+    id: `opt_${i + 1}`
+  }))
+  return (
+    <>
+      <Dropdown
+          data={{ testid: "dropdown-no-constrain" }}
+          label="Without Constrain Height (Default)"
+          marginBottom="md"
+          options={options}
+          {...props}
+      />
+      <Dropdown
+          constrainHeight
+          data={{ testid: "dropdown-constrain" }}
+          label="With Constrain Height"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+export default DropdownWithConstrainHeight

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb ADDED Viewed

@@ -0,0 +1,20 @@
+<%
+  # Create a long list of options to demonstrate height constraint
+  options = (1..30).map do |i|
+    { label: "Option #{i}", value: "option_#{i}", id: "opt_#{i}" }
+  end
+%>
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-no-constrain",
+  options: options,
+  label: "Without Constrain Height (Default)",
+  margin_bottom: "md"
+}) %>
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-constrain",
+  options: options,
+  constrain_height: true,
+  label: "With Constrain Height"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md ADDED Viewed

@@ -0,0 +1,8 @@
+The `constrain_height` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
+When `constrain_height` is `true`, the dropdown will:
+- Have a maximum height of 18em
+- Show a scrollbar when content exceeds the max height
+- Prevent the dropdown from extending beyond the viewport
+This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md ADDED Viewed

@@ -0,0 +1,8 @@
+The `constrainHeight` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
+When `constrainHeight` is `true`, the dropdown will:
+- Have a maximum height of 18em
+- Show a scrollbar when content exceeds the max height
+- Prevent the dropdown from extending beyond the viewport
+This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb CHANGED Viewed

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
-    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
     if (!display) return;
     const nameEl = display.querySelector("#dropdown-avatar-name");

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb CHANGED Viewed

@@ -1,10 +1,13 @@
-<%
+<%
   options = [
     { label: 'United States', value: 'unitedStates', id: 'us' },
     { label: 'Canada', value: 'canada', id: 'ca' },
     { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>
-<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>
+<%= pb_rails("dropdown", props: {
+  id: "select_a_country",
+  label: "Select a Country",
+  options: options
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx CHANGED Viewed

@@ -25,6 +25,7 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        id="select_a_country"
         label="Select a Country"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md CHANGED Viewed

@@ -1 +1,3 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
+Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<%
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+%>
+<%= pb_rails("dropdown", props: { options: options, placeholder: "Choose a country" }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+const DropdownWithPlaceholder = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];
+  return (
+    <Dropdown
+        options={options}
+        placeholder="Choose a country"
+        {...props}
+    />
+  )
+}
+export default DropdownWithPlaceholder

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
+The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml CHANGED Viewed

@@ -21,7 +21,10 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_with_placeholder: Placeholder
   - dropdown_separators_hidden: Separators Hidden
+  - dropdown_with_clearable: Clearable
+  - dropdown_with_constrain_height_rails: Constrain Height
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
@@ -52,7 +55,10 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_with_placeholder: Placeholder
   - dropdown_clear_selection: Clear Selection
+  - dropdown_with_clearable: Clearable
+  - dropdown_with_constrain_height: Constrain Height
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
   - dropdown_quickpick: Quick Pick Variant

data/app/pb_kits/playbook/pb_dropdown/docs/index.js CHANGED Viewed

@@ -11,6 +11,7 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
@@ -27,4 +28,6 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
 export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
-export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
+export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
+export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb CHANGED Viewed

@@ -1,7 +1,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "1",
+    id: "filter-demo-1",
     margin_bottom: "xl",
     filters: [
       { name: "name", value: "John Wick" },
@@ -44,7 +44,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "def2",
+    id: "filter-demo-2",
     sort_menu: [
       { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
       { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Button from '../../pb_button/_button'
 import Filter from '../../pb_filter/_filter'
@@ -6,11 +6,18 @@ import Flex from '../../pb_flex/_flex'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
-const SortingChangeCallback = (sortOptions) => {
-  alert(JSON.stringify(sortOptions[0]))
-}
 const FilterDefault = (props) => {
+  const [sortValue, setSortValue] = useState([{ name: 'popularity', dir: 'desc' }])
+  const [sortValue2, setSortValue2] = useState([{ name: 'popularity', dir: 'desc' }])
+  const handleSortChange = (sortOptions) => {
+    setSortValue(sortOptions)
+    alert(JSON.stringify(sortOptions[0]))
+  }
+  const handleSortChange2 = (sortOptions) => {
+    setSortValue2(sortOptions)
+  }
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -29,7 +36,7 @@ const FilterDefault = (props) => {
           }}
           marginBottom="xl"
           minWidth="375px"
-          onSortChange={SortingChangeCallback}
+          onSortChange={handleSortChange}
           results={1}
           sortOptions={{
             popularity: 'Popularity',
@@ -38,7 +45,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          sortValue={sortValue}
           {...props}
       >
       {({ closePopover }) => (
@@ -82,7 +89,7 @@ const FilterDefault = (props) => {
       <Filter
           double
           minWidth="375px"
-          onSortChange={SortingChangeCallback}
+          onSortChange={handleSortChange2}
           results={0}
           sortOptions={{
             popularity: 'Popularity',
@@ -91,7 +98,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          sortValue={sortValue2}
           {...props}
       >
       {({ closePopover }) => (