-
Notifications
You must be signed in to change notification settings - Fork 10
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.
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
<Tooltip />の矢印の位置を変える #195
Conversation
ひとまずデザイナー確認 |
おーけー |
placement={state?.placement} | ||
// MEMO: The following placements use popperJS default styles | ||
style={ | ||
[ | ||
"auto", | ||
"auto-start", | ||
"auto-end", | ||
"top", | ||
"bottom", | ||
"right", | ||
"left", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
上記のpositionの時は今まで通り
const getArrowPosition = ( | ||
theme: DefaultTheme, | ||
placements: PopperJS.Placement[], | ||
currentPlacement?: PopperJS.Placement, | ||
) => | ||
currentPlacement && placements.includes(currentPlacement) | ||
? `${theme.spacing * 1.5}px` | ||
: "auto"; | ||
|
||
export const Arrow = styled.div<{ placement?: PopperJS.Placement }>` | ||
position: absolute; | ||
top: ${({ theme, placement }) => | ||
getArrowPosition(theme, ["left-start", "right-start"], placement)}; | ||
bottom: ${({ theme, placement }) => | ||
getArrowPosition(theme, ["left-end", "right-end"], placement)}; | ||
left: ${({ theme, placement }) => | ||
getArrowPosition(theme, ["top-start", "bottom-start"], placement)}; | ||
right: ${({ theme, placement }) => | ||
getArrowPosition(theme, ["top-end", "bottom-end"], placement)}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
そうでないときは独自で定義
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
ref: https://cartaholdings.slack.com/archives/CFB92AX5J/p1602829689301200?thread_ts=1602824697.289400&cid=CFB92AX5J
カンプのデザインと同じになった。