feat: Refactor TextArea component and styles for improved usability and consistency
- Updated textarea styles to utilize CSS variables for dimensions and padding. - Enhanced placeholder styling and added disabled state styles. - Refactored TextArea component to use forwardRef and updated status handling. - Changed input statuses from 'normal' to 'default' for better clarity. - Introduced global decimal separator management in CurrencyService. - Updated tests to cover new decimal separator functionality. - Cleaned up global CSS for better organization and readability. - Removed deprecated rc-component dependencies in favor of @rc-component packages.
This commit is contained in:
Firman Ramdhani
@@ -1,21 +1,27 @@
|
||||
@layer components {
|
||||
/* =========================================
|
||||
BASE RESET
|
||||
BASE RESET & SHARED
|
||||
========================================= */
|
||||
.rc-input {
|
||||
/* Wajib border-box agar padding tidak merusak lebar */
|
||||
box-sizing: border-box;
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
/* Menggunakan Variable Dimensi Input */
|
||||
height: var(--input-height);
|
||||
padding: 0 12px;
|
||||
padding: 0 var(--input-padding-x); /* Konsisten dengan 0.92rem */
|
||||
|
||||
font-size: var(--input-font-size);
|
||||
line-height: 1.5;
|
||||
color: var(--input-text);
|
||||
|
||||
/* Default: White Background (No Color) */
|
||||
background-color: var(--input-bg);
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
|
||||
/* Transisi standar */
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
}
|
||||
@@ -25,142 +31,64 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Disabled State (Standalone Input) */
|
||||
.rc-input:disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
color: var(--disabled-text);
|
||||
border-color: var(--disabled-border) !important;
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. VARIANT: OUTLINED
|
||||
Rule: Never show colored background.
|
||||
Only change border color.
|
||||
AFFIX WRAPPER (PREFIX / SUFFIX) SETUP
|
||||
========================================= */
|
||||
|
||||
/* Outlined - Normal */
|
||||
.input-variant-outlined.input-status-normal {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.input-variant-outlined.input-status-normal:hover {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-variant-outlined.input-status-normal:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
/* Base Wrapper Style */
|
||||
.rc-input-affix-wrapper {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
/* Outlined - Error (NO Background, RED Border) */
|
||||
.input-variant-outlined.input-status-error {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-error:hover,
|
||||
.input-variant-outlined.input-status-error:focus {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
/* Menggunakan Variable Dimensi Input */
|
||||
height: var(--input-height);
|
||||
padding: 0 var(--input-padding-x);
|
||||
|
||||
/* Outlined - Warning (NO Background, AMBER Border) */
|
||||
.input-variant-outlined.input-status-warning {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-warning:hover,
|
||||
.input-variant-outlined.input-status-warning:focus {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* Outlined - Success (NO Background, GREEN Border) */
|
||||
.input-variant-outlined.input-status-success {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-success:hover,
|
||||
.input-variant-outlined.input-status-success:focus {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Outlined - Info (NO Background, BLUE Border) */
|
||||
.input-variant-outlined.input-status-info {
|
||||
background-color: var(--input-bg); /* Tetap Putih */
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.input-variant-outlined.input-status-info:hover,
|
||||
.input-variant-outlined.input-status-info:focus {
|
||||
border-color: var(--color-info-600);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. VARIANT: FILLED
|
||||
Rule: Normal = White Bg.
|
||||
Error/Warning/Success/Info = Colored Bg.
|
||||
========================================= */
|
||||
|
||||
/* Filled - Normal (Sama seperti Outlined - No Background) */
|
||||
.input-variant-filled.input-status-normal {
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border); /* Tetap butuh border agar konsisten */
|
||||
}
|
||||
.input-variant-filled.input-status-normal:hover {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-variant-filled.input-status-normal:focus {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Filled - Error (RED Background + Red Border) */
|
||||
.input-variant-filled.input-status-error {
|
||||
background-color: var(--color-error-50); /* Background Merah Muda */
|
||||
border-color: var(--color-error-500);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
.input-variant-filled.input-status-error:focus {
|
||||
background-color: #fff; /* Optional: Balik putih saat diketik */
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
/* Reset Input di dalam Wrapper */
|
||||
.rc-input-affix-wrapper .rc-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Filled - Warning (AMBER Background + Amber Border) */
|
||||
.input-variant-filled.input-status-warning {
|
||||
background-color: var(--color-warning-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-warning-500);
|
||||
/* Prefix & Suffix Positioning */
|
||||
.rc-input-prefix {
|
||||
margin-right: 0.5rem; /* ~8px, hardcoded ok atau bisa buat var baru */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
}
|
||||
.input-variant-filled.input-status-warning:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
.rc-input-suffix {
|
||||
margin-left: 0.5rem; /* ~8px */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Filled - Success */
|
||||
.input-variant-filled.input-status-success {
|
||||
background-color: var(--color-success-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-variant-filled.input-status-success:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* Filled - Info */
|
||||
.input-variant-filled.input-status-info {
|
||||
background-color: var(--color-info-50); /* Background Kuning Muda */
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.input-variant-filled.input-status-info:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
SUPPORT FOR PREFIX & SUFFIX (AFFIX)
|
||||
========================================= */
|
||||
|
||||
/* 1. Wrapper Styling */
|
||||
|
||||
/* Disabled Wrapper */
|
||||
.rc-input-affix-wrapper-disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
color: var(--disabled-text);
|
||||
@@ -168,73 +96,155 @@
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rc-input-affix-wrapper {
|
||||
@apply relative flex items-center w-full transition-all duration-200;
|
||||
height: var(--input-height);
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--input-radius);
|
||||
background-color: var(--input-bg);
|
||||
box-sizing: border-box;
|
||||
.rc-input-affix-wrapper-disabled .rc-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 2. Reset Inner Input agar tidak double styling */
|
||||
.rc-input-affix-wrapper .rc-input {
|
||||
@apply border-none p-0 bg-transparent w-full h-full;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
/* =========================================
|
||||
LOGIC MATRIX: [VARIANT] x [STATUS]
|
||||
========================================= */
|
||||
|
||||
/* 3. Prefix/Suffix Icon Spacing */
|
||||
.rc-input-prefix {
|
||||
@apply mr-2 flex items-center self-center shrink-0;
|
||||
line-height: 0;
|
||||
}
|
||||
/* ------------------------------------------------
|
||||
1. VARIANT: OUTLINED (Default)
|
||||
------------------------------------------------ */
|
||||
|
||||
.rc-input-suffix {
|
||||
@apply ml-2 flex items-center self-center shrink-0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* --------------------------------------
|
||||
LOGIC VARIANT & STATUS UNTUK WRAPPER
|
||||
-------------------------------------- */
|
||||
|
||||
/* Outlined - Normal */
|
||||
.input-variant-outlined.input-status-normal.rc-input-affix-wrapper {
|
||||
/* DEFAULT */
|
||||
.input-variant-outlined.input-status-default {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
|
||||
/* Outlined - Error */
|
||||
.input-variant-outlined.input-status-error.rc-input-affix-wrapper {
|
||||
border-color: var(--color-error-500);
|
||||
/* Hover */
|
||||
.input-variant-outlined.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 {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Filled - Error/Warning (Background Berwarna) */
|
||||
.input-variant-filled.input-status-error.rc-input-affix-wrapper {
|
||||
/* ERROR */
|
||||
.input-variant-outlined.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) {
|
||||
border-color: var(--color-error-600);
|
||||
}
|
||||
.input-variant-outlined.input-status-error:focus,
|
||||
.input-variant-outlined.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 {
|
||||
border-color: var(--color-warning-500);
|
||||
z-index: 1;
|
||||
}
|
||||
.input-variant-outlined.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 {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
|
||||
/* SUCCESS */
|
||||
.input-variant-outlined.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) {
|
||||
border-color: var(--color-success-600);
|
||||
}
|
||||
.input-variant-outlined.input-status-success:focus,
|
||||
.input-variant-outlined.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 {
|
||||
border-color: var(--color-info-500);
|
||||
z-index: 1;
|
||||
}
|
||||
.input-variant-outlined.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 {
|
||||
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);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
/* Saat focus, background jadi default input-bg (putih) */
|
||||
.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);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-warning.rc-input-affix-wrapper {
|
||||
/* 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);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-success.rc-input-affix-wrapper {
|
||||
/* 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);
|
||||
}
|
||||
|
||||
.input-variant-filled.input-status-info.rc-input-affix-wrapper {
|
||||
/* INFO FILLED */
|
||||
.input-variant-filled.input-status-info {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
/* State Focus (Input aktif) */
|
||||
.rc-input-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
border-color: var(--focus-border-color) !important;
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color) !important;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user