playbook_ui 7.11.1 → 7.14.0

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

@@ -0,0 +1 @@
+Use `valueComponent` props to pass your desire custom options. `valueComponent` will be displayed if present. 

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

@@ -22,4 +22,4 @@
       }
     })
   }
-<% end %>
+<% end %>

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"
@@ -74,11 +75,13 @@ const TypeaheadWithPillsAsyncUsers = () => {
         >
           <User
               align="left"
+              avatar
               avatarUrl={user.imageUrl}
               key={user.value}
               marginBottom="md"
               name={user.label}
               orientation="horizontal"
+              {...props}
           />
         </For>
       </If>
@@ -90,6 +93,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
+          {...props}
       />
     </>
   )

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

@@ -1,7 +1,7 @@
 examples:
   rails:
     - typeahead_default: Default
-    - typeahead_with_context_dark: With Context
+    - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -10,4 +10,5 @@ examples:
     - typeahead_default: Default
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)
-    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -2,3 +2,4 @@ export { default as TypeaheadDefault } from './_typeahead_default'
 export { default as TypeaheadWithPills } from './_typeahead_with_pills'
 export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async'
 export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users'
+export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options'

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

@@ -39,12 +39,13 @@ module Playbook
 
       def typeahead_with_pills_options
         base_options = {
+          dark: dark,
           defaultValue: default_options,
           id: id,
           isMulti: true,
           label: label,
           options: options,
-          placeholder: placeholder
+          placeholder: placeholder,
         }
 
         base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?

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>
 )
 

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

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

data/app/pb_kits/playbook/tokens/_border_radius.scss

@@ -9,14 +9,28 @@ $border_rad_heavy:        5px;
 $border_rad_heavier:      6px;
 $border_rad_heaviest:     7px;
 $border_rad_mega:         1000px;
+$border_radius_xs:        4px;
+$border_radius_sm:        4px;
+$border_radius_md:        6px;
+$border_radius_lg:        8px;
+$border_radius_xl:        16px;
+$border_radius_rounded:   1000px;
+$border_radius_none:      0;
 $border_radius: (
-  lightest: $border_rad_lightest,
-  lighter: $border_rad_lighter,
-  light: $border_rad_light,
-  normal: $border_rad_normal,
-  heavy: $border_rad_heavy,
-  heavier: $border_rad_heavier,
-  heaviest: $border_rad_heaviest
+  lightest:              $border_rad_lightest,
+  lighter:               $border_rad_lighter,
+  light:                 $border_rad_light,
+  normal:                $border_rad_normal,
+  heavy:                 $border_rad_heavy,
+  heavier:               $border_rad_heavier,
+  heaviest:              $border_rad_heaviest,
+  border_radius_xs:      $border_radius_xs,
+  border_radius_sm:      $border_radius_sm,
+  border_radius_md:      $border_radius_md,
+  border_radius_lg:      $border_radius_lg,
+  border_radius_xl:      $border_radius_xl,
+  border_radius_none:    $border_radius_none,
+  border_radius_rounded: $border_radius_rounded
 );
 
 

data/app/pb_kits/playbook/utilities/_max_width.scss

@@ -0,0 +1,15 @@
+.max_width_sm {
+  max-width: 540px;
+}
+
+.max_width_md {
+  max-width: 720px;
+}
+
+.max_width_lg {
+  max-width: 960px;
+}
+
+.max_width_xl {
+  max-width: 1140px;
+}

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -1,28 +1,28 @@
 @import "../tokens/spacing";
 
-$space_classes: ( 
-	xs: $space_xs, 
-	sm: $space_sm, 
-	md: $space_md, 
-	lg: $space_lg, 
-	xl: $space_xl, 
+$space_classes: (
+	xs: $space_xs,
+	sm: $space_sm,
+	md: $space_md,
+	lg: $space_lg,
+	xl: $space_xl,
 	none: 0
 );
 
-$positions: ( 
-	m: "margin", 
-	mr: "margin-right", 
-	ml: "margin-left", 
-	mt: "margin-top", 
-	mb: "margin-bottom", 
-	mx: ("margin-left", "margin-right"), 
+$positions: (
+	m: "margin",
+	mr: "margin-right",
+	ml: "margin-left",
+	mt: "margin-top",
+	mb: "margin-bottom",
+	mx: ("margin-left", "margin-right"),
 	my: ("margin-top", "margin-bottom"),
-	p: "padding", 
-	pr: "padding-right", 
-	pl: "padding-left", 
-	pt: "padding-top", 
-	pb: "padding-bottom", 
-	px: ("padding-left", "padding-right"), 
+	p: "padding",
+	pr: "padding-right",
+	pl: "padding-left",
+	pt: "padding-top",
+	pb: "padding-bottom",
+	px: ("padding-left", "padding-right"),
 	py: ("padding-top", "padding-bottom")
 );
 
@@ -39,4 +39,4 @@ $positions: (
 			}
 		}
 	}
-}
+}

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -39,10 +39,16 @@ const darkProps = ({ dark }) => {
   return css
 }
 
+const maxWidthProps = ({ maxWidth }) => {
+  let css = ''
+  css += maxWidth  ? `max_width_${maxWidth } ` : ''
+  return css
+}
+
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {