Skip to content

Commit b235ae7

Browse files
committed
feat: add support for shortcut key combo tooltip as prop
1 parent 965d6dc commit b235ae7

File tree

6 files changed

+103
-18
lines changed

6 files changed

+103
-18
lines changed
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { TooltipProps } from './types'
2+
3+
const ShortcutKeyComboTooltipContent = ({ text, combo }: TooltipProps['shortcutKeyCombo']) => (
4+
<div className="flexbox dc__gap-8 px-8 py-4 flex-wrap">
5+
<span className="lh-18 fs-12 fw-4 cn-0">{text}</span>
6+
<div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
7+
{combo.map((key) => (
8+
<span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
9+
{key}
10+
</span>
11+
))}
12+
</div>
13+
</div>
14+
)
15+
16+
export default ShortcutKeyComboTooltipContent

src/Common/Tooltip/Tooltip.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { useState, cloneElement } from 'react'
22
import TippyJS from '@tippyjs/react'
33
import { TooltipProps } from './types'
4+
import ShortcutKeyComboTooltipContent from './ShortcutKeyComboTooltipContent'
5+
import './styles.scss'
46

57
const Tooltip = ({
8+
shortcutKeyCombo,
69
alwaysShowTippyOnHover,
710
// NOTE: if alwaysShowTippyOnHover is being passed by user don't apply truncation logic at all
8-
showOnTruncate = alwaysShowTippyOnHover === undefined,
11+
showOnTruncate = alwaysShowTippyOnHover === undefined && shortcutKeyCombo === undefined,
912
wordBreak = true,
1013
children: child,
1114
...rest
@@ -22,14 +25,17 @@ const Tooltip = ({
2225
}
2326
}
2427

25-
return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
28+
return (!showOnTruncate || !isTextTruncated) && !alwaysShowTippyOnHover && !shortcutKeyCombo ? (
2629
cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
2730
) : (
2831
<TippyJS
2932
arrow={false}
3033
placement="top"
34+
// NOTE: setting the default maxWidth to empty string so that we can override using css
35+
maxWidth=""
3136
{...rest}
32-
className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200-imp ${rest.className}`}
37+
{...(shortcutKeyCombo ? { content: <ShortcutKeyComboTooltipContent {...shortcutKeyCombo} /> } : {})}
38+
className={`${shortcutKeyCombo ? 'shortcut-keys__tippy' : 'default-tt'} ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200 ${rest.className ?? ''}`}
3339
>
3440
{cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
3541
</TippyJS>

src/Common/Tooltip/styles.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.tippy-box.shortcut-keys__tippy {
2+
border-radius: 4px;
3+
border: 1px solid rgba(255, 255, 255, 0.20);
4+
background: var(--N900);
5+
6+
& > .tippy-content {
7+
padding: 0;
8+
}
9+
10+
& .shortcut-keys__chip {
11+
border-radius: 4px;
12+
border: 0.5px solid rgba(255, 255, 255, 0.20);
13+
background: var(--N800);
14+
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.20);
15+
padding: 0 2px;
16+
min-width: 16px;
17+
max-width: 250px;
18+
}
19+
}

src/Common/Tooltip/types.ts

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ type BaseTooltipProps =
1212
* @default false
1313
*/
1414
alwaysShowTippyOnHover?: never
15+
/**
16+
* If true, use the common styling for shortcuts
17+
* @default false
18+
*/
19+
shortcutKeyCombo?: never
1520
}
1621
| {
1722
/**
@@ -21,9 +26,34 @@ type BaseTooltipProps =
2126
showOnTruncate?: never
2227
/**
2328
* If true, wrap with tippy irrespective of other options
24-
* @default false
29+
* @default true
2530
*/
2631
alwaysShowTippyOnHover?: boolean
32+
/**
33+
* If true, use the common styling for shortcuts
34+
* @default false
35+
*/
36+
shortcutKeyCombo?: never
37+
}
38+
| {
39+
/**
40+
* If true, show tippy on truncate
41+
* @default false
42+
*/
43+
showOnTruncate?: never
44+
/**
45+
* If showOnTruncate is defined this prop doesn't work
46+
* @default false
47+
*/
48+
alwaysShowTippyOnHover?: never
49+
/**
50+
* If true, use the common styling for shortcuts
51+
* @default true
52+
*/
53+
shortcutKeyCombo?: {
54+
text: string
55+
combo: string[]
56+
}
2757
}
2858

2959
export type TooltipProps = BaseTooltipProps &

src/Shared/Components/Button/Button.component.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,14 @@ const Button = ({
154154
}
155155
}
156156

157-
return {
158-
alwaysShowTippyOnHover: showTooltip && !!tooltipProps?.content,
159-
...tooltipProps,
157+
if (!tooltipProps.shortcutKeyCombo) {
158+
return {
159+
alwaysShowTippyOnHover: showTooltip && !!tooltipProps?.content,
160+
...(tooltipProps as Omit<TooltipProps, 'shortcutKeyCombo' | 'showOnTruncate'>),
161+
}
160162
}
163+
164+
return tooltipProps
161165
}
162166

163167
return (

src/Shared/Components/CICDHistory/LogsRenderer.tsx

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
SearchBar,
3232
useUrlFilters,
3333
stopPropagation,
34+
Tooltip,
3435
} from '../../../Common'
3536
import LogStageAccordion from './LogStageAccordion'
3637
import {
@@ -441,18 +442,27 @@ export const LogsRenderer = ({
441442
initialSearchText={searchKey}
442443
size={ComponentSizeType.large}
443444
/>
444-
<button
445-
type="button"
446-
className="dc__unset-button-styles px-10 flex dc__bg-n0--opacity-0_2"
447-
onClick={handleToggleOpenAllStages}
448-
aria-label="Expand all stages"
445+
<Tooltip
446+
shortcutKeyCombo={{
447+
text: areAllStagesExpanded ? 'Collapse all stages' : 'Expand all stages',
448+
combo: ['Ctrl / ⌘', '⇧', 'F'],
449+
}}
450+
className="dc__mxw-500"
451+
placement="left"
449452
>
450-
{areAllStagesExpanded ? (
451-
<ICExpandAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
452-
) : (
453-
<ICCollapseAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
454-
)}
455-
</button>
453+
<button
454+
type="button"
455+
className="dc__unset-button-styles px-10 flex dc__bg-n0--opacity-0_2"
456+
onClick={handleToggleOpenAllStages}
457+
aria-label="Expand all stages"
458+
>
459+
{areAllStagesExpanded ? (
460+
<ICExpandAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
461+
) : (
462+
<ICCollapseAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
463+
)}
464+
</button>
465+
</Tooltip>
456466
</div>
457467
</div>
458468

0 commit comments

Comments
 (0)