eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

refactor: remove variant prop from input components and styles

Browse Source 
- Removed the variant prop from Checkbox, Input, InputNumber, Switch, TextArea components.
- Updated styles to eliminate variant-specific classes for Checkbox, Input, InputNumber, TextArea, and Switch.
- Simplified class names in stylesheets to focus on status only.
- Adjusted documentation to reflect the removal of the variant prop.
This commit is contained in:
Firman Ramdhani
2026-02-02 16:36:23 +07:00
parent 53da0c70bd
commit 2c21da111e
16 changed files with 164 additions and 676 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/apps/modules/example/showcase/components/checkbox.showcase.tsx
+3 -37
View File
@@ -33,8 +33,8 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
<div className="p-4 border border-gray-100 rounded-xl bg-gray-50/50">
<span className="block mb-3 text-xs font-bold text-gray-400 uppercase">Filled</span>
<div className="flex gap-4">
<Checkbox variant="filled" status={overrideStatus} label="Standard" defaultChecked />
<Checkbox variant="filled" status={overrideStatus} label="Unchecked" />
<Checkbox status={overrideStatus} label="Standard" defaultChecked />
<Checkbox status={overrideStatus} label="Unchecked" />
</div>
</div>
</div>
@@ -60,40 +60,6 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
<Checkbox status={resolveStatus('success')} label={resolveStatus('success')} defaultChecked />
<Checkbox status={resolveStatus('info')} label={resolveStatus('info')} defaultChecked />
</div>
{/* Filled Status */}
<div className="flex flex-wrap gap-6 p-6 bg-gray-50 border border-gray-200 rounded-xl">
<Checkbox
variant="filled"
status={resolveStatus('default')}
label={`${resolveStatus('default')} Filled`}
defaultChecked
/>
<Checkbox
variant="filled"
status={resolveStatus('error')}
label={`${resolveStatus('error')} Filled`}
defaultChecked
/>
<Checkbox
variant="filled"
status={resolveStatus('warning')}
label={`${resolveStatus('warning')} Filled`}
defaultChecked
/>
<Checkbox
variant="filled"
status={resolveStatus('success')}
label={`${resolveStatus('success')} Filled`}
defaultChecked
/>
<Checkbox
variant="filled"
status={resolveStatus('info')}
label={`${resolveStatus('info')} Filled`}
defaultChecked
/>
</div>
</div>
</section>
@@ -124,7 +90,7 @@ export default function CheckboxShowcase({ status: overrideStatus }: CheckboxSho
<div className="flex flex-col gap-3">
<Checkbox disabled label="Disabled Unchecked" />
<Checkbox disabled defaultChecked label="Disabled Checked" />
<Checkbox disabled variant="filled" label="Disabled Filled" />
<Checkbox disabled label="Disabled Filled" />
</div>
</div>
apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx
View File
apps/web/src/apps/modules/example/showcase/components/input.showcase.tsx
+7 -73
View File
@@ -69,75 +69,9 @@ export default function InputShowCase({ status }: { status?: InputStatusType })
</div>
</section>
{/* --- SECTION 2: FILLED VARIANT --- */}
<section className="space-y-6">
<h2 className="text-lg font-bold text-gray-800 border-b pb-2">Filled Variant</h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<div className="space-y-3">
<Label>Basic Filled</Label>
<Input variant="filled" status={status} placeholder="Filled Input" />
<InputPassword variant="filled" status={status} placeholder="Filled Password" />
<InputNumber variant="filled" status={status} className="w-full" placeholder="Filled Number" />
<InputCurrency variant="filled" status={status} className="w-full" placeholder="Filled Currency" />
<TextArea variant="filled" status={status} placeholder="Filled TextArea" rows={2} />
</div>
{/* --- SECTION 2: Component States & Validation --- */}
<div className="space-y-3">
<Label>Filled + Prefix</Label>
<Input variant="filled" status={status} prefix={<Fix>ID</Fix>} placeholder="12345" />
<InputPassword variant="filled" status={status} prefix={<Fix>🔑</Fix>} placeholder="password" />
<InputNumber variant="filled" status={status} prefix={<Fix>Qty:</Fix>} className="w-full" />
<InputCurrency variant="filled" status={status} prefix="Rp " className="w-full" />
</div>
<div className="space-y-3">
<Label>Filled + Suffix</Label>
<Input variant="filled" status={status} suffix={<Fix>Optional</Fix>} placeholder="Full Name" />
<InputPassword variant="filled" status={status} suffix={<Fix>?</Fix>} placeholder="password" />
<InputNumber variant="filled" status={status} suffix={<Fix>pts</Fix>} className="w-full" />
<InputCurrency variant="filled" status={status} suffix={<Fix>tax-incl</Fix>} className="w-full" />
</div>
<div className="space-y-3">
<Label>Both & Special</Label>
<Input
variant="filled"
status={status}
prefix={<Fix>https://</Fix>}
suffix={<Fix>.io</Fix>}
placeholder="domain"
/>
{/* Password Tanpa Toggle */}
<InputPassword
variant="filled"
status={status}
visibilityToggle={false}
prefix={<Fix>🔑</Fix>}
suffix={<Fix>?</Fix>}
placeholder="Hidden Password"
/>
<InputNumber
variant="filled"
status={status}
prefix={<Fix>+</Fix>}
suffix={<Fix>%</Fix>}
className="w-full"
placeholder="tax"
/>
<InputCurrency
variant="filled"
status={status}
prefix="USD "
suffix={<Fix>cents</Fix>}
className="w-full"
placeholder="amount"
/>
</div>
</div>
</section>
{/* --- SECTION 3: Component States & Validation --- */}
<section className="space-y-6">
<section className="space-y-6 mt-6">
<h2 className="text-lg font-bold text-gray-800 border-b pb-2">Component States & Validation</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -181,11 +115,11 @@ export default function InputShowCase({ status }: { status?: InputStatusType })
<div className="space-y-3">
<Label>Error (Filled)</Label>
<div className="space-y-3">
<Input variant="filled" status="error" placeholder="Invalid input" />
<InputPassword variant="filled" status="error" placeholder="Wrong password" />
<InputNumber variant="filled" status="error" className="w-full" placeholder="Out of range" />
<InputCurrency variant="filled" status="error" className="w-full" placeholder="Invalid amount" />
<TextArea variant="filled" status="error" placeholder="Error in message" rows={2} />
<Input status="error" placeholder="Invalid input" />
<InputPassword status="error" placeholder="Wrong password" />
<InputNumber status="error" className="w-full" placeholder="Out of range" />
<InputCurrency status="error" className="w-full" placeholder="Invalid amount" />
<TextArea status="error" placeholder="Error in message" rows={2} />
</div>
</div>
</div>
apps/web/src/apps/modules/example/showcase/components/switch.showcase.tsx
+14 -15
View File
@@ -25,8 +25,8 @@ export const SwitchShowcase = () => {
<h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Outlined (Default)</h3>
<p className="text-xs text-gray-400 mb-2">Background transparan saat off.</p>
<div className="flex flex-col gap-3">
<Switch variant="outlined" label="Outlined Off" />
<Switch variant="outlined" defaultChecked label="Outlined On" />
<Switch label="Outlined Off" />
<Switch defaultChecked label="Outlined On" />
</div>
</div>
@@ -35,8 +35,8 @@ export const SwitchShowcase = () => {
<h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Filled</h3>
<p className="text-xs text-gray-400 mb-2">Background abu-abu solid saat off.</p>
<div className="flex flex-col gap-3">
<Switch variant="filled" label="Filled Off" />
<Switch variant="filled" defaultChecked label="Filled On" />
<Switch label="Filled Off" />
<Switch defaultChecked label="Filled On" />
</div>
</div>
</div>
@@ -53,27 +53,27 @@ export const SwitchShowcase = () => {
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
<div className="flex flex-col items-center gap-2">
<Switch variant="outlined" status="default" defaultChecked />
<Switch status="default" defaultChecked />
<span className="text-xs font-medium text-gray-500">Default (Brand)</span>
</div>
<div className="flex flex-col items-center gap-2">
<Switch variant="outlined" status="success" defaultChecked />
<Switch status="success" defaultChecked />
<span className="text-xs font-medium text-green-600">Success</span>
</div>
<div className="flex flex-col items-center gap-2">
<Switch variant="outlined" status="warning" defaultChecked />
<Switch status="warning" defaultChecked />
<span className="text-xs font-medium text-amber-600">Warning</span>
</div>
<div className="flex flex-col items-center gap-2">
<Switch variant="outlined" status="error" defaultChecked />
<Switch status="error" defaultChecked />
<span className="text-xs font-medium text-red-600">Error</span>
</div>
<div className="flex flex-col items-center gap-2">
<Switch variant="outlined" status="info" defaultChecked />
<Switch status="info" defaultChecked />
<span className="text-xs font-medium text-sky-600">Info</span>
</div>
</div>
@@ -82,27 +82,27 @@ export const SwitchShowcase = () => {
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
<div className="flex flex-col items-center gap-2">
<Switch variant="filled" status="default" defaultChecked />
<Switch status="default" defaultChecked />
<span className="text-xs font-medium text-gray-500">Default (Brand)</span>
</div>
<div className="flex flex-col items-center gap-2">
<Switch variant="filled" status="success" defaultChecked />
<Switch status="success" defaultChecked />
<span className="text-xs font-medium text-green-600">Success</span>
</div>
<div className="flex flex-col items-center gap-2">
<Switch variant="filled" status="warning" defaultChecked />
<Switch status="warning" defaultChecked />
<span className="text-xs font-medium text-amber-600">Warning</span>
</div>
<div className="flex flex-col items-center gap-2">
<Switch variant="filled" status="error" defaultChecked />
<Switch status="error" defaultChecked />
<span className="text-xs font-medium text-red-600">Error</span>
</div>
<div className="flex flex-col items-center gap-2">
<Switch variant="filled" status="info" defaultChecked />
<Switch status="info" defaultChecked />
<span className="text-xs font-medium text-sky-600">Info</span>
</div>
</div>
@@ -209,7 +209,6 @@ export const SwitchShowcase = () => {
loading={loading}
label="Control Me"
status="success"
variant="filled"
/>
</div>
</div>
packages/ui/src/components/forms/checkbox/checkbox.component.tsx
+1 -2
View File
@@ -25,14 +25,13 @@ import { InputRef } from '@rc-component/input/lib/interface';
* @returns JSX.Element
*/
export const Checkbox = forwardRef<InputRef, CheckboxProps>((props, ref) => {
const { label, status = 'default', variant = 'outlined', className, children, ...rest } = props;
const { label, status = 'default', className, children, ...rest } = props;
const displayLabel = label || children;
const wrapperClass = [
'rc-checkbox-wrapper',
`checkbox-status-${status}`,
`checkbox-variant-${variant}`,
rest.disabled ? 'rc-checkbox-wrapper-disabled' : '',
className,
]
packages/ui/src/components/forms/input/input-number.component.tsx
+2 -6
View File
@@ -13,14 +13,12 @@
* value={10}
* onChange={(val) => console.log(val)}
* status="success"
* variant="outlined"
* />
* ```
*
* @param {InputNumberProps} props - The input number component props
* @param {InputStatusType} [props.status] - The validation status ('default', 'success', 'error', etc.)
* @param {string} [props.className] - Additional CSS classes to apply
* @param {'outlined' | 'filled' | 'borderless'} [props.variant='outlined'] - The visual variant style
* @param {React.Ref<HTMLInputElement>} ref - Ref to the underlying input element
*
* @returns {React.ReactElement} The rendered input number component
@@ -47,13 +45,11 @@ const DownIcon = () => (
);
export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
const { status, className, variant = 'outlined', ...restProps } = props;
const { status, className, ...restProps } = props;
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
const computedClassName = [className, `input-number-status-${currentStatus}`, `input-number-variant-${variant}`]
.filter(Boolean)
.join(' ');
const computedClassName = [className, `input-number-status-${currentStatus}`].filter(Boolean).join(' ');
return (
<RcInputNumber
packages/ui/src/components/forms/input/input.component.tsx
+3 -5
View File
@@ -3,16 +3,15 @@ import RcInput, { InputRef } from '@rc-component/input';
import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
/**
* Input component that wraps the RC Input library with custom status and variant support.
* Input component that wraps the RC Input library with custom status.
*
* @component
* @param {InputProps} props - The input component props
* @param {InputStatusType} [props.status] - The validation status of the input (validated against VALID_INPUT_STATUSES)
* @param {string} [props.className] - Additional CSS classes to apply to the input
* @param {'outlined' | 'filled'} [props.variant='outlined'] - The visual variant of the input
* @param {boolean} [props.disabled] - Whether the input is disabled
* @param {InputRef} ref - Reference to the underlying RC Input element
* @returns {React.ReactElement} The rendered Input component with computed classes for status, variant, and disabled state
* @returns {React.ReactElement} The rendered Input component with computed classes for status, and disabled state
*
* @remarks
* - Invalid status values default to 'default'
@@ -20,7 +19,7 @@ import { InputProps, InputStatusType, VALID_INPUT_STATUSES } from '../types';
* - The 'input-disabled' helper class is manually added for custom wrapper styling when needed
*/
export const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const { status, className, variant = 'outlined', disabled, ...restProps } = props;
const { status, className, disabled, ...restProps } = props;
// Determine current status, defaulting to 'default' if invalid
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
@@ -30,7 +29,6 @@ export const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const computedClassName = [
className,
`input-status-${currentStatus}`,
`input-variant-${variant}`,
// Add custom disabled class if disabled
disabled ? 'input-disabled' : '',
]
packages/ui/src/components/forms/styles/checkbox.style.css
-81
View File
@@ -184,87 +184,6 @@
box-shadow: 0 0 0 3px var(--color-info-100);
}
/* =========================================
VARIANT: FILLED
========================================= */
/* --- Default Filled --- */
.checkbox-variant-filled .rc-checkbox-inner {
background-color: var(--color-gray-50);
border-color: var(--input-border); /* Slightly border to remain visible on white background */
}
.checkbox-variant-filled:hover .rc-checkbox-inner {
background-color: var(--color-gray-100);
border-color: var(--input-border-hover);
}
/* Checked State for Filled */
.checkbox-variant-filled.checkbox-status-default .rc-checkbox-checked .rc-checkbox-inner {
background-color: var(--color-brand-500);
border-color: var(--color-brand-500);
}
/* --- Error Filled --- */
.checkbox-variant-filled.checkbox-status-error .rc-checkbox-inner {
background-color: var(--color-error-50);
border-color: var(--color-error-300);
}
.checkbox-variant-filled.checkbox-status-error:hover .rc-checkbox-inner {
background-color: var(--color-error-100);
border-color: var(--color-error-500);
}
.checkbox-variant-filled.checkbox-status-error .rc-checkbox-checked .rc-checkbox-inner {
background-color: var(--color-error-500);
border-color: var(--color-error-500);
}
/* --- Warning Filled --- */
.checkbox-variant-filled.checkbox-status-warning .rc-checkbox-inner {
background-color: var(--color-warning-50);
border-color: var(--color-warning-300);
}
.checkbox-variant-filled.checkbox-status-warning:hover .rc-checkbox-inner {
background-color: var(--color-warning-100);
border-color: var(--color-warning-500);
}
.checkbox-variant-filled.checkbox-status-warning .rc-checkbox-checked .rc-checkbox-inner {
background-color: var(--color-warning-500);
border-color: var(--color-warning-500);
}
/* --- Success Filled --- */
.checkbox-variant-filled.checkbox-status-success .rc-checkbox-inner {
background-color: var(--color-success-50);
border-color: var(--color-success-300);
}
.checkbox-variant-filled.checkbox-status-success:hover .rc-checkbox-inner {
background-color: var(--color-success-100);
border-color: var(--color-success-500);
}
.checkbox-variant-filled.checkbox-status-success .rc-checkbox-checked .rc-checkbox-inner {
background-color: var(--color-success-500);
border-color: var(--color-success-500);
}
/* --- Info Filled --- */
.checkbox-variant-filled.checkbox-status-info .rc-checkbox-inner {
background-color: var(--color-info-50);
border-color: var(--color-info-300);
}
.checkbox-variant-filled.checkbox-status-info:hover .rc-checkbox-inner {
background-color: var(--color-info-100);
border-color: var(--color-info-500);
}
.checkbox-variant-filled.checkbox-status-info .rc-checkbox-checked .rc-checkbox-inner {
background-color: var(--color-info-500);
border-color: var(--color-info-500);
}
/* Focus Ring for Filled Variant */
.checkbox-variant-filled .rc-checkbox-input:focus-visible + .rc-checkbox-inner {
/* Box shadow will follow the status color from the STATUS MATRIX block above */
outline: none;
}
/* =========================================
DISABLED STATE
========================================= */
packages/ui/src/components/forms/styles/input-number.style.css
+27 -126
View File
@@ -147,205 +147,106 @@
}
/* =========================================
3. STATUS MATRIX (VARIANT: OUTLINED)
3. STATUS MATRIX
========================================= */
/* --- DEFAULT --- */
.input-number-variant-outlined.input-number-status-default {
.input-number-status-default {
border-color: var(--input-border);
}
.input-number-variant-outlined.input-number-status-default:hover:not(.rc-input-number-disabled) {
.input-number-status-default:hover:not(.rc-input-number-disabled) {
border-color: var(--input-border-hover);
}
.input-number-variant-outlined.input-number-status-default:focus-within {
.input-number-status-default:focus-within {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-actions {
.input-number-status-default:focus-within .rc-input-number-actions {
border-left-color: var(--focus-border-color);
}
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-action-up {
.input-number-status-default:focus-within .rc-input-number-action-up {
border-bottom-color: var(--focus-border-color);
}
/* --- ERROR --- */
.input-number-variant-outlined.input-number-status-error {
.input-number-status-error {
border-color: var(--color-error-500);
}
.input-number-variant-outlined.input-number-status-error:hover:not(.rc-input-number-disabled) {
.input-number-status-error:hover:not(.rc-input-number-disabled) {
border-color: var(--color-error-600);
}
.input-number-variant-outlined.input-number-status-error:focus-within {
.input-number-status-error:focus-within {
border-color: var(--color-error-600);
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-error .rc-input-number-actions {
.input-number-status-error .rc-input-number-actions {
border-left-color: var(--color-error-500);
}
.input-number-variant-outlined.input-number-status-error .rc-input-number-action-up {
.input-number-status-error .rc-input-number-action-up {
border-bottom-color: var(--color-error-500);
}
/* --- WARNING --- */
.input-number-variant-outlined.input-number-status-warning {
.input-number-status-warning {
border-color: var(--color-warning-500);
}
.input-number-variant-outlined.input-number-status-warning:hover:not(.rc-input-number-disabled) {
.input-number-status-warning:hover:not(.rc-input-number-disabled) {
border-color: var(--color-warning-600);
}
.input-number-variant-outlined.input-number-status-warning:focus-within {
.input-number-status-warning:focus-within {
border-color: var(--color-warning-600);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-warning .rc-input-number-actions {
.input-number-status-warning .rc-input-number-actions {
border-left-color: var(--color-warning-500);
}
.input-number-variant-outlined.input-number-status-warning .rc-input-number-action-up {
.input-number-status-warning .rc-input-number-action-up {
border-bottom-color: var(--color-warning-500);
}
/* --- SUCCESS --- */
.input-number-variant-outlined.input-number-status-success {
.input-number-status-success {
border-color: var(--color-success-500);
}
.input-number-variant-outlined.input-number-status-success:hover:not(.rc-input-number-disabled) {
.input-number-status-success:hover:not(.rc-input-number-disabled) {
border-color: var(--color-success-600);
}
.input-number-variant-outlined.input-number-status-success:focus-within {
.input-number-status-success:focus-within {
border-color: var(--color-success-600);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-success .rc-input-number-actions {
.input-number-status-success .rc-input-number-actions {
border-left-color: var(--color-success-500);
}
.input-number-variant-outlined.input-number-status-success .rc-input-number-action-up {
.input-number-status-success .rc-input-number-action-up {
border-bottom-color: var(--color-success-500);
}
/* --- INFO --- */
.input-number-variant-outlined.input-number-status-info {
.input-number-status-info {
border-color: var(--color-info-500);
}
.input-number-variant-outlined.input-number-status-info:hover:not(.rc-input-number-disabled) {
.input-number-status-info:hover:not(.rc-input-number-disabled) {
border-color: var(--color-info-600);
}
.input-number-variant-outlined.input-number-status-info:focus-within {
.input-number-status-info:focus-within {
border-color: var(--color-info-600);
box-shadow: 0 0 0 3px var(--color-info-100);
}
/* Action Borders Sync */
.input-number-variant-outlined.input-number-status-info .rc-input-number-actions {
.input-number-status-info .rc-input-number-actions {
border-left-color: var(--color-info-500);
}
.input-number-variant-outlined.input-number-status-info .rc-input-number-action-up {
.input-number-status-info .rc-input-number-action-up {
border-bottom-color: var(--color-info-500);
}
/* =========================================
4. STATUS MATRIX (VARIANT: FILLED)
========================================= */
/* --- NORMAL FILLED --- */
.input-number-variant-filled.input-number-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.input-number-variant-filled.input-number-status-default:hover:not(.rc-input-number-disabled) {
border-color: var(--input-border-hover);
}
.input-number-variant-filled.input-number-status-default:focus-within {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* --- ERROR FILLED --- */
.input-number-variant-filled.input-number-status-error {
background-color: var(--color-error-50);
border-color: var(--color-error-500);
}
/* Actions Background & Border Sync (Error) */
.input-number-variant-filled.input-number-status-error .rc-input-number-actions {
background-color: var(--color-error-50);
border-left-color: var(--color-error-500);
}
.input-number-variant-filled.input-number-status-error .rc-input-number-action-up {
border-bottom-color: var(--color-error-500);
}
/* Focus: Revert to White BG */
.input-number-variant-filled.input-number-status-error:focus-within {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-error-100);
}
.input-number-variant-filled.input-number-status-error:focus-within .rc-input-number-actions {
background-color: var(--input-bg);
}
/* --- WARNING FILLED --- */
.input-number-variant-filled.input-number-status-warning {
background-color: var(--color-warning-50);
border-color: var(--color-warning-500);
}
.input-number-variant-filled.input-number-status-warning .rc-input-number-actions {
background-color: var(--color-warning-50);
border-left-color: var(--color-warning-500);
}
.input-number-variant-filled.input-number-status-warning .rc-input-number-action-up {
border-bottom-color: var(--color-warning-500);
}
.input-number-variant-filled.input-number-status-warning:focus-within {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
.input-number-variant-filled.input-number-status-warning:focus-within .rc-input-number-actions {
background-color: var(--input-bg);
}
/* --- SUCCESS FILLED --- */
.input-number-variant-filled.input-number-status-success {
background-color: var(--color-success-50);
border-color: var(--color-success-500);
}
.input-number-variant-filled.input-number-status-success .rc-input-number-actions {
background-color: var(--color-success-50);
border-left-color: var(--color-success-500);
}
.input-number-variant-filled.input-number-status-success .rc-input-number-action-up {
border-bottom-color: var(--color-success-500);
}
.input-number-variant-filled.input-number-status-success:focus-within {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-success-100);
}
.input-number-variant-filled.input-number-status-success:focus-within .rc-input-number-actions {
background-color: var(--input-bg);
}
/* --- INFO FILLED --- */
.input-number-variant-filled.input-number-status-info {
background-color: var(--color-info-50);
border-color: var(--color-info-500);
}
.input-number-variant-filled.input-number-status-info .rc-input-number-actions {
background-color: var(--color-info-50);
border-left-color: var(--color-info-500);
}
.input-number-variant-filled.input-number-status-info .rc-input-number-action-up {
border-bottom-color: var(--color-info-500);
}
.input-number-variant-filled.input-number-status-info:focus-within {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-info-100);
}
.input-number-variant-filled.input-number-status-info:focus-within .rc-input-number-actions {
background-color: var(--input-bg);
}
/* =========================================
5. DISABLED STATE
4. DISABLED STATE
========================================= */
.rc-input-number-disabled {
background-color: var(--disabled-bg) !important;
packages/ui/src/components/forms/styles/input.style.css
+20 -87
View File
@@ -163,141 +163,74 @@
------------------------------------------------ */
/* DEFAULT */
.input-variant-outlined.input-status-default {
.input-status-default {
border-color: var(--input-border);
}
/* Hover */
.input-variant-outlined.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--input-border-hover);
}
/* Focus */
.input-variant-outlined.input-status-default:focus,
.input-variant-outlined.input-status-default.rc-input-affix-wrapper-focused {
.input-status-default:focus,
.input-status-default.rc-input-affix-wrapper-focused {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
z-index: 1;
}
/* ERROR */
.input-variant-outlined.input-status-error {
.input-status-error {
border-color: var(--color-error-500);
z-index: 1;
}
.input-variant-outlined.input-status-error:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
.input-status-error:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--color-error-600);
}
.input-variant-outlined.input-status-error:focus,
.input-variant-outlined.input-status-error.rc-input-affix-wrapper-focused {
.input-status-error:focus,
.input-status-error.rc-input-affix-wrapper-focused {
border-color: var(--color-error-600);
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* WARNING */
.input-variant-outlined.input-status-warning {
.input-status-warning {
border-color: var(--color-warning-500);
z-index: 1;
}
.input-variant-outlined.input-status-warning:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
.input-status-warning:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--color-warning-600);
}
.input-variant-outlined.input-status-warning:focus,
.input-variant-outlined.input-status-warning.rc-input-affix-wrapper-focused {
.input-status-warning:focus,
.input-status-warning.rc-input-affix-wrapper-focused {
border-color: var(--color-warning-600);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* SUCCESS */
.input-variant-outlined.input-status-success {
.input-status-success {
border-color: var(--color-success-500);
z-index: 1;
}
.input-variant-outlined.input-status-success:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
.input-status-success:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--color-success-600);
}
.input-variant-outlined.input-status-success:focus,
.input-variant-outlined.input-status-success.rc-input-affix-wrapper-focused {
.input-status-success:focus,
.input-status-success.rc-input-affix-wrapper-focused {
border-color: var(--color-success-600);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* INFO */
.input-variant-outlined.input-status-info {
.input-status-info {
border-color: var(--color-info-500);
z-index: 1;
}
.input-variant-outlined.input-status-info:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
.input-status-info:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--color-info-600);
}
.input-variant-outlined.input-status-info:focus,
.input-variant-outlined.input-status-info.rc-input-affix-wrapper-focused {
.input-status-info:focus,
.input-status-info.rc-input-affix-wrapper-focused {
border-color: var(--color-info-600);
box-shadow: 0 0 0 3px var(--color-info-100);
}
/* ------------------------------------------------
2. VARIANT: FILLED
------------------------------------------------ */
/* DEFAULT FILLED */
.input-variant-filled.input-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.input-variant-filled.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
border-color: var(--input-border-hover);
}
.input-variant-filled.input-status-default:focus,
.input-variant-filled.input-status-default.rc-input-affix-wrapper-focused {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* ERROR FILLED */
.input-variant-filled.input-status-error {
background-color: var(--color-error-50);
border-color: var(--color-error-500);
}
/* When focused, background becomes default input-bg (white) */
.input-variant-filled.input-status-error:focus,
.input-variant-filled.input-status-error.rc-input-affix-wrapper-focused {
background-color: var(--input-bg);
border-color: var(--color-error-500);
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* WARNING FILLED */
.input-variant-filled.input-status-warning {
background-color: var(--color-warning-50);
border-color: var(--color-warning-500);
}
.input-variant-filled.input-status-warning:focus,
.input-variant-filled.input-status-warning.rc-input-affix-wrapper-focused {
background-color: var(--input-bg);
border-color: var(--color-warning-500);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* SUCCESS FILLED */
.input-variant-filled.input-status-success {
background-color: var(--color-success-50);
border-color: var(--color-success-500);
}
.input-variant-filled.input-status-success:focus,
.input-variant-filled.input-status-success.rc-input-affix-wrapper-focused {
background-color: var(--input-bg);
border-color: var(--color-success-500);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* INFO FILLED */
.input-variant-filled.input-status-info {
background-color: var(--color-info-50);
border-color: var(--color-info-500);
}
.input-variant-filled.input-status-info:focus,
.input-variant-filled.input-status-info.rc-input-affix-wrapper-focused {
background-color: var(--input-bg);
border-color: var(--color-info-500);
box-shadow: 0 0 0 3px var(--color-info-100);
}
}
packages/ui/src/components/forms/styles/picker.style.css
View File
packages/ui/src/components/forms/styles/switch.style.css
+60 -137
View File
@@ -150,42 +150,20 @@
}
}
/* =========================================
VARIANTS & STATUS MATRIX
========================================= */
/* -------------------------------
VARIANT: OUTLINED (Default)
Looks like an empty input when off.
------------------------------- */
.switch-variant-outlined .rc-switch {
background-color: var(--color-gray-200);
border-color: var(--color-gray-200);
}
.switch-variant-outlined .rc-switch:hover {
border-color: var(--color-brand-500);
}
/* -------------------------------
VARIANT: FILLED
Looks like a standard grey toggle when off.
------------------------------- */
.switch-variant-filled .rc-switch {
background-color: var(--color-gray-200);
border-color: var(--color-gray-200);
}
.switch-variant-filled .rc-switch:hover {
border-color: var(--color-brand-500);
}
/* =========================================
STATUS COLORS (Applied to Checked State)
========================================= */
/* --- DEFAULT (Brand) --- */
.switch-status-default .rc-switch {
background-color: var(--color-gray-200);
border-color: var(--color-gray-200);
}
.switch-status-default .rc-switch:hover {
border-color: var(--color-brand-500);
}
.switch-status-default .rc-switch-checked {
border-color: var(--color-brand-500);
background-color: var(--color-brand-500);
@@ -198,30 +176,16 @@
/* --- ERROR --- */
/* Hover Off state (Optional: Tint border red on hover even if off) */
.switch-status-error.switch-variant-outlined .rc-switch {
background-color: var(--input-bg);
border-color: var(--color-error-300);
}
.switch-status-error.switch-variant-outlined .rc-switch:hover {
border-color: var(--color-error-500);
}
.switch-status-error.switch-variant-outlined .rc-switch:after {
background-color: var(--color-error-300);
box-shadow: 0 2px 4px 0 var(--color-error-100);
}
.switch-status-error.switch-variant-filled .rc-switch {
.switch-status-error .rc-switch {
background-color: var(--color-error-50);
border-color: var(--color-error-300);
}
.switch-status-error.switch-variant-filled .rc-switch:hover {
.switch-status-error .rc-switch:hover {
border-color: var(--color-error-500);
}
.switch-status-error.switch-variant-filled .rc-switch:after {
.switch-status-error .rc-switch:after {
background-color: #fff;
}
@@ -235,7 +199,7 @@
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
}
.switch-status-error.switch-variant-filled .rc-switch-checked {
.switch-status-error .rc-switch-checked {
border-color: var(--color-error-500);
background-color: var(--color-error-500);
}
@@ -251,85 +215,18 @@
color: var(--color-error-500);
}
/* --- WARNING --- */
.switch-status-warning.switch-variant-outlined .rc-switch {
background-color: var(--input-bg);
border-color: var(--color-warning-300);
}
.switch-status-warning.switch-variant-outlined .rc-switch:hover {
border-color: var(--color-warning-500);
}
.switch-status-warning.switch-variant-outlined .rc-switch:after {
background-color: var(--color-warning-300);
box-shadow: 0 2px 4px 0 var(--color-warning-100);
}
.switch-status-warning.switch-variant-filled .rc-switch {
background-color: var(--color-warning-50);
border-color: var(--color-warning-300);
}
.switch-status-warning.switch-variant-filled .rc-switch:hover {
border-color: var(--color-warning-500);
}
.switch-status-warning.switch-variant-filled .rc-switch:after {
background-color: #fff;
}
/* Checked State */
.switch-status-warning.switch-variant-outlined .rc-switch-checked {
border-color: var(--color-warning-500);
background-color: var(--color-warning-500);
}
.switch-status-warning.switch-variant-outlined .rc-switch-checked:after {
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
}
.switch-status-warning.switch-variant-filled .rc-switch-checked {
border-color: var(--color-warning-500);
background-color: var(--color-warning-500);
}
/* Focus */
.switch-status-warning .rc-switch:focus-visible,
.switch-status-warning .rc-switch:focus {
box-shadow: 0 0 0 3px var(--color-warning-100);
border-color: var(--color-warning-500);
}
/* Loading Icon Color */
.switch-status-warning .rc-switch-loading-icon {
color: var(--color-warning-500);
}
/* --- SUCCESS --- */
.switch-status-success.switch-variant-outlined .rc-switch {
background-color: var(--input-bg);
border-color: var(--color-success-300);
}
.switch-status-success.switch-variant-outlined .rc-switch:hover {
border-color: var(--color-success-500);
}
.switch-status-success.switch-variant-outlined .rc-switch:after {
background-color: var(--color-success-300);
box-shadow: 0 2px 4px 0 var(--color-success-100);
}
.switch-status-success.switch-variant-filled .rc-switch {
.switch-status-success .rc-switch {
background-color: var(--color-success-50);
border-color: var(--color-success-300);
}
.switch-status-success.switch-variant-filled .rc-switch:hover {
.switch-status-success .rc-switch:hover {
border-color: var(--color-success-500);
}
.switch-status-success.switch-variant-filled .rc-switch:after {
.switch-status-success .rc-switch:after {
background-color: #fff;
}
@@ -343,7 +240,7 @@
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
}
.switch-status-success.switch-variant-filled .rc-switch-checked {
.switch-status-success .rc-switch-checked {
border-color: var(--color-success-500);
background-color: var(--color-success-500);
}
@@ -359,31 +256,57 @@
color: var(--color-success-500);
}
/* --- WARNING --- */
.switch-status-warning .rc-switch {
background-color: var(--color-warning-50);
border-color: var(--color-warning-300);
}
.switch-status-warning .rc-switch:hover {
border-color: var(--color-warning-500);
}
.switch-status-warning .rc-switch:after {
background-color: #fff;
}
/* Checked State */
.switch-status-warning.switch-variant-outlined .rc-switch-checked {
border-color: var(--color-warning-500);
background-color: var(--color-warning-500);
}
.switch-status-warning.switch-variant-outlined .rc-switch-checked:after {
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
}
.switch-status-warning .rc-switch-checked {
border-color: var(--color-warning-500);
background-color: var(--color-warning-500);
}
/* Focus */
.switch-status-warning .rc-switch:focus-visible,
.switch-status-warning .rc-switch:focus {
box-shadow: 0 0 0 3px var(--color-warning-100);
border-color: var(--color-warning-500);
}
/* Loading Icon Color */
.switch-status-warning .rc-switch-loading-icon {
color: var(--color-warning-500);
}
/* --- INFO --- */
.switch-status-info.switch-variant-outlined .rc-switch {
background-color: var(--input-bg);
border-color: var(--color-info-300);
}
.switch-status-info.switch-variant-outlined .rc-switch:hover {
border-color: var(--color-info-500);
}
.switch-status-info.switch-variant-outlined .rc-switch:after {
background-color: var(--color-info-300);
box-shadow: 0 2px 4px 0 var(--color-info-100);
}
.switch-status-info.switch-variant-filled .rc-switch {
.switch-status-info .rc-switch {
background-color: var(--color-info-50);
border-color: var(--color-info-300);
}
.switch-status-info.switch-variant-filled .rc-switch:hover {
.switch-status-info .rc-switch:hover {
border-color: var(--color-info-500);
}
.switch-status-info.switch-variant-filled .rc-switch:after {
.switch-status-info .rc-switch:after {
background-color: #fff;
}
@@ -397,7 +320,7 @@
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
}
.switch-status-info.switch-variant-filled .rc-switch-checked {
.switch-status-info .rc-switch-checked {
border-color: var(--color-info-500);
background-color: var(--color-info-500);
}
packages/ui/src/components/forms/styles/textarea.style.css
+20 -82
View File
@@ -118,137 +118,75 @@
------------------------------------------------ */
/* --- Default --- */
.textarea-variant-outlined.textarea-status-default {
.textarea-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
/* Hover */
.textarea-variant-outlined.textarea-status-default:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
.textarea-status-default:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
border-color: var(--input-border-hover);
}
/* Focus (Standalone OR Wrapper Focused) */
.rc-textarea.textarea-variant-outlined.textarea-status-default:focus,
.rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-default.rc-textarea-affix-wrapper-focused {
.rc-textarea.textarea-status-default:focus,
.rc-textarea-affix-wrapper.textarea-status-default.rc-textarea-affix-wrapper-focused {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
z-index: 1;
}
/* --- Error --- */
.textarea-variant-outlined.textarea-status-error {
.textarea-status-error {
border-color: var(--color-error-500);
z-index: 1;
}
.textarea-variant-outlined.textarea-status-error:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
.textarea-status-error:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
border-color: var(--color-error-600);
}
.rc-textarea.textarea-variant-outlined.textarea-status-error:focus,
.rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-error.rc-textarea-affix-wrapper-focused {
.rc-textarea.textarea-status-error:focus,
.rc-textarea-affix-wrapper.textarea-status-error.rc-textarea-affix-wrapper-focused {
border-color: var(--color-error-600);
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* --- Warning --- */
.textarea-variant-outlined.textarea-status-warning {
.textarea-status-warning {
border-color: var(--color-warning-500);
z-index: 1;
}
.textarea-variant-outlined.textarea-status-warning:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
.textarea-status-warning:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
border-color: var(--color-warning-600);
}
.rc-textarea.textarea-variant-outlined.textarea-status-warning:focus,
.rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-warning.rc-textarea-affix-wrapper-focused {
.rc-textarea.textarea-status-warning:focus,
.rc-textarea-affix-wrapper.textarea-status-warning.rc-textarea-affix-wrapper-focused {
border-color: var(--color-warning-600);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* --- Success --- */
.textarea-variant-outlined.textarea-status-success {
.textarea-status-success {
border-color: var(--color-success-500);
z-index: 1;
}
.textarea-variant-outlined.textarea-status-success:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
.textarea-status-success:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
border-color: var(--color-success-600);
}
.rc-textarea.textarea-variant-outlined.textarea-status-success:focus,
.rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-success.rc-textarea-affix-wrapper-focused {
.rc-textarea.textarea-status-success:focus,
.rc-textarea-affix-wrapper.textarea-status-success.rc-textarea-affix-wrapper-focused {
border-color: var(--color-success-600);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* --- Info --- */
.textarea-variant-outlined.textarea-status-info {
.textarea-status-info {
border-color: var(--color-info-500);
z-index: 1;
}
.textarea-variant-outlined.textarea-status-info:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
.textarea-status-info:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
border-color: var(--color-info-600);
}
.rc-textarea.textarea-variant-outlined.textarea-status-info:focus,
.rc-textarea-affix-wrapper.textarea-variant-outlined.textarea-status-info.rc-textarea-affix-wrapper-focused {
.rc-textarea.textarea-status-info:focus,
.rc-textarea-affix-wrapper.textarea-status-info.rc-textarea-affix-wrapper-focused {
border-color: var(--color-info-600);
box-shadow: 0 0 0 3px var(--color-info-100);
}
/* ------------------------------------------------
2. VARIANT: FILLED
------------------------------------------------ */
/* --- Default Filled --- */
.textarea-variant-filled.textarea-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.textarea-variant-filled.textarea-status-default:hover:not(:disabled):not(.rc-textarea-affix-wrapper-disabled) {
border-color: var(--input-border-hover);
}
.rc-textarea.textarea-variant-filled.textarea-status-default:focus,
.rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-default.rc-textarea-affix-wrapper-focused {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* --- Error Filled --- */
.textarea-variant-filled.textarea-status-error {
background-color: var(--color-error-50);
border-color: var(--color-error-500);
}
.rc-textarea.textarea-variant-filled.textarea-status-error:focus,
.rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-error.rc-textarea-affix-wrapper-focused {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* --- Warning Filled --- */
.textarea-variant-filled.textarea-status-warning {
background-color: var(--color-warning-50);
border-color: var(--color-warning-500);
}
.rc-textarea.textarea-variant-filled.textarea-status-warning:focus,
.rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-warning.rc-textarea-affix-wrapper-focused {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* --- Success Filled --- */
.textarea-variant-filled.textarea-status-success {
background-color: var(--color-success-50);
border-color: var(--color-success-500);
}
.rc-textarea.textarea-variant-filled.textarea-status-success:focus,
.rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-success.rc-textarea-affix-wrapper-focused {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* --- Info Filled --- */
.textarea-variant-filled.textarea-status-info {
background-color: var(--color-info-50);
border-color: var(--color-info-500);
}
.rc-textarea.textarea-variant-filled.textarea-status-info:focus,
.rc-textarea-affix-wrapper.textarea-variant-filled.textarea-status-info.rc-textarea-affix-wrapper-focused {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-info-100);
}
}
packages/ui/src/components/forms/switch/switch.component.tsx
+1 -12
View File
@@ -19,17 +19,7 @@ const LoadingSpinner = () => (
);
export const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
const {
label,
status = 'default',
variant = 'outlined',
className,
children,
style,
loading,
disabled,
...rest
} = props;
const { label, status = 'default', className, children, style, loading, disabled, ...rest } = props;
const displayLabel = label || children;
@@ -38,7 +28,6 @@ export const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) =>
const wrapperClass = [
'rc-switch-wrapper',
`switch-status-${status}`,
`switch-variant-${variant}`,
!isEnabled ? 'rc-switch-wrapper-disabled' : '',
className,
]
packages/ui/src/components/forms/textarea/textarea.component.tsx
+5 -10
View File
@@ -3,37 +3,32 @@ import RcTextArea, { TextAreaRef } from '@rc-component/textarea';
import { InputStatusType, TextAreaProps, VALID_INPUT_STATUSES } from '../types';
/**
* Forwarding React component that renders an RcTextArea with normalized status and variant styling.
* Forwarding React component that renders an RcTextArea with normalized status.
*
* The component computes a CSS class string from the optional `className`, a `textarea-status-<status>` class
* (falling back to 'default' when `status` is missing or not one of VALID_INPUT_STATUSES), and a
* `textarea-variant-<variant>` class. All other props are passed through to the underlying RcTextArea.
*
* The component forwards a ref to the underlying RcTextArea element.
*
* @remarks
* - `variant` defaults to `'outlined'`.
* - `status` is validated against `VALID_INPUT_STATUSES`; if invalid or absent, `'default'` is used.
* - Computed className shape: [className?, `textarea-status-${status}`, `textarea-variant-${variant}`].filter(Boolean).join(' ')
* - Computed className shape: [className?, `textarea-status-${status}`].filter(Boolean).join(' ')
*
* @param props.status - Optional input status (validated against VALID_INPUT_STATUSES).
* @param props.className - Optional additional class name(s) to apply.
* @param props.variant - Visual variant of the textarea; defaults to `'outlined'`.
* @param props.rest - All other props are forwarded to RcTextArea.
*
* @returns A React element: the wrapped RcTextArea with forwarded ref and computed classes.
*
* @example
* <TextArea status="error" variant="filled" placeholder="Enter text" />
* <TextArea status="error" placeholder="Enter text" />
*/
export const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
const { status, className, variant = 'outlined', ...restProps } = props;
const { status, className, ...restProps } = props;
const currentStatus: InputStatusType = status && VALID_INPUT_STATUSES.includes(status) ? status : 'default';
const computedClassName = [className, `textarea-status-${currentStatus}`, `textarea-variant-${variant}`]
.filter(Boolean)
.join(' ');
const computedClassName = [className, `textarea-status-${currentStatus}`].filter(Boolean).join(' ');
return <RcTextArea ref={ref} className={computedClassName} {...restProps} />;
});
packages/ui/src/components/forms/types/index.ts
+1 -3
View File
@@ -44,9 +44,7 @@ interface BaseFormItemComponentProps {
status?: InputStatusType;
}
interface BaseFormInputComponentProps extends BaseFormItemComponentProps {
variant?: 'outlined' | 'filled';
}
interface BaseFormInputComponentProps extends BaseFormItemComponentProps {}
/**
* Define specific component props