playbook_ui 12.6.0 → 12.7.0

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,16 +1,46 @@
 @import "../tokens/colors";
 
+$transform-rotate-deg: 135deg;
+$input-max-width: 284px;
+$dropdown-min-width: 340px;
+$flag-min-resolution: 192dpi;
+
 .pb_phone_number_input {
   input::placeholder {
     color: $focus_input_light;
   }
 
+  .text_input {
+    max-width: $input-max-width;
+  }
+
+  .dropdown_open {
+    .text_input {
+      border-color: $primary !important;
+    }
+
+    .iti__selected-flag:focus-visible {
+      outline-style: none;
+    }
+  }
+
   .iti__country {
     padding: 5px 10px 5px 16px;
+    transition: $transition_default;
   }
 
   .iti__selected-flag {
-    padding: 0 6px 0 16px;
+    padding: 0 $space_xxs 0 $space_sm;
+
+    &[aria-expanded="true"] {
+      color: $primary_action;
+    }
+
+    &:focus-visible {
+      outline-style: solid;
+      border-radius: $space_xxs 0px 0px $space_xxs;
+      outline-color: $primary;
+    }
   }
 
   .iti__country.iti__highlight {
@@ -31,6 +61,11 @@
 
   .iti__flag {
     background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
+    border-radius: 1px;
+  }
+
+  .iti--separate-dial-code {
+    width: 100%;
   }
 
   .iti--separate-dial-code .iti__selected-flag {
@@ -52,49 +87,50 @@
 
   .iti__arrow::before {
     border-style: solid;
-    border-width: 0.1em 0.1em 0 0;
+    border-width: 1px 1px 0 0;
     content: '';
     display: inline-block;
-    height: 0.6em;
-    left: 0.1em;
+    height: $space_xxs + 1px;
+    left: 1px;
     position: relative;
     vertical-align: top;
-    width: 0.6em;
-    top: 10px;
-    transform: rotate(135deg);
-    font-size: 0.5em;
+    width: $space_xxs + 1px;
+    top: $space_xs + 2px;
+    transform: rotate($transform-rotate-deg);
     color: $slate;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-45deg);
-    top: 12px;
+    transform: rotate(-($transform-rotate-deg/3));
+    top: $space_xs + 4px;
+    color: $primary_action;
   }
 
   .iti__active::after {
     float: right;
     content: "";
-    margin-top: 5px;
-    transform: rotate(45deg);
-    height: 12px;
-    width: 6px;
+    margin-top: $space_xxs + 1px;
+    transform: rotate($transform-rotate-deg/3);
+    height: $space_xs + 4px;
+    width: $space_xxs + 2px;
     border-bottom: 2px solid;
     border-right: 2px solid;
     border-radius: 1px;
   }
 
   .iti__country-list {
-    min-width: 340px;
+    min-width: $dropdown-min-width;
     border-radius: $border_radius_md;
     border: 1px solid $border_light;
     box-shadow: $shadow_deep;
+    margin-top: 1px;
   }
 
   .iti__divider {
     border-bottom: 1px solid $border_light;
   }
   
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
     }

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -1,11 +1,12 @@
 /* @flow */
-import React, { useEffect, useRef, useState } from "react"
-import classnames from "classnames"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps"
-import intlTelInput from "intl-tel-input"
-import "intl-tel-input/build/css/intlTelInput.css"
-import TextInput from "../pb_text_input/_text_input"
+import React, { useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import intlTelInput from 'intl-tel-input'
+import 'intl-tel-input/build/css/intlTelInput.css'
+import TextInput from '../pb_text_input/_text_input'
+import 'intl-tel-input/build/js/utils.js'
 
 declare global {
   interface Window {
@@ -50,7 +51,7 @@ const formatAllCountries = () => {
 formatAllCountries()
 
 const containOnlyNumbers = (value: string) => {
-  return /^(\++)*(\d+)$/.test(value)
+  return /^[()+\-\ .\d]*$/g.test(value)
 }
 
 const PhoneNumberInput = (props: PhoneNumberInputProps) => {
@@ -85,7 +86,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState("")
+  const [error, setError] = useState('')
+  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -133,18 +135,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-      utilsScript:
-        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
-      separateDialCode: true,
-      preferredCountries,
-      allowDropdown: !disabled,
-      initialCountry,
-      onlyCountries,
-    })
-
-    inputRef.current.addEventListener("countrychange", () =>
-      validateTooLongNumber(telInputInit)
+        separateDialCode: true,
+        preferredCountries,
+        allowDropdown: !disabled,
+        initialCountry,
+        onlyCountries,
+      }
     )
+    
+    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
+    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
     setItiInit(telInputInit)
   }, [])
@@ -152,6 +153,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   return (
     <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
+        className={dropDownIsOpen ? 'dropdown_open' : ''}
         disabled={disabled}
         error={error}
         id={id}

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -18,19 +18,21 @@ $section_colors_dark: (
   justify-content: center;
   align-items: center;
   position: relative;
-  @each $color_name, $color_value in $section_colors_light {
-    &[class*=_#{$color_name}] {
-      span {
-        display: inline-block;
-        padding: 0 $space_xs;
-        background: #{$color_value};
-        position: relative;
-        z-index: 1;
-      }
-    }
+  span {
+    padding: 0 $space_xs;
+    display: flex;
+  }
+  &::before {
+    content: "";
+    height: 1px;
+    flex: 1;
+    @include section_separator_horizontal;
   }
   &::after {
-    @include section_separator_horizontal(false);
+    content: "";
+    height: 1px;
+    flex: 1;
+    @include section_separator_horizontal;
   }
   &[class*=_horizontal] {
     justify-content: center;
@@ -46,23 +48,13 @@ $section_colors_dark: (
   // Dark =========================
 
   &.dark {
-    &::after {
+    &::before {
       @include section_separator_horizontal(true);
     }
-    @each $color_name, $color_value in $section_colors_dark {
-      &[class*=_#{$color_name}] {
-        span {
-          display: inline-block;
-          padding: 0 $space_xs;
-          background: #{$color_value};
-          position: relative;
-          z-index: 1;
-        }
-      }
+    &::after {
+      @include section_separator_horizontal(true);
     }
     &[class*=_vertical] {
-      margin-left: $space_xs;
-      margin-right: $space_xs;
       &::after {
         @include section_separator_vertical(true);
       }

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -25,6 +25,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
     id,
     orientation = 'horizontal',
     text,
+    dark = false,
     variant = 'card',
   } = props
   const ariaProps = buildAriaProps(aria)
@@ -42,7 +43,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
       {
         text && (
           <span>
-          <Caption text={text} />
+          <Caption text={text} dark={dark}/>
         </span>
         )
       }

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -20,11 +20,4 @@
     } @else {
         background: $border_dark;
     }
-    content: "";
-    height: 1px;
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 0;
 }

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

@@ -3,12 +3,10 @@ examples:
   rails:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
-  - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical
 
 
   react:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
-  - section_separator_text_background: Background Variant
   - section_separator_vertical: Vertical

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

@@ -1,4 +1,3 @@
 export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
-export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -4,7 +4,9 @@
     data: object.data,
     class: object.classname) do %>
     <% if object.orientation === 'horizontal' %>
-        <span><%= pb_rails("caption", props: { text: object.text }) %></span>
+        <% if object.text %>
+            <span><%= pb_rails("caption", props: { text: object.text }) %></span>
+        <%end%>
     <% end %>
     <% if object.orientation === 'vertical' %>
         <%= pb_rails("flex", props: { orientation: "column"}) do %>

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss

@@ -3,6 +3,25 @@
 	text-align: center;
 	user-select: none;
 
+  .buffer > [class*=pb_selectable_icon_kit]::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .buffer > [class*=pb_selectable_icon_kit] {
+    @media (hover:hover) {
+      &:hover * {
+            transition: transform $transition_short ease;
+            transform: translateY(-2px);
+          }
+      }
+  }
+
+
 	input[type="checkbox"],
 	input[type="radio"] {
 

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -13,7 +13,6 @@
     dark: object.dark,
     input_options: object.input_options
   }) do %>
-
     <%= pb_rails("selectable_icon", props: {
       icon: object.icon,
       inputs: "disabled",
@@ -26,6 +25,5 @@
       color: "light",
       dark: object.dark
     }) %>
-
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -5,6 +5,7 @@
 	text-align: center;
 	cursor: pointer;
 	transition: all $transition_short ease;
+
 	@media (hover:hover) {
 		&:hover * {
 			transition: transform $transition_short ease;
@@ -81,3 +82,5 @@
 		}
  	}
 }
+
+

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

@@ -1,16 +1,18 @@
 import React, { useRef, useState } from "react"
-import classnames from "classnames"
+
 import {
-  Placement,
-  offset,
-  arrow,
-  shift,
-  useFloating,
+  arrow, 
+  flip, 
+  offset, 
+  Placement, 
+  safePolygon, 
+  shift, 
+  useFloating, 
+  useHover, 
   useInteractions,
-  useHover,
-  flip,
-  safePolygon,
 } from "@floating-ui/react-dom-interactions"
+
+import classnames from "classnames"
 import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
@@ -18,12 +20,13 @@ import Flex from "../pb_flex/_flex"
 type TooltipProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
+  children: JSX.Element,
   data?: { [key: string]: string },
-  text: string,
+  delay?: number | Partial<{open: number; close: number}>,
   icon?: string,
   interaction?: boolean,
   placement?: Placement,
-  children: JSX.Element,
+  text: string,
   zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
@@ -33,10 +36,11 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
     className,
     children,
     data = {},
+    delay = 0,
     icon = null,
     interaction = false,
-    text,
     placement: preferredPlacement = "top",
+    text,
     zIndex,
     ...rest
   } = props
@@ -45,53 +49,55 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
 
   const css = classnames(
-    globalProps({...rest}),
-    className
+    className,
+    globalProps({...rest})
   )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
   const {
-    x,
-    y,
-    reference,
-    floating,
-    strategy,
+
     context,
-    placement,
+    floating,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+    placement,
+    reference,
+    strategy,
+    x,
+    y,
   } = useFloating({
-    placement: preferredPlacement,
-    open,
-    onOpenChange(open) {
-      setOpen(open)
-    },
     middleware: [
-      offset(10),
-      shift(),
+      arrow({
+        element: arrowRef,
+      }),
       flip({
         fallbackPlacements: ["top", "right", "bottom", "left"],
         fallbackStrategy: "initialPlacement",
         flipAlignment: false,
       }),
-      arrow({
-        element: arrowRef,
-      }),
+      offset(10),
+      shift()
     ],
+    open,
+    onOpenChange(open) {
+      setOpen(open)
+    },
+    placement: preferredPlacement
   })
 
   const { getFloatingProps } = useInteractions([
     useHover(context, {
+      delay,
       handleClose: interaction ? safePolygon({
         blockPointerEvents: false
-      }) : null,
+      }) : null
     })
   ])
 
   const staticSide = {
-    top: "bottom",
-    right: "left",
     bottom: "top",
     left: "right",
+    right: "left",
+    top: "bottom",
   }[placement.split("-")[0]]
 
   return (
@@ -109,9 +115,9 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
       {open && (
         <div
             {...getFloatingProps({
-              role: "tooltip",
-              ref: floating,
               className: `tooltip_tooltip ${placement} visible`,
+              ref: floating,
+              role: "tooltip",
               style: {
                 position: strategy,
                 top: y ?? 0,

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

@@ -0,0 +1,56 @@
+// @flow
+
+import React from 'react'
+import { Button, Tooltip, Flex, FlexItem } from '../..';
+
+const TooltipDelay = (props) => {
+
+  return (
+   <Flex 
+       flexDirection='row'
+       gap='md'
+       justifyContent='center'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip 
+          delay={1000}
+          placement='top' 
+          text="1s open/close delay" 
+          zIndex={10}
+          {...props}
+      >
+        <Button text="1s delay"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          delay={{
+            open: 1000
+          }}
+          placement='top' 
+          text="1s open delay" 
+          zIndex={10}
+          {...props}
+      >
+        <Button text="Open only"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          delay={{
+            close: 1000
+          }}
+          placement='top' 
+          text="1s close delay" 
+          zIndex={10}
+          {...props}
+      >
+        <Button text="Close only"/>
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipDelay

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

@@ -0,0 +1,5 @@
+Waits for the specified time when the event listener runs before triggering the tooltip.
+
+The `delay` accepts `number` in `ms` or an `object` with `open` and `close` properties.
+
+The `default` is `0`.

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

@@ -11,3 +11,4 @@ examples:
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
   - tooltip_icon: Tooltip with Icon
+  - tooltip_delay: Delay

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

@@ -2,3 +2,4 @@ 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 TooltipIcon } from './_tooltip_icon'
+export { default as TooltipDelay } from './_tooltip_delay'

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -13,6 +13,7 @@ import DistributionBar from './pb_distribution_bar/_distribution_bar'
 import Gauge from './pb_gauge/_gauge'
 import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
+import MultiLevelSelect from './pb_multi_level_select/_multi_level_select'
 import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
 import TreemapChart from './pb_treemap_chart/_treemap_chart'
@@ -27,6 +28,7 @@ WebpackerReact.registerComponents({
   DialogFooter,
   DialogHeader,
   DistributionBar,
+  MultiLevelSelect,
   Legend,
   LineGraph,
   Passphrase,

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.5.0"
-  VERSION = "12.6.0"
+  PREVIOUS_VERSION = "12.6.0"
+  VERSION = "12.7.0"
 end