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
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);
}
}