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

fix: auto fallback possition and align #37

Merged
merged 2 commits into from
Apr 14, 2024
Merged

fix: auto fallback possition and align #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
653eefb
fix: auto fallback position and align
ajbura Apr 13, 2024
3557a83
style: move inline style to file
ajbura Apr 13, 2024
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
19 changes: 19 additions & 0 deletions src/components/pop-out/PopOut.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { style } from "@vanilla-extract/css";
import { config } from "../../theme";

export const PopOut = style({
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: config.zIndex.Max,
...style,
});

export const PopOutContainer = style({
display: "inline-block",
position: "fixed",
maxWidth: "100vw",
maxHeight: "100vh",
});
13 changes: 8 additions & 5 deletions src/components/pop-out/PopOut.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
import FocusTrap from "focus-trap-react";
import React, { useState } from "react";
import { ComponentMeta } from "@storybook/react";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Text } from "../text";
import { PopOut } from "./PopOut";
import { Menu, MenuItem } from "../menu";
import { Icon, Icons } from "../icon";
import { IconButton } from "../icon-button";
import { config } from "../../theme/config.css";
import { Box } from "../box";

export default {
title: "PopOut",
component: PopOut,
} as ComponentMeta<typeof PopOut>;

export const Interactive = () => {
const Template: ComponentStory<typeof PopOut> = (args) => {
const [open, setOpen] = useState(false);

return (
<div style={{ height: "100vh" }}>
<Box justifyContent="Center" alignItems="Center" style={{ height: "100vh" }}>
<PopOut
{...args}
open={open}
align="Start"
content={
<FocusTrap
focusTrapOptions={{
Expand Down Expand Up @@ -51,6 +52,8 @@ export const Interactive = () => {
</IconButton>
)}
</PopOut>
</div>
</Box>
);
};

export const Interactive = Template.bind({});
44 changes: 12 additions & 32 deletions src/components/pop-out/PopOut.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import classNames from "classnames";
import React, {
ReactNode,
RefCallback,
Expand All @@ -6,10 +7,10 @@ import React, {
useLayoutEffect,
useRef,
} from "react";
import { config } from "../../theme";
import { as } from "../as";
import { Portal } from "../portal";
import { Align, getRelativeFixedPosition, Position } from "../util";
import * as css from "./PopOut.css";

export interface PopOutProps {
open: boolean;
Expand All @@ -24,14 +25,14 @@ export const PopOut = as<"div", PopOutProps>(
(
{
as: AsPopOut = "div",
className,
open,
position = "Bottom",
align = "Center",
offset = 10,
alignOffset = 0,
content,
children,
style,
...props
},
ref
Expand All @@ -45,19 +46,18 @@ export const PopOut = as<"div", PopOutProps>(
if (!anchor) return;
if (!baseEl) return;

const css = getRelativeFixedPosition(
const pCSS = getRelativeFixedPosition(
anchor.getBoundingClientRect(),
baseEl.getBoundingClientRect(),
position,
align,
offset,
alignOffset,
baseEl.getBoundingClientRect()
alignOffset
);
baseEl.style.top = css.top;
baseEl.style.bottom = css.bottom;
baseEl.style.left = css.left;
baseEl.style.right = css.right;
baseEl.style.transform = css.transform;
baseEl.style.top = pCSS.top ?? "unset";
baseEl.style.bottom = pCSS.bottom ?? "unset";
baseEl.style.left = pCSS.left ?? "unset";
baseEl.style.right = pCSS.right ?? "unset";
}, [position, align, offset, alignOffset]);

useEffect(() => {
Expand All @@ -80,28 +80,8 @@ export const PopOut = as<"div", PopOutProps>(
{children(handleAnchorRef)}
<Portal>
{open && (
<AsPopOut
style={{
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: config.zIndex.Max,
...style,
}}
{...props}
ref={ref}
>
<div
ref={baseRef}
style={{
display: "inline-block",
position: "fixed",
maxWidth: "100vw",
maxHeight: "100vh",
}}
>
<AsPopOut className={classNames(css.PopOut, className)} {...props} ref={ref}>
<div ref={baseRef} className={css.PopOutContainer}>
{content}
</div>
</AsPopOut>
Expand Down
11 changes: 10 additions & 1 deletion src/components/tooltip/Tooltip.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComplexStyleRule, keyframes } from "@vanilla-extract/css";
import { ComplexStyleRule, keyframes, style } from "@vanilla-extract/css";
import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
import { color } from "../../theme/color.css";
import { config } from "../../theme/config.css";
Expand Down Expand Up @@ -53,3 +53,12 @@ export const Tooltip = recipe({
});

export type TooltipVariants = RecipeVariants<typeof Tooltip>;

export const TooltipProvider = style({
display: "inline-block",
position: "fixed",
maxWidth: "100vw",
maxHeight: "100vh",
zIndex: config.zIndex.Max,
pointerEvents: "none",
});
194 changes: 191 additions & 3 deletions src/components/tooltip/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,207 @@ Surface.args = {
};

export const Interactive = () => (
<Box style={{ padding: "100px" }}>
<Box wrap="Wrap" gap="400" style={{ padding: "100px" }}>
<TooltipProvider
position="Top"
align="Start"
tooltip={
<Tooltip>
<Text truncate size="T300">
Top Start
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Top"
align="Center"
tooltip={
<Tooltip>
<Text truncate size="T300">
Top Center
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Top"
align="End"
tooltip={
<Tooltip>
<Text truncate size="T300">
Top End
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Right"
align="Start"
tooltip={
<Tooltip>
<Text truncate size="T300">
Right Start
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Right"
align="Center"
tooltip={
<Tooltip>
<Text truncate size="T300">
Right Center
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Right"
align="End"
tooltip={
<Tooltip>
<Text truncate size="T300">
Right End
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Bottom"
align="Start"
tooltip={
<Tooltip>
<Text truncate size="T300">
Bottom Start
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Bottom"
align="Center"
tooltip={
<Tooltip>
<Text truncate size="T300">
Bottom Center
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Bottom"
align="End"
tooltip={
<Tooltip>
<Text truncate size="T300">
Bottom End
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Left"
align="Start"
tooltip={
<Tooltip>
<Text truncate size="T300">
Left Start
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Left"
align="Center"
tooltip={
<Tooltip>
<Text truncate size="T300">
Left Center
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Left"
align="End"
tooltip={
<Tooltip>
<Text truncate size="T300">
Tooltip is Long
Left End
</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton variant="Success" size="600" ref={ref}>
<IconButton variant="SurfaceVariant" size="600" ref={ref}>
<Icon src={Icons.Info} />
</IconButton>
)}
Expand Down
Loading
Loading