Start time grid #62
@ -27,6 +27,17 @@ const arrowPositionClasses: Record<ArrowPosition, string> = {
|
|||||||
right: "right-[38px]",
|
right: "right-[38px]",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
stne3960 marked this conversation as resolved
Outdated
|
|||||||
|
* A panel with an arrow pointing to a related element above.
|
||||||
|
*
|
||||||
|
* Despite the name, this is not a modal, it doesn't block interaction or overlay
|
||||||
|
* the page. It is used to show contextual content (like a form) tied to a specific
|
||||||
|
* trigger element while keeping surrounding context visible.
|
||||||
|
*
|
||||||
|
* - vs Modal dialog: This keeps surrounding context visible, use a modal when you
|
||||||
|
* want to block interaction.
|
||||||
|
* - vs plain div: This adds the arrow indicator and callout styling.
|
||||||
|
*/
|
||||||
export default function InlineModal({
|
export default function InlineModal({
|
||||||
|
stne3960 marked this conversation as resolved
ansv7779
commented
Everything else is a SVG icon, why not this too? Using a CSS border trick feels like a relic from the past. Everything else is a SVG icon, why not this too? Using a CSS border trick feels like a relic from the past.
|
|||||||
arrowPosition = "left",
|
arrowPosition = "left",
|
||||||
arrowOffset,
|
arrowOffset,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user
This needs some documentation what it is. Inline and modal are to me opposing concepts. What actually is it? When would I use it compared to a modal dialog and how is it different from just a
<div>?