playbook_ui 16.1.0.pre.alpha.play2771passphraseaccessibility14033 → 16.1.0.pre.alpha.play264213817

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db94c53faae46d3ac450cae169b49010d0fea2eef2df809b1b498a803bf97275
-  data.tar.gz: 481cc281f583cd5db425d32dea0bbd0d87cd5fff7093745f3fa674b7900064da
+  metadata.gz: 60b41dbbb195e70b9104ae56ec68ad19fb488444096838262600e95bbe239642
+  data.tar.gz: 6d634ec91b1f185be3d7e47e6c88eeab8e545831336742e5661f5066a628e274
 SHA512:
-  metadata.gz: a9dc190816e2a5b470ee310291cf8144b8ab3a2b26e5a251770dfb9b7b3b310c394b8a1d7dd355e21fbd320267ebb4e573a97cd6cfb1816eec07253ac36e9222
-  data.tar.gz: 325c99459bc7e398c41c7437fd373f559b32634dbca9f7119a684fb0166961c8303563f9f7f30cd51edc90843b36235ac7b67180c112d9688b430dfcf653ce38
+  metadata.gz: dd16edcd3a1830e2736636eb7f254099c46fe7130e6ef42fd0bb35a17a1e6967f84be79ec23761183e615bdbe0c242b890d30670ef993a3382dbf62c349cc864
+  data.tar.gz: 377d852a602c33c7067b566a1fc838a61836516add1396a720269dd31e28aa370aa8ca400b913b6905c50443a45bf0e6cc9d84951480f09cf7b469e09d04f86c

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

@@ -1,4 +1,36 @@
-<%= pb_rails("card", props: {
-})  do %>
-  Card content
+<%= 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 %>
 <% end %>
+

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -40,7 +40,7 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId: string,
+  pickerId?: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -196,8 +196,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
-  const errorId = error ? `${pickerId}-error` : undefined
-
   return (
     <div
         {...ariaProps}
@@ -213,18 +211,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
 
         {!hideLabel && (
-           <label htmlFor={pickerId}>
-            <Caption
-                className="pb_date_picker_kit_label"
-                text={label}
-            />
-          </label>
+          <Caption
+              className="pb_date_picker_kit_label"
+              text={label}
+          />
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -238,9 +232,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
               {error &&
                   <Body
-                      aria={{ atomic: "true", live: "polite" }}
-                      htmlOptions={{ role: "alert" }}
-                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -135,8 +135,6 @@
     position: sticky;
     top: 0;
     background-color: $white;
-    border-top-left-radius: $border_radius_md;
-    border-top-right-radius: $border_radius_md;
     z-index: $z_8;
   }
 
@@ -258,7 +256,7 @@
   }
   &.full_height_left {
     justify-content: flex-start;
-
+    
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -304,7 +302,7 @@
 
   &.full_height_center {
     justify-content: center;
-
+    
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -348,7 +346,7 @@
 
   &.full_height_right {
     justify-content: flex-end;
-
+    
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -419,7 +417,7 @@
       margin: unset !important;
       margin-right: auto !important;
     }
-
+    
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;
@@ -465,7 +463,7 @@
 
   &.full_height_center {
     justify-content: center;
-
+    
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;
@@ -512,7 +510,7 @@
       margin: unset !important;
       margin-left: auto !important;
     }
-
+    
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;

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

@@ -76,12 +76,6 @@
       z-index: $z_1;
       width: 100%;
 
-      &.constrain_height {
-        overflow-y: auto;
-        overflow-x: hidden;
-        max-height: 18em;
-      }
-
       .pb_dropdown_option,
       .pb_dropdown_option_list,
       .pb_dropdown_option_selected,

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

@@ -36,8 +36,6 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    clearable?: boolean;
-    constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
@@ -51,7 +49,6 @@ type DropdownProps = {
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
-    placeholder?: string;
     separators?: boolean;
     variant?: "default" | "subtle" | "quickpick";
     rangeEndsToday?: boolean;
@@ -77,8 +74,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        clearable = true,
-        constrainHeight = false,
         customQuickPickDates,
         dark = false,
         data = {},
@@ -92,7 +87,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
-        placeholder,
         rangeEndsToday = false,
         controlsStartId,
         controlsEndId,
@@ -217,34 +211,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         }
     }, [isDropDownClosed]);
 
-    // Auto-position dropdown above/below based on available space
-    useEffect(() => {
-        if (!isDropDownClosed && dropdownContainerRef.current) {
-            const container = dropdownContainerRef.current;
-            const wrapper = container.closest('.dropdown_wrapper') as HTMLElement;
-            if (!wrapper) return;
-
-            const wrapperRect = wrapper.getBoundingClientRect();
-            const h = container.getBoundingClientRect().height || container.scrollHeight;
-            const spaceBelow = window.innerHeight - wrapperRect.bottom;
-            const spaceAbove = wrapperRect.top;
-
-            // If not enough space below but enough space above, position above
-            if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
-                container.style.top = "auto";
-                container.style.bottom = "calc(100% + 5px)";
-                container.style.marginTop = "0";
-                container.style.marginBottom = "0";
-            } else {
-                // Default: position below
-                container.style.top = "";
-                container.style.bottom = "";
-                container.style.marginTop = "";
-                container.style.marginBottom = "";
-            }
-        }
-    }, [isDropDownClosed, dropdownContainerRef]);
-
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setFilterItem(e.target.value);
@@ -409,7 +375,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                 value={{
                     activeStyle,
                     autocomplete,
-                    clearable,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,
@@ -461,8 +426,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     ) : (
                         <>
-                            <DropdownTrigger placeholder={placeholder} />
-                            <DropdownContainer constrainHeight={constrainHeight}>
+                            <DropdownTrigger />
+                            <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
                                         <DropdownOption key={option.id}

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

@@ -21,10 +21,7 @@ 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)
@@ -55,10 +52,7 @@ 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

@@ -11,7 +11,6 @@ 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'
@@ -28,6 +27,4 @@ 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 DropdownWithClearable } from './_dropdown_with_clearable.jsx'
-export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'

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

@@ -18,8 +18,8 @@
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select, placeholder: object.placeholder }) %>
-            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height }) do %>
+            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select }) %>
+            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -36,8 +36,6 @@ module Playbook
                              default: ""
       prop :controls_start_id, type: Playbook::Props::String,
                                default: ""
-      prop :clearable, type: Playbook::Props::Boolean,
-                       default: true
       prop :start_date_id, type: Playbook::Props::String,
                            default: "start_date_id"
       prop :start_date_name, type: Playbook::Props::String,
@@ -46,16 +44,12 @@ module Playbook
                          default: "end_date_id"
       prop :end_date_name, type: Playbook::Props::String,
                            default: "end_date_name"
-      prop :placeholder, type: Playbook::Props::String
-      prop :constrain_height, type: Playbook::Props::Boolean,
-                              default: false
 
       def data
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_multi_select: multi_select,
           pb_dropdown_variant: variant,
-          pb_dropdown_clearable: clearable,
           form_pill_props: form_pill_props.to_json,
           start_date_id: variant == "quickpick" ? start_date_id : nil,
           end_date_id: variant == "quickpick" ? end_date_id : nil,

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

@@ -122,80 +122,6 @@ test('generated placeholder prop', () => {
 
 })
 
-test('placeholder prop passed directly to Dropdown', () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-        placeholder="Choose a country"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  expect(trigger).toHaveTextContent('Choose a country')
-})
-
-test('placeholder works with default variant', () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-        placeholder="Select an option"
-        variant="default"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  expect(trigger).toHaveTextContent('Select an option')
-})
-
-test('placeholder works with subtle variant', () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-        placeholder="Pick an option"
-        separators={false}
-        variant="subtle"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_dropdown_subtle_separators_hidden')
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  expect(trigger).toHaveTextContent('Pick an option')
-})
-
-test('placeholder works with quickpick variant', () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        placeholder="Select a date range"
-        variant="quickpick"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_dropdown_quickpick')
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  expect(trigger).toHaveTextContent('Select a date range')
-})
-
-test('placeholder shows default "Select..." when not provided', () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  expect(trigger).toHaveTextContent('Select...')
-})
-
 test('generated label prop', () => { 
   render (
     <Dropdown
@@ -540,27 +466,7 @@ test("quickpick clears selection when clicking X icon", () => {
   expect(trigger).toHaveTextContent("Select...")
 })
 
-test("quickpick hides clear icon when clearable is false", () => {
-  render(
-    <Dropdown
-        clearable={false}
-        data={{ testid: testId }}
-        defaultValue="This Week"
-        variant="quickpick"
-    />
-  )
-  
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  
-  expect(trigger).toHaveTextContent("This Week")
-  
-  const clearIcon = kit.querySelector('[aria-label="times icon"]')
-  expect(clearIcon).not.toBeInTheDocument()
-})
-
 test("quickpick returns date array values when option selected", () => {
-  // eslint-disable-next-line react/no-multi-comp
   const TestComponent = () => {
     const [selected, setSelected] = useState(null)
     return (

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -5,13 +5,9 @@ module Playbook
     class DropdownContainer < Playbook::KitBase
       prop :searchbar, type: Playbook::Props::Boolean,
                        default: false
-      prop :constrain_height, type: Playbook::Props::Boolean,
-                              default: false
 
       def classname
-        classes = %w[pb_dropdown_container close]
-        classes << "constrain_height" if constrain_height
-        generate_classname(*classes, separator: " ")
+        generate_classname("pb_dropdown_container", "close", separator: " ")
       end
 
       def data

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -48,7 +48,6 @@ export default class PbDropdown extends PbEnhancedElement {
     this.updatePills();
 
     this.clearBtn = this.element.querySelector(CLEAR_ICON_SELECTOR);
-    this.isClearable = this.element.dataset.pbDropdownClearable !== "false";
     if (this.clearBtn) {
       this.clearBtn.style.display = "none";
       this.clearBtn.addEventListener("click", (e) => {
@@ -61,10 +60,6 @@ export default class PbDropdown extends PbEnhancedElement {
 
   updateClearButton() {
     if (!this.clearBtn) return;
-    if (!this.isClearable) {
-      this.clearBtn.style.display = "none";
-      return;
-    }
     const hasSelection = this.isMultiSelect
       ? this.selectedOptions.size > 0
       : Boolean(this.element.querySelector(DROPDOWN_INPUT).value);
@@ -114,51 +109,15 @@ export default class PbDropdown extends PbEnhancedElement {
   adjustDropdownHeight() {
     if (this.target.classList.contains("open")) {
       const el = this.target;
-      const shouldConstrain = el.classList.contains("constrain_height");
       el.style.height = "auto";
       requestAnimationFrame(() => {
-        if (shouldConstrain) {
-          // Calculate 18em in pixels (matches SCSS max-height: 18em)
-          const fontSize = parseFloat(getComputedStyle(el).fontSize) || 16;
-          const maxHeight = fontSize * 18;
-          const scrollHeight = el.scrollHeight;
-          const newHeight = Math.min(scrollHeight, maxHeight);
-          el.offsetHeight; // force reflow
-          el.style.height = newHeight + "px";
-        } else {
-          el.offsetHeight; // force reflow
-          el.style.height = el.scrollHeight + "px";
-        }
+        const newHeight = el.scrollHeight + "px";
+        el.offsetHeight; // force reflow
+        el.style.height = newHeight;
       });
     }
   }
 
-  adjustDropdownPosition(container) {
-    if (!container) return;
-
-    const wrapper = this.element.querySelector(".dropdown_wrapper");
-    if (!wrapper) return;
-
-    const wrapperRect = wrapper.getBoundingClientRect();
-    const h = container.getBoundingClientRect().height || container.scrollHeight;
-    const spaceBelow = window.innerHeight - wrapperRect.bottom;
-    const spaceAbove = wrapperRect.top;
-
-    // If not enough space below but enough space above, position above
-    if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
-      container.style.top = "auto";
-      container.style.bottom = "calc(100% + 5px)";
-      container.style.marginTop = "0";
-      container.style.marginBottom = "0";
-    } else {
-      // Default: position below
-      container.style.top = "";
-      container.style.bottom = "";
-      container.style.marginTop = "";
-      container.style.marginBottom = "";
-    }
-  }
-
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
     let hasMatch = false
@@ -406,21 +365,7 @@ export default class PbDropdown extends PbEnhancedElement {
   showElement(elem) {
     elem.classList.remove("close");
     elem.classList.add("open");
-    
-    const shouldConstrain = elem.classList.contains("constrain_height");
-    if (shouldConstrain) {
-      // Calculate height respecting max-height constraint (18em)
-      const fontSize = parseFloat(getComputedStyle(elem).fontSize) || 16;
-      const maxHeight = fontSize * 18; // matches SCSS max-height: 18em
-      const scrollHeight = elem.scrollHeight;
-      const height = Math.min(scrollHeight, maxHeight);
-      elem.style.height = height + "px";
-    } else {
-      elem.style.height = elem.scrollHeight + "px";
-    }
-    
-    // Auto-position dropdown above if not enough space below
-    this.adjustDropdownPosition(elem);
+    elem.style.height = elem.scrollHeight + "px";
   }
 
   hideElement(elem) {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -19,7 +19,6 @@ type DropdownContainerProps = {
   aria?: { [key: string]: string };
   children?: React.ReactChild[] | React.ReactChild;
   className?: string;
-  constrainHeight?: boolean;
   dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -32,7 +31,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
     aria = {},
     children,
     className,
-    constrainHeight = false,
     dark = false,
     data = {},
     htmlOptions = {},
@@ -56,7 +54,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   const classes = classnames(
     buildCss("pb_dropdown_container"),
     `${isDropDownClosed ? "close" : "open"}`,
-    constrainHeight && "constrain_height",
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -44,7 +44,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
-    clearable,
     filterItem,
     handleBackspace,
     handleChange,
@@ -226,7 +225,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                   > 
                   {
-                    clearable !== false && selectedArray.length > 0 && (
+                    selectedArray.length > 0 && (
                       <div onClick={(e)=>{e.stopPropagation();handleBackspace()}}>
                         <Icon
                             cursor="pointer"

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

@@ -21,7 +21,7 @@ const nextValue = (value: SortValue[], name: string): SortValue => {
 }
 
 const directionIcon = (dir: Direction) => (
-  dir == 'asc' ? 'arrow-up-short-wide' : 'arrow-down-wide-short'
+  dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
 )
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (

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

@@ -1,7 +1,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "filter-demo-1",
+    id: "1",
     margin_bottom: "xl",
     filters: [
       { name: "name", value: "John Wick" },
@@ -44,7 +44,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "filter-demo-2",
+    id: "def2",
     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 },