playbook_ui 11.2.7 → 11.3.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 289c5c7e82ae25efba0297b6033fbe734b244ec00e9a947842189b31018fcc23
-  data.tar.gz: 502b5c425611bb6f409d9e45ca874d0482c60b70688f13a7197c6fe81b06f191
+  metadata.gz: c0f967a874bbc5da6ef545ed133328666b04dab22fcbf922340c0ba605289c21
+  data.tar.gz: 58d5fec99769fd4351f47b17f51acb8f08f921e32e7fe7fb06c0d0dd8e0fc2a7
 SHA512:
-  metadata.gz: 6020feee31203a880a9884498f893ea2b1d847581da2ee7def63041f9d0282ff8c70ad888fde395abbf0c7f4b3f314d363bc1d35a1f00acb30e425c0826e882c
-  data.tar.gz: 143e9cc646e3d64c93142760f1613a293a72166baf02d9413b70ae0a365aa9437ffd944be1897f251aca21476c9967829d150a898bef402ae5a802997c32b26a
+  metadata.gz: 7e0f4f113b1ab02fab3e4569b8486406fa36c002dd383daa38c88db267070af2704b587931b22bb62133fbc23b7d2e0f375960627e591f0bd5412dca2dcc4c3e
+  data.tar.gz: 2935e5481d78744eb0b81d5acc4f7934407433545c2f784819275889c3b213da422d12bd1fba5b7ef53680089ce381932b7aa739f7b164128d2aa0b2e973c3da

data/app/pb_kits/playbook/index.js

@@ -98,6 +98,7 @@ export { default as Title } from './pb_title/_title'
 export { default as TitleCount } from './pb_title_count/_title_count'
 export { default as TitleDetail } from './pb_title_detail/_title_detail'
 export { default as Toggle } from './pb_toggle/_toggle'
+export { default as Tooltip } from './pb_tooltip/_tooltip'
 export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'

data/app/pb_kits/playbook/pb_collapsible/{_collapsible.jsx → _collapsible.tsx}

@@ -1,7 +1,4 @@
-/* @flow */
-
 import React, { useState } from 'react'
-
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
@@ -12,8 +9,8 @@ import CollapsibleMain from './child_kits/CollapsibleMain'
 import CollapsibleContext from './context'
 
 type CollapsibleProps = {
-  children: CollapsibleMain | CollapsibleContent | ReactNode,
-  aria?: object,
+  children?: JSX.Element | [],
+  aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
   data?: object,
@@ -21,6 +18,7 @@ type CollapsibleProps = {
   padding?: string,
 }
 
+
 const useCollapsible = (initial = false) => {
   const [collapsed, setCollapsed] = useState(initial)
 
@@ -41,7 +39,7 @@ const Collapsible = ({
   ...props
 }: CollapsibleProps) => {
   const [isCollapsed, collapse] = useCollapsible(collapsed)
-  const CollapsibleParent = React.Children.toArray(children)
+  const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
 
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')

data/app/pb_kits/playbook/pb_collapsible/child_kits/{CollapsibleContent.jsx → CollapsibleContent.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import AnimateHeight from 'react-animate-height'
@@ -8,8 +6,8 @@ import { globalProps } from '../../utilities/globalProps'
 
 import CollapsibleContext from '../context'
 
-type CollapsibleContentProps = {
-  children: array<React.ReactNode> | React.ReactNode | string,
+export type CollapsibleContentProps = {
+  children?: React.ReactNode[] | React.ReactNode | string,
   className?: string,
   padding?: string,
 }
@@ -20,7 +18,7 @@ const CollapsibleContent = ({
   padding = 'md',
   ...props
 }: CollapsibleContentProps) => {
-  const context = useContext(CollapsibleContext)
+  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props, { padding })
 

data/app/pb_kits/playbook/pb_collapsible/child_kits/{CollapsibleMain.jsx → CollapsibleMain.tsx}

@@ -1,4 +1,3 @@
-/* @flow */
 
 import classnames from 'classnames'
 import React, { useContext } from 'react'
@@ -10,13 +9,14 @@ import FlexItem from '../../pb_flex/_flex_item'
 import CollapsibleContext from '../context'
 
 type CollapsibleMainProps = {
-  children: array<React.ReactNode> | React.ReactNode,
+  children: React.ReactNode[] | React.ReactNode,
   className?: string,
   padding?: string,
+  cursor?: string
 }
 
 type IconProps = {
-  collapsed: boolean
+  collapsed: boolean | (()=> void)
 }
 
 const Icon = ({ collapsed }: IconProps) => {
@@ -40,7 +40,7 @@ const CollapsibleMain = ({
 
   ...props
 }: CollapsibleMainProps) => {
-  const context = useContext(CollapsibleContext)
+  const context: {[key: string]: (()=> void)} | boolean = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor, padding })
 

data/app/pb_kits/playbook/pb_collapsible/types.d.ts

@@ -0,0 +1 @@
+declare module 'react-animate-height'

data/app/pb_kits/playbook/pb_currency/_currency.scss

@@ -23,6 +23,7 @@
   }
   [class^=pb_currency_wrapper] {
     display: flex;
+    align-items: baseline;
 
     &[class*=_deemphasized] [class^=pb_body_kit][class*=_light] {
       color: $text_lt_default;
@@ -48,7 +49,7 @@
 
     & > [class*=dollar_sign] {
       display: flex;
-      align-items: flex-start;
+      align-self: flex-start;
     }
     & > [class*=unit] {
       display: flex;

data/app/pb_kits/playbook/pb_distribution_bar/{_distribution_bar.jsx → _distribution_bar.tsx}

@@ -1,26 +1,24 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
 
 type DistributionBarProps = {
   className?: string,
-  colors: array,
+  colors: [],
   data?: string,
   id?: string,
   size?: "lg" | "sm",
-  widths?: array<number>,
+  widths?: number[],
 }
 
-const normalizeCharacters = (widths) => {
+const normalizeCharacters = (widths:  number[]) => {
   return widths.map((width) => {
     return parseInt(width.toString().replace(/[^0-9.]/gi, ''))
   })
 }
 
-const barValues = (normalizedValues, colors) => {
-  const arrSum = (value) => value.reduce((a, b) => a + b, 0)
+const barValues = (normalizedValues: number[], colors: []) => {
+  const arrSum = (value: number[]) => value.reduce((a, b) => a + b, 0)
   const widthSum = arrSum(normalizedValues)
   return normalizedValues.map((value, i) => {
     return (

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DistributionBar from '../_distribution_bar.jsx'
+import DistributionBar from '../_distribution_bar'
 
 const DistributionBarCustomColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DistributionBar from '../_distribution_bar.jsx'
+import DistributionBar from '../_distribution_bar'
 
 const DistributionBarDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_list/list.rb

@@ -19,14 +19,12 @@ module Playbook
       prop :tabindex
 
       def list_classname
-        [
-          "pb_list_kit",
-          xpadding_class,
-          borderless_class,
-          dark_class,
-          size_class,
-          layout_class,
-        ].compact.join("_")
+        generate_classname("pb_list_kit",
+                           xpadding_class,
+                           borderless_class,
+                           dark_class,
+                           size_class,
+                           layout_class)
       end
 
       def ordered_class

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

@@ -23,6 +23,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 }
 
 [class^="pb_tooltip_kit"] {
+  ~ .tooltip_tooltip,
   .tooltip_tooltip {
     display: block;
     opacity: 0;
@@ -52,15 +53,42 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       border-width: 10px;
       margin-bottom: 50px;
     }
+
+    &.visible, 
     &.show {
-      opacity: 1;
       z-index: $z_9;
-      margin-bottom: $space_sm;
-      background-color: $white;
       padding: $space_xs $space_sm;
       box-shadow: $shadow_deeper;
       border-radius: $border_rad_light;
+    }
 
+    // react only
+    &.visible {
+      color: $white;
+      background-color: rgba($black, $opacity_9);
+      &.right {
+        box-shadow: -8px 0 28px 0 $tooltip_shadow;
+      }
+      &.bottom {
+        box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+      }
+      &.left {
+        box-shadow: 8px 0 28px 0 $tooltip_shadow;
+      }
+      // react arrow
+      .arrow_bg {
+        width: 10px;
+        height: 10px;
+        background-color: rgba($black, $opacity_9);
+        transform: rotate(45deg);
+      }
+    }
+
+    //rails only
+    &.show {
+      opacity: 1;
+      margin-bottom: $space_sm;
+      background-color: $white;
       &.fade_out {
         animation-name: fadeOut;
         animation-duration: 150ms;
@@ -69,14 +97,29 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       }
     }
   }
+
+  &.dark,
   &[class*=_dark]{
-    .tooltip_tooltip{
-      color: $white;
-      background-color: rgba($black, $opacity_9);
+    ~.tooltip_tooltip,
+    .tooltip_tooltip {
+      //react
+      &.visible {
+        color: $charcoal;
+        background-color: $white;
+      }
+      //rails
+      &.show {
+        color: $white;
+        background-color: rgba($black, $opacity_9);
+      }
       .arrow {
         border-color: $black transparent transparent transparent;
         opacity: $opacity_9;
       }
+      // react arrow
+      .arrow_bg {
+        background-color: $white;
+      }
       &.flipped {
         .arrow {
           border-color: transparent transparent $black transparent;

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

@@ -0,0 +1,144 @@
+/* @flow*/
+
+import React, { useRef, useState } from "react"
+import classnames from "classnames"
+import {
+  Placement,
+  offset,
+  arrow,
+  shift,
+  useFloating,
+  useInteractions,
+  useHover,
+  flip,
+  safePolygon,
+} from "@floating-ui/react-dom-interactions"
+import { GlobalProps, globalProps } from "../utilities/globalProps"
+import { buildAriaProps, buildDataProps } from "../utilities/props"
+import Flex from "../pb_flex/_flex"
+
+type TooltipProps = {
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
+  text: string,
+  icon?: string,
+  interaction?: boolean,
+  placement?: Placement,
+  children: JSX.Element,
+  zIndex?: Pick<GlobalProps, "ZIndex">,
+} & GlobalProps
+
+const Tooltip = (props: TooltipProps) => {
+  const {
+    aria = {},
+    children,
+    data = {},
+    icon = null,
+    interaction = false,
+    text,
+    placement: preferredPlacement = "top",
+    zIndex,
+    ...rest
+  } = props
+
+  console.log(rest)
+
+  const dataProps: { [key: string]: any } = buildDataProps(data)
+  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+
+  const css = classnames(globalProps({...rest}))
+  const [open, setOpen] = useState(false)
+  const arrowRef = useRef(null)
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    context,
+    placement,
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+  } = useFloating({
+    placement: preferredPlacement,
+    open,
+    onOpenChange(open) {
+      setOpen(open)
+    },
+    middleware: [
+      offset(10),
+      shift(),
+      flip({
+        fallbackPlacements: ["top", "right", "bottom", "left"],
+        fallbackStrategy: "initialPlacement",
+        flipAlignment: false,
+      }),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  })
+
+  const { getFloatingProps } = useInteractions([
+    useHover(context, {
+      handleClose: interaction ? safePolygon({
+        blockPointerEvents: false
+      }) : null,
+    })
+  ])
+
+  const staticSide = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right",
+  }[placement.split("-")[0]]
+
+  return (
+    <>
+      <div
+        ref={reference}
+        className={`pb_tooltip_kit ${css}`}
+        style={{ display: "inline-flex" }}
+        role="tooltip_trigger"
+        {...ariaProps}
+        {...dataProps}
+      >
+        {children}
+      </div>
+      {open && (
+        <div
+          {...getFloatingProps({
+            role: "tooltip",
+            ref: floating,
+            className: `tooltip_tooltip ${placement} visible`,
+            style: {
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              zIndex: zIndex ?? 0,
+            },
+          })}
+        >
+          <Flex gap="xs" align="center">
+            {icon && (
+            <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+            )}
+            {text}
+          </Flex>
+          <div
+            ref={arrowRef}
+            className="arrow_bg"
+            style={{
+              position: strategy,
+              left: arrowX != null ? `${arrowX}px` : "",
+              top: arrowY != null ? `${arrowY}px` : "",
+              [staticSide]: "-5px",
+            }}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Tooltip

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

@@ -0,0 +1,59 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Flex, FlexItem } from '../..';
+
+const TooltipDefaultReact = (props) => {
+
+  return (
+   <Flex 
+       flexDirection='row'
+       gap='md'
+       justifyContent='center'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip 
+          placement='top' 
+          text="Whoa. I'm a Tooltip" 
+          zIndex={10}
+          {...props}
+      >
+        {'Hover here (Top)'}
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+     <Tooltip 
+         placement='bottom' 
+         text="Whoa. I'm a Tooltip" 
+         zIndex={10}
+         {...props}
+     >
+        {'Hover here (Bottom)'}
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          placement='right' 
+          text="Whoa. I'm a Tooltip" 
+          zIndex={10}
+          {...props}
+      >
+        {'Hover here (Right)'}
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          placement='left' 
+          text="Whoa. I'm a Tooltip" 
+          zIndex={10}
+          {...props}
+      >
+        {'Hover here (Left)'}
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipDefaultReact

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

@@ -0,0 +1,5 @@
+You can define the tooltip placement sending the prop `placement` with one of the available options: `top | right | bottom | left`.
+
+If you don't specify a desired `placement`, the component will automatically choose the one that fits better. 
+
+If the desired `placement` doesn't fit on screen, the component will automatically switch to the one that fits better.

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

@@ -0,0 +1,52 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Button, Flex } from '../..'
+
+const TooltipIcon = (props) => {
+  return (
+    <Flex flexDirection='row'
+        gap='md'
+        wrap
+    >
+      <Tooltip
+          icon='paper-plane'
+          placement='top'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Tooltip With Icon' />
+      </Tooltip>
+      <Tooltip
+          icon='paper-plane'
+          placement='bottom'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Tooltip With Icon' />
+      </Tooltip>
+      <Tooltip
+          icon='paper-plane'
+          placement='right'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Tooltip With Icon' />
+      </Tooltip>
+      <Tooltip
+          icon='paper-plane'
+          placement='left'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <Button text='Tooltip With Icon' />
+      </Tooltip>
+    </Flex>
+  )
+}
+
+export default TooltipIcon

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

@@ -0,0 +1 @@
+Set the prop `icon` with the desired icon to display inside the tooltip.

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

@@ -0,0 +1,40 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Button, Flex, FlexItem } from '../..';
+
+const TooltipInteraction = (props) => {
+
+  return (
+   <Flex 
+       flexDirection='row'
+       gap='md'
+       justifyContent='center'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip 
+          interaction 
+          placement='top' 
+          text="You can copy me"
+          zIndex={10}
+          {...props}
+      >
+        <Button text="With Interaction"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+     <Tooltip 
+         placement='top' 
+         text="I'm just a regular tooltip" 
+         zIndex={10}
+         {...props}
+     >
+        <Button text="No Interaction"/>
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipInteraction

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

@@ -0,0 +1 @@
+Set the prop `interaction` as `true` for cases that require users to copy the content inside the tooltip.

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

@@ -0,0 +1,39 @@
+// @flow
+
+import React from 'react'
+import { Tooltip, Flex, CircleIconButton } from '../..'
+
+const TooltipMargin = (props) => {
+  return (
+    <Flex 
+        flexDirection='row' 
+        justifyContent='center' 
+        wrap
+    >
+      <Tooltip
+          margin='md'
+          placement='top'
+          text='Send Email'
+          zIndex={10}
+          {...props}
+      >
+        <CircleIconButton 
+            icon='paper-plane'
+        />
+      </Tooltip>
+      <Tooltip 
+          margin='md' 
+          placement='top' 
+          text='Send Email' 
+          zIndex={10} 
+          {...props}
+      >
+        <CircleIconButton 
+            icon='paper-plane'
+        />
+      </Tooltip>
+    </Flex>
+  )
+}
+
+export default TooltipMargin

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

@@ -0,0 +1,3 @@
+You should set `margin` in the `tooltip` component itself. If you add this prop to the child, it will cause the tooltip to be pulled away from the trigger.
+
+It is not recommended to set `padding` in the `tooltip` nor its child, doing so will cause it to be pulled away from its trigger element.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb

@@ -7,4 +7,4 @@
   dark: true
 }) do %>
   Send Email
-<% end %>
+<% end %>

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

@@ -4,4 +4,10 @@ examples:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
   - tooltip_white: White
-  - tooltip_with_icon_circle: Icon Circle Tooptip
+  - tooltip_with_icon_circle: Icon Circle Tooltip
+
+  react:
+  - tooltip_default_react: Default
+  - tooltip_interaction: Content Interaction
+  - tooltip_margin: Margin
+  - tooltip_icon: Tooltip with Icon

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

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

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { cleanup, render, screen, fireEvent } from "../utilities/test-utils";
+import { Button, Tooltip } from "..";
+
+function TooltipTest() {
+  const text = "this is a text",
+    placement = "top",
+    triggerText = "hover me",
+    zIndex = "10";
+
+  return (
+    <Tooltip
+        data={{ testid: "primary-test" }}
+        placement={placement}
+        text={text}
+        zIndex={zIndex}
+    >
+      <Button text={triggerText} />
+    </Tooltip>
+  );
+}
+
+test("renders the component", () => {
+  render(<TooltipTest />);
+
+  const kit = screen.getByTestId("primary-test");
+  expect(kit).toBeInTheDocument();
+  expect(kit).toHaveClass("pb_tooltip_kit");
+
+  cleanup();
+});
+
+test("opens on mouseenter", () => {
+  render(<TooltipTest />);
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+
+  cleanup();
+});
+
+test("closes on mouseleave", () => {
+  render(<TooltipTest />);
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  fireEvent.mouseLeave(screen.getByRole("tooltip_trigger"));
+  expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+
+  cleanup();
+});

data/app/pb_kits/playbook/playbook-doc.js

@@ -92,6 +92,7 @@ import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
+import * as Tooltip from 'pb_tooltip/docs'
 import * as TreemapChart from 'pb_treemap_chart/docs'
 import * as Typeahead from 'pb_typeahead/docs'
 import * as User from 'pb_user/docs'
@@ -188,6 +189,7 @@ WebpackerReact.setup({
   ...TitleCount,
   ...TitleDetail,
   ...Toggle,
+  ...Tooltip,
   ...TreemapChart,
   ...Typeahead,
   ...User,

data/dist/reset.css

@@ -1,2 +1,61 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+/* CLEAN UP AND REMOVE */
+/* Headings */
+/* Standard Font Weights */
+/* Non_Standard Font Weights */
+/*=====================================
+Base colors should not be documented.
+Only document color use.
+
+Colors -----------------------------*/
+/* Specialty Gradient -----------------*/
+/* Interface colors -------------------*/
+/* Main colors ------------------------*/
+/*=====================================
+
+Background colors ------------------*/
+/* Card colors ------------------*/
+/* Active colors ----------------------*/
+/* Hover colors -----------------------*/
+/* Focus colors -----------------------*/
+/* Border colors ----------------------*/
+/* Shadow colors ----------------------*/
+/* Text colors ------------------------*/
+/* Data colors ------------------------*/
+/* Status colors ----------------------*/
+/* Link colors ------------------------*/
+/* Product colors ---------------------*/
+/* Category colors ---------------------*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  *:before, *:after {
+    box-sizing: border-box; }
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden; }
+
+body {
+  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #F3F7FB;
+  height: 100%;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: #242B42;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; }
+
+a {
+  text-decoration: none;
+  color: #0056CF; }
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.2.6"
-  VERSION = "11.2.7"
+  PREVIOUS_VERSION = "11.2.7"
+  VERSION = "11.3.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.2.7
+  version: 11.3.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-17 00:00:00.000000000 Z
+date: 2022-08-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -567,10 +567,10 @@ files:
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_footer.md
 - app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
 - app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
-- app/pb_kits/playbook/pb_collapsible/_collapsible.jsx
 - app/pb_kits/playbook/pb_collapsible/_collapsible.scss
-- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx
-- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx
+- app/pb_kits/playbook/pb_collapsible/_collapsible.tsx
+- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
+- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx
 - app/pb_kits/playbook/pb_collapsible/collapsible.html.erb
 - app/pb_kits/playbook/pb_collapsible/collapsible.rb
 - app/pb_kits/playbook/pb_collapsible/collapsible.test.js
@@ -578,12 +578,13 @@ files:
 - app/pb_kits/playbook/pb_collapsible/collapsible_content.rb
 - app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb
 - app/pb_kits/playbook/pb_collapsible/collapsible_main.rb
-- app/pb_kits/playbook/pb_collapsible/context.js
+- app/pb_kits/playbook/pb_collapsible/context.ts
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
 - app/pb_kits/playbook/pb_collapsible/docs/example.yml
 - app/pb_kits/playbook/pb_collapsible/docs/index.js
 - app/pb_kits/playbook/pb_collapsible/index.js
+- app/pb_kits/playbook/pb_collapsible/types.d.ts
 - app/pb_kits/playbook/pb_contact/_contact.scss
 - app/pb_kits/playbook/pb_contact/_contact.tsx
 - app/pb_kits/playbook/pb_contact/contact.html.erb
@@ -809,8 +810,8 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
 - app/pb_kits/playbook/pb_dialog/docs/example.yml
 - app/pb_kits/playbook/pb_dialog/docs/index.js
-- app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx
 - app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss
+- app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.tsx
 - app/pb_kits/playbook/pb_distribution_bar/distribution_bar.html.erb
 - app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb
 - app/pb_kits/playbook/pb_distribution_bar/docs/_description.md
@@ -1989,15 +1990,27 @@ files:
 - app/pb_kits/playbook/pb_toggle/toggle.html.erb
 - app/pb_kits/playbook/pb_toggle/toggle.rb
 - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
+- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/example.yml
+- app/pb_kits/playbook/pb_tooltip/docs/index.js
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
+- app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
 - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
 - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
@@ -2251,9 +2264,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key: