playbook_ui 9.9.0.alpha.inline1 → 9.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aad061e395898f02d246cad01fc3ca3c158c910c058c546fdff62258f99ceced
-  data.tar.gz: fb468e1242133f77abb769f74805a44c6a3caa88fb40dd10cf48791b98683466
+  metadata.gz: cc6cf85248c6d0e0b9c74d63c9d1dffa2a99d8e5b8d1010a8b4622829fa77d66
+  data.tar.gz: dae909122997e3eea81a47c6b5b9260bb84d87316c82cc70b351bec7a75d4ad7
 SHA512:
-  metadata.gz: e23d91eb54be1797a2cfb44c35941b3c0302d7bb02cb880ee61a21710a540014a0c4a0bc9b82c3b09d47d38d0b030a702f33a2d3b54fdf0ceec805d674958545
-  data.tar.gz: e04139cbbbf7a5e9b93e47ec464583715fae88a10463047c08da99ffae60986832117ae533c880de82cf54989bfe2914191dc1d87cf37763f8426c2bca571662
+  metadata.gz: 596e69c28e26d8ddcafc2d1006e8f72f56458a9a8eacc4811a918e0124ddffed05c75e61a8834630d041d742e1dd66d8cd97870b5b1d4ef74e7ce2b9b8f30d09
+  data.tar.gz: 9a71dd4b52c1da10cd03a288accf3c76e18dd8bc71aebe3e2818c7f27763cd65e0b069d9103c95c5d8cad56ec96411340419a3f729b139758c172d8628e6c8a9

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

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

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

@@ -25,8 +25,6 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
-  inputOnChange?: (String) => void,
-  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -57,8 +55,6 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
-    inputOnChange,
-    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -118,6 +114,7 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
+      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -129,9 +126,7 @@ 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,9 +166,6 @@ 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,7 +14,6 @@ type FormPillProps = {
   onClick?: EventHandler,
   avatar?: boolean,
   avatarUrl?: string,
-  size?: string,
   closeProps?: {
     onClick?: EventHandler,
     onMouseDown?: EventHandler,
@@ -22,20 +21,11 @@ type FormPillProps = {
   },
 }
 const FormPill = (props: FormPillProps) => {
-  const {
-    className,
-    text,
-    name,
-    onClick = () => {},
-    avatarUrl,
-    closeProps = {},
-    size = '',
-  } = props
+  const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
-    className,
-    size === 'small' ? 'small' : null,
+    className
   )
   return (
     <div className={css}>

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

@@ -51,23 +51,4 @@ $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_user.html.erb

@@ -1,11 +1,12 @@
 <%= 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,14 +8,18 @@ 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,11 +2,9 @@ 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,3 +1,2 @@
 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 + object.size_class) do %>
+    class: object.classname) do %>
     <% if object.name.present? %>
       <%= pb_rails("avatar", props: {
         name: object.name,

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

@@ -6,7 +6,6 @@ module Playbook
       prop :avatar_url
       prop :name
       prop :text
-      prop :size
 
       def classname
         generate_classname("pb_form_pill_kit", "primary", name, text)
@@ -15,10 +14,6 @@ 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,12 +9,10 @@ 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,
@@ -27,12 +25,10 @@ type RichTextEditorProps = {
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
-    toolbarBottom = false,
     className,
     data = {},
     focus = false,
     id,
-    inline = false,
     name,
     onChange,
     placeholder,
@@ -81,8 +77,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         blockCodeButton.hidden = type == 'inline'
         inlineCodeButton.hidden = type == 'block'
       })
-
-      if (toolbarBottom) editor.element.after(toolbarElement)
     })
 
     trixRef.current.addEventListener('trix-change', (event) => {
@@ -109,8 +103,6 @@ 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 (
@@ -122,8 +114,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         SimpleClass,
         FocusClass,
         StickyClass,
-        InlineClass,
-        ToolbarBottomClass,
         css
       )}
     >

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

@@ -5,7 +5,6 @@
 @import "../tokens/typography";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
-@import "../tokens/transition";
 @import "../pb_icon/icon";
 @import "./trix_styles";
 
@@ -229,64 +228,4 @@
       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/example.yml

@@ -7,8 +7,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
 
   react:
@@ -18,6 +16,4 @@ 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,6 +4,4 @@ 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,16 +6,11 @@ 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
+                   default: false
 
       prop :value
       prop :template
@@ -40,15 +35,13 @@ 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,
+          placeholder: placeholder
         }
       end
     end

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

@@ -17,7 +17,6 @@ type TextInputProps = {
   disabled?: boolean,
   error?: string,
   id?: string,
-  inline?: boolean,
   name: string,
   label: string,
   onChange: (String) => void,
@@ -40,7 +39,6 @@ const TextInput = (
     disabled,
     error,
     id,
-    inline = false,
     name,
     label,
     onChange = () => {},
@@ -55,7 +53,6 @@ const TextInput = (
   const dataProps = buildDataProps(data)
   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

@@ -79,12 +79,4 @@
       }
     }
   }
-  &.inline {
-    &:not(:hover) { 
-      .text_input_wrapper input:not(:focus) {
-        background-color: transparent;
-        border-color: transparent;
-      }
-    }
-  }
 }

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

@@ -4,10 +4,8 @@ examples:
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
-  - text_input_inline: Inline
   react:
   - text_input_default: Default
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
-  - text_input_inline: Inline

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

@@ -2,4 +2,3 @@ export { default as TextInputDefault } from './_text_input_default.jsx'
 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 TextInputInline } from './_text_input_inline.jsx'

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

@@ -8,8 +8,6 @@ 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 +19,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_text_input_kit") + error_class + inline_class
+        generate_classname("pb_text_input_kit") + error_class
       end
 
       def validation_message
@@ -43,10 +41,6 @@ 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,10 +3,8 @@
 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'
@@ -28,7 +26,6 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
-  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -58,13 +55,9 @@ const Typeahead = (props: Props) => {
     },
     defaultOptions: true,
     id: 'react-select-input',
-    inline: false,
     isClearable: true,
     isSearchable: true,
     name,
-    multiKit: '',
-    onCreate: () => {},
-    plusIcon: false,
     ...props,
   }
 
@@ -72,8 +65,7 @@ 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)
 
-  let Tag = props.async ? AsyncSelect : Select
-  if (props.createable) Tag = CreateableSelect
+  const Tag = props.async ? AsyncSelect : Select
 
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {
@@ -92,10 +84,9 @@ const Typeahead = (props: Props) => {
   }
 
   const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
-  const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
-    <div className={classnames(classes, inlineClass)}>
+    <div className={classes}>
       <Tag
           classNamePrefix="typeahead-kit-select"
           onChange={handleOnChange}

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

@@ -154,27 +154,4 @@
       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 { Badge, FormPill } from '../../'
+import { FormPill } from '../../'
 
 type Props = {
   data: object,
@@ -15,7 +15,6 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { multiKit } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -29,30 +28,19 @@ const MultiValue = (props: Props) => {
         className="text_input_multivalue_container"
         {...props}
     >
-      <If condition={multiKit === 'badge'}>
-        <Badge
+      <If condition={imageUrl}>
+        <FormPill
+            avatarUrl={imageUrl}
             closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
+            marginRight="xs"
+            name={label}
         />
         <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>
+        <FormPill
+            closeProps={removeProps}
+            marginRight="xs"
+            text={label}
+        />
       </If>
     </components.MultiValueContainer>
   )

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

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

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

@@ -5,8 +5,6 @@ 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
@@ -14,5 +12,3 @@ 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

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

@@ -1,7 +1,5 @@
-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 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.html.erb

@@ -4,7 +4,7 @@
   <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
-                class: object.classname + object.inline_class) do %>
+                class: object.classname) 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,21 +8,12 @@ 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
@@ -31,10 +22,6 @@ module Playbook
         generate_classname("pb_typeahead_kit")
       end
 
-      def inline_class
-        inline ? " inline" : ""
-      end
-
       def data
         Hash(values[:data]).merge(
           pb_typeahead_kit: true,
@@ -48,14 +35,11 @@ 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.9.0.alpha.inline1"
+  VERSION = "9.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.9.0.alpha.inline1
+  version: 9.9.0
 platform: ruby
 authors:
 - Power UX
@@ -1021,8 +1021,6 @@ 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
@@ -1542,8 +1540,6 @@ 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
@@ -1552,8 +1548,6 @@ 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
@@ -1809,8 +1803,6 @@ 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
@@ -1988,10 +1980,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
 - 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
@@ -2146,9 +2134,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
 signing_key:

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

@@ -1,13 +0,0 @@
-<%= 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

@@ -1,25 +0,0 @@
-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_rich_text_editor/docs/_rich_text_editor_inline.html.erb

@@ -1,6 +0,0 @@
-<%= 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

@@ -1,16 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<%= 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

@@ -1,14 +0,0 @@
-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_text_input/docs/_text_input_inline.html.erb

@@ -1,5 +0,0 @@
-<%= 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

@@ -1,22 +0,0 @@
-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_typeahead/docs/_typeahead_inline.html.erb

@@ -1,36 +0,0 @@
-<%
-  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

@@ -1,43 +0,0 @@
-// @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

@@ -1,35 +0,0 @@
-<%
-  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

@@ -1,44 +0,0 @@
-// @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