Skip to content

Commit eccef2f

Browse files
LinKCodingLinKCoding
committed
Revert "Merge branch 'main' into kl-gm-1044"
This reverts commit 6c1b28b, reversing changes made to eb00db7.
1 parent 6c1b28b commit eccef2f

File tree

18 files changed

+631
-17
lines changed

18 files changed

+631
-17
lines changed

‎packages/gamut-kit/CHANGELOG.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6-
### [0.6.504](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.503...@codecademy/gamut-kit@0.6.504) (2025-05-16)
7-
8-
**Note:** Version bump only for package @codecademy/gamut-kit
9-
106
### [0.6.503](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.502...@codecademy/gamut-kit@0.6.503) (2025-05-01)
117

128
**Note:** Version bump only for package @codecademy/gamut-kit

‎packages/gamut-kit/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "@codecademy/gamut-kit",
33
"description": "Styleguide & Component library for Codecademy",
4-
"version": "0.6.504",
4+
"version": "0.6.503",
55
"author": "Codecademy Engineering <dev@codecademy.com>",
66
"dependencies": {
7-
"@codecademy/gamut": "62.0.7",
7+
"@codecademy/gamut": "62.0.6",
88
"@codecademy/gamut-icons": "9.42.2",
99
"@codecademy/gamut-illustrations": "0.54.3",
1010
"@codecademy/gamut-patterns": "0.10.9",

‎packages/gamut/CHANGELOG.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6-
### [62.0.7](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@62.0.6...@codecademy/gamut@62.0.7) (2025-05-16)
7-
8-
**Note:** Version bump only for package @codecademy/gamut
9-
106
### [62.0.6](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@62.0.5...@codecademy/gamut@62.0.6) (2025-05-01)
117

128
### Bug Fixes

‎packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ exports[`Gamut Exported Keys 1`] = `
3232
"DataList",
3333
"DataTable",
3434
"DelayedRenderWrapper",
35+
"DeprecatedToolTip",
3536
"Dialog",
3637
"Disclosure",
3738
"Drawer",

‎packages/gamut/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@codecademy/gamut",
33
"description": "Styleguide & Component library for Codecademy",
4-
"version": "62.0.7",
4+
"version": "62.0.6",
55
"author": "Codecademy Engineering <dev@codecademy.com>",
66
"dependencies": {
77
"@codecademy/gamut-icons": "9.42.2",

‎packages/gamut/src/Tip/DeprecatedToolTip/DeprecatedFloatingToolTip.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { useLayoutEffect, useRef, useState } from 'react';
2+
import * as React from 'react';
3+
4+
import { Box, FlexBox } from '../../Box';
5+
import { Popover } from '../../Popover';
6+
import { TargetContainer } from '../shared/elements';
7+
import { escapeKeyPressHandler, getPopoverAlignment } from '../shared/utils';
8+
import {
9+
deprecatedTooltipDefaultProps,
10+
DeprecatedToolTipPlacementComponentProps,
11+
} from './types';
12+
import { getDeprecatedAccessibilityProps } from './utils';
13+
14+
export const DeprecatedFloatingToolTip: React.FC<
15+
DeprecatedToolTipPlacementComponentProps
16+
> = ({
17+
alignment = deprecatedTooltipDefaultProps.alignment,
18+
children,
19+
focusable,
20+
id,
21+
target,
22+
widthMode = deprecatedTooltipDefaultProps.widthMode,
23+
}) => {
24+
const ref = useRef<HTMLDivElement>(null);
25+
const [offset, setOffset] = useState(0);
26+
const [isOpen, setIsOpen] = useState(false);
27+
const [isFocused, setIsFocused] = useState(false);
28+
29+
useLayoutEffect(() => {
30+
if (ref?.current) {
31+
setOffset(-ref.current.clientWidth / 2 + 32);
32+
}
33+
}, []);
34+
35+
const accessibilityProps = getDeprecatedAccessibilityProps({
36+
focusable,
37+
id,
38+
isOpenPopoverToolTip: isOpen,
39+
});
40+
41+
const popoverAlignments = getPopoverAlignment({ alignment });
42+
43+
const handleShowHideAction = ({
44+
type,
45+
}:
46+
| React.FocusEvent<HTMLDivElement, Element>
47+
| React.MouseEvent<HTMLDivElement, MouseEvent>) => {
48+
if (type === 'focus' && !isOpen) {
49+
setIsOpen(true);
50+
setIsFocused(true);
51+
}
52+
if (type === 'blur' && isOpen) {
53+
setIsOpen(false);
54+
setIsFocused(false);
55+
}
56+
if (type === 'mouseenter' && !isOpen) {
57+
setIsOpen(true);
58+
}
59+
if (type === 'mouseleave' && isOpen && !isFocused) {
60+
setIsOpen(false);
61+
}
62+
};
63+
64+
return (
65+
<Box
66+
position="relative"
67+
display="inline-flex"
68+
onMouseLeave={(e) => handleShowHideAction(e)}
69+
>
70+
<TargetContainer
71+
onKeyDown={(e) => escapeKeyPressHandler(e)}
72+
onFocus={(e) => {
73+
handleShowHideAction(e);
74+
}}
75+
onBlur={(e) => {
76+
handleShowHideAction(e);
77+
}}
78+
onMouseEnter={(e) => handleShowHideAction(e)}
79+
ref={ref}
80+
{...accessibilityProps}
81+
>
82+
{target}
83+
</TargetContainer>
84+
<Popover
85+
{...popoverAlignments}
86+
animation="fade"
87+
aria-live="polite"
88+
horizontalOffset={offset}
89+
isOpen={isOpen}
90+
outline
91+
role="tooltip"
92+
variant="secondary"
93+
skipFocusTrap
94+
targetRef={ref}
95+
widthRestricted={widthMode === 'standard'}
96+
>
97+
<FlexBox id={id} alignItems="flex-start" flexDirection="column">
98+
{children}
99+
</FlexBox>
100+
</Popover>
101+
</Box>
102+
);
103+
};

‎packages/gamut/src/Tip/DeprecatedToolTip/DeprecatedInlineToolTip.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import * as React from 'react';
2+
3+
import { TargetContainer, TipBody, ToolTipWrapper } from '../shared/elements';
4+
import { escapeKeyPressHandler } from '../shared/utils';
5+
import { ToolTipContainer } from '../ToolTip/elements';
6+
import {
7+
deprecatedTooltipDefaultProps,
8+
DeprecatedToolTipPlacementComponentProps,
9+
} from './types';
10+
import { getDeprecatedAccessibilityProps } from './utils';
11+
12+
export const DeprecatedInlineToolTip: React.FC<
13+
DeprecatedToolTipPlacementComponentProps
14+
> = ({
15+
alignment = deprecatedTooltipDefaultProps.alignment,
16+
children,
17+
focusable,
18+
id,
19+
target,
20+
widthMode = deprecatedTooltipDefaultProps.widthMode,
21+
}) => {
22+
const accessibilityProps = getDeprecatedAccessibilityProps({ focusable, id });
23+
24+
return (
25+
<ToolTipWrapper>
26+
<TargetContainer
27+
onKeyDown={(e) => escapeKeyPressHandler(e)}
28+
{...accessibilityProps}
29+
>
30+
{target}
31+
</TargetContainer>
32+
<ToolTipContainer
33+
alignment={alignment}
34+
aria-live="polite"
35+
as="div"
36+
id={id}
37+
role="tooltip"
38+
isToolTip
39+
>
40+
<TipBody
41+
alignment={alignment.includes('center') ? 'centered' : 'aligned'}
42+
color="currentColor"
43+
minWidth={widthMode === 'unlimited' ? 'initial' : '4rem'}
44+
>
45+
{children}
46+
</TipBody>
47+
</ToolTipContainer>
48+
</ToolTipWrapper>
49+
);
50+
};

‎packages/gamut/src/Tip/DeprecatedToolTip/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useEffect, useState } from 'react';
2+
import * as React from 'react';
3+
4+
import { DeprecatedFloatingToolTip } from './DeprecatedFloatingToolTip';
5+
import { DeprecatedInlineToolTip } from './DeprecatedInlineToolTip';
6+
import { deprecatedTooltipDefaultProps, DeprecatedToolTipProps } from './types';
7+
8+
// This iteration of ToolTip is deprecated, parts of it will be used in the upcoming InfoTip, ToolTip, and PreviewTip components
9+
10+
/**
11+
* @deprecated Use `InfoTip`or `ToolTip` instead.
12+
*/
13+
export const DeprecatedToolTip: React.FC<DeprecatedToolTipProps> = ({
14+
alignment = deprecatedTooltipDefaultProps.alignment,
15+
placement = deprecatedTooltipDefaultProps.placement,
16+
widthMode = deprecatedTooltipDefaultProps.widthMode,
17+
...rest
18+
}) => {
19+
const [loaded, setLoaded] = useState(false);
20+
21+
useEffect(() => {
22+
setLoaded(true);
23+
}, []);
24+
25+
return placement === 'floating' && loaded ? (
26+
<DeprecatedFloatingToolTip
27+
alignment={alignment}
28+
widthMode={widthMode}
29+
{...rest}
30+
/>
31+
) : (
32+
<DeprecatedInlineToolTip
33+
alignment={alignment}
34+
widthMode={widthMode}
35+
{...rest}
36+
/>
37+
);
38+
};

‎packages/gamut/src/Tip/DeprecatedToolTip/types.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { ReactNode } from 'react';
2+
3+
import {
4+
TipBaseAlignment,
5+
tipDefaultProps,
6+
TipStaticAlignment,
7+
} from '../shared/types';
8+
9+
export type DeprecatedToolTipInlineProps = {
10+
/**
11+
* How to align the tooltip relative to the target.
12+
*/
13+
alignment?: TipStaticAlignment;
14+
15+
/**
16+
* Whether Tooltip should be inline or floating (should only be used in certain overflow situations).
17+
*/
18+
placement?: 'inline';
19+
};
20+
21+
export type DeprecatedToolTipFloatingProps = {
22+
/**
23+
* How to align the tooltip relative to the target.
24+
*/
25+
alignment?: TipBaseAlignment;
26+
27+
/**
28+
* Whether Tooltip should be inline or floating (should only be used in certain overflow situations).
29+
*/
30+
placement: 'floating';
31+
};
32+
33+
export type DeprecatedToolTipContainerProps =
34+
| DeprecatedToolTipFloatingProps
35+
| DeprecatedToolTipInlineProps;
36+
37+
export type DeprecatedToolTipProps = DeprecatedToolTipContainerProps & {
38+
children?: ReactNode;
39+
40+
/**
41+
* Whether to add a tabIndex of 0 to the target container, for tooltips without focusable children.
42+
*/
43+
focusable?: boolean;
44+
45+
id: string;
46+
47+
target?: ReactNode;
48+
49+
/**
50+
* If Tooltip content should override width restrictions
51+
*/
52+
widthMode?: 'standard' | 'unlimited';
53+
};
54+
55+
export type DeprecatedToolTipPlacementComponentProps = Omit<
56+
DeprecatedToolTipProps,
57+
'placement'
58+
>;
59+
60+
export const deprecatedTooltipDefaultProps: Required<
61+
Pick<DeprecatedToolTipProps, 'alignment' | 'placement' | 'widthMode'>
62+
> = {
63+
alignment: 'top-right',
64+
widthMode: 'standard',
65+
...tipDefaultProps,
66+
};

‎packages/gamut/src/Tip/DeprecatedToolTip/utils.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { DeprecatedToolTipProps } from './types';
2+
3+
export type DeprecatedToolTipAccessibiltyProps = Pick<
4+
DeprecatedToolTipProps,
5+
'focusable' | 'id'
6+
> & {
7+
isOpenPopoverToolTip?: boolean;
8+
};
9+
10+
export const getDeprecatedAccessibilityProps = ({
11+
focusable,
12+
id,
13+
isOpenPopoverToolTip,
14+
}: DeprecatedToolTipAccessibiltyProps) => {
15+
// Since PopoverToolTips are removed from the DOM, when they are inactive they need an aria-label instead of aria-labelledby
16+
const labeling =
17+
isOpenPopoverToolTip === undefined || isOpenPopoverToolTip
18+
? { 'aria-labelledby': id }
19+
: { 'aria-describedby': id };
20+
// ToolTips sometimes contain actual <button>s, which cannot be a child of a button.
21+
// This element still needs tab focus so we must use the `tabIndex=0` hack.
22+
return {
23+
...labeling,
24+
role: focusable ? 'button' : undefined,
25+
tabIndex: focusable ? 0 : undefined,
26+
'aria-label': focusable ? 'tooltip' : undefined,
27+
};
28+
};

0 commit comments

Comments
 (0)