From efc6db790a05a2ab6ecd4007974772f2c8a1b479 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Wed, 29 Jan 2025 15:56:18 -0500 Subject: [PATCH 1/4] fix: ToolTip single word wrap --- .../src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx b/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx index 29052a88d1..2c3250af56 100644 --- a/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx @@ -49,7 +49,7 @@ export const Floating: Story = { render: () => ( From 967895ec2699154dfb1ccbb681735ee6a4e637b3 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Wed, 29 Jan 2025 16:13:20 -0500 Subject: [PATCH 2/4] fixed it --- packages/gamut/src/Tip/shared/elements.tsx | 1 + .../src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx | 2 +- .../src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/gamut/src/Tip/shared/elements.tsx b/packages/gamut/src/Tip/shared/elements.tsx index 64fc2cb788..2d66b2ede9 100644 --- a/packages/gamut/src/Tip/shared/elements.tsx +++ b/packages/gamut/src/Tip/shared/elements.tsx @@ -14,6 +14,7 @@ import { const tipWrapperStyles = { position: 'relative', display: 'inline-flex', + overflowWrap: 'break-word', } as const; export const ToolTipWrapper = styled.div( diff --git a/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx b/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx index c0a3255989..62cfc4a1d5 100644 --- a/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx @@ -13,7 +13,7 @@ const meta: Meta = { component: InfoTip, args: { alignment: 'top-left', - info: `I am additional information about a nearby element or content.`, + info: `I just saw a really scary ghost! Ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh ah ahh!!`, }, }; diff --git a/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx b/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx index 2c3250af56..90a9dd5e79 100644 --- a/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx @@ -30,7 +30,7 @@ export const WithIconButton: Story = { render: () => ( From 20f036e30e0bfe5d166628c387c5dbcfe8a2b59d Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Thu, 30 Jan 2025 14:15:31 -0500 Subject: [PATCH 3/4] fix floating tip --- packages/gamut/src/Tip/shared/FloatingTip.tsx | 19 ++++++++++------- packages/gamut/src/Tip/shared/elements.tsx | 21 +++++++++++++++++-- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/packages/gamut/src/Tip/shared/FloatingTip.tsx b/packages/gamut/src/Tip/shared/FloatingTip.tsx index 76facc8d71..4f3dbfad87 100644 --- a/packages/gamut/src/Tip/shared/FloatingTip.tsx +++ b/packages/gamut/src/Tip/shared/FloatingTip.tsx @@ -3,10 +3,13 @@ import { useLayoutEffect, useRef, useState } from 'react'; import * as React from 'react'; import { useMeasure } from 'react-use'; -import { Box, FlexBox } from '../../Box'; +import { Box } from '../../Box'; import { PreviewTipContents } from '../PreviewTip/elements'; -import { FloatingTipBody, TargetContainer } from './elements'; -import { narrowWidth } from './styles'; +import { + FloatingTipBody, + FloatingTipTextWrapper, + TargetContainer, +} from './elements'; import { TipWrapperProps } from './types'; import { getAlignmentWidths, getPopoverAlignment, runWithDelay } from './utils'; @@ -134,14 +137,14 @@ export const FloatingTip: React.FC = ({ variant="secondary" widthRestricted={false} > - {contents} - + ); diff --git a/packages/gamut/src/Tip/shared/elements.tsx b/packages/gamut/src/Tip/shared/elements.tsx index 2d66b2ede9..b3c40aa7ec 100644 --- a/packages/gamut/src/Tip/shared/elements.tsx +++ b/packages/gamut/src/Tip/shared/elements.tsx @@ -1,12 +1,14 @@ -import { css, timing } from '@codecademy/gamut-styles'; +import { css, states, timing } from '@codecademy/gamut-styles'; import { StyleProps } from '@codecademy/variance'; import styled from '@emotion/styled'; -import { Box } from '../../Box'; +import { Box, FlexBox } from '../../Box'; import { Selectors } from '../../ButtonBase/ButtonBase'; import { Popover } from '../../Popover'; import { + centerWidths, inlineToolTipBodyAlignments, + narrowWidth, toolTipBodyCss, toolTipWidthRestrictions, } from './styles'; @@ -17,6 +19,21 @@ const tipWrapperStyles = { overflowWrap: 'break-word', } as const; +const floatingTipTextStates = states({ + isHoverType: { alignItems: 'flexStart' }, + narrow: { width: narrowWidth }, + centered: { + ...centerWidths, + }, +}); + +export const FloatingTipTextWrapper = styled(FlexBox)< + StyleProps +>( + css({ flexDirection: 'column', overflowWrap: 'break-word' }), + floatingTipTextStates +); + export const ToolTipWrapper = styled.div( css({ '&:hover > div, &:focus-within > div': { From fa6d0e294041403fe8c7bc5a861ec85b39512659 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Thu, 30 Jan 2025 14:47:22 -0500 Subject: [PATCH 4/4] revert test code --- .../src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx | 2 +- .../src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx b/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx index 62cfc4a1d5..c0a3255989 100644 --- a/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx @@ -13,7 +13,7 @@ const meta: Meta = { component: InfoTip, args: { alignment: 'top-left', - info: `I just saw a really scary ghost! Ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh ah ahh!!`, + info: `I am additional information about a nearby element or content.`, }, }; diff --git a/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx b/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx index 90a9dd5e79..29052a88d1 100644 --- a/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx @@ -30,7 +30,7 @@ export const WithIconButton: Story = { render: () => ( @@ -49,7 +49,7 @@ export const Floating: Story = { render: () => (