Skip to content

fix(create-task-modal): migrate checkbox tooltip icon to bp #4518

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
mergify merged 6 commits into from
Apr 28, 2026
Merged

fix(create-task-modal): migrate checkbox tooltip icon to bp #4518

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
83274e3
feat(content-sharing): Display pending collab (#4509)
reneshen0328 Apr 27, 2026
18522fc
fix(create-task-modal): migrate badge to bp
kduncanhsu Apr 27, 2026
2ed94d3
Merge branch 'master' into fix/checkbox-tooltip-wcag
kduncanhsu Apr 27, 2026
d1f3360
feat(content-sharing): Display pending collab (#4509)
reneshen0328 Apr 27, 2026
67a654f
fix(create-task-modal): fix import
kduncanhsu Apr 28, 2026
57ee946
Merge branch 'master' into fix/checkbox-tooltip-wcag
kduncanhsu Apr 28, 2026
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
1 change: 1 addition & 0 deletions flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ declare module '@box/blueprint-web-assets/icons/Fill' {
declare export var Ellipsis: React$ComponentType<any>;
declare export var PointerChevronLeft: React$ComponentType<any>;
declare export var ArrowsExpand: React$ComponentType<any>;
declare export var InfoBadge: React$ComponentType<any>;
}

declare module '@box/blueprint-web-assets/icons/Logo' {
Expand Down
2 changes: 0 additions & 2 deletions i18n/en-US.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -974,8 +974,6 @@ boxui.base.previousMonth = Previous Month
boxui.breadcrumb.breadcrumbLabel = Breadcrumb
# Button label for the "more" dropdown menu
boxui.categorySelector.label.more = More
# Icon to display more information on the checkbox
boxui.checkboxTooltip.iconInfoText = Info
# Button to add classification on an item
boxui.classification.add = Add
# Title of the card that shows the reason why the AI classification was applied when no date is available.
Expand Down
9 changes: 0 additions & 9 deletions src/components/checkbox/Checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,7 @@
line-height: 0.1; // This keeps the tooltip wrapper height consistent with the child element

> .info-tooltip {
position: relative;
display: inline-block;
flex: none;
width: 16px;
height: 16px;
margin-left: 5px;

> svg path {
fill: $primary-color;
}
}
}

Expand Down
26 changes: 9 additions & 17 deletions src/components/checkbox/CheckboxTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import * as React from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';

import { Focusable, Tooltip, TooltipProvider } from '@box/blueprint-web';
import { InfoBadge } from '@box/blueprint-web-assets/icons/Fill';
Comment thread
kduncanhsu marked this conversation as resolved.

import IconInfo from '../../icons/general/IconInfo';

const messages = defineMessages({
checkboxTooltipIconInfoText: {
defaultMessage: 'Info',
description: 'Icon to display more information on the checkbox',
id: 'boxui.checkboxTooltip.iconInfoText',
},
});
import { bdlBoxBlue } from '../../styles/variables';

export interface CheckboxTooltipProps {
tooltip: string;
Expand All @@ -22,13 +14,13 @@ const CheckboxTooltip = ({ tooltip }: CheckboxTooltipProps) => (
<TooltipProvider>
<Tooltip content={tooltip}>
<Focusable>
<div className="info-tooltip">
<IconInfo
height={16}
title={<FormattedMessage {...messages.checkboxTooltipIconInfoText} />}
width={16}
/>
</div>
<InfoBadge
aria-label={tooltip}
color={bdlBoxBlue}
className="info-tooltip"
height={16}
width={16}
/>
</Focusable>
</Tooltip>
</TooltipProvider>
Expand Down
Loading