playbook_ui 11.3.0.pre.alpha2 → 11.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dba337c40168111668352ace0e5a5fa77bc5f4e4841400e45be308ef63d9399a
-  data.tar.gz: 569e4c54d392811db9bfa07bde8d975f6bdaaf79d5dc188c98378b21609f8a7f
+  metadata.gz: 829ab73754749eeb3476c40cfaba3fb74e62e92744f725772b851b3c084a81ce
+  data.tar.gz: e42dc4f35cb80676454745307afba58a5d33e7deae5f68ff36074a28e78e3299
 SHA512:
-  metadata.gz: 43a6e262418280b793cb9dae4e4283a740337ceb04d3e41b33196c2a5318cb8b88b72adc7f64312ba65fc5c4d76c5b5e5eeac2d89e5f91045055a2b52e00c999
-  data.tar.gz: 1391c6d1e8d678f7997a58da9f7b9b9e376fb321b3143ff43b0ad39be080efec4a9d83f394e9f2487f941e2be76d53af102c6efa8118bace1a2dcf515956149c
+  metadata.gz: 6c74669ef536138bc842fb3b2867d68716e10b15af93ea73233593bad06c7c0f01494d30e29cba67c7a2526401a854bf6ad00b259829a2adcfe4795969dbbcb5
+  data.tar.gz: 169d399c99f5fddd984fedb81e3701b85e918da087546259e84989bbf5f17a0227a9787494a8f524c2a50d38eccfc4badab2e9810e3e0b5cecd5585bb85883ac

data/app/pb_kits/playbook/index.js

@@ -98,7 +98,6 @@ 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_tooltip/_tooltip.scss

@@ -23,7 +23,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 }
 
 [class^="pb_tooltip_kit"] {
-  ~ .tooltip_tooltip,
   .tooltip_tooltip {
     display: block;
     opacity: 0;
@@ -53,42 +52,15 @@ $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;
@@ -97,29 +69,14 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       }
     }
   }
-
-  &.dark,
   &[class*=_dark]{
-    ~.tooltip_tooltip,
-    .tooltip_tooltip {
-      //react
-      &.visible {
-        color: $charcoal;
-        background-color: $white;
-      }
-      //rails
-      &.show {
-        color: $white;
-        background-color: rgba($black, $opacity_9);
-      }
+    .tooltip_tooltip{
+      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/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,10 +4,4 @@ examples:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
   - tooltip_white: White
-  - tooltip_with_icon_circle: Icon Circle Tooltip
-
-  react:
-  - tooltip_default_react: Default
-  - tooltip_interaction: Content Interaction
-  - tooltip_margin: Margin
-  - tooltip_icon: Tooltip with Icon
+  - tooltip_with_icon_circle: Icon Circle Tooptip

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

@@ -92,7 +92,6 @@ 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'
@@ -189,7 +188,6 @@ WebpackerReact.setup({
   ...TitleCount,
   ...TitleDetail,
   ...Toggle,
-  ...Tooltip,
   ...TreemapChart,
   ...Typeahead,
   ...User,

data/dist/reset.css

@@ -0,0 +1,2 @@
+*{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

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.2.7"
-  VERSION = "11.3.0.pre.alpha2"
+  VERSION = "11.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.3.0.pre.alpha2
+  version: 11.3.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-25 00:00:00.000000000 Z
+date: 2022-08-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1990,27 +1990,15 @@ 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
@@ -2191,6 +2179,7 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
 - app/pb_kits/playbook/utilities/test/globalProps/order.test.js
 - app/pb_kits/playbook/utilities/text.ts
+- dist/reset.css
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
 - lib/playbook.rb
@@ -2263,9 +2252,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1,144 +0,0 @@
-/* @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

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

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

@@ -1,10 +0,0 @@
-<%= 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,52 +0,0 @@
-// @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

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

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

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

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

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

@@ -1,3 +0,0 @@
-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/index.js

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

@@ -1,50 +0,0 @@
-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();
-});