feat(07-02): add tooltipText to registry fields + render ⓘ in FieldRenderer and PasswordField
- Populate tooltipText for azureblob.sas_url, azureblob.key, and onedrive.token in registry - Add tooltipText prop and showTooltip state to PasswordField with toggle button + panel - Add showTooltip state to FieldRenderer; pass tooltipText to PasswordField for password branch - Add ⓘ button + panel for text/select branches in FieldRenderer - Use sr-only span for accessible name to avoid getByLabelText collision
This commit is contained in:
@@ -8,15 +8,34 @@ interface PasswordFieldProps {
|
||||
registration: UseFormRegisterReturn;
|
||||
placeholder?: string;
|
||||
helpText?: string;
|
||||
tooltipText?: string;
|
||||
}
|
||||
|
||||
export function PasswordField({ id, label, error, registration, placeholder, helpText }: PasswordFieldProps) {
|
||||
export function PasswordField({ id, label, error, registration, placeholder, helpText, tooltipText }: PasswordFieldProps) {
|
||||
const [show, setShow] = useState(false);
|
||||
const [showTooltip, setShowTooltip] = useState(false);
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor={id} className="text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
</label>
|
||||
<div className="flex items-center gap-1">
|
||||
<label htmlFor={id} className="text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
</label>
|
||||
{tooltipText && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowTooltip(v => !v)}
|
||||
className="text-blue-500 hover:text-blue-700 text-xs leading-none"
|
||||
>
|
||||
<span className="sr-only">More info about {label}</span>
|
||||
<span aria-hidden="true">ⓘ</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{tooltipText && showTooltip && (
|
||||
<p className="text-xs text-blue-700 bg-blue-50 border border-blue-200 rounded px-2 py-1.5 mt-1">
|
||||
{tooltipText}
|
||||
</p>
|
||||
)}
|
||||
<div className="relative">
|
||||
<input
|
||||
id={id}
|
||||
|
||||
Reference in New Issue
Block a user