Skip to content

refactor(site): make HelpTooltip easier to reuse and compose #11242

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

Merged
merged 12 commits into from
Dec 19, 2023
Merged

refactor(site): make HelpTooltip easier to reuse and compose #11242

Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ce7394c
Refactor help tooltip
BrunoQuaresma Dec 15, 2023
94390a6
Fix size type
BrunoQuaresma Dec 18, 2023
77fec0e
Remove duplicated math round
BrunoQuaresma Dec 18, 2023
0d4e728
Fix agent outdated tooltip role
BrunoQuaresma Dec 18, 2023
11d56b1
Fix diff use cases
BrunoQuaresma Dec 18, 2023
06fc2ed
Fix a few use cases
BrunoQuaresma Dec 18, 2023
59fd96a
Merge branch 'bq/refactor-help-tooltip' of https://github.com/coder/c…
BrunoQuaresma Dec 18, 2023
682dd02
Merge branch 'main' of https://github.com/coder/coder into bq/refacto…
BrunoQuaresma Dec 19, 2023
89ec3df
Fix colors
BrunoQuaresma Dec 19, 2023
9ff6ad0
Make gylphi more accessible
BrunoQuaresma Dec 19, 2023
30432e6
Fix tooltip on template settings
BrunoQuaresma Dec 19, 2023
3f20de8
Fix workspace outdated tooltip spacing
BrunoQuaresma Dec 19, 2023
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
32 changes: 13 additions & 19 deletions site/src/components/HelpTooltip/HelpTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export const HelpTooltipContent = (

type HelpTooltipTriggerProps = HTMLAttributes<HTMLButtonElement> & {
size?: Size;
hoverEffect?: boolean;
};

export const HelpTooltipTrigger = forwardRef<
Expand All @@ -61,9 +62,17 @@ export const HelpTooltipTrigger = forwardRef<
const {
size = "medium",
children = <HelpTooltipIcon />,
hoverEffect = true,
...buttonProps
} = props;

const hoverEffectStyles = css({
opacity: 0.5,
"&:hover": {
opacity: 0.75,
},
});

return (
<PopoverTrigger>
<button
Expand All @@ -75,24 +84,19 @@ export const HelpTooltipTrigger = forwardRef<
display: flex;
align-items: center;
justify-content: center;
width: ${theme.spacing(getButtonSpacingFromSize(size))};
height: ${theme.spacing(getButtonSpacingFromSize(size))};
padding: 0;
padding: 4px 0;
border: 0;
background: transparent;
color: ${theme.palette.text.primary};
opacity: 0.5;
cursor: pointer;

&:hover {
opacity: 0.75;
}
color: inherit;

& svg {
color: ${theme.palette.text.primary};
width: ${getIconSpacingFromSize(size)}px;
height: ${getIconSpacingFromSize(size)}px;
}
`,
hoverEffect ? hoverEffectStyles : null,
]}
>
{children}
Expand Down Expand Up @@ -174,16 +178,6 @@ export const HelpTooltipLinksGroup: FC<PropsWithChildren> = ({ children }) => {
);
};

const getButtonSpacingFromSize = (size?: Size): number => {
switch (size) {
case "small":
return 2.5;
case "medium":
default:
return 3;
}
};

const getIconSpacingFromSize = (size?: Size): number => {
switch (size) {
case "small":
Expand Down