feat: add required asterisk indicator to TextField component
All checks were successful
Test / test-frontend (pull_request) Successful in 22s
Test / lint-frontend (pull_request) Successful in 25s
Test / frontend-build (pull_request) Successful in 29s
Verify / verify-generated-code (pull_request) Successful in 56s
Test / test (pull_request) Successful in 46s
Verify / verify-openapi-spec (pull_request) Successful in 57s
Verify / verify-frontend-api-client (pull_request) Successful in 22s
Test / lint (pull_request) Successful in 1m6s

This commit is contained in:
GW_MC
2025-12-20 16:20:31 +08:00
parent 0740072a60
commit 3f252a8abd

View File

@@ -2,6 +2,7 @@ import type { AnyFieldMeta } from '@tanstack/react-form';
import { LucideEye, LucideEyeClosed } from 'lucide-react'; import { LucideEye, LucideEyeClosed } from 'lucide-react';
import { useCallback, useId, useState } from 'react'; import { useCallback, useId, useState } from 'react';
import { InfoIcon, type InfoIconProps } from '../info'; import { InfoIcon, type InfoIconProps } from '../info';
import { Text } from '@radix-ui/themes';
export type TextFieldProps = { export type TextFieldProps = {
label?: string; label?: string;
@@ -32,6 +33,11 @@ export function TextField({ label, value, onChange, labelProps, labelDivProps, s
{label && ( {label && (
<div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6, display: 'flex', alignItems: 'center' }} {...labelDivProps}> <div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6, display: 'flex', alignItems: 'center' }} {...labelDivProps}>
{label} {label}
{rest?.required && (
<Text size="3" style={{ color: 'var(--red-9)', marginLeft: 2 }}>
*
</Text>
)}
{infoIconProps && <InfoIcon {...infoIconProps} style={{ marginLeft: 4, verticalAlign: 'middle' }} />} {infoIconProps && <InfoIcon {...infoIconProps} style={{ marginLeft: 4, verticalAlign: 'middle' }} />}
</div> </div>
)} )}