playbook_ui 18.1.0.pre.rc.1 → 18.1.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8885b14507b1ffa09091188f028bc63097b1d187eae55a40673ac13a0a8d67c1
-  data.tar.gz: b5266d626ee2c9c069c5e18f7bf9b55c7e62d04f394645c1babca4bf7f1f0bf0
+  metadata.gz: 69806745bf9d406cc340a98ebaa54bbab8fd00312d756cd0bf60e3077db5794e
+  data.tar.gz: 0aef11e0e9dc51c336af96739287476e8b01e8397c2580cfff87d8ef0a17a7eb
 SHA512:
-  metadata.gz: 641e3a2789ab3416e5f5f594c0c33fe31510e55750c4d1432b9acfa35a9f5f50529e1eb1663244c4faefbd353ebf15731f470c457fe365954125bd18c7e55183
-  data.tar.gz: 90781fad9169b4c1a23c078ec59a38448562d6cee63811282cbddb011a9269ac177bf5435472d2164aeebe2c36139e0d3763cf52539a03aee3865c54c409fa46
+  metadata.gz: 590f41d6ac3e5304ad388114c1a0a0264df448ef4e4df753a4e06058c4a80bae552f5aefb78f768ff257073694dcc9433fd697520a7603d7d2ce5b4b314fd5c5
+  data.tar.gz: 4dd0fe2434dc65fd2a2eab892ffd571d6c6f2fcf9d7ea72e5fb83da7d5f5cf44ccaf5c2e579765c2886092779b4b5c7de0007da7a12cc49998c23ca253815208

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -98,7 +98,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     imageUrl: getResponsiveValue(imageUrl),
   });
 
-  // Update responsive values on window resize.
+  // Keep responsive values in sync when props change, and on window resize.
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
@@ -109,6 +109,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         imageUrl: getResponsiveValue(imageUrl),
       });
     };
+    updateResponsiveProps();
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
   }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
@@ -153,6 +154,8 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     ...dynamicInlineProps
   };
 
+  // Dynamic HTML tag from props; matches other kits (Title, Collapsible, etc.).
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -1,4 +1,5 @@
-import { ensureAccessible, renderKit } from '../utilities/test-utils'
+import React from 'react'
+import { ensureAccessible, render, renderKit } from '../utilities/test-utils'
 
 import Background from './_background'
 
@@ -20,6 +21,27 @@ test('backgroundColor = category_1', () => {
   expect(kit).toHaveClass('pb_background_kit pb_background_color_category_1')
 })
 
+test('updates backgroundColor class when the prop changes', () => {
+  const { getByTestId, rerender } = render(
+    <Background
+        backgroundColor="info_subtle"
+        data={{ testid: 'background' }}
+    />
+  )
+
+  expect(getByTestId('background')).toHaveClass('pb_background_color_info_subtle')
+
+  rerender(
+    <Background
+        backgroundColor="card_light"
+        data={{ testid: 'background' }}
+    />
+  )
+
+  expect(getByTestId('background')).toHaveClass('pb_background_color_card_light')
+  expect(getByTestId('background')).not.toHaveClass('pb_background_color_info_subtle')
+})
+
 test('customColor prop styles background color with a hex value', () => {
   const kit = renderKit(Background, props, { customColor: '#1d99a8' })
 

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

@@ -0,0 +1,116 @@
+import React from 'react'
+import { isEmpty } from '../../utilities/object'
+
+import CurrentFilters, { FilterDescription, InteractiveFilters } from './CurrentFilters'
+import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
+import FiltersPopover from './FiltersPopover'
+import ResultsCount from './ResultsCount'
+import SortMenu, {
+  SortingChangeCallback,
+  SortOptions,
+  SortValue,
+} from './SortMenu'
+
+import Caption from '../../pb_caption/_caption'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+export type FilterResponsiveProps = {
+  children?: React.ReactChild[] | React.ReactChild,
+  filters?: FilterDescription,
+  interactiveFilters?: InteractiveFilters,
+  onSortChange?: SortingChangeCallback,
+  results?: number,
+  sortOptions?: SortOptions,
+  sortValue?: SortValue[],
+} & FilterBackgroundProps
+
+// One tree for responsive="stacked": CSS grid (shared with Rails) toggles
+// one-row vs two-row chrome without remounting across the breakpoint.
+// Stacked bottom reuses `.filter-bottom` (via `.pb_filter_responsive_bottom`)
+// so Results/Sort match FilterDouble sizing.
+const FilterResponsive = ({
+  children,
+  dark,
+  filters,
+  interactiveFilters,
+  maxHeight,
+  minWidth,
+  onSortChange,
+  placement,
+  popoverProps,
+  results,
+  sortOptions,
+  sortValue,
+  ...bgProps
+}: FilterResponsiveProps): React.ReactElement => {
+  const showSort = !isEmpty(sortOptions)
+
+  return (
+    <FilterBackground
+        dark={dark}
+        {...bgProps}
+    >
+      <div className="pb_filter_responsive_layout">
+        <div className="pb_filter_responsive_filters">
+          {children &&
+            <FiltersPopover
+                dark={dark}
+                maxHeight={maxHeight}
+                minWidth={minWidth}
+                placement={placement}
+                popoverProps={popoverProps}
+            >
+              {children}
+            </FiltersPopover>
+          }
+          <CurrentFilters
+              dark={dark}
+              filters={filters}
+              interactiveFilters={interactiveFilters}
+          />
+        </div>
+
+        <div className="pb_filter_responsive_results_inline">
+          <ResultsCount
+              dark={dark}
+              results={results}
+          />
+        </div>
+
+        <div className="pb_filter_responsive_sep">
+          <SectionSeparator dark={dark} />
+        </div>
+
+        <div className="pb_filter_responsive_bottom filter-bottom">
+          <div className="pb_filter_responsive_results_bar">
+            <ResultsCount
+                dark={dark}
+                results={results}
+                title
+            />
+          </div>
+
+          <div className="pb_filter_responsive_sort">
+            {showSort &&
+              <>
+                <Caption
+                    className="pb_filter_responsive_sort_label"
+                    dark={dark}
+                    text="sort by:"
+                />
+                <SortMenu
+                    dark={dark}
+                    onChange={onSortChange}
+                    options={sortOptions}
+                    value={sortValue}
+                />
+              </>
+            }
+          </div>
+        </div>
+      </div>
+    </FilterBackground>
+  )
+}
+
+export default FilterResponsive

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

@@ -1,13 +1,20 @@
 import React from 'react'
+import classnames from 'classnames'
+
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
+import FilterResponsive from './FilterResponsive'
 import FilterSidebar, { FilterSidebarProps } from './FilterSidebar'
 import FilterSection from './FilterSection'
 
 type FilterProps =
-  | FilterSingleProps
+  | (FilterSingleProps & {
+      double?: boolean,
+      responsive?: 'stacked',
+    })
   | (FilterDoubleProps & {
       double?: boolean,
+      responsive?: 'stacked',
     })
   | (FilterSidebarProps & {
     variant?: null | 'sidebar',
@@ -15,25 +22,60 @@ type FilterProps =
 
 const Filter = ({
   double = false,
+  responsive,
   variant,
   ...templateProps
   }: FilterProps): React.ReactElement => {
+  const { children, className, ...layoutProps } = templateProps
+  // Match Rails: stacked only for default/single (has filter children).
+  // Sort-only (no children) stays on FilterSingle.
+  const useResponsiveStacked = responsive === 'stacked' && Boolean(children)
+  const mergedClassName = classnames(
+    useResponsiveStacked && 'pb_filter_responsive',
+    className,
+  )
+
   const displayFilter = () => {
     if (variant === 'sidebar') {
       return (
-        <FilterSidebar {...templateProps} />
+        <FilterSidebar
+            className={className}
+            {...layoutProps}
+        >
+          {children}
+        </FilterSidebar>
       )
     }
-    if (double === true) {
+    if (useResponsiveStacked) {
       return (
-        <FilterDouble {...templateProps} />
+        <FilterResponsive
+            {...layoutProps}
+            className={mergedClassName}
+        >
+          {children}
+        </FilterResponsive>
       )
-    } else {
+    }
+    if (double === true) {
       return (
-        <FilterSingle {...templateProps} />
+        <FilterDouble
+            {...layoutProps}
+            className={className}
+        >
+          {children}
+        </FilterDouble>
       )
     }
+    return (
+      <FilterSingle
+          {...layoutProps}
+          className={className}
+      >
+        {children}
+      </FilterSingle>
+    )
   }
+
   return (
     <>
       {displayFilter()}

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -1,6 +1,7 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/border_radius";
+@import "../tokens/screen_sizes";
 
 .pb_filter_sort_menu {
   li {
@@ -124,6 +125,132 @@
       opacity:0;
     }
   }
+
+  &.pb_filter_responsive {
+    overflow: hidden;
+
+    .maskContainer {
+      flex: 1 1 auto;
+      min-width: 0;
+      position: relative;
+    }
+
+    .filters {
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+    }
+
+    .maskContainer::after {
+      background: linear-gradient(to right, rgba($white, 0), $white 65%);
+      content: "";
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: $space_xl + $space_sm;
+      z-index: 1;
+    }
+
+    .maskContainer::before {
+      display: none;
+    }
+
+    .pb_filter_responsive_layout {
+      align-items: center;
+      column-gap: $space_xs;
+      display: grid;
+      grid-template-areas: "filters results-inline sort";
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      padding-right: $space_lg;
+      width: 100%;
+    }
+
+    .pb_filter_responsive_filters {
+      align-items: center;
+      display: flex;
+      grid-area: filters;
+      min-width: 0;
+    }
+
+    .pb_filter_responsive_results_inline {
+      grid-area: results-inline;
+      flex-shrink: 0;
+    }
+
+    .pb_filter_responsive_sep {
+      display: none;
+      grid-area: sep;
+    }
+
+    // Wide: contents so `sort` still occupies the one-row grid area.
+    // Stacked: becomes the FilterDouble bottom bar (see break_at below).
+    .pb_filter_responsive_bottom {
+      display: contents;
+    }
+
+    .pb_filter_responsive_results_bar {
+      display: none;
+    }
+
+    .pb_filter_responsive_sort {
+      align-items: center;
+      display: flex;
+      flex-shrink: 0;
+      grid-area: sort;
+      gap: $space_xs;
+    }
+
+    .pb_filter_responsive_sort_label {
+      display: none;
+    }
+
+    @include break_at($screen-md-max) {
+      .pb_filter_responsive_layout {
+        align-items: center;
+        grid-template-areas:
+          "filters"
+          "sep"
+          "bottom";
+        grid-template-columns: minmax(0, 1fr);
+        padding-right: 0;
+        row-gap: 0;
+      }
+
+      .pb_filter_responsive_results_inline {
+        display: none;
+      }
+
+      .pb_filter_responsive_sep {
+        display: block;
+      }
+
+      .pb_filter_responsive_bottom {
+        align-items: center;
+        display: flex;
+        grid-area: bottom;
+        justify-content: space-between;
+      }
+
+      .pb_filter_responsive_results_bar {
+        align-items: center;
+        display: flex;
+      }
+
+      .pb_filter_responsive_sort_label {
+        display: revert;
+      }
+    }
+  }
+
+  &.pb_filter_responsive.dark {
+    .maskContainer::after {
+      background: linear-gradient(to right, rgba($card_dark, 0), $card_dark 65%);
+      opacity: 1;
+    }
+  }
 }
 
 .pb_popover_tooltip.pb_interactive_filter_editor {

data/app/pb_kits/playbook/pb_filter/_filter.tsx

@@ -19,6 +19,7 @@ export type FilterProps = {
   onSortChange?: (value: SortValue[]) => void,
   placement?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
   popoverProps?: Record<string, unknown>,
+  responsive?: "stacked",
   results?: number,
   sortOptions?: Record<string, unknown>,
   sortValue?: SortValue[],

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

@@ -0,0 +1,42 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter-responsive",
+    min_width: "360px",
+    responsive: "stacked",
+    filters: [
+      { name: "Full Name", value: "John Wick" },
+      { name: "City", value: "San Francisco" },
+      { name: "Territory", value: "Pacific Northwest" },
+      { name: "Status", value: "Active" },
+      { name: "Role", value: "Manager" },
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Manager's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "single",
+    results: 546,
+  }) do
+%>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_responsive.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+import Filter from '../_filter'
+
+import Button from '../../pb_button/_button'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
+
+const FilterResponsive = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away...' },
+  ]
+
+  return (
+    <Filter
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+          'Territory': 'Pacific Northwest',
+          'Status': 'Active',
+          'Role': 'Manager',
+        }}
+        minWidth="360px"
+        responsive="stacked"
+        results={546}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+        {...props}
+    >
+      {({ closePopover }) => (
+        <form>
+          <TextInput
+              label="Full Name"
+              placeholder="Enter name"
+              {...props}
+          />
+          <Select
+              blankSelection="Select One..."
+              label="Territory"
+              name="location"
+              options={options}
+              {...props}
+          />
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  )
+}
+
+export default FilterResponsive

data/app/pb_kits/playbook/pb_filter/docs/_filter_responsive.md

@@ -0,0 +1,3 @@
+Use `responsive="stacked"` (React) or `responsive: "stacked"` (Rails) to use the two-row layout below `767px` and the one-row layout above.
+
+When set, `responsive` controls the layout (`double` / `template` are ignored for the default and single layouts). `filter_only` and `sort_only` are unchanged. Both platforms keep one DOM tree and switch chrome with CSS, so resizing does not remount the filter UI.

data/app/pb_kits/playbook/pb_filter/docs/_playground.json

@@ -14,6 +14,7 @@
     "onCollapse": "() => {}",
     "onSortChange": "() => {}",
     "popoverProps": {},
+    "responsive": "",
     "results": 546,
     "sortOptions": {
       "popularity": "Popularity",
@@ -32,6 +33,7 @@
       "name": "Layout",
       "props": [
         "double",
+        "responsive",
         "variant",
         "background",
         "results"

data/app/pb_kits/playbook/pb_filter/docs/_playground.overrides.json

@@ -62,6 +62,7 @@
     "onSortChange": "() => {}",
     "placement": "bottom-start",
     "popoverProps": {},
+    "responsive": "",
     "results": 546,
     "sortOptions": {
       "popularity": "Popularity",
@@ -80,6 +81,7 @@
       "name": "Layout",
       "props": [
         "double",
+        "responsive",
         "variant",
         "background",
         "results"

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

@@ -11,6 +11,7 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_responsive: Responsive
   - filter_within_turbo_frames: Within Turbo Frames
   - filter_interactive: Interactive Applied Filters
 
@@ -25,6 +26,7 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_responsive: Responsive
   - filter_sidebar: Sidebar
   - filter_interactive_react: Interactive Applied Filters
 

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

@@ -8,5 +8,6 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
+export { default as FilterResponsive } from './_filter_responsive.jsx'
 export { default as FilterSidebar } from './_filter_sidebar.jsx'
 export { default as FilterInteractiveReact } from './_filter_interactive_react.jsx'