playbook_ui 13.28.0.pre.alpha.PLAY1338alpha3001 → 13.28.0.pre.alpha.PLAY1343fixTooltiprunwayissue2984

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 59f7a06cc3253a684d61eee73c1c5fd45554d2cc4cd6122bba7607637e973c38
-  data.tar.gz: 534985876808d4307fc906213268c98ab6df9092ed5a6bb4e739c937b2ef301d
+  metadata.gz: b7a4f103f5608db8ea9e25be909bbd042e40da83e7999805870268dd24447a47
+  data.tar.gz: ec863a877604c9113f98886ef6932ad97632b722b9b2b3797cc1e1791a11228e
 SHA512:
-  metadata.gz: f3e85a9f4bb0f4b46e22897b9ccd19134eafd2f90b826b84e446d37e07c5a776190a7d1f227eeafe082a004418fd2718ecd43dd2edce2cd8584383149052de76
-  data.tar.gz: df402be0fb3068a1b1f139f80c433b07a92f791265133b8480baf159893cbe12bf260c24e88fc10023bacf30d0f8c23da818c583b16b047430021375c892614a
+  metadata.gz: 1f67c5d57ecf837628d8de841fdb279ca873e957fa7de4149c9d4fee2d5c4e73fa0877bc8e864fa31402ff02bfa46c2b6a68b50d3b8d425bd57b511230faba36
+  data.tar.gz: 89a64b35561cf140d06e663ff65bc3b7ee5e26062ca59549b063b2c9b29f29021a0b47491c1a99d01b5e2812cbbddc365fb1c1991de0d42efb5e9e2a561ad1b7

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, ReactElement } from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
@@ -11,16 +11,9 @@ import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
 import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
-type CollapsibleMainProps = {
-  children: React.ReactNode
-}
-
-type CollapsibleContentProps = {
-  children: React.ReactNode
-}
 
 type CollapsibleProps = {
-  children?: [ReactElement<CollapsibleMainProps>, ReactElement<CollapsibleContentProps>],
+  children?: React.ReactElement | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
@@ -37,7 +30,7 @@ type CollapsibleProps = {
 const Collapsible = ({
   aria = {},
   className,
-  children,
+  children = [],
   collapsed = true,
   data = {},
   htmlOptions = {},
@@ -55,12 +48,13 @@ const Collapsible = ({
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  if (children.length !== 2) {
+  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
+
+  if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
-
-  const FirstChild = children[0]
-  const SecondChild = children[1]
+  const FirstChild = CollapsibleParent[0]
+  const SecondChild = CollapsibleParent[1]
 
   const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
   const Content = SecondChild.type === CollapsibleContent ? SecondChild : null

data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js

@@ -48,27 +48,3 @@ test('returns namespaced additional_class class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} additional_class`)
 })
-
-test('html structure is correct', () => {
-  const { container } = render(
-    <Collapsible
-        className="additional_class"
-        data={{ testid: testId }}
-        iconColor='lighter'
-        iconSize="lg"
-    >
-      <Collapsible.Main>
-        <div>{'Main Section'}</div>
-      </Collapsible.Main>
-      <Collapsible.Content>
-        <div>
-          {
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
-          }
-        </div>
-      </Collapsible.Content>
-    </Collapsible>
-  )
-
-  expect(container).toMatchSnapshot()
-})

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

@@ -127,7 +127,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
             }
           }}
           role="tooltip_trigger"
-          style={{ display: "inline-block" }}
+          style={{ display: "inline-flex" }}
           {...ariaProps}
           {...dataProps}
           {...htmlProps}