@khanacademy/wonder-blocks-tooltip 1.3.21 → 1.3.23

package/src/components/tooltip-tail.md

@@ -1,143 +0,0 @@
-The `TooltipTail` renders the tail, including appropriate padding from the anchor location and corners of the tooltip bubble (so as space out the bubble corners).
-
-Each example is shown next to a bar that indicates the padding either side of the tail and the tail width itself. The bar also indicates how far away from the anchor element the tail will render.
-
-### Placement top
-
-```jsx
-import {StyleSheet} from "aphrodite";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Spring} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-
-const styles = StyleSheet.create({
-    guideContainer: {
-        flexDirection: "row",
-        height: Spacing.xxxSmall_4,
-    },
-    padding: {
-        backgroundColor: "bisque",
-        width: Spacing.xSmall_8,
-    },
-    tail: {
-        backgroundColor: "green",
-        width: Spacing.large_24,
-    },
-});
-
-<View>
-    <TooltipTail placement="top" />
-    <View style={styles.guideContainer}>
-        <View key="padleft" style={styles.padding} />
-        <View key="tail" style={styles.tail} />
-        <View key="padright" style={styles.padding} />
-        <Spring key="spring" />
-    </View>
-</View>
-```
-
-### Placement right
-
-```jsx
-import {StyleSheet} from "aphrodite";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Spring} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-
-const styles = StyleSheet.create({
-    exampleContainer: {
-        flexDirection: "row",
-    },
-    guideContainer: {
-        width: Spacing.xxxSmall_4,
-    },
-    padding: {
-        backgroundColor: "bisque",
-        height: Spacing.xSmall_8,
-    },
-    tail: {
-        backgroundColor: "green",
-        height: Spacing.large_24,
-    },
-});
-
-<View style={styles.exampleContainer}>
-    <View style={styles.guideContainer}>
-        <View key="padleft" style={styles.padding} />
-        <View key="tail" style={styles.tail} />
-        <View key="padright" style={styles.padding} />
-        <Spring key="spring" />
-    </View>
-    <TooltipTail placement="right" />
-</View>
-```
-
-### Placement bottom
-
-```jsx
-import {StyleSheet} from "aphrodite";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Spring} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-
-const styles = StyleSheet.create({
-    guideContainer: {
-        flexDirection: "row",
-        height: Spacing.xxxSmall_4,
-    },
-    padding: {
-        backgroundColor: "bisque",
-        width: Spacing.xSmall_8,
-    },
-    tail: {
-        backgroundColor: "green",
-        width: Spacing.large_24,
-    },
-});
-
-<View>
-    <View style={styles.guideContainer}>
-        <View key="padleft" style={styles.padding} />
-        <View key="tail" style={styles.tail} />
-        <View key="padright" style={styles.padding} />
-        <Spring key="spring" />
-    </View>
-    <TooltipTail placement="bottom" />
-</View>
-```
-
-### Placement left
-
-```jsx
-import {StyleSheet} from "aphrodite";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Spring} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-
-const styles = StyleSheet.create({
-    exampleContainer: {
-        flexDirection: "row",
-    },
-    guideContainer: {
-        width: Spacing.xxxSmall_4,
-    },
-    padding: {
-        backgroundColor: "bisque",
-        height: Spacing.xSmall_8,
-    },
-    tail: {
-        backgroundColor: "green",
-        height: Spacing.large_24,
-    },
-});
-
-<View style={styles.exampleContainer}>
-    <TooltipTail placement="left" />
-    <View style={styles.guideContainer}>
-        <View key="padleft" style={styles.padding} />
-        <View key="tail" style={styles.tail} />
-        <View key="padright" style={styles.padding} />
-        <Spring key="spring" />
-    </View>
-</View>
-```

package/src/components/tooltip.md

@@ -1,194 +0,0 @@
-### Text anchor & text tooltip & placement right
-
-```js
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-
-<Tooltip content="This is a text tooltip on the right" placement="right">
-    Some text
-</Tooltip>
-```
-
-### Complex anchor & title tooltip & placement default (top)
-
-In this example, we're no longer forcing the anchor root to be focusable, since the text input can take focus. However, that needs a custom accessibility implementation too (for that, we should use `UniqueIDProvider`, but we'll cheat here and give our own identifier).
-
-```js
-import {View} from "@khanacademy/wonder-blocks-core";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-
-<Tooltip
-    id="my-a11y-tooltip"
-    forceAnchorFocusivity={false}
-    title="This tooltip has a title"
-    content="I'm at the top!"
->
-    <View>
-        Some text
-        <input aria-describedby="my-a11y-tooltip" />
-    </View>
-</Tooltip>
-```
-
-### Substring anchor in scrollable parent & placement bottom
-In this example, we have the anchor in a scrollable parent. Notice how, when the anchor is focused but scrolled out of bounds, the tooltip disappears.
-
-```js
-import {StyleSheet} from "aphrodite";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Body} from "@khanacademy/wonder-blocks-typography";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-
-const styles = StyleSheet.create({
-    scrollbox: {
-        height: 100,
-        overflow: "auto",
-        border: "1px solid black",
-        margin: 10,
-    },
-    hostbox: {
-        minHeight: "200vh",
-    },
-});
-
-<View>
-    <View style={styles.scrollbox}>
-        <View style={styles.hostbox}>
-            <Body>
-                This is a big long piece of text with a
-                <Tooltip content="This tooltip will disappear when scrolled out of bounds" placement="bottom">
-                    [tooltip]
-                </Tooltip>
-                <span> </span>in the middle.
-            </Body>
-        </View>
-    </View>
-</View>
-```
-
-### Tooltip in a modal & placement left
-This checks that the tooltip works how we want inside a modal. Click the button to take a look.
-
-```js
-import {StyleSheet} from "aphrodite";
-
-import {View, Text} from "@khanacademy/wonder-blocks-core";
-import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
-import Button from "@khanacademy/wonder-blocks-button";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-
-const styles = StyleSheet.create({
-    scrollbox: {
-        height: 100,
-        overflow: "auto",
-        border: "1px solid black",
-        margin: 10,
-    },
-    hostbox: {
-        minHeight: "200vh",
-    },
-    modalbox: {
-        height: "200vh",
-    },
-});
-
-const scrollyContent = (
-     <View style={styles.scrollbox}>
-        <View style={styles.hostbox}>
-            <Tooltip content="I'm on the left!" placement="left">
-                tooltip
-            </Tooltip>
-        </View>
-     </View>
-);
-
-const modalContent = (
-    <View style={styles.modalbox}>
-        {scrollyContent}
-    </View>
-);
-
-const modal = (
-    <OnePaneDialog
-        title="My modal"
-        footer="Still my modal"
-        content={modalContent} />
-);
-
-<ModalLauncher modal={modal}>
-    {({openModal}) => <Button onClick={openModal}>Click here!</Button>}
-</ModalLauncher>
-```
-
-### Tooltips side-by-side
-
-```js
-import {StyleSheet} from "aphrodite";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-
-const styles = StyleSheet.create({
-    "block": {
-        border: "solid 1px steelblue",
-        width: 32,
-        height: 32,
-        alignItems: "center",
-        justifyContent: "center",
-    }
-});
-
-<View>
-    <LabelSmall>Here, we can see that the first tooltip shown has an initial delay before it appears, as does the last tooltip shown, yet when moving between tooltipped items, the transition from one to another is instantaneous.</LabelSmall>
-
-    <View style={{flexDirection: "row"}}>
-        <Tooltip content="Tooltip A" placement="bottom">
-            <View style={styles.block}>A</View>
-        </Tooltip>
-        <Tooltip content="Tooltip B" placement="bottom">
-            <View style={styles.block}>B</View>
-        </Tooltip>
-        <Tooltip content="Tooltip C" placement="bottom">
-            <View style={styles.block}>C</View>
-        </Tooltip>
-        <Tooltip content="Tooltip D" placement="bottom">
-            <View style={styles.block}>D</View>
-        </Tooltip>
-    </View>
-</View>
-```
-
-### Tooltips on buttons
-
-```js
-import {StyleSheet} from "aphrodite";
-
-import Button from "@khanacademy/wonder-blocks-button";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import {icons} from "@khanacademy/wonder-blocks-icon";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-
-const styles = {
-    container: {
-        flexDirection: "row",
-        alignItems: "center",
-    },
-};
-
-<View style={styles.container}>
-    <Tooltip content="I'm a little tooltip">
-        <Button>Click me!</Button>
-    </Tooltip>
-    <Strut size={16} />
-    <Tooltip content="Short and stout">
-        <IconButton
-            icon={icons.search}
-            aria-label="search"
-            onClick={(e) => console.log("hello")}
-        />
-    </Tooltip>
-</View>
-```

package/src/components/tooltip.stories.js

@@ -1,111 +0,0 @@
-// @flow
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import {View} from "@khanacademy/wonder-blocks-core";
-import Button from "@khanacademy/wonder-blocks-button";
-import {TextField} from "@khanacademy/wonder-blocks-form";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-
-import type {Placement} from "@khanacademy/wonder-blocks-tooltip";
-import type {StoryComponentType} from "@storybook/react";
-
-export default {
-    title: "Floating/Tooltip",
-    parameters: {
-        // TODO(WB-1170): Reassess this after investigating more about Chromatic
-        // flakyness.
-        chromatic: {
-            disableSnapshot: true,
-        },
-    },
-};
-
-const BaseTooltipExample = ({placement}: {|placement: Placement|}) => {
-    const inputRef = React.useRef(null);
-    React.useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, []);
-
-    return (
-        <View style={styles.centered}>
-            <View>
-                <Tooltip
-                    content={`This is a text tooltip on the ${placement}`}
-                    placement={placement}
-                >
-                    <TextField
-                        id="tf-1"
-                        type="text"
-                        value=""
-                        placeholder="Text"
-                        onChange={() => {}}
-                        ref={inputRef}
-                    />
-                </Tooltip>
-            </View>
-        </View>
-    );
-};
-
-export const TooltipOnButtons: StoryComponentType = () => {
-    return (
-        <View style={styles.centered}>
-            <View>
-                <Tooltip content={"This is a tooltip on a button."}>
-                    <Button disabled={false}>Example 1</Button>
-                </Tooltip>
-                <Strut size={Spacing.medium_16} />
-                <Tooltip
-                    content="This is a tooltip on a disabled button."
-                    placement="bottom"
-                >
-                    <Button disabled={true}>Example 2</Button>
-                </Tooltip>
-            </View>
-        </View>
-    );
-};
-
-TooltipOnButtons.parameters = {
-    chromatic: {
-        disableSnapshot: true,
-    },
-};
-
-export const TooltipRight: StoryComponentType = () => (
-    <BaseTooltipExample placement="right" />
-);
-
-export const TooltipLeft: StoryComponentType = () => (
-    <BaseTooltipExample placement="left" />
-);
-
-export const TooltipTop: StoryComponentType = () => (
-    <BaseTooltipExample placement="top" />
-);
-
-export const TooltipBottom: StoryComponentType = () => (
-    <BaseTooltipExample placement="bottom" />
-);
-
-const styles = StyleSheet.create({
-    row: {
-        flexDirection: "row",
-    },
-    fullBleed: {
-        width: "100%",
-    },
-    wrapper: {
-        height: "800px",
-        width: "1200px",
-    },
-    centered: {
-        alignItems: "center",
-        justifyContent: "center",
-        height: `calc(100vh - 16px)`,
-    },
-});