playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY21817891

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadPreserveInput = (props) => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={options}
+        preserveSearchInput
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadPreserveInput

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

@@ -0,0 +1 @@
+By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserveSearchInput` prop in order to prevent text from being cleared when the field loses focus

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

@@ -34,3 +34,4 @@ examples:
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
     - typeahead_disabled: Disabled
+    - typeahead_preserve_input: Preserve Search Input

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

@@ -15,3 +15,4 @@ export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_colo
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
+export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -19,6 +19,7 @@ type UserProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  avatarGrayscale?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   name?: string,
@@ -41,6 +42,7 @@ const User = (props: UserProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    avatarGrayscale = false,
     htmlOptions = {},
     id,
     name,
@@ -145,6 +147,7 @@ const User = (props: UserProps): React.ReactElement => {
     >
       { avatarPresent &&
         <Avatar
+            grayscale={avatarGrayscale}
             imageUrl={avatarUrl}
             name={name}
             size={size}

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("user", props: {
+  name: "Anna Black",
+  title: "Remodeling Consultant",
+  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+  avatar_grayscale: true,
+}) %>

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import User from '../../pb_user/_user'
+
+const UserGrayscale = (props) => {
+  return (
+    <User
+        avatarGrayscale
+        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        name="Anna Black"
+        title="Remodeling Consultant"
+        {...props}
+    />
+  )
+}
+
+export default UserGrayscale

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

@@ -10,6 +10,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   react:
   - user_default: Default
@@ -21,6 +22,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   swift:
   - user_horizontal_swift: Horizontal

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

@@ -7,3 +7,4 @@ export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
 export { default as UserFontOptions } from './_user_font_options.jsx'
+export { default as UserGrayscale } from './_user_grayscale.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -3,7 +3,8 @@
     <%= pb_rails("avatar", props: {
       name: object.name,
       size: object.avatar_size,
-      image_url: object.avatar_url
+      image_url: object.avatar_url,
+      grayscale: object.avatar_grayscale,
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>

data/app/pb_kits/playbook/pb_user/user.rb

@@ -8,6 +8,7 @@ module Playbook
                    default: "left"
       prop :avatar, type: Playbook::Props::Boolean,
                     default: false
+      prop :avatar_grayscale, type: Playbook::Props::Boolean, default: false
       prop :avatar_url
       prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name