playbook_ui 9.12.0 → 9.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1460f77a2ef88bf84e6e7388b473d73517373e9ef0d690418f318bf13eb49f6
-  data.tar.gz: 814d426340141a35d9286a0df82747538023dde241b7ec662c68bdfe6ef59585
+  metadata.gz: 454a36effc86e9d19eeb9e613a961a581d16ff491c2933cacffe0732669327f7
+  data.tar.gz: b3656b823c07b3f5b2653205d1a7a42165a86a9a429759b65ddc0e05a213850b
 SHA512:
-  metadata.gz: e2c7ca89a529a1b173ac9cdd097813f342024c0428bac7830a6c0fa2fedc8e2951e6f7eea46bcaadbf85d8a65d5cd53d329c9d3c13abf5b0db0b001f11610bed
-  data.tar.gz: 73a48d081d1f1db44d7b788816ccc4e6c02657cf7e0b3107da11d18e1889bb716810717ab0259cb6385a31dd02b90c6ff8162896998732b97c2936f7f821a85f
+  metadata.gz: 6d9eed8e5c343aae96350758b62eed4ddcf68f92c9df97909b6743eb74b66e9afbb0625642968f19335066a27ee38593be6e191e97ff5277ca33a690f3f2c4cf
+  data.tar.gz: 7c45e5fa6c94dbb0e3c7cdc36de9e2d9655511122309f46e2b45294697fe84d7b8af213adbb88e2bc45713319a1c4988cd8996df894c73341dd0de696427a513

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -13,8 +14,15 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
   data?: object,
   id?: string,
+  removeIcon?: Boolean,
+  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -23,8 +31,11 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
+    closeProps = {},
     data = {},
     id,
+    removeIcon = false,
+    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -44,7 +55,21 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>{text}</span>
+      <span>
+        {text}
+        <If condition={removeIcon}>
+          <span
+              onClick={removeOnClick}
+              style={{ cursor: 'pointer' }}
+              {...closeProps}
+          >
+            <Icon
+                fixedWidth
+                icon="times"
+            />
+          </span>
+        </If>
+      </span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -25,6 +25,8 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
+  inputOnChange?: (String) => void,
+  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
+    inputOnChange,
+    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -114,7 +118,6 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
-      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -126,7 +129,9 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
+            onChange={inputOnChange}
             placeholder={placeholder}
+            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -166,6 +166,9 @@ const datePickerHelper = (config) => {
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }
+
+  // Fix event bubbling bug on wrapper
+  document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
 }
 
 export default datePickerHelper

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -14,6 +14,7 @@ type FormPillProps = {
   onClick?: EventHandler,
   avatar?: boolean,
   avatarUrl?: string,
+  size?: string,
   closeProps?: {
     onClick?: EventHandler,
     onMouseDown?: EventHandler,
@@ -21,11 +22,20 @@ type FormPillProps = {
   },
 }
 const FormPill = (props: FormPillProps) => {
-  const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
+  const {
+    className,
+    text,
+    name,
+    onClick = () => {},
+    avatarUrl,
+    closeProps = {},
+    size = '',
+  } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
-    className
+    className,
+    size === 'small' ? 'small' : null,
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -51,4 +51,23 @@ $form_pill_colors: (
       }
     }
   }
+  &.small {
+    height: fit-content;
+    height: -moz-fit-content;
+    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
+      font-size: 16px;
+      font-weight: 400;
+    }
+    .pb_form_pill_text, .pb_form_pill_tag {
+      line-height: 1.7;
+      padding-left: $space_xs;
+      padding-right: 2px;
+    }
+    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
+      width: 20px;
+      height: 20px;
+      flex-basis: 20px;
+      &::before { line-height: 21px; }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+   size: "small",
+}) %>
+
+<br />
+<br />
+
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   size: "small",
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import FormPill from '../_form_pill.jsx'
+
+const FormPillSize = (props) => {
+  return (
+
+    <div>
+      <FormPill
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="small"
+          {...props}
+      />
+      <br />
+      <br />
+      <FormPill
+          name="Anna Black"
+          size="small"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FormPillSize

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,12 +1,11 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+}) %>
 
-   }) %>
-
-<br>
-<br>
+<br />
+<br />
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
-   }) %>
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -8,18 +8,14 @@ const FormPillDefault = (props) => {
       <FormPill
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
-          onClick={() => {
- alert('Click!')
-}}
+          onClick={() => alert('Click!')}
           {...props}
       />
       <br />
       <br />
       <FormPill
           name="Anna Black"
-          onClick={() => {
- alert('Click!')
-}}
+          onClick={() => alert('Click!')}
           {...props}
       />
     </div>

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

@@ -2,9 +2,11 @@ examples:
 
   rails:
   - form_pill_user: Form Pill User
+  - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
 
 
   react:
   - form_pill_user: Form Pill User
+  - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag

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

@@ -1,2 +1,3 @@
 export { default as FormPillUser } from './_form_pill_user.jsx'
+export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname + object.size_class) do %>
     <% if object.name.present? %>
       <%= pb_rails("avatar", props: {
         name: object.name,

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -6,6 +6,7 @@ module Playbook
       prop :avatar_url
       prop :name
       prop :text
+      prop :size
 
       def classname
         generate_classname("pb_form_pill_kit", "primary", name, text)
@@ -14,6 +15,10 @@ module Playbook
       def display_text
         name.downcase
       end
+
+      def size_class
+        size == "small" ? " small" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -9,10 +9,12 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 type RichTextEditorProps = {
   aria?: object,
+  toolbarBottom?: Boolean,
   className?: string,
   data?: object,
   focus?: boolean,
   id?: string,
+  inline?: boolean,
   name?: string,
   onChange: (string) => void,
   placeholder?: string,
@@ -25,10 +27,12 @@ type RichTextEditorProps = {
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
+    toolbarBottom = false,
     className,
     data = {},
     focus = false,
     id,
+    inline = false,
     name,
     onChange,
     placeholder,
@@ -77,6 +81,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         blockCodeButton.hidden = type == 'inline'
         inlineCodeButton.hidden = type == 'block'
       })
+
+      if (toolbarBottom) editor.element.after(toolbarElement)
     })
 
     trixRef.current.addEventListener('trix-change', (event) => {
@@ -103,6 +109,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''
   const StickyClass = sticky ? 'sticky' : ''
+  const InlineClass = inline ? 'inline' : ''
+  const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
   const css = classnames(globalProps(props), className)
 
   return (
@@ -114,6 +122,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         SimpleClass,
         FocusClass,
         StickyClass,
+        InlineClass,
+        ToolbarBottomClass,
         css
       )}
     >

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -5,6 +5,7 @@
 @import "../tokens/typography";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
+@import "../tokens/transition";
 @import "../pb_icon/icon";
 @import "./trix_styles";
 
@@ -228,4 +229,64 @@
       color: $white;
     }
   }
+  &.toolbar-bottom {
+    trix-editor {
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      &:empty:not(:focus)::before {
+        color: $neutral !important;
+      }
+    }
+    trix-toolbar .trix-button-row {
+      border-top: none;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom: 1px solid $border_light;
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+    trix-toolbar {
+      display: grid;
+    }
+    &:focus, &:focus-within {
+      trix-toolbar .trix-button-row {
+        @include transition_default;
+        border-color: $primary;
+      }
+    }
+  }
+  &.inline {
+    &:hover {
+      trix-editor {
+        @include transition_default;
+        border-color: $border_light;
+        background-color: $white;
+        &+ trix-toolbar .trix-button-row {
+          transition: all 0.3s ease-in-out 0s;
+          opacity: 100;
+        }
+      }
+    }
+    trix-editor {
+      @include transition_default;
+      border-color: transparent;
+      background-color: transparent;
+      &+ trix-toolbar .trix-button-row  {
+        transition: all 0.3s ease-in-out 0s;
+        opacity: 0;
+      }
+      &:focus {
+        @include transition_default;
+        border-color: $primary;
+        background-color: $focus_input_light;
+        &+ trix-toolbar .trix-button-row  {
+          transition: all 0.3s ease-in-out 0s;
+          opacity: 100;
+        }
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "inline",
+  inline: true,
+  toolbar_bottom: true,
+  value: "Try hovering over this text. Then try modifying it or adding more of your own text."
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { RichTextEditor } from '../../'
+
+const RichTextEditorInline = (props) => (
+  <div>
+    <RichTextEditor
+        id="inline"
+        inline
+        toolbarBottom
+        value="Try hovering over this text. Then try modifying it or adding more of your own text."
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "toolbar-bottom",
+  toolbar_bottom: true
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { RichTextEditor } from '../../'
+
+const RichTextEditorToolbarBottom = (props) => (
+  <div>
+    <RichTextEditor
+        id="bottom-toolbar"
+        toolbarBottom
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorToolbarBottom

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

@@ -7,6 +7,8 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
 
   react:
@@ -16,4 +18,6 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview

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

@@ -4,4 +4,6 @@ export { default as RichTextEditorAttributes } from './_rich_text_editor_attribu
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
+export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
+export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -6,11 +6,16 @@ module Playbook
       prop :focus, type: Playbook::Props::Boolean,
                    default: false
 
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
+
       prop :simple, type: Playbook::Props::Boolean,
                     default: false
 
       prop :sticky, type: Playbook::Props::Boolean,
                     default: false
+      prop :toolbar_bottom, type: Playbook::Props::Boolean,
+                            default: false
 
       prop :value
       prop :template
@@ -35,10 +40,12 @@ module Playbook
       def rich_text_options
         {
           id: id,
+          inline: inline,
           className: classname,
           focus: focus,
           simple: simple,
           sticky: sticky,
+          toolbarBottom: toolbar_bottom,
           value: value,
           template: template,
           placeholder: placeholder,

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -14,6 +14,7 @@ type TextInputProps = {
   disabled?: boolean,
   error?: string,
   id?: string,
+  inline?: boolean,
   name: string,
   label: string,
   onChange: (String) => void,
@@ -38,6 +39,7 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     disabled,
     error,
     id,
+    inline = false,
     name,
     label,
     onChange = () => {},
@@ -63,6 +65,7 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
   const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null
   const css = classnames([
     'pb_text_input_kit',
+    inline ? 'inline' : null,
     error ? 'error' : null,
     globalProps(props),
     className,

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -89,6 +89,14 @@
       }
     }
   }
+  &.inline {
+    &:not(:hover) { 
+      .text_input_wrapper input:not(:focus) {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
 }
 
 .text_input_wrapper_add_on {

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("text_input", props: {
+  inline: true,
+  label: "Hover Over Text Below",
+  value: "Inline Input"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { TextInput } from '../../'
+
+const TextInputInline = (props) => {
+  const [value, setValue] = useState('Inline Input')
+  const handleValueChange = ({ target }) => {
+    setValue(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          inline
+          label="Hover Over Text Below"
+          onChange={handleValueChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextInputInline

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

@@ -5,9 +5,11 @@ examples:
   - text_input_custom: Custom
   - text_input_disabled: Disabled
   - text_input_add_on: Add On
+  - text_input_inline: Inline
   react:
   - text_input_default: Default
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
   - text_input_add_on: Add On
+  - text_input_inline: Inline

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

@@ -3,3 +3,4 @@ export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
 export { default as TextInputDisabled } from './_text_input_disabled.jsx'
 export { default as TextInputAddOn } from './_text_input_add_on.jsx'
+export { default as TextInputInline } from './_text_input_inline.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :label
       prop :name
       prop :placeholder
@@ -21,7 +23,7 @@ module Playbook
                     nested_kit: Playbook::PbTextInput::AddOn
 
       def classname
-        generate_classname("pb_text_input_kit") + error_class
+        generate_classname("pb_text_input_kit") + error_class + inline_class
       end
 
       def input_tag
@@ -75,6 +77,10 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
+
+      def inline_class
+        inline ? " inline" : ""
+      end
     end
   end
 end

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

@@ -3,8 +3,10 @@
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
+import CreateableSelect from 'react-select/creatable'
 import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
+import classnames from 'classnames'
 
 import Control from './components/Control'
 import ClearIndicator from './components/ClearIndicator'
@@ -26,6 +28,7 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
+  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -55,9 +58,13 @@ const Typeahead = (props: Props) => {
     },
     defaultOptions: true,
     id: 'react-select-input',
+    inline: false,
     isClearable: true,
     isSearchable: true,
     name,
+    multiKit: '',
+    onCreateOption: null,
+    plusIcon: false,
     ...props,
   }
 
@@ -65,7 +72,8 @@ const Typeahead = (props: Props) => {
   if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
   if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
 
-  const Tag = props.async ? AsyncSelect : Select
+  let Tag = props.async ? AsyncSelect : Select
+  if (props.createable) Tag = CreateableSelect
 
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {
@@ -84,9 +92,10 @@ const Typeahead = (props: Props) => {
   }
 
   const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
+  const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
-    <div className={classes}>
+    <div className={classnames(classes, inlineClass)}>
       <Tag
           classNamePrefix="typeahead-kit-select"
           onChange={handleOnChange}

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

@@ -154,4 +154,27 @@
       box-sizing: border-box;
     }
   }
+  .placeholder+.input-wrapper .typeahead-plus-icon {
+    display: none;
+  }
+  .typeahead-kit-select__control--is-focused .typeahead-plus-icon {
+    display: none;
+  }
+  .typeahead-plus-icon {
+    color: $text_lt_lighter;
+  }
+  [class^=pb_badge_kit] span {
+    line-height: 16.5px;
+    letter-spacing: normal;
+  }
+  &.inline {
+    &:not(:hover) {
+      .text_input {
+        border-color: transparent;
+      }
+      .text_input_indicators .css-tlfecz-indicatorContainer {
+        color: transparent;
+      }
+    }
+  }
 }

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

@@ -3,7 +3,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import { FormPill } from '../../'
+import { Badge, FormPill } from '../../'
 
 type Props = {
   data: object,
@@ -15,6 +15,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
+  const { multiKit } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -28,19 +29,30 @@ const MultiValue = (props: Props) => {
         className="text_input_multivalue_container"
         {...props}
     >
-      <If condition={imageUrl}>
-        <FormPill
-            avatarUrl={imageUrl}
+      <If condition={multiKit === 'badge'}>
+        <Badge
             closeProps={removeProps}
-            marginRight="xs"
-            name={label}
-        />
-        <Else />
-        <FormPill
-            closeProps={removeProps}
-            marginRight="xs"
+            removeIcon
             text={label}
+            variant="primary"
         />
+        <Else />
+        <If condition={imageUrl}>
+          <FormPill
+              avatarUrl={imageUrl}
+              closeProps={removeProps}
+              marginRight="xs"
+              name={label}
+              size={multiKit === 'smallPill' ? 'small' : ''}
+          />
+          <Else />
+          <FormPill
+              closeProps={removeProps}
+              marginRight="xs"
+              size={multiKit === 'smallPill' ? 'small' : ''}
+              text={label}
+          />
+        </If>
       </If>
     </components.MultiValueContainer>
   )

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

@@ -1,13 +1,26 @@
 /* @flow */
 
 import React from 'react'
+import { Flex, Icon } from '../../'
 import { components } from 'react-select'
 
 const Placeholder = (props: any) => (
-  <components.IndicatorsContainer
-      className="placeholder"
-      {...props}
-  />
+  <>
+    <Flex
+        align="center"
+        className="placeholder"
+    >
+      <components.IndicatorsContainer
+          {...props}
+      />
+      <If condition={props.selectProps.plusIcon}>
+        <Icon
+            className="typeahead-plus-icon"
+            icon="plus"
+        />
+      </If>
+    </Flex>
+  </>
 )
 
 export default Placeholder

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

@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../..'
+
+const options = [
+  { label: 'Jardim', value: 'Portuguese' },
+  { label: 'Garten', value: 'German' },
+  { label: 'Giardino', value: 'Italian' },
+  { label: 'Jardín', value: 'Spanish' },
+]
+
+const TypeaheadCreateable = (props) => {
+  return (
+    <Typeahead
+        createable
+        isMulti
+        label="User Created Options"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadCreateable

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

@@ -0,0 +1,36 @@
+<%
+  synths = [
+    { label: 'Oberheim', value: 'OBXa' },
+    { label: 'Moog', value: 'Minimoog' },
+    { label: 'Roland', value: 'Juno' },
+    { label: 'Korg', value: 'MS-20' },
+  ]
+%>
+<%
+  cities = [
+    { label: 'Budapest', value: 'Hungary' },
+    { label: 'Singapore', value: 'Singapore' },
+    { label: 'Oslo', value: 'Norway' },
+    { label: 'Lagos', value: 'Nigeria' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [synths.first],
+  id: "typeahead-inline-example1",
+  inline: true,
+  options: synths,
+  label: "Synths",
+  placeholder: "Add synths",
+  pills: true
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-inline-example2",
+  inline: true,
+  options: cities,
+  label: "Cities",
+  pills: true,
+  placeholder: "Add cities",
+  plus_icon: true
+}) %>

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

@@ -0,0 +1,43 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../../'
+
+const synths = [
+  { label: 'Oberheim', value: 'OBXa' },
+  { label: 'Moog', value: 'Minimoog' },
+  { label: 'Roland', value: 'Juno' },
+  { label: 'Korg', value: 'MS-20' },
+]
+
+const cities = [
+  { label: 'Budapest', value: 'Hungary' },
+  { label: 'Singapore', value: 'Singapore' },
+  { label: 'Oslo', value: 'Norway' },
+  { label: 'Lagos', value: 'Nigeria' },
+]
+
+const TypeaheadInline = (props) => {
+  return (
+    <>
+      <Typeahead
+          inline
+          isMulti
+          label="Synths"
+          options={synths}
+          {...props}
+      />
+      <Typeahead
+          inline
+          isMulti
+          label="Placeholder Plus Icon"
+          options={cities}
+          placeholder="Add cities"
+          plusIcon
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadInline

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

@@ -0,0 +1,35 @@
+<%
+  labels = [
+    { label: 'Verve', value: '1956' },
+    { label: 'Stax', value: '1957' },
+    { label: 'Motown', value: '1959' },
+    { label: 'Kudu', value: '1971' },
+    { label: 'Stones Throw', value: '1996' },
+  ]
+%>
+<%
+  expressionists = [
+    { label: 'Kandinsky', value: 'Russia' },
+    { label: 'Klee', value: 'Switzerland' },
+    { label: 'Kokoschka', value: 'Austria' },
+    { label: 'Kirchner', value: 'Germany' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [labels.first],
+  id: "typeahead-multi-kit-example1",
+  options: labels,
+  label: "Badges",
+  multi_kit: "badge",
+  pills: true
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [expressionists.first],
+  id: "typeahead-multi-kit-example2",
+  options: expressionists,
+  label: "Small Pills",
+  multi_kit: "smallPill",
+  pills: true,
+}) %>

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

@@ -0,0 +1,44 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../../'
+
+const labels = [
+  { label: 'Verve', value: '1956' },
+  { label: 'Stax', value: '1957' },
+  { label: 'Motown', value: '1959' },
+  { label: 'Kudu', value: '1971' },
+  { label: 'Stones Throw', value: '1996' },
+]
+
+const expressionists = [
+  { label: 'Kandinsky', value: 'Russia' },
+  { label: 'Klee', value: 'Switzerland' },
+  { label: 'Kokoschka', value: 'Austria' },
+  { label: 'Kirchner', value: 'Germany' },
+]
+
+const TypeaheadMultiKit = (props) => {
+  return (
+    <>
+      <Typeahead
+          defaultValue={[labels[0]]}
+          isMulti
+          label="Badges"
+          multiKit="badge"
+          options={labels}
+          {...props}
+      />
+      <Typeahead
+          defaultValue={[expressionists[0]]}
+          isMulti
+          label="Small Pills"
+          multiKit="smallPill"
+          options={expressionists}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadMultiKit

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

@@ -5,6 +5,8 @@ examples:
     - 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_inline: Inline
+    - typeahead_multi_kit: Multi Kit Options
 
   react:
     - typeahead_default: Default
@@ -12,3 +14,6 @@ examples:
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
+    - typeahead_inline: Inline
+    - typeahead_multi_kit: Multi Kit Options
+    - typeahead_createable: Createable

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

@@ -1,5 +1,8 @@
-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'
+export { default as TypeaheadDefault } from './_typeahead_default.jsx'
+export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
+export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
+export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'
+export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options.jsx'
+export { default as TypeaheadInline } from './_typeahead_inline.jsx'
+export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
+export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -4,7 +4,7 @@
   <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
-                class: object.classname) do %>
+                class: object.classname + object.inline_class) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

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

@@ -8,12 +8,21 @@ module Playbook
       prop :get_option_label
       prop :get_option_value
       prop :id
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :label
       prop :load_options
+      prop :multi_kit, type: Playbook::Props::String,
+                       default: ""
       prop :name
-      prop :options, type: Playbook::Props::HashArray, default: []
-      prop :pills, type: Playbook::Props::Boolean, default: false
+      prop :options, type: Playbook::Props::HashArray,
+                     default: []
+      prop :pills, type: Playbook::Props::Boolean,
+                   default: false
+
       prop :placeholder
+      prop :plus_icon, type: Playbook::Props::Boolean,
+                       default: false
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
       prop :value
@@ -22,6 +31,10 @@ module Playbook
         generate_classname("pb_typeahead_kit")
       end
 
+      def inline_class
+        inline ? " inline" : ""
+      end
+
       def data
         Hash(values[:data]).merge(
           pb_typeahead_kit: true,
@@ -35,11 +48,14 @@ module Playbook
           dark: dark,
           defaultValue: default_options,
           id: id,
+          inline: inline,
           isMulti: true,
           label: label,
+          multiKit: multi_kit,
           name: name,
           options: options,
           placeholder: placeholder,
+          plusIcon: plus_icon,
         }
 
         base_options.merge!({ getOptionLabel: get_option_label }) if get_option_label.present?

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.12.0"
+  VERSION = "9.13.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.12.0
+  version: 9.13.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-06 00:00:00.000000000 Z
+date: 2021-05-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1037,6 +1037,8 @@ files:
 - app/pb_kits/playbook/pb_form_group/form_group.rb
 - app/pb_kits/playbook/pb_form_pill/_form_pill.jsx
 - app/pb_kits/playbook/pb_form_pill/_form_pill.scss
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
@@ -1556,6 +1558,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
@@ -1564,6 +1568,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
 - app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
 - app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
@@ -1823,6 +1829,8 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx
 - app/pb_kits/playbook/pb_text_input/docs/example.yml
 - app/pb_kits/playbook/pb_text_input/docs/index.js
 - app/pb_kits/playbook/pb_text_input/text_input.html.erb
@@ -1998,8 +2006,13 @@ files:
 - app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_description.md
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
@@ -2159,8 +2172,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project:
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Playbook Design System