Skip to content

Commit 3e7da4a

Browse files
jonmatumjonmatum
committed
fix: improve modal scrolling, input styling, and form functionality
- fix(modal): remove height constraints for better content scrolling - fix(input): correct border class from border-border-primary to border-primary - fix(searchbox): remove duplicate clear buttons by changing input type to text - fix(textarea): correct onChange handler signature in demo form - fix(demo): add theme-aware dark mode classes throughout showcase - test: enhance Input and Textarea test coverage to 100% - feat: add @tailwindcss/forms plugin for better form defaults - chore: add missing input/textarea classes to Tailwind safelist - chore: remove unused imports and variables from SearchBox
1 parent 0c0c67f commit 3e7da4a

13 files changed

Lines changed: 319 additions & 102 deletions

File tree

‎demo/components/ComponentShowcase.tsx‎

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const ComponentShowcase: React.FC = () => {
130130
onClick={() => setActiveTab(tab.id)}
131131
className={`flex items-center space-x-2 px-4 py-2 rounded-md transition-colors ${
132132
activeTab === tab.id
133-
? 'bg-primary-600 text-white'
133+
? 'bg-primary-600 text-white dark:bg-primary-500 dark:text-white'
134134
: 'text-text-secondary hover:text-text-primary'
135135
}`}
136136
>
@@ -179,7 +179,7 @@ const ComponentShowcase: React.FC = () => {
179179
>
180180
<Modal.Header showCloseButton onClose={() => setFullscreenModalOpen(false)}>
181181
<div className="flex items-center gap-3">
182-
<div className="w-8 h-8 bg-warning-500 rounded-full flex items-center justify-center">
182+
<div className="w-8 h-8 bg-warning-500 dark:bg-warning-400 rounded-full flex items-center justify-center">
183183
<Icon name="ArrowsPointingOutIcon" className="w-4 h-4 text-white" />
184184
</div>
185185
<div>
@@ -241,8 +241,8 @@ const ComponentShowcase: React.FC = () => {
241241
</div>
242242
</div>
243243

244-
<div className="p-6 bg-primary-50 border border-primary-200 rounded-lg">
245-
<h4 className="font-medium text-primary-800 mb-2">Implementation Example</h4>
244+
<div className="p-6 bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-700 rounded-lg">
245+
<h4 className="font-medium text-primary-800 dark:text-primary-200 mb-2">Implementation Example</h4>
246246
<Code className="text-sm">
247247
{`<Modal
248248
isOpen={isFullscreenOpen}
@@ -783,11 +783,11 @@ const MoleculesTab: React.FC<MoleculesTabProps> = ({ setModalOpen, setFullscreen
783783
</div>
784784
</div>
785785

786-
<div className="p-4 bg-primary-50 border border-primary-200 rounded-lg mb-4">
787-
<p className="text-sm text-primary-800">
786+
<div className="p-4 bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-700 rounded-lg mb-4">
787+
<p className="text-sm text-primary-800 dark:text-primary-200">
788788
<strong>New API:</strong> The Modal now uses compound components for better flexibility.
789-
The old <code className="bg-primary-100 px-1 rounded">title</code> prop is deprecated
790-
in favor of <code className="bg-primary-100 px-1 rounded">Modal.Header</code>.
789+
The old <code className="bg-primary-100 dark:bg-primary-800 px-1 rounded">title</code> prop is deprecated
790+
in favor of <code className="bg-primary-100 dark:bg-primary-800 px-1 rounded">Modal.Header</code>.
791791
</p>
792792
</div>
793793

@@ -833,8 +833,8 @@ const MoleculesTab: React.FC<MoleculesTabProps> = ({ setModalOpen, setFullscreen
833833
</div>
834834
</div>
835835

836-
<div className="p-4 bg-primary-50 border border-primary-200 rounded-lg">
837-
<p className="text-sm text-primary-800">
836+
<div className="p-4 bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-700 rounded-lg">
837+
<p className="text-sm text-primary-800 dark:text-primary-200">
838838
<strong>Form Showcase:</strong> See the dedicated Form Molecules section below
839839
for interactive examples of all form components with validation and real-world usage patterns.
840840
</p>
@@ -1010,7 +1010,7 @@ const InteractiveTab: React.FC<InteractiveTabProps> = ({
10101010
>
10111011
<Modal.Header showCloseButton onClose={() => setModalOpen(false)}>
10121012
<div className="flex items-center gap-3">
1013-
<div className="w-8 h-8 bg-primary-500 rounded-full flex items-center justify-center">
1013+
<div className="w-8 h-8 bg-primary-500 dark:bg-primary-400 rounded-full flex items-center justify-center">
10141014
<StarIcon className="w-4 h-4 text-white" />
10151015
</div>
10161016
<div>
@@ -1020,10 +1020,10 @@ const InteractiveTab: React.FC<InteractiveTabProps> = ({
10201020
</div>
10211021
</Modal.Header>
10221022

1023-
<Modal.Body scrollable maxHeight="300px">
1023+
<Modal.Body scrollable>
10241024
<div className="space-y-4">
10251025
<p className="text-text-secondary">
1026-
This modal demonstrates the new compound component pattern with enhanced features:
1026+
This modal demonstrates the enhanced compound component pattern with improved scrolling:
10271027
</p>
10281028

10291029
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -1032,22 +1032,43 @@ const InteractiveTab: React.FC<InteractiveTabProps> = ({
10321032
<p className="text-xs text-text-secondary">WCAG AA compliant with proper focus management</p>
10331033
</div>
10341034
<div className="p-3 bg-surface-secondary rounded-lg">
1035-
<h4 className="font-medium text-text-primary mb-1">Responsive</h4>
1036-
<p className="text-xs text-text-secondary">Mobile-first design with adaptive behavior</p>
1035+
<h4 className="font-medium text-text-primary mb-1">Enhanced Scrolling</h4>
1036+
<p className="text-xs text-text-secondary">Content grows indefinitely with proper scrolling</p>
10371037
</div>
10381038
<div className="p-3 bg-surface-secondary rounded-lg">
1039-
<h4 className="font-medium text-text-primary mb-1">Flexible</h4>
1040-
<p className="text-xs text-text-secondary">9 sizes, 3 positions, custom styling</p>
1039+
<h4 className="font-medium text-text-primary mb-1">Flexible Layout</h4>
1040+
<p className="text-xs text-text-secondary">Flex-based layout with optimal space distribution</p>
10411041
</div>
10421042
<div className="p-3 bg-surface-secondary rounded-lg">
1043-
<h4 className="font-medium text-text-primary mb-1">Modern</h4>
1044-
<p className="text-xs text-text-secondary">Smooth animations and transitions</p>
1043+
<h4 className="font-medium text-text-primary mb-1">Responsive</h4>
1044+
<p className="text-xs text-text-secondary">Mobile-first design with adaptive behavior</p>
10451045
</div>
10461046
</div>
10471047

1048-
<div className="p-4 bg-primary-50 border border-primary-200 rounded-lg">
1049-
<p className="text-sm text-primary-800">
1050-
<strong>New API:</strong> Use compound components for better flexibility and maintainability.
1048+
<div className="space-y-3">
1049+
<h4 className="font-medium text-text-primary">Scrolling Demonstration</h4>
1050+
<p className="text-sm text-text-secondary">
1051+
The modal now allows content to grow without height constraints.
1052+
Scroll down to see more content:
1053+
</p>
1054+
1055+
{/* Generate content to demonstrate scrolling */}
1056+
{Array.from({ length: 12 }, (_, i) => (
1057+
<div key={i} className="p-3 border border-border-primary rounded-md">
1058+
<h5 className="font-medium text-text-primary">Feature {i + 1}</h5>
1059+
<p className="text-sm text-text-secondary">
1060+
This demonstrates the improved scrolling behavior. The modal body
1061+
can now accommodate large amounts of content while maintaining
1062+
proper scrolling and fixed header/footer positioning.
1063+
</p>
1064+
</div>
1065+
))}
1066+
</div>
1067+
1068+
<div className="p-4 bg-success-50 dark:bg-success-900/20 border border-success-200 dark:border-success-700 rounded-lg">
1069+
<p className="text-sm text-success-800 dark:text-success-200">
1070+
<strong>Fixed:</strong> Modal content can now grow indefinitely without height constraints,
1071+
providing better UX for large content with proper scrolling behavior.
10511072
</p>
10521073
</div>
10531074
</div>

‎demo/components/showcase/FormMoleculesShowcase.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ const ContactFormCard: React.FC<ContactFormCardProps> = ({ formData, errors, onI
172172
>
173173
<Textarea
174174
value={formData.message}
175-
onChange={(e) => onInputChange('message', e.target.value)}
175+
onChange={(value) => onInputChange('message', value)}
176176
placeholder="Your message here..."
177177
rows={4}
178178
/>

‎demo/utils/metrics.ts‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
/**
22
* Auto-generated metrics
3-
* Generated on: 2025-08-27T01:00:19.105Z
3+
* Generated on: 2025-08-28T03:44:00.572Z
44
* DO NOT EDIT MANUALLY - Run 'npm run generate:metrics' to update
55
*/
66

77
export const METRICS = {
8-
"generated": "2025-08-27T01:00:19.105Z",
8+
"generated": "2025-08-28T03:44:00.572Z",
99
"version": "10.0.0",
1010
"bundle": {
1111
"esm": {
12-
"size": 158383,
13-
"sizeFormatted": "154.7KB",
14-
"gzipped": 30817,
15-
"gzippedFormatted": "30.1KB"
12+
"size": 158718,
13+
"sizeFormatted": "155KB",
14+
"gzipped": 30922,
15+
"gzippedFormatted": "30.2KB"
1616
},
1717
"cjs": {
18-
"size": 168361,
19-
"sizeFormatted": "164.4KB",
20-
"gzipped": 31491,
18+
"size": 168696,
19+
"sizeFormatted": "164.7KB",
20+
"gzipped": 31586,
2121
"gzippedFormatted": "30.8KB"
2222
},
2323
"css": {
24-
"size": 51664,
25-
"sizeFormatted": "50.5KB",
26-
"gzipped": 8853,
27-
"gzippedFormatted": "8.6KB"
24+
"size": 57692,
25+
"sizeFormatted": "56.3KB",
26+
"gzipped": 10065,
27+
"gzippedFormatted": "9.8KB"
2828
},
2929
"standalone": {
3030
"size": 12505,
@@ -33,14 +33,14 @@ export const METRICS = {
3333
"gzippedFormatted": "2.8KB"
3434
},
3535
"types": {
36-
"size": 85018,
36+
"size": 85025,
3737
"sizeFormatted": "83KB"
3838
}
3939
},
4040
"tests": {
41-
"totalTests": 677,
42-
"testFiles": 28,
43-
"coverage": 75.56,
41+
"totalTests": 0,
42+
"testFiles": 0,
43+
"coverage": 0,
4444
"passRate": 100
4545
},
4646
"dry": {
@@ -51,20 +51,20 @@ export const METRICS = {
5151
},
5252
"code": {
5353
"totalFiles": 158,
54-
"totalLines": 26975,
54+
"totalLines": 27127,
5555
"complexity": 0,
5656
"commentRatio": 0
5757
},
5858
"scc": {
59-
"estimatedCost": 463646,
60-
"estimatedCostFormatted": "$463,646",
61-
"scheduleMonths": 10.27,
62-
"scheduleMonthsFormatted": "10.27 months",
63-
"peopleRequired": 4.01,
64-
"peopleRequiredFormatted": "4.01 devs",
65-
"totalLines": 19440,
66-
"codeLines": 14990,
67-
"bytesProcessed": 549218,
59+
"estimatedCost": 466375,
60+
"estimatedCostFormatted": "$466,375",
61+
"scheduleMonths": 10.29,
62+
"scheduleMonthsFormatted": "10.29 months",
63+
"peopleRequired": 4.03,
64+
"peopleRequiredFormatted": "4.03 devs",
65+
"totalLines": 19551,
66+
"codeLines": 15074,
67+
"bytesProcessed": 553267,
6868
"model": "COCOMO (organic)",
6969
"disclaimer": "Estimates based on COCOMO model analysis of production code"
7070
}

‎metrics.json‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
{
2-
"generated": "2025-08-27T01:00:19.105Z",
2+
"generated": "2025-08-28T03:44:00.572Z",
33
"version": "10.0.0",
44
"bundle": {
55
"esm": {
6-
"size": 158383,
7-
"sizeFormatted": "154.7KB",
8-
"gzipped": 30817,
9-
"gzippedFormatted": "30.1KB"
6+
"size": 158718,
7+
"sizeFormatted": "155KB",
8+
"gzipped": 30922,
9+
"gzippedFormatted": "30.2KB"
1010
},
1111
"cjs": {
12-
"size": 168361,
13-
"sizeFormatted": "164.4KB",
14-
"gzipped": 31491,
12+
"size": 168696,
13+
"sizeFormatted": "164.7KB",
14+
"gzipped": 31586,
1515
"gzippedFormatted": "30.8KB"
1616
},
1717
"css": {
18-
"size": 51664,
19-
"sizeFormatted": "50.5KB",
20-
"gzipped": 8853,
21-
"gzippedFormatted": "8.6KB"
18+
"size": 57692,
19+
"sizeFormatted": "56.3KB",
20+
"gzipped": 10065,
21+
"gzippedFormatted": "9.8KB"
2222
},
2323
"standalone": {
2424
"size": 12505,
@@ -27,14 +27,14 @@
2727
"gzippedFormatted": "2.8KB"
2828
},
2929
"types": {
30-
"size": 85018,
30+
"size": 85025,
3131
"sizeFormatted": "83KB"
3232
}
3333
},
3434
"tests": {
35-
"totalTests": 677,
36-
"testFiles": 28,
37-
"coverage": 75.56,
35+
"totalTests": 0,
36+
"testFiles": 0,
37+
"coverage": 0,
3838
"passRate": 100
3939
},
4040
"dry": {
@@ -45,20 +45,20 @@
4545
},
4646
"code": {
4747
"totalFiles": 158,
48-
"totalLines": 26975,
48+
"totalLines": 27127,
4949
"complexity": 0,
5050
"commentRatio": 0
5151
},
5252
"scc": {
53-
"estimatedCost": 463646,
54-
"estimatedCostFormatted": "$463,646",
55-
"scheduleMonths": 10.27,
56-
"scheduleMonthsFormatted": "10.27 months",
57-
"peopleRequired": 4.01,
58-
"peopleRequiredFormatted": "4.01 devs",
59-
"totalLines": 19440,
60-
"codeLines": 14990,
61-
"bytesProcessed": 549218,
53+
"estimatedCost": 466375,
54+
"estimatedCostFormatted": "$466,375",
55+
"scheduleMonths": 10.29,
56+
"scheduleMonthsFormatted": "10.29 months",
57+
"peopleRequired": 4.03,
58+
"peopleRequiredFormatted": "4.03 devs",
59+
"totalLines": 19551,
60+
"codeLines": 15074,
61+
"bytesProcessed": 553267,
6262
"model": "COCOMO (organic)",
6363
"disclaimer": "Estimates based on COCOMO model analysis of production code"
6464
}

‎package-lock.json‎

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
},
9191
"devDependencies": {
9292
"@eslint/js": "^9.33.0",
93+
"@tailwindcss/forms": "^0.5.10",
9394
"@testing-library/jest-dom": "^6.7.0",
9495
"@testing-library/react": "^16.3.0",
9596
"@testing-library/user-event": "^14.6.1",
@@ -128,4 +129,4 @@
128129
"url": "https://github.com/jonmatum/react-mfe-shell/issues"
129130
},
130131
"homepage": "https://github.com/jonmatum/react-mfe-shell#readme"
131-
}
132+
}

‎src/components/atoms/Input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
3535
// Fixed variant classes to match test expectations
3636
const variantClasses = {
3737
default:
38-
'border-border-primary bg-surface-primary text-text-primary placeholder-text-secondary focus:border-primary-500 focus:ring-primary-500',
38+
'border-primary bg-surface-primary text-text-primary placeholder-text-secondary focus:border-primary-500 focus:ring-primary-500',
3939
error:
4040
'border-danger-500 bg-surface-primary text-text-primary placeholder-text-secondary focus:border-danger-500 focus:ring-danger-500',
4141
success:

0 commit comments

Comments
 (0)