playbook_ui 7.6.2.pre.alpha1 → 7.8.1

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

@@ -2,7 +2,8 @@
   pb_rails("filter", props: {
     id: "1",
     filters: [
-      { name: "name", value: "John Wick" }
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
     ],
     sort_menu: [
       { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
@@ -10,7 +11,7 @@
       { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
     ],
     template: "default",
-    results: 546,
+    results: 1,
   }) do
 %>
   <%

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-const FilterDefault = () => {
+const FilterDefault = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -11,12 +11,13 @@ const FilterDefault = () => {
   ]
   return (
     <Filter
+        {...props}
         double
         filters={{
           'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
+          'City': 'San Francisco',
         }}
-        results={256}
+        results={1}
         sortOptions={{
           popularity: 'Popularity',
           // eslint-disable-next-line
@@ -24,7 +25,7 @@ const FilterDefault = () => {
           // eslint-disable-next-line
           manager_name: 'Manager\'s Name',
         }}
-        sortValue={[{ name: 'popularity', dir: 'asc' }]}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
     >
       <TextInput
           label="Full Name"

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

@@ -3,14 +3,15 @@
     id: "3",
     background: false,
     filters: [
-      { name: "name", value: "John Wick" }
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "Las Vegas"}
     ],
     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 },
     ],
-    results: 1,
+    results: 3,
     template: "single"
   }) do
 %>
@@ -47,14 +48,15 @@
     id: "4",
     background: false,
     filters: [
-      { name: "name", value: "John Wick" }
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "Las Vegas"}
     ],
     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 },
     ],
-    results: 546,
+    results: 3,
   }) do
 %>
   <%

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-const FilterNoBackground = () => {
+const FilterNoBackground = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -10,45 +10,90 @@ const FilterNoBackground = () => {
     { value: 'A Galaxy Far Far Away Like Really Far Away' },
   ]
   return (
-    <Filter
-        background={false}
-        filters={{
+    <>
+      <Filter
+          {...props}
+          background={false}
+          filters={{
           'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
+          'City': 'Las Vegas',
         }}
-        results={256}
-        sortOptions={{
+          results={3}
+          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: 'asc' }]}
-    >
-      <TextInput
-          label="Full Name"
-          placeholder="Enter 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>
 
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
-      />
-      <Flex
-          spacing="between"
+      <Filter
+          {...props}
+          background={false}
+          double
+          filters={{
+          'Full Name': 'John Wick',
+          'City': 'Las Vegas',
+        }}
+          results={3}
+          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' }]}
       >
-        <Button
-            text="Apply"
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
         />
-        <Button
-            text="Clear"
-            variant="secondary"
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
         />
-      </Flex>
-    </Filter>
+        <Flex
+            spacing="between"
+        >
+          <Button
+              text="Apply"
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+          />
+        </Flex>
+      </Filter>
+    </>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-const FilterOnly = () => {
+const FilterOnly = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -11,12 +11,8 @@ const FilterOnly = () => {
   ]
   return (
     <Filter
-        background={false}
-        filters={{
-          'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
-        }}
-        results={256}
+        {...props}
+        filters={{ 'Full Name': 'John Wick' }}
     >
       <TextInput
           label="Full Name"

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
-const FilterSingle = () => {
+const FilterSingle = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -11,10 +11,11 @@ const FilterSingle = () => {
   ]
   return (
     <Filter
+        {...props}
         filters={{
           'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
         }}
+        results={546}
         sortOptions={{
           popularity: 'Popularity',
           // eslint-disable-next-line
@@ -22,7 +23,7 @@ const FilterSingle = () => {
           // eslint-disable-next-line
           manager_name: 'Manager\'s Name',
         }}
-        sortValue={[{ name: 'popularity', dir: 'asc' }]}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
     >
       <TextInput
           label="Full Name"

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

@@ -7,6 +7,5 @@
       { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
     ],
     template:"sort_only",
-    background: false,
   })
-%>
+%>

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Filter } from '../../'
 
-const SortOnly = () => (
+const SortOnly = (props) => (
   <Filter
-      background={false}
+      {...props}
       sortOptions={{
         popularity: 'Popularity',
         // eslint-disable-next-line
@@ -11,7 +11,7 @@ const SortOnly = () => (
         // eslint-disable-next-line
         manager_name: 'Manager\'s Name',
       }}
-      sortValue={[{ name: 'manager_title', dir: 'desc' }]}
+      sortValue={[{ name: 'popularity', dir: 'desc' }]}
   />
 )
 

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

@@ -1,16 +1,15 @@
 examples:
-  
+
   rails:
   - filter_default: Default
-  - filter_single: Single
   - filter_no_background: No Background
+  - filter_single: Single
   - filter_only: Filter Only
   - sort_only: Sort Only
-  
+
   react:
   - filter_default: Default
-  - filter_single: Single
   - filter_no_background: No Background
+  - filter_single: Single
   - filter_only: Filter Only
   - sort_only: Sort Only
-  

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx

@@ -10,7 +10,7 @@ type FormGroupProps = {
   children?: Node,
   className?: string,
   data?: object,
-  id?: string
+  id?: string,
 }
 
 const FormGroup = (props: FormGroupProps) => {

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -10,6 +10,10 @@
     margin-bottom: 0;
   }
 
+  [class^=pb_text_input_kit].dark .text_input_wrapper {
+    margin-bottom: 0
+  }
+
   & > [class^=pb_text_input_kit]:not(:last-child) {
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
@@ -97,6 +101,10 @@
     }
   }
 
+  & > [class^=pb_typeahead_kit] {
+    min-width: 200px;
+  }
+
   & > [class^=pb_typeahead_kit]:not(:last-child) {
     [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx

@@ -8,6 +8,7 @@ const FormGroupButton = (props) => (
         <TextInput
             label="With Label"
             placeholder="Search"
+            {...props}
         />
         <Button
             onClick={() => alert('Button Clicked!')}
@@ -22,6 +23,7 @@ const FormGroupButton = (props) => (
       <FormGroup>
         <TextInput
             placeholder="Search"
+            {...props}
         />
         <Button
             onClick={() => alert('Button Clicked!')}

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx

@@ -1,16 +1,18 @@
 import React from 'react'
 import { DatePicker, FormGroup, TextInput } from '../../'
 
-const FormGroupDatePicker = () => (
+const FormGroupDatePicker = (props) => (
   <div>
     <FormGroup>
       <TextInput
           label="Event"
           placeholder="Event Name"
+          {...props}
       />
       <DatePicker
           label="event date"
           pickerId="date-picker-default"
+          {...props}
       />
     </FormGroup>
   </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx

@@ -1,20 +1,23 @@
 import React from 'react'
 import { FormGroup, TextInput } from '../../'
 
-const FormGroupDefault = () => (
+const FormGroupDefault = (props) => (
   <div>
     <FormGroup>
       <TextInput
           label="First Name"
           placeholder="Enter First Name"
+          {...props}
       />
       <TextInput
           label="Middle Intial"
           placeholder="Enter Middle Initial"
+          {...props}
       />
       <TextInput
           label="Last Name"
           placeholder="Enter Last Name"
+          {...props}
       />
     </FormGroup>
   </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -2,7 +2,7 @@
   <%= pb_rails("form_group") do %>
     <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
-      blank_selection: "Select Genre",
+      blank_selection: "Genre",
       options: [
         { value: "Country" },
         { value: "Pop" },

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FormGroup, Select, TextInput } from '../../'
 
-const FormGroupSelect = () => {
+const FormGroupSelect = (props) => {
   const options = [
     { value: 'Country' },
     { value: 'Pop' },
@@ -20,10 +20,12 @@ const FormGroupSelect = () => {
         <TextInput
             label="Artist"
             placeholder="Enter Artist Name"
+            {...props}
         />
         <Select
-            blankSelection="Select Genre"
+            blankSelection="Genre"
             options={options}
+            {...props}
         />
       </FormGroup>
     </div>