feat(Tooltip): base implementation

CHANGELOG.md

@@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add 'data-is-focusable' attribute to `attachmentBehavior` @sophieH29 ([#1445](https://github.com/stardust-ui/react/pull/1445))
 - Improve accessibility for `Checkbox` @jurokapsiar ([1479](https://github.com/stardust-ui/react/pull/1479))
 - Add `unstable_pinned` prop to `Popup` and `Dropdown` components @Bugaa92 ([#1471](https://github.com/stardust-ui/react/pull/1471))
+- Add `Tooltip` component @mnajdova ([#1455](https://github.com/stardust-ui/react/pull/1455))
 
 ### Fixes
 - Fix click handling on focus for `action` slot in `Attachment` component @Bugaa92 ([#1444](https://github.com/stardust-ui/react/pull/1444))

docs/src/examples/components/Tooltip/Rtl/TooltipExample.rtl.steps.ts

@@ -0,0 +1,7 @@
+import { Button } from '@stardust-ui/react'
+
+const config: ScreenerTestsConfig = {
+  steps: [builder => builder.hover(`.${Button.className}`).snapshot('RTL: Shows tooltip')],
+}
+
+export default config

docs/src/examples/components/Tooltip/Rtl/TooltipExample.rtl.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Button, Tooltip, Text } from '@stardust-ui/react'
+
+const TooltipExampleRtl = () => (
+  <Tooltip
+    trigger={<Button content="ا يجلبه إلينا الأس" />}
+    content={{
+      content: (
+        <>
+          <Text as="div">English text!</Text>
+          <Text as="div">
+            ينا الألم. في بعض الأحيان ونظراً للالتزامات التي يفرضها علينا الواجب والعمل سنتنازل
+            غالباً ونرفض الشعور
+          </Text>
+        </>
+      ),
+    }}
+  />
+)
+
+export default TooltipExampleRtl

docs/src/examples/components/Tooltip/Rtl/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+
+const Rtl = () => (
+  <NonPublicSection title="Rtl">
+    <ComponentExample examplePath="components/Tooltip/Rtl/TooltipExample.rtl" />
+  </NonPublicSection>
+)
+
+export default Rtl

docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.shorthand.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { Button, Tooltip } from '@stardust-ui/react'
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+
+const TooltipOpenExample = () => {
+  const [open, setOpen] = useBooleanKnob({ name: 'open-c', initialValue: true })
+
+  return (
+    <Tooltip
+      open={open}
+      onOpenChange={(e, data) => setOpen(data.open)}
+      trigger={<Button icon="expand" />}
+      content="This is a controlled Tooltip"
+    />
+  )
+}
+
+export default TooltipOpenExample

docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Button, Tooltip } from '@stardust-ui/react'
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+
+const TooltipOpenExample = () => {
+  const [open, setOpen] = useBooleanKnob({ name: 'open-c', initialValue: true })
+
+  return (
+    <Tooltip
+      open={open || undefined}
+      onOpenChange={(e, data) => setOpen(data.open)}
+      content="This is a controlled Tooltip"
+    >
+      <Button icon="expand" />
+    </Tooltip>
+  )
+}
+
+export default TooltipOpenExample

docs/src/examples/components/Tooltip/States/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const States = () => (
+  <ExampleSection title="States">
+    <ComponentExample
+      title="Open"
+      description="The Tooltip's open state can be controlled. Note that if Tooltip is controlled, then its 'open' prop value could be changed either by parent component, or by user actions (e.g. key press) - thus it is necessary to handle 'onOpenChange' event."
+      examplePath="components/Tooltip/States/TooltipOpenControlledExample"
+    />
+  </ExampleSection>
+)
+
+export default States

docs/src/examples/components/Tooltip/Types/TooltipExample.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/Tooltip/Types/TooltipExample.shorthand.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { Button, Tooltip } from '@stardust-ui/react'
+
+const TooltipExample = () => (
+  <Tooltip trigger={<Button icon="expand" />} content="Hello from tooltip!" />
+)
+
+export default TooltipExample

docs/src/examples/components/Tooltip/Types/TooltipExample.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Button, Tooltip } from '@stardust-ui/react'
+
+const TooltipExample = () => (
+  <Tooltip content="Hello from tooltip!">
+    <Button icon="expand" />
+  </Tooltip>
+)
+
+export default TooltipExample

docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { Button, Tooltip } from '@stardust-ui/react'
+
+const TooltipExamplePointing = () => (
+  <Tooltip open pointing trigger={<Button icon="expand" />} content="The tooltip is pointing." />
+)
+
+export default TooltipExamplePointing

docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Button, Tooltip } from '@stardust-ui/react'
+
+const TooltipExamplePointing = () => (
+  <Tooltip open pointing content="The tooltip is pointing.">
+    <Button icon="expand" />
+  </Tooltip>
+)
+
+export default TooltipExamplePointing

docs/src/examples/components/Tooltip/Types/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default tooltip."
+      examplePath="components/Tooltip/Types/TooltipExample"
+    />
+    <ComponentExample
+      title="Pointing"
+      description="A tooltip can have a pointer."
+      examplePath="components/Tooltip/Types/TooltipExamplePointing"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand.steps.ts

@@ -0,0 +1,9 @@
+import { Button } from '@stardust-ui/react'
+
+const config: ScreenerTestsConfig = {
+  steps: [
+    builder => builder.hover(`.${Button.className}`).snapshot('Custom target: Shows tooltip'),
+  ],
+}
+
+export default config

docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { Button, Divider, Grid, Ref, Text, Tooltip } from '@stardust-ui/react'
+
+const TooltipExampleTarget = () => {
+  const [target, setTarget] = React.useState<HTMLElement>(null)
+
+  return (
+    <Grid columns="auto 1fr">
+      {/* CUSTOM DOM ELEMENT is used as target for Tooltip */}
+      <Tooltip
+        target={target}
+        trigger={<Button icon="question" circular styles={{ cursor: 'pointer' }} />}
+        content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
+        position="below"
+      />
+      <div style={{ marginLeft: 10 }}>
+        <Text>Could you guess what does this text means? :)</Text>
+        <Divider />
+        <Ref innerRef={setTarget}>
+          <Text>
+            "To the lascivious looking-glass I, that love's majesty to strut before a want love's
+            majesto, to the souls of York."
+          </Text>
+        </Ref>
+      </div>
+    </Grid>
+  )
+}
+
+export default TooltipExampleTarget

docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { Button, Divider, Grid, Ref, Text, Tooltip } from '@stardust-ui/react'
+
+const TooltipExampleTarget = () => {
+  const [target, setTarget] = React.useState<HTMLElement>(null)
+
+  return (
+    <Grid columns="auto 1fr">
+      {/* CUSTOM DOM ELEMENT is used as target for Tooltip */}
+      <Tooltip
+        target={target}
+        content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
+        position="below"
+      >
+        <Button icon="question" circular styles={{ cursor: 'pointer' }} />
+      </Tooltip>
+      <div style={{ marginLeft: 10 }}>
+        <Text>Could you guess what does this text means? :)</Text>
+        <Divider />
+        <Ref innerRef={setTarget}>
+          <Text>
+            "To the lascivious looking-glass I, that love's majesty to strut before a want love's
+            majesto, to the souls of York."
+          </Text>
+        </Ref>
+      </div>
+    </Grid>
+  )
+}
+
+export default TooltipExampleTarget

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

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Custom Target"
+      description="By default Tooltip uses trigger element as the one it is displayed for, but it is possible to provide any DOM element as tooltip's target."
+      examplePath="components/Tooltip/Usage/TooltipExampleTarget"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/Tooltip/Variations/TooltipExamplePosition.shorthand.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Button, Grid, Tooltip, Alignment, Position } from '@stardust-ui/react'
+import { useSelectKnob } from '@stardust-ui/docs-components'
+
+const TooltipExamplePosition = () => {
+  const [positionAndAlign] = useSelectKnob({
+    name: 'position-align-s',
+    initialValue: 'above-start',
+    values: positionAndAlignValues,
+  })
+
+  const [position, align] = _.split(positionAndAlign, '-') as [Position, Alignment]
+  const buttonStyles = { padding: paddings[positionAndAlign], height: '38px', minWidth: '64px' }
+
+  return (
+    <Grid columns="1" variables={{ padding: '100px 0' }} styles={{ justifyItems: 'center' }}>
+      <Tooltip
+        open
+        align={align}
+        position={position}
+        trigger={<Button icon={icons[position]} styles={buttonStyles} />}
+        content={`The tooltip is rendered ${position} the trigger, aligned to the ${align}.`}
+      />
+    </Grid>
+  )
+}
+
+export default TooltipExamplePosition
+
+const positionAndAlignValues = [
+  'above-start',
+  'above-center',
+  'above-end',
+  'below-start',
+  'below-center',
+  'below-end',
+  'before-top',
+  'before-center',
+  'before-bottom',
+  'after-top',
+  'after-center',
+  'after-bottom',
+]
+
+const icons: Record<Position, string> = {
+  above: 'arrow circle up',
+  below: 'arrow circle down',
+  before: 'arrow circle left',
+  after: 'arrow circle right',
+}
+
+const paddings: Record<string, React.CSSProperties['padding']> = {
+  'above-start': '5px 42px 18px 5px',
+  'above-center': '5px 5px 18px 5px',
+  'above-end': '5px 5px 18px 42px',
+  'below-start': '18px 42px 5px 5px',
+  'below-center': '18px 5px 5px 5px',
+  'below-end': '18px 5px 5px 42px',
+  'before-top': '5px 42px 18px 5px',
+  'before-center': '5px 42px 5px 5px',
+  'before-bottom': '18px 42px 5px 5px',
+  'after-top': '5px 5px 18px 42px',
+  'after-center': '5px 5px 5px 42px',
+  'after-bottom': '18px 5px 5px 42px',
+}