playbook_ui 14.15.0.pre.alpha.play1917lodashremoval2of36615 → 14.15.0.pre.rc.0

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
-          marginBottom='md'
           text="Default Title"
           {...props}
       />
+      <br />
       <Title
           size={1}
           tag="h1"

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

@@ -5,7 +5,6 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
-  - title_display_size: Display Size
 
   react:
   - title_default: Default UI
@@ -13,4 +12,3 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
-  - title_display_size: Display Size

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

@@ -3,4 +3,3 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
-export { default as TitleDisplaySize } from './_title_display_size.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,15 +16,12 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
-      prop :display_size, type: Playbook::Props::Enum,
-                          values: [nil, "xs", "sm", "md", "lg", "xl", "xxl"],
-                          default: nil
 
       def classname
         if is_size_responsive
           generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
+          generate_classname("pb_title_kit", size, variant, color, is_bold)
         end
       end
 
@@ -32,12 +29,6 @@ module Playbook
         bold ? nil : "thin"
       end
 
-      def generate_display_size
-        return "" if display_size.nil?
-
-        " pb_title_kit_dynamic_#{display_size}"
-      end
-
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -141,6 +141,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
     .arrow {
       left: -18px;
       right: auto;
@@ -155,6 +156,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
     .arrow {
       top: -18px;
       margin-bottom: 0;
@@ -167,6 +169,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -25,18 +25,12 @@ type TooltipProps = {
   children: JSX.Element,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
-  height?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   interaction?: boolean,
-  maxHeight?: string,
-  maxWidth?: string,
-  minHeight?: string,
-  minWidth?: string,
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
-  width: string,
   showTooltip?: boolean,
   forceOpenTooltip?: boolean,
 } & GlobalProps
@@ -48,19 +42,13 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     children,
     data = {},
     delay = 0,
-    height,
     htmlOptions = {},
     icon = null,
     interaction = false,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
     showTooltip = true,
-    width,
     zIndex,
     forceOpenTooltip = false,
     ...rest
@@ -127,18 +115,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     top: "bottom",
   }[placement.split("-")[0]]
 
-  const tooltipSizing = () => {
-    return Object.assign(
-      {},
-      height ? { height: height } : {},
-      maxHeight ? { maxHeight: maxHeight } : {},
-      maxWidth ? { maxWidth: maxWidth } : {},
-      minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {},
-      width ? { width: width } : {}
-    );
-};
-
   return (
     <>
       <div
@@ -168,7 +144,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
               ref: refs.setFloating,
               role: "tooltip",
               style: {
-                ...tooltipSizing(),
                 position: strategy,
                 top: y ?? 0,
                 left: x ?? 0,

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "result-1-sample-email-link",
+  tooltip_id: "sample-email-tooltip-result-1",
+  position: "top",
+  dark: true
+}) do %>
+  Send Email
+<% end %>

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

@@ -2,18 +2,15 @@ examples:
 
   rails:
   - tooltip_default: Default
-  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
-  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:
   - tooltip_default_react: Default
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
-  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
+

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

@@ -1,7 +1,6 @@
 export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
-export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -11,7 +11,7 @@ const TOOLTIP_TIMEOUT = 250
 
 export default class PbTooltip extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="false"]:not([data-pb-tooltip-delay-open]):not([data-pb-tooltip-delay-close])'
+    return '[data-pb-tooltip-kit]'
   }
 
   connect() {

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -7,10 +7,6 @@ module Playbook
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
       prop :tooltip_id
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :delay_open
-      prop :delay_close
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :trigger_method, type: Playbook::Props::Enum,
@@ -22,19 +18,15 @@ module Playbook
       end
 
       def data
-        data = Hash(values[:data]).merge(
+        Hash(values[:data]).merge(
           pb_tooltip_kit: true,
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: trigger_method
         )
-        data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
-        data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close
-        data
       end
 
     private

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from '../utilities/object'
+import { merge } from 'lodash'
 
 type TreemapChartProps = {
   chartData: {

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

@@ -1,10 +1,9 @@
-import React, { useState, useEffect, forwardRef} from 'react'
+import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
-import { get, isString, uniqueId } from '../utilities/object'
-
+import { get, isString, uniqueId } from 'lodash'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
@@ -46,13 +45,8 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => string),
   getOptionValue?: string | (() => string),
   name?: string,
-  options?: Array<{ label: string; value?: string }>,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
-  onChange?: any,
-  optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
-  searchContextSelector?: string,
-  clearOnContextChange?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -72,7 +66,8 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
+
+const Typeahead = ({
   async,
   className,
   components = {},
@@ -83,14 +78,9 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
-  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  onChange,
-  optionsByContext = {},
-  searchContextSelector,
-  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -125,32 +115,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     ...props,
   }
 
-  const [contextValue, setContextValue] = useState("")
-
-  useEffect(() => {
-    if (searchContextSelector) {
-      const searchContextElement = document.getElementById(searchContextSelector)
-
-      setContextValue((searchContextElement as HTMLInputElement)?.value)
-      const handleContextChange = (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        setContextValue(target.value);
-        if (clearOnContextChange) document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
-      }
-
-      if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
-
-      return () => {
-        if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
-      }
-    }
-  }, [searchContextSelector])
-
-  const contextArray = optionsByContext[contextValue]
-  if (Array.isArray(contextArray) && contextArray.length > 0) {
-    selectProps.options = contextArray
-  }
-
   const Tag = (
     createable
       ? (async ? AsyncCreateableSelect : CreateableSelect)
@@ -158,15 +122,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   )
 
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
-    if (onChange) {
-      const isReactHookForm = onChange.toString().includes("target")
-      if (isReactHookForm) {
-        onChange({ target: { name, value: _data } })
-      } else {
-        onChange(_data)
-      }
-    }
-    
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -210,11 +165,10 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       />
     </div>
   )
-})
+}
 
 Object.keys(kitComponents).forEach((k) => {
   (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
 
-Typeahead.displayName = 'Typeahead'
 export default Typeahead

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

@@ -8,17 +8,15 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
-  wrapped?: boolean,
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   removeProps: any,
   selectProps: any,
 }
 
-
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
+  const { dark, multiKit, pillColor, truncate } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -54,7 +52,6 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
             truncate={truncate}
-            wrapped={wrapped}
             {...props}
         />
       }
@@ -69,7 +66,6 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
             truncate={truncate}
-            wrapped={wrapped}
             {...props}
         />
       }

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

@@ -49,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You added the user: "${value.label}"`)
+    alert(`You removed the user: "${value.label}"`)
   }
 
   return (

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

@@ -56,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You added the user: "${value.label}"`)
+    alert(`You removed the user: "${value.label}"`)
   }
 
   return (

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

@@ -12,12 +12,9 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
-    - typeahead_dynamic_options: Dynamic Options
-    - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
 
   react:
     - typeahead_default: Default
-    - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)

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

@@ -13,4 +13,3 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
 export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
-export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -20,34 +20,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
-
-    if (this.clearOnContextChange && this.searchContextElement) {
-      this.searchContextElement.addEventListener('change', () => {
-        this.searchInputClear()
-        this.resultsCacheClear()
-        this.clearResults()
-      })
-    }
-  }
-
-  get optionsByContext() {
-    return (this.element as HTMLElement).dataset.pbTypeaheadKitOptionsByContext
-      ? JSON.parse((this.element as HTMLElement).dataset.pbTypeaheadKitOptionsByContext)
-      : null
-  }
-
-  get searchContextElement() {
-    const selector = (this.element as HTMLElement).dataset.pbTypeaheadKitSearchContextSelector
-    if (!selector) return null
-
-    const found = this.element.parentNode?.querySelector(`#${selector}`)
-      || this.element.closest(selector)
-
-    return found || null
-  }
-
-  get clearOnContextChange() {
-    return (this.element as HTMLElement).dataset.pbTypeaheadKitClearOnContextChange === 'true'
   }
 
   handleKeydown(event: KeyboardEvent) {
@@ -68,32 +40,14 @@ export default class PbTypeahead extends PbEnhancedElement {
 
     const searchTerm = this.searchTerm
     const searchContext = this.searchContext
-
-    if (this.optionsByContext && Object.keys(this.optionsByContext).length > 0) {
-      const contextArray = this.optionsByContext[searchContext] || []
-
-      const filteredResults = contextArray.filter((obj: { label: string, value: string }) => {
-        return obj.label
-          && obj.label.toLowerCase().includes(searchTerm.toLowerCase())
-      })
-
-       const optionFragments = filteredResults.map((obj: { label: string, value: string }) => {
-      const singleOption = document.createDocumentFragment()
-      singleOption.appendChild(document.createTextNode(obj.label))
-      return singleOption
-    })
-
-      this.resultsCacheUpdate(searchTerm, searchContext, optionFragments)
-    } else {
-      const search = {
-        searchingFor: searchTerm,
-        searchingContext: searchContext,
-        setResults: (results: Array<DocumentFragment>) => {
-          this.resultsCacheUpdate(searchTerm, searchContext, results)
-        },
-      }
-      this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
+    const search = {
+      searchingFor: searchTerm,
+      searchingContext: searchContext,
+      setResults: (results: Array<DocumentFragment>) => {
+        this.resultsCacheUpdate(searchTerm, searchContext, results)
+      },
     }
+    this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
   resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
@@ -133,15 +87,11 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
-    const selectedText = resultOption.textContent.trim()
-
     this._validSelection = true
     this.removeValidationError()
 
-    if (this.searchContextElement) this.searchInput.value = selectedText
-
     this.resultsCacheClear()
-    if (!this.searchContextElement) this.searchInputClear()
+    this.searchInputClear()
     this.clearResults()
 
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
@@ -223,9 +173,6 @@ export default class PbTypeahead extends PbEnhancedElement {
       this.element.parentNode.querySelector(selector) ||
       this.element.closest(selector)
     ) as HTMLInputElement).value
-    else if (this.searchContextElement) {
-      return (this.searchContextElement as HTMLInputElement).value
-    }
 
     return null
   }

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

@@ -44,14 +44,6 @@ module Playbook
                       default: false
       prop :validation, type: Playbook::Props::HashProp,
                         default: {}
-      prop :wrapped, type: Playbook::Props::Boolean,
-                     default: false
-      prop :clear_on_context_change, type: Playbook::Props::Boolean,
-                                     default: true
-      prop :options_by_context, type: Playbook::Props::HashProp,
-                                default: {}
-      prop :search_context_selector, type: Playbook::Props::String,
-                                     default: nil
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -66,15 +58,12 @@ module Playbook
         Hash(values[:data]).merge(
           pb_typeahead_kit: true,
           pb_typeahead_kit_search_term_minimum_length: search_term_minimum_length,
-          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout,
-          pb_typeahead_kit_clear_on_context_change: clear_on_context_change,
-          pb_typeahead_kit_search_context_selector: search_context_selector,
-          pb_typeahead_kit_options_by_context: options_by_context.to_json
+          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
 
       def is_react?
-        pills || !is_multi || wrapped
+        pills || !is_multi
       end
 
       def typeahead_react_options
@@ -96,10 +85,6 @@ module Playbook
           placeholder: placeholder,
           plusIcon: plus_icon,
           truncate: truncate,
-          wrapped: wrapped,
-          searchContextSelector: search_context_selector,
-          optionsByContext: options_by_context,
-          clearOnContextChange: clear_on_context_change,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?