standarizing input sizes and paddings #579
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
feat: Implement two-size system for form controls and buttons Add standardized sizing system with large (40px) and small (32px) variants for all interactive form controls and buttons to ensure consistent heights and perfect visual alignment across the design system. ## Changes ### New Features - Add `size` prop to all interactive components (default: 'large') - Support two size variants: large (40px) and small (32px) - Maintain consistent 14px font size across all sizes - Heights account for 1px borders (38px/30px content + 2px border) ### Components Updated - Button (all variants: primary, secondary, tertiary, ghost, display, icon, border) - ButtonSubmit (inherits size support from Button) - Input - Textarea (inherits size support from Input) - InputWithCopyButton - FormSelect - FormAutocomplete - FormAutocompleteMultiselect - DropdownItem (updated from 25px to 32px) - FilterDropdown ### Infrastructure - Created `src/system/types/controlSize.ts` with shared types and utilities - Added control size tokens to theme (`sizes.control.small/large`) - Updated button theme styles to support both sizes via `data-size` attribute ### Documentation - Added size variant examples to Button.stories.tsx - Added size variant examples to Input.stories.tsx - Added size variant examples to FormSelect.stories.jsx - Added size variant examples to FormAutocomplete.stories.jsx - Created `ControlSizes.stories.tsx` with comprehensive alignment examples and anti-pattern guidance ## Breaking Changes⚠️ All components now default to 40px height (up from 36-38px). This is intentional for better accessibility and touch-friendliness. Existing layouts may need adjustments. **Height Changes:** - Buttons: 38px → 40px (+2px) - Inputs: 36px → 40px (+4px) - FormSelect: 36px → 40px (+4px) - FormAutocomplete: 36px → 40px (+4px) - DropdownItem: 25px → 32px (+7px) **Migration:** Use `size="small"` prop on any component where the new 40px default causes layout issues. ## Technical Details ### Size Calculations All heights account for 1px borders on top and bottom: - Large: 38px minHeight + 2px border = 40px total - Small: 30px minHeight + 2px border = 32px total ### Padding Strategy - Large: px: 5 (buttons/inputs) - Small: px: 3 (buttons/inputs) - All: py: 0 with lineHeight matching minHeight for vertical centering ### Fixed-Size Components Radio, Checkbox, and Toggle remain at standard sizes (16px, 14px, 40x20px) as these are established UI patterns that should not vary. ## Testing ✅ TypeScript compilation: 0 errors ✅ ESLint linting: 0 errors ✅ Storybook visual verification: All components render correctly ✅ Accessibility: 0 violations in all size variant stories ✅ Alignment verified: Button + Input combinations align perfectly
❌ Deploy Preview for vip-design-system-components failed.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
feat: Implement two-size system for form controls and buttons
Add standardized sizing system with large (40px) and small (32px) variants for all interactive form controls and buttons to ensure consistent heights and perfect visual alignment across the design system.
Changes
New Features
sizeprop to all interactive components (default: 'large')Components Updated
Infrastructure
src/system/types/controlSize.tswith shared types and utilitiessizes.control.small/large)data-sizeattributeDocumentation
ControlSizes.stories.tsxwith comprehensive alignment examples and anti-pattern guidanceBreaking Changes
Height Changes:
Migration:
Use
size="small"prop on any component where the new 40px default causes layout issues.Technical Details
Size Calculations
All heights account for 1px borders on top and bottom:
Padding Strategy
Fixed-Size Components
Radio, Checkbox, and Toggle remain at standard sizes (16px, 14px, 40x20px) as these are established UI patterns that should not vary.
Testing
✅ TypeScript compilation: 0 errors
✅ ESLint linting: 0 errors
✅ Storybook visual verification: All components render correctly
✅ Accessibility: 0 violations in all size variant stories
✅ Alignment verified: Button + Input combinations align perfectly
Description
A few sentences describing the overall goals of the pull request. Any special considerations and decisions.
Also include any references to relevant discussions and documentation.
Checklist
Steps to Test
Outline the steps to test and verify the PR here.
Example:
npm run dev.