Skip to content
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

feat(compositions): add tooltip to open in new tab toolbar widget #8962

Merged
merged 3 commits into from
Jun 20, 2024
+12 −6
Merged

feat(compositions): add tooltip to open in new tab toolbar widget #8962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
74a4bfd
add tooltip to open in new tab toolbar widget in compositions page
luvkapur Jun 20, 2024
e064d54
clean up
luvkapur Jun 20, 2024
33eddff
Merge branch 'master' into preview-tooltip
luvkapur Jun 20, 2024
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
9 changes: 6 additions & 3 deletions scopes/compositions/compositions/compositions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { AlertCard } from '@teambit/design.ui.alert-card';
import { Link as BaseLink, useNavigate, useLocation } from '@teambit/base-react.navigation.link';
import { OptionButton } from '@teambit/design.ui.input.option-button';
import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
import { Tooltip } from '@teambit/design.ui.tooltip';
import { EmptyStateSlot } from './compositions.ui.runtime';
import { Composition } from './composition';
import styles from './compositions.module.scss';
Expand Down Expand Up @@ -86,9 +87,11 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
<SplitPane layout={sidebarOpenness} size="85%" className={styles.compositionsPage}>
<Pane className={styles.left}>
<CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>
<Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>
<OptionButton icon="open-tab" />
</Link>
<Tooltip content={'Open in new tab'} placement="right">
<Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>
<OptionButton icon="open-tab" />
</Link>
</Tooltip>
</CompositionsMenuBar>
<CompositionContent
className={styles.compositionPanel}
Expand Down
9 changes: 6 additions & 3 deletions scopes/compositions/compositions/ui/compositions-panel/compositions-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import classNames from 'classnames';
import { useSearchParams } from 'react-router-dom';
import React, { useCallback } from 'react';
import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
import { Tooltip } from '@teambit/design.ui.tooltip';
import { useNavigate, useLocation } from '@teambit/base-react.navigation.link';
import { Composition } from '../../composition';
import styles from './compositions-panel.module.scss';
Expand Down Expand Up @@ -92,9 +93,11 @@ export function CompositionsPanel({
tooltipContent="Code"
onClick={onCompositionCodeClicked(composition)}
/>
<a className={styles.panelLink} target="_blank" rel="noopener noreferrer" href={href}>
<Icon className={styles.icon} of="open-tab" />
</a>
<Tooltip content="Open in new tab" placement="bottom">
<a className={styles.panelLink} target="_blank" rel="noopener noreferrer" href={href}>
<Icon className={styles.icon} of="open-tab" />
</a>
</Tooltip>
</div>
</li>
);
Expand Down