mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 17:51:57 +00:00
Refactor InputTooltip to use new Tooltip component (#38822)
* Refactor InputTooltip to use new Tooltip component * Formatting
This commit is contained in:
Laura Hacker
GitHub
parent
698b4f9edb
commit
a66a69744c
@ -194,6 +194,11 @@ See https://handbook.sourcegraph.com/community/faq#is-all-of-sourcegraph-open-so
|
||||
message:
|
||||
'When using an icon as a Tooltip trigger, it must have an aria-label attribute and should not be hidden.',
|
||||
},
|
||||
{
|
||||
selector: 'JSXElement[openingElement.name.name="InputTooltip"]',
|
||||
message:
|
||||
'Prefer using the <Tooltip> component with an <Input> directly, when possible. Please only use <InputTooltip> when the legacy styling it provides is needed. We will be working to fix style issues with <Input> (especially for checkboxes) in the future.',
|
||||
},
|
||||
{
|
||||
selector: 'JSXSpreadAttribute[argument.name=/^(props|rest)$/]',
|
||||
message:
|
||||
|
||||
@ -2,14 +2,3 @@
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.disabled-tooltip {
|
||||
cursor: not-allowed;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 999999;
|
||||
}
|
||||
.disabled-btn {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
|
||||
import { Button, ButtonProps } from '@sourcegraph/wildcard'
|
||||
import { Button, ButtonProps, Tooltip, TooltipProps } from '@sourcegraph/wildcard'
|
||||
|
||||
import styles from './InputTooltip.module.scss'
|
||||
|
||||
@ -8,6 +8,7 @@ type ButtonAndInputElementProps = Omit<ButtonProps, 'type'> & React.InputHTMLAtt
|
||||
|
||||
export interface InputTooltipProps extends ButtonAndInputElementProps {
|
||||
tooltip: string
|
||||
placement?: TooltipProps['placement']
|
||||
}
|
||||
|
||||
/**
|
||||
@ -16,25 +17,17 @@ export interface InputTooltipProps extends ButtonAndInputElementProps {
|
||||
* Disabled elements do not trigger mouse events on hover, and `Tooltip` relies on mouse events.
|
||||
*
|
||||
* All other props are passed to the `input` element.
|
||||
*
|
||||
* @deprecated The new `<Tooltip>` component from Wildcard now supports disabled inputs automatically,
|
||||
* please use that component instead.
|
||||
*/
|
||||
export const InputTooltip: React.FunctionComponent<React.PropsWithChildren<InputTooltipProps>> = ({
|
||||
disabled,
|
||||
tooltip,
|
||||
placement,
|
||||
type,
|
||||
...props
|
||||
}) => (
|
||||
<div className={styles.container}>
|
||||
{disabled ? <div className={styles.disabledTooltip} data-tooltip={tooltip} /> : null}
|
||||
<Button
|
||||
as="input"
|
||||
disabled={disabled}
|
||||
className={disabled ? styles.disabledBtn : undefined}
|
||||
data-tooltip={disabled ? undefined : tooltip}
|
||||
type={type as ButtonProps['type']}
|
||||
{...props}
|
||||
/>
|
||||
<Tooltip content={tooltip} placement={placement}>
|
||||
<Button as="input" disabled={disabled} type={type as ButtonProps['type']} {...props} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -16,12 +16,14 @@ export const BatchChangeChangesetsHeader: React.FunctionComponent<
|
||||
<>
|
||||
<span className="d-none d-md-block" />
|
||||
{toggleSelectAll && (
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
<InputTooltip
|
||||
type="checkbox"
|
||||
className="ml-2"
|
||||
checked={allSelected}
|
||||
onChange={toggleSelectAll}
|
||||
disabled={!!disabled}
|
||||
placement="right"
|
||||
tooltip={
|
||||
disabled ? 'You do not have permission to perform this operation' : 'Click to select all changesets'
|
||||
}
|
||||
|
||||
@ -95,6 +95,7 @@ export const ExternalChangesetNode: React.FunctionComponent<React.PropsWithChild
|
||||
</Button>
|
||||
{selectable ? (
|
||||
<div className="p-2">
|
||||
{/* eslint-disable-next-line no-restricted-syntax*/}
|
||||
<InputTooltip
|
||||
id={`select-changeset-${node.id}`}
|
||||
type="checkbox"
|
||||
@ -102,6 +103,7 @@ export const ExternalChangesetNode: React.FunctionComponent<React.PropsWithChild
|
||||
onChange={toggleSelected}
|
||||
disabled={!viewerCanAdminister}
|
||||
tooltip={tooltipLabel}
|
||||
placement="right"
|
||||
aria-label={tooltipLabel}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -20,12 +20,14 @@ export const HiddenExternalChangesetNode: React.FunctionComponent<
|
||||
<>
|
||||
<span className="d-none d-sm-block" />
|
||||
<div className="p-2">
|
||||
{/* eslint-disable-next-line no-restricted-syntax*/}
|
||||
<InputTooltip
|
||||
id={`select-changeset-${node.id}`}
|
||||
type="checkbox"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
tooltip="You do not have permission to perform a bulk operation on this changeset"
|
||||
placement="right"
|
||||
/>
|
||||
</div>
|
||||
<ChangesetStatusCell
|
||||
|
||||
@ -25,12 +25,14 @@ export const HiddenChangesetApplyPreviewNode: React.FunctionComponent<
|
||||
<>
|
||||
<span className={classNames(styles.hiddenChangesetApplyPreviewNodeListCell, 'd-none d-sm-block')} />
|
||||
<div className="p-2">
|
||||
{/* eslint-disable-next-line no-restricted-syntax*/}
|
||||
<InputTooltip
|
||||
id="select-changeset-hidden"
|
||||
type="checkbox"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
tooltip="You do not have permission to publish to this repository."
|
||||
placement="right"
|
||||
/>
|
||||
</div>
|
||||
<HiddenChangesetApplyPreviewNodeStatusCell
|
||||
|
||||
@ -17,12 +17,14 @@ export const PreviewListHeader: React.FunctionComponent<React.PropsWithChildren<
|
||||
<span className="p-2 d-none d-sm-block" />
|
||||
{toggleSelectAll && (
|
||||
<div className="d-flex p-2 align-items-center">
|
||||
{/* eslint-disable-next-line no-restricted-syntax*/}
|
||||
<InputTooltip
|
||||
type="checkbox"
|
||||
checked={allSelected}
|
||||
onChange={toggleSelectAll}
|
||||
tooltip="Click to select all changesets"
|
||||
aria-label="Click to select all changesets"
|
||||
placement="right"
|
||||
/>
|
||||
<span className="pl-2 d-block d-sm-none">Select all</span>
|
||||
</div>
|
||||
|
||||
@ -224,21 +224,25 @@ const SelectBox: React.FunctionComponent<
|
||||
}, [selectable, isPublishableResult])
|
||||
|
||||
const input = isPublishableResult.publishable ? (
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
<InputTooltip
|
||||
id={`select-changeset-${isPublishableResult.changesetSpecID}`}
|
||||
type="checkbox"
|
||||
checked={selectable.isSelected(isPublishableResult.changesetSpecID)}
|
||||
onChange={toggleSelected}
|
||||
tooltip="Click to select changeset for bulk-modifying the publication state"
|
||||
placement="right"
|
||||
aria-label="Click to select changeset for bulk-modifying the publication state"
|
||||
/>
|
||||
) : (
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
<InputTooltip
|
||||
id="select-changeset-hidden"
|
||||
type="checkbox"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
tooltip={isPublishableResult.reason}
|
||||
placement="right"
|
||||
aria-label={isPublishableResult.reason}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -73,7 +73,9 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
|
||||
// NOTE: We plan to consolidate this logic with our Popover component in the future, but chose Radix first to support short-term accessibility needs.
|
||||
// GitHub issue: https://github.com/sourcegraph/sourcegraph/issues/36080
|
||||
return (
|
||||
<TooltipPrimitive.Root delayDuration={0} defaultOpen={defaultOpen}>
|
||||
// The small delayDuration helps prevent the tooltip from immediately closing when it gets triggered in the
|
||||
// exact spot the arrow is overlapping the content (allows time for the cursor to move more naturally)
|
||||
<TooltipPrimitive.Root delayDuration={100} defaultOpen={defaultOpen}>
|
||||
<TooltipPrimitive.Trigger asChild={true}>{trigger}</TooltipPrimitive.Trigger>
|
||||
{
|
||||
// The rest of the Tooltip components still need to be rendered for the content to correctly be shown conditionally.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user