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

Feat/tooltip redesign and check animation #60

Merged
merged 6 commits into from
Dec 18, 2024
Merged

Feat/tooltip redesign and check animation #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
559bbf0
feat(web): checkmark-animation
Harman-singh-waraich Dec 17, 2024
6e55c62
Merge branch 'main' into feat/tooltip-redesign-and-check-animation
Harman-singh-waraich Dec 17, 2024
cd16d8f
feat(web): tooltip-redesign
Harman-singh-waraich Dec 18, 2024
0480f8f
feat: use transition instead of animation for the tooltips
alcercu Dec 18, 2024
fe4127f
fix: reduce time and add timing function
alcercu Dec 18, 2024
df1f647
Merge pull request #61 from kleros/feat/change-animation-for-transition
Harman-singh-waraich Dec 18, 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
64 changes: 50 additions & 14 deletions src/lib/form/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { InputHTMLAttributes } from "react";
import styled, { css } from "styled-components";
import styled, { css, keyframes } from "styled-components";
import CheckmarkIcon from "../../assets/svgs/form/checkmark.svg";
import { borderBox, svg } from "../../styles/common-style";

Expand Down Expand Up @@ -35,42 +35,76 @@ const HiddenInput = styled.input.attrs({ type: "checkbox" })`
width: 0;
`;

const StyledCheckmark = styled(CheckmarkIcon)<
CheckboxBaseProps & { $small?: boolean }
>`
${svg}
const CheckmarkContainer = styled.div<CheckboxBaseProps & { $small?: boolean }>`
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
overflow: hidden;
${({ $small }) =>
$small
? css`
padding: 0 3px;
width: 16px;
height: 16px;
`
: css`
padding: 0 4px;
width: 24px;
height: 24px;
`}

${({ theme, checked }) =>
checked &&
css`
background: ${theme.klerosUIComponentsPrimaryBlue};
border: none;
:after {
display: block;
}
`}
`;

const bouncedIn = keyframes`
0%{
transform: translateY(100%);
}
50%{
transform: translateY(-5px);
}
100%{
transform: translateY(0);
}
`;

const StyledCheckmark = styled(CheckmarkIcon)<
CheckboxBaseProps & { $small?: boolean }
>`
${svg}

position: absolute;
top: 1px;
width: 100%;
height: 100%;

${({ theme, checked }) =>
checked
? css`
fill: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
fill: ${theme.klerosUIComponentsWhiteBackground};
background: ${theme.klerosUIComponentsPrimaryBlue};
border: none;

:after {
display: block;
}
animation: ${bouncedIn} 200ms ease-out;
`
: css`
fill: transparent;
`}

${({ $small }) =>
$small
? css`
padding: 0 3px;
`
: css`
padding: 0 4px;
`}
`;

interface CheckboxProps
Expand All @@ -89,7 +123,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
<Wrapper {...{ small, className }}>
{label}
<HiddenInput checked={checked} {...props} />
<StyledCheckmark $small={small} checked={checked} />
<CheckmarkContainer $small={small} checked={checked}>
<StyledCheckmark $small={small} checked={checked} />
</CheckmarkContainer>
</Wrapper>
);

Expand Down
126 changes: 86 additions & 40 deletions src/lib/tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,95 @@ export interface TooltipBaseProps {

const StyledText = styled.small``;

const Tip = styled.div<TooltipBaseProps>`
content: "";
position: absolute;
border-width: 8px;
border-style: solid;

::after {
content: "";
position: absolute;
border-style: solid;
border-width: 7px;
}

${({ place, theme }) => css`
${place === "top" &&
css`
top: 100%;
left: 50%;
transform: translateX(-50%);
border-color: ${theme.klerosUIComponentsStroke} transparent transparent
transparent;

::after {
left: -7px;
top: -8.5px;
border-color: ${theme.klerosUIComponentsLightBlue} transparent
transparent transparent;
}
`}
${place === "right" &&
css`
top: 50%;
right: 100%;
transform: translateY(-50%);
border-color: transparent ${theme.klerosUIComponentsStroke} transparent
transparent;

::after {
left: -5.5px;
top: -7px;
border-color: transparent ${theme.klerosUIComponentsLightBlue}
transparent transparent;
}
`}
${place === "bottom" &&
css`
left: 50%;
bottom: 100%;
transform: translateX(-50%);
border-color: transparent transparent ${theme.klerosUIComponentsStroke}
transparent;

::after {
left: -7px;
top: -5.5px;
border-color: transparent transparent
${theme.klerosUIComponentsLightBlue} transparent;
}
`}
${place === "left" &&
css`
top: 50%;
left: 100%;
transform: translateY(-50%);
border-color: transparent transparent transparent
${theme.klerosUIComponentsStroke};
::after {
left: -8.5px;
top: -7px;
border-color: transparent transparent transparent
${theme.klerosUIComponentsLightBlue};
}
`}
`}
`;

const StyledTooltip = styled.span<TooltipBaseProps>`
${borderBox}
transition: opacity 200ms ease-in, visibility 200ms ease-in;
${({ place, theme, small }) => css`
visibility: hidden;
opacity: 0%;
position: absolute;
z-index: 1;
width: max-content;
max-width: 240px;
background: ${theme.klerosUIComponentsPrimaryBlue};
border-radius: 3px;
background: ${theme.klerosUIComponentsLightBlue};
border: 1px solid ${theme.klerosUIComponentsStroke};
border-radius: 7px;
padding: 13px 16px;
display: flex;
justify-content: center;
Expand All @@ -28,67 +107,32 @@ const StyledTooltip = styled.span<TooltipBaseProps>`
${smallStyle}
font-weight: 100;
text-align: ${small ? "center" : "left"};
color: ${theme.klerosUIComponentsWhiteBackground};
}

::after {
content: "";
position: absolute;
border-width: 8px;
border-style: solid;
color: ${theme.klerosUIComponentsPrimaryText};
}

${place === "top" &&
css`
bottom: calc(100% + 16px);
left: 50%;
transform: translateX(-50%);
::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-color: ${theme.klerosUIComponentsPrimaryBlue} transparent
transparent transparent;
}
`}
${place === "right" &&
css`
top: 50%;
left: calc(100% + 16px);
transform: translateY(-50%);
::after {
top: 50%;
right: 100%;
transform: translateY(-50%);
border-color: transparent ${theme.klerosUIComponentsPrimaryBlue}
transparent transparent;
}
`}
${place === "bottom" &&
css`
top: calc(100% + 16px);
left: 50%;
transform: translateX(-50%);
::after {
left: 50%;
bottom: 100%;
transform: translateX(-50%);
border-color: transparent transparent
${theme.klerosUIComponentsPrimaryBlue} transparent;
}
`}
${place === "left" &&
css`
top: 50%;
right: calc(100% + 16px);
transform: translateY(-50%);
::after {
top: 50%;
left: 100%;
transform: translateY(-50%);
border-color: transparent transparent transparent
${theme.klerosUIComponentsPrimaryBlue};
}
`}
`}
`;
Expand All @@ -99,6 +143,7 @@ const Wrapper = styled.div`

&:hover ${StyledTooltip} {
visibility: visible;
opacity: 100%;
}
`;

Expand All @@ -116,8 +161,9 @@ const Tooltip: React.FC<TooltipProps> = ({
}) => (
<Wrapper {...props}>
{children}
<StyledTooltip {...{ small, place }}>
<StyledText>{text}</StyledText>
<StyledTooltip {...{ small, place }} className="tooltip-container">
<Tip {...{ place }} />
<StyledText className="tooltip-text">{text}</StyledText>
</StyledTooltip>
</Wrapper>
);
Expand Down
13 changes: 13 additions & 0 deletions src/styles/common-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
css,
DefaultTheme,
FlattenInterpolation,
keyframes,
ThemeProps,
} from "styled-components";

Expand Down Expand Up @@ -134,3 +135,15 @@ export const hoverWhiteBackground = css`
props.theme.klerosUIComponentsWhiteBackground};
}
`;

export const fadeIn = keyframes`
0%{
opacity: 0;
}
50%{
opacity: 0.5;
}
100%{
opacity: 1;
}
`;
Loading