Skip to content

[WIP][Clover GF][BpkTooltip]The max-width of BpkTooltip can be Customized #3800

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

Closed
senzg wants to merge 2 commits into from
Closed

[WIP][Clover GF][BpkTooltip]The max-width of BpkTooltip can be Customized #3800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05c8a3e
Add a non-required prop
Apr 14, 2025
c3f80e9
Add a storybook example
Apr 14, 2025
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
22 changes: 22 additions & 0 deletions examples/bpk-component-tooltip/examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,27 @@ const LinkExample = () => (
</div>
);

const LongTextExample = () => (
<div style={wrapperStyle}>
<BpkTooltip
ariaLabel="Montréal-Trudeau International Airport"
id="my-tooltip"
target={
<div>
<Heading>LongText</Heading>
</div>
}
isOpen
maxWidth='32rem'
>
This is a long text with more than one
line included, we should customize the
max width of the tooltip to make it look
good from time to time.
</BpkTooltip>
</div>
);

const VisualTestExample = () => (
<div style={wrapperStyle}>
<BpkTooltip
Expand All @@ -151,5 +172,6 @@ export {
SideExample,
NoPaddingExample,
LinkExample,
LongTextExample,
VisualTestExample,
};
2 changes: 2 additions & 0 deletions examples/bpk-component-tooltip/stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
SideExample,
NoPaddingExample,
LinkExample,
LongTextExample,
VisualTestExample,
} from './examples';

Expand All @@ -37,6 +38,7 @@ export const Dark = DarkExample;
export const OnTheSide = SideExample;
export const WithoutPadding = NoPaddingExample;
export const OnALink = LinkExample;
export const WithMaxWidth = LongTextExample

const VisualExample = VisualTestExample;
export const VisualTest = {
Expand Down
8 changes: 7 additions & 1 deletion packages/bpk-component-tooltip/src/BpkTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export type Props = {
hideOnTouchDevices?: boolean;
placement?: Placement;
isOpen?: boolean;
maxWidth?: string;
};

// This function is to ensure the arrow alignment when used on the top and bottom
Expand Down Expand Up @@ -97,6 +98,7 @@ const BpkTooltip = ({
hideOnTouchDevices = true,
id,
isOpen = false,
maxWidth,
padded = true,
placement = 'bottom',
target,
Expand Down Expand Up @@ -150,6 +152,8 @@ const BpkTooltip = ({
type === TOOLTIP_TYPES.dark && 'bpk-tooltip__arrow--dark',
);

const innerStyles = maxWidth ? { maxWidth } : undefined;

return (
<>
{targetWithAccessibilityProps}
Expand Down Expand Up @@ -183,7 +187,9 @@ const BpkTooltip = ({
strokeWidth={strokeWidth}
style={getArrowAlignment(context.placement)}
/>
<div className={innerClassNames}>{children}</div>
<div className={innerClassNames} style={innerStyles}>
{children}
</div>
</section>
</TransitionInitialMount>
</div>
Expand Down
Loading