feat: add condensed view for form & input components#147
feat: add condensed view for form & input components#147garrity-miepub wants to merge 19 commits intomainfrom
Conversation
- Add data-slot attributes: input-wrapper, input-label, input, input-error, input-helper - Condensed CSS: reduced padding (0.025rem), heights (sm:1.5rem, md:1.75rem, lg:2rem) - Smaller label (0.75rem), error/helper text (0.6875rem), tighter wrapper gap (0.25rem)
Deploying ui with
|
| Latest commit: |
825f643
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d61f5be1.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-condensed-view-form.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
Adds condensed-density styling support for the Input component by introducing stable data-slot hooks and corresponding body.condensed CSS overrides in the shared stylesheet.
Changes:
- Add
data-slotattributes to Input sub-elements (input-wrapper,input-label,input,input-error,input-helper) to support global density styling. - Add condensed-mode CSS rules in
base.cssto reduce wrapper spacing, input height/padding, and label/helper/error typography.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/styles/base.css | Adds body.condensed rules targeting new Input data-slot hooks for tighter condensed styling. |
| src/components/Input/Input.tsx | Adds data-slot attributes to Input markup to enable density overrides from global CSS. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot attributes: textarea-wrapper, textarea-label, textarea, textarea-footer, textarea-error, textarea-helper, textarea-count - Condensed CSS: reduced padding (0.025rem), min-heights (sm:2.25rem, md:3rem, lg:3.75rem) - Smaller label (0.75rem), error/helper (0.6875rem), count (0.625rem), tighter gaps
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot attributes: select-wrapper, select-label, select-trigger, select-dropdown, select-search, select-listbox, select-option, select-group-label, select-error, select-helper - Condensed CSS: trigger heights (sm:1.5rem, md:1.75rem, lg:2rem), compact options, smaller search input - Consistent label/error/helper sizing with Input and Textarea
garrity-miepub
changed the title
- Fix sub-pixel padding: 0.025rem → 0.0625rem (1px) for Input, Textarea, Select search - Add per-size font scaling for Input and Textarea (preserves size prop typography) - .text-sm → 0.75rem, .text-base → 0.875rem, .text-lg → 1rem
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Replace single font-size override with per-size scaling (.text-sm/.text-base/.text-lg) - Fix comment: 'reduced height & padding' → 'reduced height & border-radius'
Condensed mode now overrides ALL size variants to one uniform condensed size: - Input: 1.75rem height, 0.8125rem font (regardless of sm/md/lg) - Textarea: 2.25rem min-height, 0.8125rem font (regardless of sm/md/lg) - Select trigger: 1.75rem height, 0.8125rem font (regardless of sm/md/lg) This replaces per-size scaling with a single condensed target, ensuring maximum density and visual consistency. Size prop still works in default mode.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot='button' attribute - Single condensed size: 1.75rem height, 0.5rem padding, 0.8125rem font, 0.375rem radius - Icon-only variant: 1.75rem square
- Add data-slot attributes to Checkbox and CheckboxGroup components - Checkbox: checkbox-wrapper, checkbox-row, checkbox-indicator, checkbox, checkbox-label, checkbox-description, checkbox-error - CheckboxGroup: checkbox-group, checkbox-group-legend, checkbox-group-description, checkbox-group-items, checkbox-group-error - Add condensed CSS with single-size philosophy (0.875rem square checkbox) - Tighten gaps, reduce label/description/error font sizes
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Adjust estimatedDropdownHeight to use 28px per option in condensed mode (vs 40px default) to prevent unnecessary upward-opening when there is sufficient space below.
- Add data-slot attributes to Radio and RadioGroup components - Radio: radio-wrapper, radio-indicator, radio, radio-dot, radio-label, radio-description - RadioGroup: radio-group, radio-group-legend, radio-group-description, radio-group-items, radio-group-error - Add condensed CSS with single-size philosophy (0.875rem circle, 0.375rem dot) - Tighten gaps, reduce label/description/error font sizes
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot attributes: switch-wrapper, switch, switch-thumb, switch-label, switch-description - Add condensed CSS with single-size philosophy (1rem × 1.75rem track, 0.75rem thumb) - Adjusted thumb translation for condensed dimensions - Tighten gaps, reduce label/description font sizes
Use CSS 'translate' property instead of 'transform: translateX()' to prevent stacking with Tailwind 4's separate translate property from utility classes (e.g. translate-x-5). Set transform: none to clear the Tailwind-generated transform.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot attributes: address, address-card, address-card-title - Add condensed CSS: 0.75rem font, tighter card padding (0.5rem), smaller card title - Single condensed size collapses all size variants (sm/md/lg)
AdditionalFields: - Add data-slot: additional-fields, additional-fields-title, additional-fields-header, additional-fields-row, additional-fields-content - Condensed: 0.75rem title/header font, tighter row margins (0.25rem), reduced content gap and expanded margin Address (AddressCard): - Add data-slot: address-card-phone - Condensed: 0.75rem phone font, tighter margins
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot attributes (business-hours-editor, business-hours-day, business-hours-day-header, business-hours-day-name, business-hours-closed, business-hours-slots, business-hours-slot-row, business-hours-separator) - Add condensed CSS: tighter day spacing, smaller fonts, reduced padding - Fix condensed font-size scale globally: drop primary tier from 0.8125rem to 0.75rem for inputs/selects/textareas, 0.6875rem for buttons/labels (fixes bug where condensed button text was larger than standard text-xs)
- Add data-slot attributes to CSVColumnMapper, CSVColumnCard, and CSVFileUpload (csv-mapper, csv-mapper-actions, csv-mapper-alert, csv-mapper-alert-title, csv-mapper-alert-desc, csv-mapper-instructions, csv-mapper-grid, csv-mapper-footer, csv-mapper-progress, csv-card, csv-card-header, csv-card-title, csv-card-body, csv-card-label, csv-card-sample, csv-card-ignore) - Add condensed CSS: compact cards, tighter grid gap, smaller alert box, reduced status icon size, smaller section labels and sample values
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot attributes (claim-form-title, claim-form-provider, claim-form-provider-name, claim-form-provider-addr, claim-form-body, claim-form-error, claim-form-error-text, claim-form-section, claim-form-section-title, claim-form-grid, claim-form-terms, claim-form-terms-label, claim-form-terms-text, claim-form-actions) - Add condensed CSS: tighter form sections, smaller title/labels, compact provider info box, reduced grid gap, tighter terms/actions - CardHeader padding override via :has() selector for condensed mode
- Switch thumb: use transform:translateX() instead of standalone translate property to preserve transition-transform animation - Button icon-only: add data-size attr, use [data-size='icon'] selector instead of fragile .w-10 class match - AdditionalFields: replace ineffective gap on block layout with margin-bottom on children via > :not(:last-child)
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 14 out of 14 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Condensed density support for Form & Input components
Adds
data-slotattributes and condensed CSS overrides for form components: Input, Textarea, Select, Button, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, Address, AdditionalFields, BusinessHoursEditor, CSVColumnMapper, and ClaimProviderForm.Design Philosophy
Condensed mode uses a single uniform size — all
sizeprop variants (sm/md/lg) collapse to one condensed target. This ensures maximum information density and visual consistency. Thesizeprop continues to work normally in default mode.1.75rem2.25rem0.75rem(12px)0.6875rem(11px)0.375rem0.0625remtop/bottom0.6875rem0.6875rem0.25rem0.875remsquare/circle0.375rem1rem × 1.75rem0.75rem0.75rem0.75rem0.25remChanges
Input —
data-slot:input-wrapper,input-label,input,input-error,input-helperTextarea —
data-slot:textarea-wrapper,textarea-label,textarea,textarea-footer,textarea-error,textarea-helper,textarea-countSelect —
data-slot:select-wrapper,select-label,select-trigger,select-dropdown,select-search,select-listbox,select-option,select-group-label,select-error,select-helperButton —
data-slot:button,data-size: reflects size prop (sm/md/lg/icon)[data-size='icon']instead of.w-10for stabilityCheckbox —
data-slot:checkbox-wrapper,checkbox-row,checkbox-indicator,checkbox,checkbox-label,checkbox-description,checkbox-errorCheckboxGroup —
data-slot:checkbox-group,checkbox-group-legend,checkbox-group-description,checkbox-group-items,checkbox-group-errorRadio —
data-slot:radio-wrapper,radio-indicator,radio,radio-dot,radio-label,radio-descriptionRadioGroup —
data-slot:radio-group,radio-group-legend,radio-group-description,radio-group-items,radio-group-errorSwitch —
data-slot:switch-wrapper,switch,switch-thumb,switch-label,switch-descriptionAddress —
data-slot:address,address-card,address-card-title,address-card-phoneAdditionalFields —
data-slot:additional-fields,additional-fields-title,additional-fields-header,additional-fields-row,additional-fields-contentBusinessHoursEditor —
data-slot:business-hours-editor,business-hours-day,business-hours-day-header,business-hours-day-name,business-hours-closed,business-hours-slots,business-hours-slot-row,business-hours-separatorCSVColumnMapper —
data-slot:csv-mapper,csv-mapper-actions,csv-mapper-alert,csv-mapper-alert-title,csv-mapper-alert-desc,csv-mapper-instructions,csv-mapper-grid,csv-mapper-footer,csv-mapper-progress,csv-card,csv-card-header,csv-card-title,csv-card-body,csv-card-label,csv-card-sample,csv-card-ignoreClaimProviderForm —
data-slot:claim-form-title,claim-form-provider,claim-form-provider-name,claim-form-provider-addr,claim-form-body,claim-form-error,claim-form-error-text,claim-form-section,claim-form-section-title,claim-form-grid,claim-form-terms,claim-form-terms-label,claim-form-terms-text,claim-form-actions:has()Font-size scale fix
Reduced the condensed font-size scale across all components to ensure condensed text is always visibly smaller than standard mode:
0.8125rem→0.75rem(13px → 12px)0.8125rem→0.6875rem(13px → 11px) — fixes bug where condensed was larger than standardtext-xs0.75rem→0.6875rem(12px → 11px)Notes
!importantis required — Tailwind 4@layer utilitieslowers specificity below evenbody.condensed [data-slot='x']selectors (confirmed in PR feat: add condensed view for text & data display components #146)body.condensed— zero impact on default densitydefaultValueinstead ofvalueto resolve React controlled-component warningtransform: translateX(...)to preservetransition-transformanimation (standalonetranslateproperty would not animate withtransition-transform)[data-size='icon']instead of.w-10class match, preventing false positives on non-icon buttonsmargin-bottomon children instead ofgap(wrapper usesspace-y-*block layout, not flex/grid)