Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui/Tooltip - basic implementation of tooltip overlay #247

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

ui/Tooltip - basic implementation of tooltip overlay #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
463a947
ui/Tooltip - basic implementation of tooltip overlay
Goondrious Nov 8, 2021
bd32ec2
Fixed most but not all type errors, all lint errors
andymatuschak Dec 14, 2021
3d23867
Tooltip - remove cursor type, some type fixes
Goondrious Jan 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 19 additions & 6 deletions packages/ui/src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import usePrevious from "./hooks/usePrevious";
import Hoverable from "./Hoverable";
import Icon from "./Icon";
import { IconName, IconPosition } from "./IconShared";
import Tooltip from "./Tooltip";

export type ButtonPendingActivationState = "hover" | "pressed" | null;

Expand Down Expand Up @@ -50,6 +51,7 @@ export type ButtonProps = ButtonContents &
numberOfLines?: number;
ellipsizeMode?: TextProps["ellipsizeMode"];
focusOnMount?: boolean;
tooltipText?: string;
};

const pressedButtonOpacity = 0.2;
Expand Down Expand Up @@ -196,7 +198,7 @@ const styles = StyleSheet.create({
});

export default React.memo(function Button(props: ButtonProps) {
const { onPendingInteractionStateDidChange, style } = props;
const { onPendingInteractionStateDidChange, style, tooltipText } = props;
const ref = React.useRef<View | null>(null);
const href = "href" in props ? props.href : null;
const onPress = "onPress" in props ? props.onPress : null;
Expand Down Expand Up @@ -280,11 +282,22 @@ export default React.memo(function Button(props: ButtonProps) {
style={[isSoloIcon && styles.soloIcon, style]}
>
{({ pressed }) => (
<ButtonInterior
{...props}
isHovered={isHovered}
isPressed={pressed}
/>
<React.Fragment>
{tooltipText && (
<Tooltip
anchorRef={ref}
show={isHovered}
placement="inset-bottom-right"
>
{tooltipText}
</Tooltip>
)}
<ButtonInterior
{...props}
isHovered={isHovered}
isPressed={pressed}
/>
</React.Fragment>
)}
</Pressable>
)}
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/components/ReviewButtonBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
dispatchPendingMarkingInteraction();
}}
hitSlop={firstButtonSlop}
tooltipText={"Shortcut: 1"}
/>
{spacer}
<Button
Expand All @@ -186,6 +187,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
dispatchPendingMarkingInteraction();
}}
hitSlop={secondButtonSlop}
tooltipText={"Shortcut: Space or 2"}
/>
</>
);
Expand All @@ -199,6 +201,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
title={"Show answer"}
key={"Show answer"}
hitSlop={secondButtonSlop}
tooltipText={"Shortcut: Space"}
/>
</>
);
Expand Down
176 changes: 176 additions & 0 deletions packages/ui/src/components/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import { select, withKnobs } from "@storybook/addon-knobs";

import React, { useRef, useState } from "react";
import { Pressable, View } from "react-native";
import Hoverable from "./Hoverable";
import Tooltip from "./Tooltip";

export default {
title: "Tooltip",
component: Tooltip,
decorators: [withKnobs],
};

export function Text() {
const [isHovered, setHovered] = useState(false);
const ref = useRef<View | null>(null);
return (
<Hoverable
onHoverIn={() => setHovered(true)}
onHoverOut={() => setHovered(false)}
>
<View
ref={ref}
style={{
borderWidth: 1,
Goondrious marked this conversation as resolved.
Show resolved Hide resolved
borderColor: "black",
width: "200px",
height: "100px",
padding: 20,
margin: 100,
}}
>
<Tooltip
show={isHovered}
placement={select(
"direction",
[
"top",
"right",
"bottom",
"left",
"overlay",
"inset-bottom-left",
"inset-bottom-right",
"inset-top-left",
"inset-top-right",
],
"top",
)}
anchorRef={ref}
>
Tooltip text
</Tooltip>
<div>Some Text That Is Important</div>
</View>
</Hoverable>
);
}

export function Children() {
const [isHovered, setHovered] = useState(false);
const ref = useRef<View | null>(null);
return (
<Hoverable
onHoverIn={() => setHovered(true)}
onHoverOut={() => setHovered(false)}
>
<View
ref={ref}
style={{
borderWidth: 1,
borderColor: "black",
width: "200px",
height: "100px",
padding: 20,
margin: 100,
}}
>
<Tooltip
show={isHovered}
placement={select(
"placement",
[
"top",
"right",
"bottom",
"left",
"overlay",
"inset-bottom-left",
"inset-bottom-right",
"inset-top-left",
"inset-top-right",
],
"top",
)}
anchorRef={ref}
>
<View
style={{
flexDirection: "row",
width: "100%",
height: "100%",
alignItems: "center",
justifyContent: "space-around",
}}
>
<View
style={{
borderWidth: 1,
borderColor: "red",
backgroundColor: "red",
}}
>
<p>L</p>
</View>
<View
style={{
borderWidth: 1,
borderColor: "blue",
backgroundColor: "blue",
}}
>
<p>R</p>
</View>
</View>
</Tooltip>
<div>Some Text That Is Important</div>
</View>
</Hoverable>
);
}

export function Button() {
const [isHovered, setHovered] = useState(false);
const ref = useRef<View | null>(null);
return (
<Hoverable
onHoverIn={() => setHovered(true)}
onHoverOut={() => setHovered(false)}
>
<Pressable
style={{
borderWidth: 1,
borderColor: "black",
width: "120px",
height: "50px",
margin: 150,
}}
ref={ref}
>
<p>A Pressable</p>
<Tooltip
show={isHovered}
placement={select(
"placement",
[
"top",
"right",
"bottom",
"left",
"overlay",
"inset-bottom-left",
"inset-bottom-right",
"inset-top-left",
"inset-top-right",
],
"top",
)}
anchorRef={ref}
>
Tooltip text
</Tooltip>
</Pressable>
</Hoverable>
);
}
Loading