binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2453] fix: Render on hover only when enabled (#5609)

Browse source
This commit is contained in:
rahulramesha 2024-09-20 20:26:38 +05:30 • committed by GitHub
parent 66cfc7344e
commit 604ddad3fa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 38 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/ui/src/tooltip/tooltip.tsx
View file

@ -43,7 +43,7 @@ export const Tooltip: React.FC<ITooltipProps> = ({
openDelay = 200,
closeDelay,
isMobile = false,
renderByDefault = true,
renderByDefault = true, //FIXME: tooltip should always render on hover and not by default, this is a temporary fix
}) => {
const toolTipRef = useRef<HTMLDivElement | null>(null);

26
web/core/components/dropdowns/buttons.tsx
View file

@ -16,6 +16,7 @@ export type DropdownButtonProps = {
tooltipHeading: string;
showTooltip: boolean;
variant: TButtonVariants;
renderToolTipByDefault?: boolean;
};
type ButtonProps = {
@ -25,10 +26,20 @@ type ButtonProps = {
tooltipContent: string | React.ReactNode;
tooltipHeading: string;
showTooltip: boolean;
renderToolTipByDefault?: boolean;
};
export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip, variant } = props;
const {
children,
className,
isActive,
tooltipContent,
renderToolTipByDefault = true,
tooltipHeading,
showTooltip,
variant,
} = props;
const ButtonToRender: React.FC<ButtonProps> = BORDER_BUTTON_VARIANTS.includes(variant)
? BorderButton
: BACKGROUND_BUTTON_VARIANTS.includes(variant)
@ -42,6 +53,7 @@ export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
tooltipContent={tooltipContent}
tooltipHeading={tooltipHeading}
showTooltip={showTooltip}
renderToolTipByDefault={renderToolTipByDefault}
>
{children}
</ButtonToRender>
@ -49,7 +61,7 @@ export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
};
const BorderButton: React.FC<ButtonProps> = (props) => {
const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
const { children, className, isActive, tooltipContent, renderToolTipByDefault, tooltipHeading, showTooltip } = props;
const { isMobile } = usePlatformOS();
return (
@ -58,7 +70,7 @@ const BorderButton: React.FC<ButtonProps> = (props) => {
tooltipContent={tooltipContent}
disabled={!showTooltip}
isMobile={isMobile}
renderByDefault={false}
renderByDefault={renderToolTipByDefault}
>
<div
className={cn(
@ -74,7 +86,7 @@ const BorderButton: React.FC<ButtonProps> = (props) => {
};
const BackgroundButton: React.FC<ButtonProps> = (props) => {
const { children, className, tooltipContent, tooltipHeading, showTooltip } = props;
const { children, className, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
const { isMobile } = usePlatformOS();
return (
<Tooltip
@ -82,7 +94,7 @@ const BackgroundButton: React.FC<ButtonProps> = (props) => {
tooltipContent={tooltipContent}
disabled={!showTooltip}
isMobile={isMobile}
renderByDefault={false}
renderByDefault={renderToolTipByDefault}
>
<div
className={cn(
@ -97,7 +109,7 @@ const BackgroundButton: React.FC<ButtonProps> = (props) => {
};
const TransparentButton: React.FC<ButtonProps> = (props) => {
const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
const { children, className, isActive, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
const { isMobile } = usePlatformOS();
return (
<Tooltip
@ -105,7 +117,7 @@ const TransparentButton: React.FC<ButtonProps> = (props) => {
tooltipContent={tooltipContent}
disabled={!showTooltip}
isMobile={isMobile}
renderByDefault={false}
renderByDefault={renderToolTipByDefault}
>
<div
className={cn(

1
web/core/components/dropdowns/cycle/index.tsx
View file

@ -110,6 +110,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
tooltipContent={selectedName ?? placeholder}
showTooltip={showTooltip}
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (

1
web/core/components/dropdowns/date-range.tsx
View file

@ -161,6 +161,7 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
}
showTooltip={showTooltip}
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
<span
className={cn("h-full flex items-center justify-center gap-1 rounded-sm flex-grow", buttonFromDateClassName)}

1
web/core/components/dropdowns/date.tsx
View file

@ -126,6 +126,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
tooltipContent={value ? renderFormattedDate(value, formatToken) : "None"}
showTooltip={showTooltip}
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{!hideIcon && icon}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (

1
web/core/components/dropdowns/estimate.tsx
View file

@ -180,6 +180,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
tooltipContent={selectedEstimate ? selectedEstimate?.value : placeholder}
showTooltip={showTooltip}
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
{(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (

3
web/core/components/dropdowns/member/index.tsx
View file

@ -22,7 +22,7 @@ type Props = {
icon?: LucideIcon;
onClose?: () => void;
renderByDefault?: boolean;
optionsClassName? : string;
optionsClassName?: string;
} & MemberDropdownProps;
export const MemberDropdown: React.FC<Props> = observer((props) => {
@ -134,6 +134,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
tooltipContent={tooltipContent ?? `${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
showTooltip={showTooltip}
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (

1
web/core/components/dropdowns/module/index.tsx
View file

@ -267,6 +267,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
}
showTooltip={showTooltip}
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
<ButtonContent
disabled={disabled}

11
web/core/components/dropdowns/priority.tsx
View file

@ -43,6 +43,7 @@ type ButtonProps = {
placeholder: string;
priority: TIssuePriorities | undefined;
showTooltip: boolean;
renderToolTipByDefault?: boolean;
};
const BorderButton = (props: ButtonProps) => {
@ -56,6 +57,7 @@ const BorderButton = (props: ButtonProps) => {
placeholder,
priority,
showTooltip,
renderToolTipByDefault = true,
} = props;
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
@ -76,7 +78,7 @@ const BorderButton = (props: ButtonProps) => {
tooltipContent={priorityDetails?.title ?? "None"}
disabled={!showTooltip}
isMobile={isMobile}
renderByDefault={false}
renderByDefault={renderToolTipByDefault}
>
<div
className={cn(
@ -137,6 +139,7 @@ const BackgroundButton = (props: ButtonProps) => {
placeholder,
priority,
showTooltip,
renderToolTipByDefault = true,
} = props;
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
@ -157,7 +160,7 @@ const BackgroundButton = (props: ButtonProps) => {
tooltipContent={priorityDetails?.title ?? "None"}
disabled={!showTooltip}
isMobile={isMobile}
renderByDefault={false}
renderByDefault={renderToolTipByDefault}
>
<div
className={cn(
@ -219,6 +222,7 @@ const TransparentButton = (props: ButtonProps) => {
placeholder,
priority,
showTooltip,
renderToolTipByDefault = true,
} = props;
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
@ -239,7 +243,7 @@ const TransparentButton = (props: ButtonProps) => {
tooltipContent={priorityDetails?.title ?? "None"}
disabled={!showTooltip}
isMobile={isMobile}
renderByDefault={false}
renderByDefault={renderToolTipByDefault}
>
<div
className={cn(
@ -410,6 +414,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
placeholder={placeholder}
showTooltip={showTooltip}
hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
renderToolTipByDefault={renderByDefault}
/>
</button>
)}

1
web/core/components/dropdowns/project.tsx
View file

@ -150,6 +150,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
tooltipContent={selectedProject?.name ?? placeholder}
showTooltip={showTooltip}
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{!hideIcon && selectedProject && (
<span className="grid place-items-center flex-shrink-0 h-4 w-4">

1
web/core/components/dropdowns/state.tsx
View file

@ -161,6 +161,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
tooltipContent={selectedState?.name ?? "State"}
showTooltip={showTooltip}
variant={buttonVariant}
renderToolTipByDefault={renderByDefault}
>
{stateLoader ? (
<Spinner className="h-3.5 w-3.5" />

2
web/core/components/issues/issue-layouts/properties/labels.tsx
View file

@ -165,7 +165,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
tooltipHeading="Labels"
tooltipContent={label?.name ?? ""}
isMobile={isMobile}
renderByDefault={false}
renderByDefault={renderByDefault}
>
<div
key={label?.id}