playbook_ui 14.15.0.pre.alpha.play1907passglobalpropstotooltiprails6706 → 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Caption from '../../pb_caption/_caption'
-import Timestamp from '../../pb_timestamp/_timestamp'
-import Title from '../../pb_title/_title'
+import { Caption, Timestamp, Title } from 'playbook-ui'
 
 const TimestampUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-import Toggle from '../../pb_toggle/_toggle'
+import { Caption, Title, Toggle } from 'playbook-ui'
 
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-import Toggle from '../../pb_toggle/_toggle'
+import { Caption, Title, Toggle } from 'playbook-ui'
 
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

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

@@ -54,7 +54,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       margin-bottom: 50px;
     }
 
-    &.visible,
+    &.visible, 
     &.show {
       z-index: $z_9;
       padding: $space_xs $space_sm;
@@ -117,7 +117,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
         color: $charcoal;
         background-color: $white;
       }
-      .arrow {
+      .arrow {        
         border-color: $white transparent transparent transparent;
         opacity: $opacity_10;
       }

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipDefaultReact = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipDelay = (props) => {
 

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/_tooltip_icon.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
+import { Tooltip, Button, Flex } from 'playbook-ui'
 
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Body from '../../pb_body/_body'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

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

@@ -4,8 +4,6 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
-  - tooltip_sizing: Tooltip Sizing
-  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,11 +1,10 @@
 <%= content_tag(:div,
-      id: object.id,
-      data: object.data,
-      class: object.classname,
-      style: remove_height_properties(combined_html_options[:style]) || "",
-      **combined_html_options.except(:style)) do %>
-  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
+  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
-<% end %>
+<% end %>

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

@@ -3,49 +3,24 @@
 module Playbook
   module PbTooltip
     class Tooltip < Playbook::KitBase
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-      prop :delay_open
-      prop :delay_close
-      prop :height
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :max_height
-      prop :max_width
-      prop :min_height
-      prop :min_width
       prop :position
-      prop :tooltip_id
       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,
                             values: %w[hover click],
                             default: "hover"
-      prop :width
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
       end
 
-      def remove_height_properties(combined_html_options_style)
-        return nil if combined_html_options_style.nil?
-
-        combined_html_options_style.gsub(/\s*(height|min-height|max-height)\s*:[^;]*;?\s*/, "")
-                                   .strip
-                                   .presence
-      end
-
-      def height_and_width_helper
-        out = ""
-        out += "width: #{width};" if width.present?
-        out += "height: #{height};" if height.present?
-        out += "max-height: #{max_height};" if max_height.present?
-        out += "max-width: #{max_width};" if max_width.present?
-        out += "min-height: #{min_height};" if min_height.present?
-        out += "min-width: #{min_width};" if min_width.present?
-        out
-      end
-
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef} from 'react'
+import React, { useState, useEffect} from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -49,7 +49,6 @@ type TypeaheadProps = {
   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,
@@ -72,7 +71,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,11 +83,9 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
-  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  onChange,
   optionsByContext = {},
   searchContextSelector,
   clearOnContextChange = false,
@@ -158,15 +156,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 +199,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/docs/_typeahead_async_createable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 /**
  *

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Jardim', value: 'Portuguese' },

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

@@ -2,7 +2,9 @@
 
 import React, { useState } from 'react'
 
-import Button from '../../pb_button/_button'
+import {
+  Button,
+} from 'playbook-ui'
 
 import Typeahead from '../_typeahead'
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

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

@@ -4,12 +4,14 @@
 import React, { useState } from 'react'
 import { components } from 'react-select'
 
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Avatar,
+  Body,
+  Flex,
+  FlexItem,
+  Title,
+  Typeahead,
+} from 'playbook-ui'
 
 const USERS = [
   {

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *

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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *
@@ -47,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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *
@@ -54,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/_typeahead_with_pills_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

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

@@ -17,7 +17,6 @@ examples:
 
   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_user/docs/_user_block_content_subtitle_react.jsx

@@ -1,10 +1,5 @@
 import React from "react"
-
-import Caption from '../../pb_caption/_caption'
-import Contact from '../../pb_contact/_contact'
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
-import User from '../../pb_user/_user'
+import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
 
 const MentorSubtitle = (
   <Flex>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserDefault = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserLightWeight = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserDefault = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from "react"
-import User from '../../pb_user/_user'
+import { User } from "playbook-ui"
 
 const UserSubtitle = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserTextOnly = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserVerticalSize = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import User from '../../pb_user/_user'
+import { User } from 'playbook-ui'
 
 const UserWithTerritory = (props) => {
   return (

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughContinuous = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughDefault = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughMultiBeacon = (props) => {
   const [stateA, setStateA] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughNoBeacon = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughNoOverlay = (props) => {
   const [noOverlay, setNoOverlayState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughStyled = (props) => {
   const [state, setState] = useState({