feat(docs): add usage example with Tooltip for the actionable elements

CHANGELOG.md

@@ -37,6 +37,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix code in nesting themes section of theming examples @lucivpav ([#1616](https://github.com/stardust-ui/react/pull/1616))
 - Make prototypes conditionally public and move them below Behaviors @lucivpav ([#1627](https://github.com/stardust-ui/react/pull/1627))
 - Add best practices and form usage example for `Slider` component @Bugaa92 ([#1641](https://github.com/stardust-ui/react/pull/1641))
+- Add examples with `Tooltip` for the actionable components @mnajdova ([#1636](https://github.com/stardust-ui/react/pull/1636))
 
 <!--------------------------------[ v0.34.1 ]------------------------------- -->
 ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11)

docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.steps.ts

@@ -0,0 +1,11 @@
+import { Button } from '@stardust-ui/react'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: [
+    builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip'),
+    builder => builder.hover('body'), // we need the mouse to be moved out of the button for the next test
+  ],
+}
+
+export default config

docs/src/examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { Button, Tooltip } from '@stardust-ui/react'
+
+const ButtonExampleWithTooltip = () => (
+  <Tooltip
+    trigger={<Button content="Button with tooltip" />}
+    content="This is an actionable element."
+  />
+)
+
+export default ButtonExampleWithTooltip

docs/src/examples/components/Button/Usage/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { Link } from 'react-router-dom'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
@@ -9,6 +10,16 @@ const Usage = () => (
       description='A button used in cards is a "tinted" version of a default button.'
       examplePath="components/Button/Usage/ButtonUsageExample"
     />
+    <ComponentExample
+      title="With tooltip"
+      description={
+        <>
+          {'The button, as actionable element, should be rendered with '}
+          <Link to="/components/tooltip">tooltip</Link>
+        </>
+      }
+      examplePath="components/Button/Usage/ButtonExampleWithTooltip"
+    />
   </ExampleSection>
 )
 

docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts

@@ -0,0 +1,21 @@
+import { Menu } from '@stardust-ui/react'
+
+const selectors = {
+  menu: `.${Menu.className}`,
+  item: (itemIndex: number) => `.${Menu.className} li:nth-child(${itemIndex}) a`,
+}
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: [
+    (builder, keys) =>
+      builder
+        .hover(selectors.item(1))
+        .snapshot('Hovers 1st item (show tooltip)')
+        .click(selectors.item(1))
+        .keys(selectors.item(1), keys.rightArrow)
+        .snapshot('Navigates to next item (shows tooltip)'),
+  ],
+}
+
+export default config

docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { Menu, Tooltip } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials', tooltip: 'Click for opening Editorials' },
+  { key: 'review', content: 'Reviews', tooltip: 'Click for opening Reviews' },
+  { key: 'events', content: 'Upcoming Events', tooltip: 'Click for opening Upcoming Events' },
+]
+
+const MenuExampleWithTooltip = () => (
+  <Menu
+    defaultActiveIndex={0}
+    items={items.map(item => render =>
+      render(
+        /* what to render */
+        item,
+
+        /* how to render */
+        (MenuItem, props) => {
+          const { tooltip = '', ...rest } = props || {}
+          return (
+            <Tooltip content={tooltip}>
+              <MenuItem {...rest} />
+            </Tooltip>
+          )
+        },
+      ),
+    )}
+  />
+)
+
+export default MenuExampleWithTooltip

docs/src/examples/components/Menu/Usages/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { Link } from 'react-router-dom'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
@@ -24,6 +25,16 @@ const Usages = () => (
       description="When Submenu in MenuItem is controlled, then its 'menuOpen' prop value could be changed either by parent component, or by user actions (e.g. key press) - thus it is necessary to handle 'onMenuOpenChange' event."
       examplePath="components/Menu/Usages/MenuExampleWithSubmenuControlled"
     />
+    <ComponentExample
+      title="With tooltips"
+      description={
+        <>
+          {'The items inside the Menu, as actionable elements, should be rendered with '}
+          <Link to="/components/tooltip">tooltip</Link>
+        </>
+      }
+      examplePath="components/Menu/Usages/MenuExampleWithTooltip"
+    />
   </ExampleSection>
 )
 

docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.steps.ts

@@ -0,0 +1,21 @@
+import { Toolbar } from '@stardust-ui/react'
+
+const selectors = {
+  item: (itemIndex: number) =>
+    `.${Toolbar.className} .${Toolbar.Item.className}:nth-child(${itemIndex})`,
+}
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: [
+    (builder, keys) =>
+      builder
+        .hover(selectors.item(1))
+        .snapshot('Hovers 1st item (show tooltip)')
+        .click(selectors.item(1))
+        .keys(selectors.item(1), keys.rightArrow)
+        .snapshot('Navigates to next item (shows tooltip)'),
+  ],
+}
+
+export default config

docs/src/examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import {
+  Toolbar,
+  Tooltip,
+  ToolbarItemShorthandKinds,
+  tooltipAsLabelBehavior,
+} from '@stardust-ui/react'
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+
+const ToolbarExampleShorthand = () => {
+  const [isBold, setBold] = useBooleanKnob({ name: 'bold', initialValue: true })
+  const [isItalic, setItalic] = useBooleanKnob({ name: 'isItalic', initialValue: false })
+
+  const [moreMenuOpen, setMoreMenuOpen] = useBooleanKnob({
+    name: 'moreMenuOpen',
+    initialValue: false,
+  })
+
+  return (
+    <Toolbar
+      items={[
+        {
+          key: 'bold',
+          kind: 'toggle' as ToolbarItemShorthandKinds,
+          active: isBold,
+          tooltip: 'Bold',
+          icon: { name: 'bold', outline: true },
+          onClick: () => setBold(!isBold),
+        },
+        {
+          key: 'italic',
+          kind: 'toggle' as ToolbarItemShorthandKinds,
+          active: isItalic,
+          tooltip: 'Italic',
+          icon: { name: 'italic', outline: true },
+          onClick: () => setItalic(!isItalic),
+        },
+        { key: 'divider1', kind: 'divider' as ToolbarItemShorthandKinds },
+        {
+          key: 'more',
+          icon: { name: 'more', outline: true },
+          active: moreMenuOpen,
+          tooltip: 'More options',
+          menu: [
+            {
+              content: 'Quote',
+              icon: 'quote',
+            },
+            {
+              content: 'Code snippet',
+              icon: 'code-snippet',
+            },
+          ],
+          menuOpen: moreMenuOpen,
+          onMenuOpenChange: (e, { menuOpen }) => setMoreMenuOpen(menuOpen),
+        },
+      ].map(item =>
+        _.isNil(item.tooltip)
+          ? item
+          : render =>
+              render(
+                item,
+                // rendering Tooltip for the Toolbar Item
+                (ToolbarItem, props) => {
+                  const { tooltip, ...rest } = props
+                  // Adding tooltipAsLabelBehavior as the ToolbarItems contains only icon
+                  return (
+                    <Tooltip
+                      trigger={<ToolbarItem {...rest} />}
+                      accessibility={tooltipAsLabelBehavior}
+                      content={tooltip}
+                    />
+                  )
+                },
+              ),
+      )}
+    />
+  )
+}
+
+export default ToolbarExampleShorthand

docs/src/examples/components/Toolbar/Usage/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Link } from 'react-router-dom'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="With tooltips"
+      description={
+        <>
+          {'The items inside the Toolbar, as actionable elements, should be rendered with '}
+          <Link to="/components/tooltip">tooltip</Link>
+        </>
+      }
+      examplePath="components/Toolbar/Usage/ToolbarExampleWithTooltip"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/Toolbar/index.tsx

@@ -2,11 +2,13 @@ import * as React from 'react'
 
 import Types from './Types'
 import Content from './Content'
+import Usage from './Usage'
 
 const ToolbarExamples = () => (
   <>
     <Types />
     <Content />
+    <Usage />
   </>
 )
 

packages/react/src/components/Tooltip/Tooltip.tsx

@@ -119,7 +119,7 @@ export default class Tooltip extends AutoControlledComponent<TooltipProps, Toolt
     align: 'center',
     mountNode: isBrowser() ? document.body : null,
     position: 'above',
-    mouseLeaveDelay: 500,
+    mouseLeaveDelay: 10,
     pointing: true,
     accessibility: tooltipBehavior,
   }