playbook_ui 7.11.0.pre.alpha1 → 7.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 875a00d88f5cdc23fcad3e3c3cefff43a6ed592326b17da87f8bd3605f499d69
-  data.tar.gz: 67302126b0b27666a56fc59ec4bcdc22fd523dbab3a8c9fb376d18f9fdcb67fd
+  metadata.gz: 7c5a4821bfce0e6bc6e695a4ff74d9872e3277dca2731cc3e729bb0c6d1975e0
+  data.tar.gz: '08f1d6bf254d950192ace6ce03f12db92a93ad9408550187a79d7dba119bd85a'
 SHA512:
-  metadata.gz: 5e3ed66b3c3866de080032ed635e3b141486b3e7de8ee0b2f8a96dd588937e407ab6a44af189e2ad949aa5bee02c134e07791dd297e2877369a8db99c2ec5570
-  data.tar.gz: 21aaff84c5f705ac6461287a27878dc34c7286f0290b55cb902f66d736633f73652d1a404c3bd36e427010371b7487fcd41e2e7cfd7934c52c548d003aaa6fec
+  metadata.gz: 16975af2a287902b301e43d4d071e5d290fa1e7650416cb01609e7b28e2b5c409c681fa449cba9be6d0471284574da665bd10e004852d5c41f5f654cc0bcb811
+  data.tar.gz: 42086dc050de63c48bac1d86fa4358320e6f7481162ad5791ca821bffefd8a8755032a55cf5cceb8617c78c39a11eeb717243618959bb21c47d3de858529df05

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx

@@ -7,7 +7,11 @@ import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
-import SortMenu, { SortingChangeCallback, SortOptions, SortValue } from './SortMenu'
+import SortMenu, {
+  SortingChangeCallback,
+  SortOptions,
+  SortValue,
+} from './SortMenu'
 
 export type FilterDoubleProps = {
   children: Node,
@@ -18,7 +22,17 @@ export type FilterDoubleProps = {
   sortValue?: SortValue,
 } & FilterBackgroundProps
 
-const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, dark, ...bgProps }: FilterDoubleProps) => (
+const FilterDouble = ({
+  onSortChange,
+  sortOptions,
+  sortValue,
+  filters,
+  results,
+  children,
+  dark,
+  minWidth,
+  ...bgProps
+}: FilterDoubleProps) => (
   <FilterBackground
       dark={dark}
       {...bgProps}
@@ -27,7 +41,10 @@ const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results,
         orientation="row"
         vertical="center"
     >
-      <FiltersPopover dark={dark}>
+      <FiltersPopover
+          dark={dark}
+          minWidth={minWidth}
+      >
         {children}
       </FiltersPopover>
       <CurrentFilters

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx

@@ -8,7 +8,11 @@ import CurrentFilters, { FilterDescription } from './CurrentFilters'
 import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
 import FiltersPopover from './FiltersPopover'
 import ResultsCount from './ResultsCount'
-import SortMenu, { SortingChangeCallback, SortOptions, SortValue } from './SortMenu'
+import SortMenu, {
+  SortingChangeCallback,
+  SortOptions,
+  SortValue,
+} from './SortMenu'
 
 export type FilterSingleProps = {
   children?: Node,
@@ -19,39 +23,54 @@ export type FilterSingleProps = {
   sortValue?: SortValue,
 } & FilterBackgroundProps
 
-const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results, children, dark, ...bgProps }: FilterSingleProps) => (
-  <FilterBackground
-      dark={dark}
-      {...bgProps}
-  >
-    <Flex
-        orientation="row"
-        paddingRight="lg"
-        vertical="center"
+const FilterSingle = ({
+  onSortChange,
+  sortOptions,
+  sortValue,
+  filters,
+  results,
+  children,
+  dark,
+  minWidth,
+  ...bgProps
+}: FilterSingleProps) => {
+  return (
+    <FilterBackground
+        dark={dark}
+        {...bgProps}
     >
-      <If condition={children}>
-        <FiltersPopover dark={dark}>
-          {children}
-        </FiltersPopover>
-        <CurrentFilters
+      <Flex
+          orientation="row"
+          paddingRight="lg"
+          vertical="center"
+      >
+        <If condition={children}>
+          <FiltersPopover
+              dark={dark}
+              minWidth={minWidth}
+          >
+            {children}
+          </FiltersPopover>
+          <CurrentFilters
+              dark={dark}
+              filters={filters}
+          />
+        </If>
+        <ResultsCount
             dark={dark}
-            filters={filters}
+            results={results}
         />
-      </If>
-      <ResultsCount
-          dark={dark}
-          results={results}
-      />
-      <If condition={!isEmpty(sortOptions)}>
-        <SortMenu
-            dark={dark}
-            onChange={onSortChange}
-            options={sortOptions}
-            value={sortValue}
-        />
-      </If>
-    </Flex>
-  </FilterBackground>
-)
+        <If condition={!isEmpty(sortOptions)}>
+          <SortMenu
+              dark={dark}
+              onChange={onSortChange}
+              options={sortOptions}
+              value={sortValue}
+          />
+        </If>
+      </Flex>
+    </FilterBackground>
+  )
+}
 
 export default FilterSingle

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -4,7 +4,7 @@ import React, { Node, useState } from 'react'
 import { CircleIconButton, PbReactPopover } from '../../'
 
 const FiltersPopoverProps = { children: Node }
-const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
+const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -22,14 +22,13 @@ const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
   return (
     <PbReactPopover
         closeOnClick="outside"
+        minWidth={minWidth}
         placement="bottom"
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}
     >
-      <div className="pb-form">
-        {children}
-      </div>
+      <div className="pb-form">{children}</div>
     </PbReactPopover>
   )
 }

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

@@ -4,22 +4,23 @@ import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
 
-type FilterProps = FilterSingleProps | FilterDoubleProps & {
-  double?: boolean,
-}
+type FilterProps =
+  | FilterSingleProps
+  | (FilterDoubleProps & {
+      double?: boolean,
+    })
 
-const Filter = ({
-  double = false,
-  ...templateProps
-}: FilterProps) => (
-  <Choose>
-    <When condition={double}>
-      <FilterDouble {...templateProps} />
-    </When>
-    <Otherwise>
-      <FilterSingle {...templateProps} />
-    </Otherwise>
-  </Choose>
-)
+const Filter = ({ double = false, ...templateProps }: FilterProps) => {
+  return (
+    <Choose>
+      <When condition={double}>
+        <FilterDouble {...templateProps} />
+      </When>
+      <Otherwise>
+        <FilterSingle {...templateProps} />
+      </Otherwise>
+    </Choose>
+  )
+}
 
 export default Filter

data/app/pb_kits/playbook/pb_filter/_filter.html.erb

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= render partial: "pb_filter/templates/default", locals: {object: object}%>
+    <%= render partial: "pb_filter/templates/default", locals: {object: object, min_width: object.min_width}%>
 <% end %>

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

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    min_width: "600px",
+    id: "25",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    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 },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+  }) do
+%>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= 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: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
+
+const FilterMinWidth = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+  ]
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        minWidth="600px"
+        results={1}
+        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' }]}
+    >
+      <TextInput
+          label="Full Name"
+          placeholder="Enter name"
+      />
+
+      <Select
+          blankSelection="Select One..."
+          label="Territory"
+          name="location"
+          options={options}
+      />
+      <Flex
+          spacing="between"
+      >
+        <Button
+            text="Apply"
+        />
+        <Button
+            text="Clear"
+            variant="secondary"
+        />
+      </Flex>
+    </Filter>
+  )
+}
+
+export default FilterMinWidth

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

@@ -1,11 +1,11 @@
 <%=
   pb_rails("filter", props: {
-    id: "2",
+    id: "nosort",
     filters: [
       { name: "name", value: "John Wick" }
     ],
     results: 546,
-    template: "single"
+    template: "filter_only",
   }) do
 %>
   <%

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

@@ -0,0 +1 @@
+To display results, use templates `single` or `default`. 

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

@@ -4,7 +4,7 @@
     filters: [
       { name: "name", value: "John Wick" }
     ],
-    template:"filter_only"
+    template:"filter_only",
   }) do
 %>
   <%

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

@@ -7,6 +7,7 @@ examples:
   - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
+  - filter_min_width: Min Width for Popover Inside of Filter
 
   react:
   - filter_default: Default
@@ -15,3 +16,4 @@ examples:
   - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
+  - filter_min_width: Min Width for Popover Inside of Filter

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

@@ -4,3 +4,4 @@ export { default as FilterNoSort } from './_filter_no_sort.jsx'
 export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
+export { default as FilterMinWidth } from './_filter_min_width.jsx'

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -14,6 +14,7 @@ module Playbook
                       values: %w[default single filter_only sort_only],
                       default: "default"
       prop :background, type: Playbook::Props::Boolean, default: true
+      prop :min_width, default: "auto"
 
       def classname
         generate_classname("pb_filter_kit")

data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb

@@ -15,11 +15,13 @@
           <div class="right_gradient"></div>
         </div>
       </div>
+      <% if (object.template != "default") %>
+        <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
+      <% end %>
     <% end %>
 
 
     <% if (object.template == "single" ) || (object.template == "sort_only") %>
-      <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
       <% unless object.sort_menu == [{}] %>
         <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
           <% object.sort_menu.each do |item| %>

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -7,7 +7,7 @@
 <% end %>
 
 <% if object.template != "sort_only"%>
-  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
+  <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
     <%= capture(&object.children) %>
   <% end %>
 <%end%>

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Body from '../pb_body/_body.jsx'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -37,7 +37,7 @@ const Radio = ({
   value = 'radio_text',
   onChange = () => {},
   ...props
-}: RadioProps) => {
+}: RadioProps, ref) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
@@ -57,6 +57,7 @@ const Radio = ({
             id={id}
             name={name}
             onChange={onChange}
+            ref={ref}
             text={text}
             type="radio"
             value={value}
@@ -72,4 +73,4 @@ const Radio = ({
   )
 }
 
-export default Radio
+export default forwardRef(Radio)

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -2,12 +2,15 @@ import React from 'react'
 import { Radio } from '../../'
 
 const RadioDefault = () => {
+  const ref = React.createRef()
+
   return (
     <div>
       <Radio
           defaultChecked
           label="Power"
           name="Group2"
+          ref={ref}
           value="Power"
       />
       <br />