playbook_ui 9.8.0 → 9.9.0.alpha.inline1

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
@@ -19,7 +21,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_text_input_kit") + error_class
+        generate_classname("pb_text_input_kit") + error_class + inline_class
       end
 
       def validation_message
@@ -41,6 +43,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: '',
+    onCreate: () => {},
+    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_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,5 @@ 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,5 +1,7 @@
-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'

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?