playbook_ui 7.9.0 → 7.12.0

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -100,7 +100,16 @@
       }
       &_value_container {
         flex-grow: 1;
+        position: relative;
       }
     }
+    .placeholder {
+      position: absolute;
+      margin-right: 2px;
+      margin-left: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      box-sizing: border-box;
+    }
   }
 }

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -10,7 +10,6 @@ import {
 const Option = (props: any) => {
   const {
     imageUrl,
-    label,
   } = props.data
 
   return (
@@ -21,12 +20,12 @@ const Option = (props: any) => {
             <User
                 align="left"
                 avatarUrl={imageUrl}
-                name={label}
+                name={props.label}
                 orientation="horizontal"
             />
           </When>
           <When condition={!imageUrl}>
-            {label}
+            {props.label}
           </When>
         </Choose>
       </div>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -10,11 +10,12 @@ const options = [
   { label: 'Blue', value: '#0000FF' },
 ]
 
-const TypeaheadDefault = () => {
+const TypeaheadDefault = (props) => {
   return (
     <Typeahead
         label="Colors"
         options={options}
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -10,7 +10,7 @@ const options = [
   { label: 'Roofs', value: '#0000FF' },
 ]
 
-const TypeaheadWithPills = () => {
+const TypeaheadWithPills = (props) => {
   return (
     <>
       <Typeahead
@@ -18,6 +18,7 @@ const TypeaheadWithPills = () => {
           label="Colors"
           options={options}
           placeholder=""
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb

@@ -1,4 +1,13 @@
-<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
+<%= pb_rails("typeahead", props: {
+  async: true,
+  get_option_label: 'getOptionLabel',
+  get_option_value: 'getOptionValue',
+  load_options: 'asyncPillsPromiseOptions',
+  label: "Github Users",
+  name: :foo,
+  pills: true,
+  placeholder: "type the name of a Github user"
+}) %>
 
 <!-- This section is an example of how to provide load_options prop for using dynamic options -->
 <%= javascript_tag defer: "defer" do %>
@@ -7,8 +16,8 @@
   const filterResults = function(results) {
     return results.items.map(function(result) {
       return {
-        label: result.login,
-        value: result.id,
+        name: result.login,
+        id: result.id,
       }
     })
   }
@@ -27,4 +36,11 @@
       }
     })
   }
+
+  window.getOptionLabel = function(option) {
+    return option.name;
+  }
+  window.getOptionValue = function(option) {
+    return option.id;
+  }
 <% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -20,8 +20,8 @@ import {
 const filterResults = (results) =>
   results.items.map((result) => {
     return {
-      label: result.login,
-      value: result.id,
+      name: result.login,
+      id: result.id,
     }
   })
 
@@ -45,7 +45,7 @@ const promiseOptions = (inputValue) =>
     }
   })
 
-const TypeaheadWithPillsAsync = () => {
+const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
   const handleOnChange = (value) => setUsers(value)
 
@@ -55,6 +55,7 @@ const TypeaheadWithPillsAsync = () => {
         <Caption
             marginBottom="xs"
             text="State (Users)"
+            {...props}
         />
         <For
             each="user"
@@ -66,16 +67,20 @@ const TypeaheadWithPillsAsync = () => {
               marginBottom="md"
               name={user.label}
               orientation="horizontal"
+              {...props}
           />
         </For>
       </If>
       <Typeahead
           async
+          getOptionLabel={(option) => option.name}
+          getOptionValue={(option) => option.id}
           isMulti
           label="Github Users"
           loadOptions={promiseOptions}
           onChange={handleOnChange}
           placeholder="type the name of a Github user"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md

@@ -4,8 +4,16 @@
 
 The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
 
-#### React: `loadOptions`
+#### React
+
+##### `loadOptions`
 
 **Additional required props: ** `async: true`
 
-[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
+[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
+
+##### `getOptionLabel` + `getOptionValue`
+
+If your server returns data that requires differing field names other than `label` and `value`
+
+See `react-select` docs for more information: https://react-select.com/advanced#replacing-builtins

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -46,7 +46,7 @@ const promiseOptions = (inputValue) =>
     }
   })
 
-const TypeaheadWithPillsAsyncUsers = () => {
+const TypeaheadWithPillsAsyncUsers = (props) => {
   const [users, setUsers] = useState([])
   const handleOnChange = (value) => setUsers(value)
 
@@ -67,6 +67,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
         <Caption
             marginBottom="xs"
             text="State (Users)"
+            {...props}
         />
         <For
             each="user"
@@ -79,6 +80,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
               marginBottom="md"
               name={user.label}
               orientation="horizontal"
+              {...props}
           />
         </For>
       </If>
@@ -90,6 +92,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :async, type: Playbook::Props::Boolean,
                     default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
+      prop :get_option_label
+      prop :get_option_value
       prop :id
       prop :label
       prop :load_options
@@ -45,6 +47,9 @@ module Playbook
           placeholder: placeholder
         }
 
+        base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?
+        base_options.merge!({getOptionValue: get_option_value}) if get_option_value.present?
+
         base_options.merge!({
           async: true,
           loadOptions: load_options,

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { User } from '../../'
 
-const UserDefault = () => {
+const UserDefault = (props) => {
   return (
     <div className="pb--doc-demo-row">
 
@@ -13,6 +13,7 @@ const UserDefault = () => {
             orientation="vertical"
             size="lg"
             title="Remodeling Consultant"
+            {...props}
         />
       </div>
 
@@ -23,6 +24,7 @@ const UserDefault = () => {
             name="Anna Black"
             orientation="horizontal"
             title="Remodeling Consultant"
+            {...props}
         />
       </div>
 
@@ -32,6 +34,7 @@ const UserDefault = () => {
             avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
             name="Anna Black"
             orientation="horizontal"
+            {...props}
         />
 
         <br />
@@ -41,6 +44,7 @@ const UserDefault = () => {
             avatar
             name="Anna Black"
             orientation="horizontal"
+            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { User } from '../../'
 
-const UserDefault = () => {
+const UserDefault = (props) => {
   return (
     <div className="pb--doc-demo-row">
       <User
@@ -9,6 +9,7 @@ const UserDefault = () => {
           name="Anna Black"
           size="sm"
           title="Remodeling Consultant"
+          {...props}
       />
 
       <User
@@ -16,6 +17,7 @@ const UserDefault = () => {
           name="Anna Black"
           size="md"
           title="Remodeling Consultant"
+          {...props}
       />
 
       <User
@@ -23,6 +25,7 @@ const UserDefault = () => {
           name="Anna Black"
           size="lg"
           title="Remodeling Consultant"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { User } from '../../'
 
-const UserTextOnly = () => {
+const UserTextOnly = (props) => {
   return (
     <div className="pb--doc-demo-row">
       <User
@@ -10,12 +10,14 @@ const UserTextOnly = () => {
           orientation="horizontal"
           size="lg"
           title="Remodeling Consultant"
+          {...props}
       />
       <User
           align="left"
           name="Anna Black"
           orientation="horizontal"
           title="Remodeling Consultant"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { User } from '../../'
 
-const UserVerticalSize = () => {
+const UserVerticalSize = (props) => {
   return (
     <div>
       <User
@@ -11,6 +11,7 @@ const UserVerticalSize = () => {
           orientation="vertical"
           size="sm"
           title="Remodeling Consultant"
+          {...props}
       />
       <br />
       <br />
@@ -21,6 +22,7 @@ const UserVerticalSize = () => {
           orientation="vertical"
           size="md"
           title="Remodeling Consultant"
+          {...props}
       />
       <br />
       <br />
@@ -31,6 +33,7 @@ const UserVerticalSize = () => {
           orientation="vertical"
           size="lg"
           title="Remodeling Consultant"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { User } from '../../'
 
-const UserWithTerritory = () => {
+const UserWithTerritory = (props) => {
   return (
     <div className="pb--doc-demo-row">
 
@@ -14,6 +14,7 @@ const UserWithTerritory = () => {
             size="lg"
             territory="PHL"
             title="Remodeling Consultant"
+            {...props}
         />
       </div>
 
@@ -25,6 +26,7 @@ const UserWithTerritory = () => {
             orientation="horizontal"
             territory="PHL"
             title="Remodeling Consultant"
+            {...props}
         />
       </div>
 
@@ -36,6 +38,7 @@ const UserWithTerritory = () => {
             size="sm"
             territory="PHL"
             title="Remodeling Consultant"
+            {...props}
         />
 
         <br />
@@ -47,6 +50,7 @@ const UserWithTerritory = () => {
             size="lg"
             territory="PHL"
             title="Remodeling Consultant"
+            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx

@@ -3,21 +3,24 @@ import {
   WeekdayStacked,
 } from '../../'
 
-const WeekdayStackedCompact = () => (
+const WeekdayStackedCompact = (props) => (
   <div>
     <WeekdayStacked
         compact
         variant="day_only"
+        {...props}
     />
     <WeekdayStacked
         align="center"
         compact
         variant="month_day"
+        {...props}
     />
     <WeekdayStacked
         align="right"
         compact
         variant="expanded"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx

@@ -3,11 +3,20 @@ import {
   WeekdayStacked,
 } from '../../'
 
-const WeekdayStackedDefault = () => (
+const WeekdayStackedDefault = (props) => (
   <div>
-    <WeekdayStacked className="test" />
-    <WeekdayStacked align="center" />
-    <WeekdayStacked align="right" />
+    <WeekdayStacked
+        className="test"
+        {...props}
+    />
+    <WeekdayStacked
+        align="center"
+        {...props}
+    />
+    <WeekdayStacked
+        align="right"
+        {...props}
+    />
   </div>
 )