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

feat: Refactor TextArea component and styles for improved usability and consistency

Browse Source 
- 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
2026-01-27 19:47:06 +07:00
parent 0deaff6e18
commit 1e1d46cbb5
18 changed files with 942 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/forms/styles/input-number.style.css
+280 -198
View File
@@ -1,285 +1,367 @@
@layer components {
:root {
--suffix-spacing: 12px;
--input-height: 32px;
--input-radius: 6px; /* Sesuai radius-base */
--input-padding-x: 11px;
--input-handler-width: 22px;
}
/* =========================================
1. LAYOUT & GEOMETRY (DO NOT TOUCH)
1. BASE SETUP (Layout & Reset)
========================================= */
/* CONTAINER UTAMA */
.rc-input-number,
.rc-input-number-affix-wrapper {
@apply relative flex w-full items-center m-0 transition-all duration-200 ease-in-out text-sm bg-white;
height: var(--input-height);
line-height: 1.5715;
border-radius: var(--input-radius);
border: 1px solid transparent;
}
/* NESTED RESET (Fix Flexbox) */
.rc-input-number-affix-wrapper .rc-input-number {
@apply border-none shadow-none bg-transparent p-0 h-full static;
.rc-input-number {
box-sizing: border-box;
position: relative;
display: flex;
flex: 1;
min-width: 0;
align-items: center;
width: 100%;
/* Global Variables */
height: var(--input-height);
font-size: var(--input-font-size);
border-radius: var(--input-radius);
line-height: 1.5;
color: var(--input-text);
background-color: var(--input-bg);
border: 1px solid transparent;
/* Transisi standar */
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0;
padding: 0;
}
/* INPUT FIELD */
/* Input Element */
.rc-input-number-input {
@apply w-full h-full bg-transparent border-none outline-none text-gray-900;
width: 100%;
height: 100%;
padding: 0 var(--input-padding-x);
appearance: textfield;
}
background-color: transparent;
border: 0;
border-radius: var(--input-radius);
outline: 0;
color: inherit; /* Mewarisi dari parent */
transition: all 0.2s linear;
/* Input Wrapper Helper */
.rc-input-number-input-wrap {
@apply w-full h-full;
}
/* Padding Kanan Input (jika tanpa suffix wrapper) */
.rc-input-number:not(.rc-input-number-affix-wrapper) .rc-input-number-input {
/* Padding Kanan Wajib (Space untuk Actions) */
padding-right: var(--input-handler-width);
}
/* PREFIX & SUFFIX */
.rc-input-number-prefix {
@apply flex items-center ml-3 text-gray-500 z-10;
/* Hide Native Spinners (Browser Default) */
.rc-input-number-input::-webkit-inner-spin-button,
.rc-input-number-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
display: none;
}
.rc-input-number-input {
-moz-appearance: textfield;
}
/* Prefix Styling */
.rc-input-number-prefix {
margin-left: var(--input-padding-x);
margin-right: 0.5rem; /* ~8px */
display: flex;
align-items: center;
flex: none;
color: var(--color-gray-500);
}
/* Suffix Styling */
.rc-input-number-suffix {
@apply flex items-center text-gray-500 z-10;
margin-right: var(--suffix-spacing);
margin-right: var(--input-padding-x);
display: flex;
align-items: center;
flex: none;
color: var(--color-gray-500);
z-index: 10;
transition: margin-right 0.2s ease-in-out;
}
/* Animation Trigger */
/* Animation Trigger: Geser Suffix saat hover/focus agar tidak tertutup tombol action */
.rc-input-number:hover .rc-input-number-suffix,
.rc-input-number-affix-wrapper:hover .rc-input-number-suffix,
.rc-input-number-focused .rc-input-number-suffix,
.rc-input-number-affix-wrapper-focused .rc-input-number-suffix,
.rc-input-number:focus-within .rc-input-number-suffix,
.rc-input-number-affix-wrapper:focus-within .rc-input-number-suffix {
margin-right: calc(var(--suffix-spacing) + var(--input-handler-width));
margin-right: calc(var(--input-padding-x) + var(--input-handler-width));
}
/* HANDLER WRAPPER */
.rc-input-number-handler-wrap {
/* =========================================
2. ACTIONS CONTAINER (Custom Spinners)
Target: .rc-input-number-actions
========================================= */
.rc-input-number-actions {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--input-handler-width);
@apply flex flex-col border-l border-gray-200 bg-white opacity-0 transition-opacity duration-200 overflow-hidden z-20;
border-top-right-radius: var(--input-radius);
border-bottom-right-radius: var(--input-radius);
height: 100%;
/* Menggunakan var input-bg agar konsisten (putih) */
background: var(--input-bg);
/* Default Border (akan di-override status) */
border-left: 1px solid var(--input-border);
border-radius: 0 var(--input-radius) var(--input-radius) 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.24s linear 0.1s;
z-index: 10;
display: flex;
flex-direction: column;
}
/* Show handlers logic */
.rc-input-number:hover .rc-input-number-handler-wrap,
.rc-input-number-affix-wrapper:hover .rc-input-number-handler-wrap,
.rc-input-number-focused .rc-input-number-handler-wrap,
.rc-input-number-affix-wrapper-focused .rc-input-number-handler-wrap,
.rc-input-number:focus-within .rc-input-number-handler-wrap,
.rc-input-number-affix-wrapper:focus-within .rc-input-number-handler-wrap {
@apply opacity-100;
/* Show Actions on Interaction */
.rc-input-number:hover .rc-input-number-actions,
.rc-input-number:focus-within .rc-input-number-actions {
opacity: 1;
pointer-events: auto;
}
.rc-input-number-handler {
@apply flex items-center justify-center flex-1 text-gray-400 cursor-pointer transition-colors duration-100 bg-white;
/* Individual Buttons */
.rc-input-number-action {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
overflow: hidden;
color: var(--color-gray-400);
cursor: pointer;
transition: all 0.2s linear;
}
.rc-input-number-handler:hover {
@apply text-brand-600 bg-gray-50;
height: 60%;
.rc-input-number-action:active {
background-color: var(--color-gray-100);
}
.rc-input-number-handler:active {
@apply bg-gray-100;
.rc-input-number-action:hover {
color: var(--color-brand-500);
height: 60%; /* Efek hover button membesar dikit */
}
.rc-input-number-handler-up {
@apply border-b border-gray-200;
/* Border Bawah untuk Action UP */
.rc-input-number-action-up {
border-bottom: 1px solid var(--input-border);
}
/* =========================================
2. SKINS, VARIANTS & STATUS
(Matching your Input Text Logic)
3. STATUS MATRIX (VARIANT: OUTLINED)
========================================= */
/* --- COMMON FOCUS STYLE (Brand Color) --- */
/* Default focus for Normal status */
.input-number-status-normal.rc-input-number-focused,
.input-number-status-normal.rc-input-number-affix-wrapper-focused,
.input-number-status-normal:focus-within {
border-color: var(--color-brand-500) !important;
box-shadow: 0 0 0 3px var(--color-brand-100) !important; /* Brand 200/100 for ring */
background-color: #fff !important;
/* --- DEFAULT --- */
.input-number-variant-outlined.input-number-status-default {
border-color: var(--input-border);
}
.input-number-variant-outlined.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 {
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 {
border-left-color: var(--focus-border-color);
}
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-action-up {
border-bottom-color: var(--focus-border-color);
}
/* ====================
VARIANT: OUTLINED
==================== */
/* Normal */
.input-number-variant-outlined.input-number-status-normal {
@apply border-gray-300;
}
.input-number-variant-outlined.input-number-status-normal:hover {
@apply border-brand-400; /* Atau var(--input-border-hover) */
}
/* Error (Outlined) */
/* --- ERROR --- */
.input-number-variant-outlined.input-number-status-error {
border-color: var(--color-error-500) !important;
border-color: var(--color-error-500);
}
.input-number-variant-outlined.input-number-status-error:focus-within,
.input-number-variant-outlined.input-number-status-error.rc-input-number-focused,
.input-number-variant-outlined.input-number-status-error.rc-input-number-affix-wrapper-focused {
box-shadow: 0 0 0 3px var(--color-error-100) !important;
border-color: var(--color-error-500) !important;
.input-number-variant-outlined.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 {
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 {
border-left-color: var(--color-error-500);
}
.input-number-variant-outlined.input-number-status-error .rc-input-number-action-up {
border-bottom-color: var(--color-error-500);
}
/* Warning (Outlined) */
/* --- WARNING --- */
.input-number-variant-outlined.input-number-status-warning {
border-color: var(--color-warning-500) !important;
border-color: var(--color-warning-500);
}
.input-number-variant-outlined.input-number-status-warning:focus-within,
.input-number-variant-outlined.input-number-status-warning.rc-input-number-focused,
.input-number-variant-outlined.input-number-status-warning.rc-input-number-affix-wrapper-focused {
box-shadow: 0 0 0 3px var(--color-warning-100) !important;
border-color: var(--color-warning-500) !important;
.input-number-variant-outlined.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 {
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 {
border-left-color: var(--color-warning-500);
}
.input-number-variant-outlined.input-number-status-warning .rc-input-number-action-up {
border-bottom-color: var(--color-warning-500);
}
/* Success (Outlined) */
/* --- SUCCESS --- */
.input-number-variant-outlined.input-number-status-success {
border-color: var(--color-success-500) !important;
border-color: var(--color-success-500);
}
.input-number-variant-outlined.input-number-status-success:focus-within,
.input-number-variant-outlined.input-number-status-success.rc-input-number-focused,
.input-number-variant-outlined.input-number-status-success.rc-input-number-affix-wrapper-focused {
box-shadow: 0 0 0 3px var(--color-success-100) !important;
border-color: var(--color-success-500) !important;
.input-number-variant-outlined.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 {
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 {
border-left-color: var(--color-success-500);
}
.input-number-variant-outlined.input-number-status-success .rc-input-number-action-up {
border-bottom-color: var(--color-success-500);
}
/* Info (Outlined) */
/* --- INFO --- */
.input-number-variant-outlined.input-number-status-info {
border-color: var(--color-info-500) !important;
border-color: var(--color-info-500);
}
.input-number-variant-outlined.input-number-status-info:focus-within,
.input-number-variant-outlined.input-number-status-info.rc-input-number-focused,
.input-number-variant-outlined.input-number-status-info.rc-input-number-affix-wrapper-focused {
box-shadow: 0 0 0 3px var(--color-info-100) !important;
border-color: var(--color-info-500) !important;
.input-number-variant-outlined.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 {
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 {
border-left-color: var(--color-info-500);
}
.input-number-variant-outlined.input-number-status-info .rc-input-number-action-up {
border-bottom-color: var(--color-info-500);
}
/* ====================
VARIANT: FILLED
==================== */
/* =========================================
4. STATUS MATRIX (VARIANT: FILLED)
========================================= */
/* Normal Filled */
.input-number-variant-filled.input-number-status-normal {
/* Gunakan gray-100 atau var(--input-bg) jika gray */
/* @apply border-transparent bg-gray-100; */
@apply border-gray-300;
/* --- 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-normal:hover {
/* @apply bg-gray-200; */
@apply border-brand-400; /* Atau var(--input-border-hover) */
.input-number-variant-filled.input-number-status-default:hover:not(.rc-input-number-disabled) {
border-color: var(--input-border-hover);
}
/* Saat Focus, Filled Normal jadi Putih + Brand Border */
.input-number-variant-filled.input-number-status-normal:focus-within,
.input-number-variant-filled.input-number-status-normal.rc-input-number-focused,
.input-number-variant-filled.input-number-status-normal.rc-input-number-affix-wrapper-focused {
@apply bg-white border-brand-500;
.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 (Colored BG) */
/* --- ERROR FILLED --- */
.input-number-variant-filled.input-number-status-error {
background-color: var(--color-error-50) !important;
border-color: var(--color-error-500) !important;
background-color: var(--color-error-50);
border-color: var(--color-error-500);
color: var(--color-error-600);
}
/* Fix: Filled Error saat Focus -> Background Putih */
.input-number-variant-filled.input-number-status-error:focus-within,
.input-number-variant-filled.input-number-status-error.rc-input-number-focused,
.input-number-variant-filled.input-number-status-error.rc-input-number-affix-wrapper-focused {
background-color: #fff !important;
box-shadow: 0 0 0 3px var(--color-error-100) !important;
/* 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 (Colored BG) */
/* --- WARNING FILLED --- */
.input-number-variant-filled.input-number-status-warning {
background-color: var(--color-warning-50) !important;
border-color: var(--color-warning-500) !important;
background-color: var(--color-warning-50);
border-color: var(--color-warning-500);
color: var(--color-warning-600);
}
.input-number-variant-filled.input-number-status-warning:focus-within,
.input-number-variant-filled.input-number-status-warning.rc-input-number-focused,
.input-number-variant-filled.input-number-status-warning.rc-input-number-affix-wrapper-focused {
background-color: #fff !important;
box-shadow: 0 0 0 3px var(--color-warning-100) !important;
.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 (Colored BG) */
/* --- SUCCESS FILLED --- */
.input-number-variant-filled.input-number-status-success {
background-color: var(--color-success-50) !important;
border-color: var(--color-success-500) !important;
background-color: var(--color-success-50);
border-color: var(--color-success-500);
color: var(--color-success-600);
}
.input-number-variant-filled.input-number-status-success:focus-within,
.input-number-variant-filled.input-number-status-success.rc-input-number-focused,
.input-number-variant-filled.input-number-status-success.rc-input-number-affix-wrapper-focused {
background-color: #fff !important;
box-shadow: 0 0 0 3px var(--color-success-100) !important;
.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 (Colored BG) */
/* --- INFO FILLED --- */
.input-number-variant-filled.input-number-status-info {
background-color: var(--color-info-50) !important;
border-color: var(--color-info-500) !important;
background-color: var(--color-info-50);
border-color: var(--color-info-500);
color: var(--color-info-600);
}
.input-number-variant-filled.input-number-status-info:focus-within,
.input-number-variant-filled.input-number-status-info.rc-input-number-focused,
.input-number-variant-filled.input-number-status-info.rc-input-number-affix-wrapper-focused {
background-color: #fff !important;
box-shadow: 0 0 0 3px var(--color-info-100) !important;
.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);
}
/* ====================
HANDLER BORDER SYNC
==================== */
/* Agar garis kiri handler warnanya sama dengan border input saat status aktif */
.input-number-status-error .rc-input-number-handler-wrap {
border-left-color: var(--color-error-500) !important;
/* =========================================
5. DISABLED STATE
========================================= */
.rc-input-number-disabled {
background-color: var(--disabled-bg) !important;
border-color: var(--disabled-border) !important;
color: var(--disabled-text);
cursor: not-allowed;
opacity: 1;
}
.input-number-status-warning .rc-input-number-handler-wrap {
border-left-color: var(--color-warning-500) !important;
.rc-input-number-disabled .rc-input-number-input {
cursor: not-allowed;
}
.input-number-status-success .rc-input-number-handler-wrap {
border-left-color: var(--color-success-500) !important;
}
.input-number-status-info .rc-input-number-handler-wrap {
border-left-color: var(--color-info-500) !important;
}
/* ====================
DISABLED STATE
==================== */
.rc-input-number-disabled,
.rc-input-number-affix-wrapper-disabled {
@apply bg-gray-50 border-gray-200 cursor-not-allowed opacity-70;
/* Force styles to override status colors */
background-color: var(--color-gray-50) !important;
border-color: var(--color-gray-200) !important;
}
.rc-input-number-disabled .rc-input-number-input,
.rc-input-number-affix-wrapper-disabled .rc-input-number-input {
@apply cursor-not-allowed text-gray-400;
}
/* Hide handler on disabled */
.rc-input-number-disabled .rc-input-number-handler-wrap,
.rc-input-number-affix-wrapper-disabled .rc-input-number-handler-wrap {
display: none;
.rc-input-number-disabled .rc-input-number-actions {
display: none !important;
}
}
packages/ui/src/components/forms/styles/input.style.css
+174 -164
View File
@@ -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);
}
}
packages/ui/src/components/forms/styles/textarea.style.css
+75 -56
View File
@@ -1,161 +1,180 @@
@layer components {
/* =========================================
TEXTAREA STYLES
Adapts the same logic as Input but for Multiline
========================================= */
TEXTAREA STYLES
========================================= */
.rc-textarea {
/* Tambahan wajib untuk menjamin lebar akurat */
box-sizing: border-box;
display: block;
width: 100%;
min-height: 80px; /* Default height for textarea */
padding: 8px 12px; /* Needs vertical padding unlike Input */
/* Menggunakan Variable Dimensi Textarea */
min-height: var(--textarea-min-height);
padding: var(--textarea-padding-y) var(--textarea-padding-x);
font-size: var(--input-font-size);
line-height: 1.5;
color: var(--input-text);
/* Default Background (White) */
/* Default Background */
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;
resize: vertical; /* Only allow vertical resizing */
resize: vertical;
}
/* Placeholder Styling */
.rc-textarea::placeholder {
color: var(--input-placeholder);
opacity: 1;
opacity: 1; /* Firefox fix */
}
.rc-textarea:disabled {
/* Disabled State */
.rc-textarea:disabled,
.rc-textarea[disabled] {
background-color: var(--disabled-bg) !important;
color: var(--disabled-text);
border-color: var(--disabled-border) !important;
cursor: not-allowed;
opacity: 1; /* iOS fix */
pointer-events: none;
}
/* =========================================
1. VARIANT: OUTLINED (Textarea)
Always White Background. Changes Border only.
========================================= */
WRAPPER (untuk showCount)
========================================= */
.rc-textarea-affix-wrapper {
width: 100%;
position: relative;
display: inline-block;
}
/* Normal */
.textarea-variant-outlined.textarea-status-normal {
/* =========================================
1. VARIANT: OUTLINED
========================================= */
/* --- Default --- */
.rc-textarea.textarea-variant-outlined.textarea-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.textarea-variant-outlined.textarea-status-normal:hover {
.rc-textarea.textarea-variant-outlined.textarea-status-default:hover:not(:disabled) {
border-color: var(--input-border-hover);
}
.textarea-variant-outlined.textarea-status-normal:focus {
.rc-textarea.textarea-variant-outlined.textarea-status-default:focus {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* Error (White BG, Red Border) */
.textarea-variant-outlined.textarea-status-error {
/* --- Error --- */
.rc-textarea.textarea-variant-outlined.textarea-status-error {
background-color: var(--input-bg);
border-color: var(--color-error-500);
}
.textarea-variant-outlined.textarea-status-error:hover,
.textarea-variant-outlined.textarea-status-error:focus {
.rc-textarea.textarea-variant-outlined.textarea-status-error:hover:not(:disabled),
.rc-textarea.textarea-variant-outlined.textarea-status-error:focus {
border-color: var(--color-error-600);
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* Warning (White BG, Amber Border) */
.textarea-variant-outlined.textarea-status-warning {
/* --- Warning --- */
.rc-textarea.textarea-variant-outlined.textarea-status-warning {
background-color: var(--input-bg);
border-color: var(--color-warning-500);
}
.textarea-variant-outlined.textarea-status-warning:hover,
.textarea-variant-outlined.textarea-status-warning:focus {
.rc-textarea.textarea-variant-outlined.textarea-status-warning:hover:not(:disabled),
.rc-textarea.textarea-variant-outlined.textarea-status-warning:focus {
border-color: var(--color-warning-600);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* Success (White BG, Green Border) */
.textarea-variant-outlined.textarea-status-success {
/* --- Success --- */
.rc-textarea.textarea-variant-outlined.textarea-status-success {
background-color: var(--input-bg);
border-color: var(--color-success-500);
}
.textarea-variant-outlined.textarea-status-success:hover,
.textarea-variant-outlined.textarea-status-success:focus {
.rc-textarea.textarea-variant-outlined.textarea-status-success:hover:not(:disabled),
.rc-textarea.textarea-variant-outlined.textarea-status-success:focus {
border-color: var(--color-success-600);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* Info (White BG, Green Border) */
.textarea-variant-outlined.textarea-status-info {
/* --- Info --- */
.rc-textarea.textarea-variant-outlined.textarea-status-info {
background-color: var(--input-bg);
border-color: var(--color-info-500);
}
.textarea-variant-outlined.textarea-status-info:hover,
.textarea-variant-outlined.textarea-status-info:focus {
.rc-textarea.textarea-variant-outlined.textarea-status-info:hover:not(:disabled),
.rc-textarea.textarea-variant-outlined.textarea-status-info:focus {
border-color: var(--color-info-600);
box-shadow: 0 0 0 3px var(--color-info-100);
}
/* =========================================
2. VARIANT: FILLED (Textarea)
Normal = White.
Error/Warning/Success/Info = Colored BG.
========================================= */
2. VARIANT: FILLED
========================================= */
/* Normal (Behaves like Outlined - White BG) */
.textarea-variant-filled.textarea-status-normal {
/* --- Default Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-default {
background-color: var(--input-bg);
border-color: var(--input-border);
}
.textarea-variant-filled.textarea-status-normal:hover {
.rc-textarea.textarea-variant-filled.textarea-status-default:hover:not(:disabled) {
border-color: var(--input-border-hover);
}
.textarea-variant-filled.textarea-status-normal:focus {
.rc-textarea.textarea-variant-filled.textarea-status-default:focus {
border-color: var(--focus-border-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
}
/* Error (Red BG + Red Border) */
.textarea-variant-filled.textarea-status-error {
/* --- Error Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-error {
background-color: var(--color-error-50);
border-color: var(--color-error-500);
color: var(--color-error-600);
}
.textarea-variant-filled.textarea-status-error:focus {
background-color: #fff; /* Optional: White on focus */
.rc-textarea.textarea-variant-filled.textarea-status-error:focus {
background-color: var(--input-bg); /* Reset ke putih saat typing */
box-shadow: 0 0 0 3px var(--color-error-100);
}
/* Warning (Amber BG + Amber Border) */
.textarea-variant-filled.textarea-status-warning {
/* --- Warning Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-warning {
background-color: var(--color-warning-50);
border-color: var(--color-warning-500);
color: var(--color-warning-600);
}
.textarea-variant-filled.textarea-status-warning:focus {
background-color: #fff;
.rc-textarea.textarea-variant-filled.textarea-status-warning:focus {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-warning-100);
}
/* Success (Green BG + Green Border) */
.textarea-variant-filled.textarea-status-success {
/* --- Success Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-success {
background-color: var(--color-success-50);
border-color: var(--color-success-500);
color: var(--color-success-600);
}
.textarea-variant-filled.textarea-status-success:focus {
background-color: #fff;
.rc-textarea.textarea-variant-filled.textarea-status-success:focus {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-success-100);
}
/* Info (Blue BG + Blue Border) */
.textarea-variant-filled.textarea-status-info {
/* --- Info Filled --- */
.rc-textarea.textarea-variant-filled.textarea-status-info {
background-color: var(--color-info-50);
border-color: var(--color-info-500);
color: var(--color-info-600);
}
.textarea-variant-filled.textarea-status-info:focus {
background-color: #fff;
.rc-textarea.textarea-variant-filled.textarea-status-info:focus {
background-color: var(--input-bg);
box-shadow: 0 0 0 3px var(--color-info-100);
}
}