RubyGems - playbook_ui - Versions diffs - 13.11.0 → 13.11.1.pre.alpha.play900startratingasinput1530 - Mend

playbook_ui 13.11.0 → 13.11.1.pre.alpha.play900startratingasinput1530

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

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

@@ -0,0 +1,45 @@
+// @flow
+import React, { useState } from 'react'
+import {  Button, Body, Flex, FlexItem, Tooltip } from '../..'
+const TooltipShowTooltipReact = (props) => {
+  const [showTooltip, setShowTooltip] = useState(true);
+  return (
+   <Flex
+       flexDirection='column'
+       gap='md'
+       wrap
+   >
+    <FlexItem>
+      <Button
+          onClick={()=> setShowTooltip(!showTooltip)}
+          text="Toggle state"
+      />
+    </FlexItem>
+    <FlexItem>
+      <Body >
+        <p>
+          {'Tooltip is: '}
+          <code>{showTooltip ? "enabled" : "disabled"}</code>
+        </p>
+      </Body>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          placement='right'
+          showTooltip={showTooltip}
+          text='Tooltip is enabled'
+          zIndex={10}
+          {...props}
+      >
+        {'Hover me.'}
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+export default TooltipShowTooltipReact

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md ADDED Viewed

@@ -0,0 +1,3 @@
+You can build your own logic to control whether to show the tooltip using the `showTooltip` prop. Its default value is `true`.
+Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.

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

@@ -4,6 +4,7 @@ examples:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
+  - tooltip_show_tooltip: Show Tooltip
   react:
   - tooltip_default_react: Default
@@ -11,3 +12,5 @@ examples:
   - tooltip_margin: Margin
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
+  - tooltip_show_tooltip_react: Show Tooltip

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

@@ -3,3 +3,4 @@ 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'
+export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

data/app/pb_kits/playbook/pb_tooltip/index.js CHANGED Viewed

@@ -54,6 +54,8 @@ export default class PbTooltip extends PbEnhancedElement {
   }
   showTooltip(trigger) {
+    if (this.shouldShowTooltip === "false") return
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
       modifiers: [
@@ -127,4 +129,8 @@ export default class PbTooltip extends PbEnhancedElement {
   get triggerElementSelector() {
     return this.element.dataset.pbTooltipTriggerElementSelector
   }
+  get shouldShowTooltip() {
+    return this.element.dataset.pbTooltipShowTooltip
+  }
 }

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

@@ -20,7 +20,8 @@ module Playbook
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
-          pb_tooltip_tooltip_id: tooltip_id
+          pb_tooltip_tooltip_id: tooltip_id,
+          pb_tooltip_show_tooltip: true
         )
       end

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

@@ -92,5 +92,39 @@ test("has position fixed", async () => {
     cleanup();
   })
+  cleanup();
+});
+test("display tooltip with showTooltip set to true", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        showTooltip
+    />
+  );
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+    cleanup();
+  })
+  cleanup();
+});
+test("doesn't display tooltip with showTooltip set to false", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        showTooltip={false}
+    />
+  );
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+    cleanup();
+  })
   cleanup();
 });

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

@@ -104,7 +104,7 @@ import * as UserBadge from 'pb_user_badge/docs'
 import * as Walkthrough from 'pb_walkthrough/docs'
 import * as WeekdayStacked from 'pb_weekday_stacked/docs'
-WebpackerReact.setup({
+WebpackerReact.registerComponents({
   ...Avatar,
   ...AvatarActionButton,
   ...Background,