fix: various props in field components

[tenphi]

Note

Unifies field/label props handling across field components and adds onOpenChange to Picker/FilterPicker/ComboBox/Select, removing deprecated wrapperStyles.

• Form/Wrapper
  • Centralize merging of fieldProps, fieldStyles, labelProps, labelStyles in wrapWithField (shorthand styles take priority); FieldWrapper applies merged fieldProps.
• Fields (wide refactor)
  • Update components (e.g., Checkbox, CheckboxGroup, RadioGroup, TextInputBase, FileInput, Date* inputs/pickers, SliderBase, Switch, ListBox, FilterListBox, FilterPicker, Picker, ComboBox, Select) to rely on unified field/label prop handling and remove redundant styles forwarding to the field wrapper.
  • BREAKING: remove wrapperStyles in TextInputBase and Select (use styles on root instead).
• Selection components
  • Add onOpenChange?: (isOpen: boolean) => void to Picker, FilterPicker, ComboBox, Select; invoke on popover state changes.
• Docs & stories
  • Add src/components/fields/README.md overview.
  • Update Slider.stories.tsx to use fieldStyles for width.

^{Written by Cursor Bugbot for commit 9f2d96d. This will update automatically on new commits. Configure here.}

[changeset-bot]

🦋 Changeset detected

Latest commit: 9f2d96d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cube-dev/ui-kit	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
cube-ui-kit	Ready	Preview	Comment	Nov 21, 2025 3:50pm
cube-ui-kit-cursor	Ready	Preview	Comment	Nov 21, 2025 3:50pm

[github-actions]

📦 NPM canary release

Deployed canary version 0.0.0-canary-e64c14a.

[github-actions]

🏋️ Size limit report

Name	Size	Passed?
All	297.51 KB (+0.01% 🔺)	Yes 🎉
Tree shaking (just a Button)	33.41 KB (0% 🟰)	Yes 🎉
Tree shaking (just an Icon)	20.68 KB (0% 🟰)	Yes 🎉

---

Click here if you want to find out what is changed in this build

[github-actions]

🧪 Storybook is successfully deployed!

• 👀 Review changes: https://www.chromatic.com/build?appId=626ee6db91d1c8004a912249&number=2541
• 👨‍🎨 Preview storybook: https://626ee6db91d1c8004a912249-htiolypwlq.chromatic.com/

[cursor]

Bug: Destructured label/field styles lost in spread

The component destructures labelStyles from props earlier (line 153), then passes ...props to wrapWithField without explicitly including labelStyles. Since destructuring removes the property from the spread, labelStyles is lost and won't be applied to the field. The same pattern affects other components like Checkbox, RadioGroup, DateInput, and others that destructure labelStyles or fieldStyles then spread props without reincluding them.

src/components/fields/Switch/Switch.tsx#L215-L226

cube-ui-kit/src/components/fields/Switch/Switch.tsx

Lines 215 to 226 in c1e9edd

	return wrapWithField(switchField, domRef, {
	...props,
	id,
	labelProps: {
	...props.labelProps,
	for: id,
	},
	children: null,
	inputStyles,
	});
	}

 

---

Bug: Destructured label/field styles lost in spread

The component destructures labelStyles from props (line 278), then passes ...props to wrapWithField without explicitly including labelStyles. Since destructuring removes the property from the spread, labelStyles is lost. The old code explicitly passed styles: labelStyles to compensate; removing this without adjusting destructuring causes styling to be lost.

src/components/fields/Select/Select.tsx#L490-L501

cube-ui-kit/src/components/fields/Select/Select.tsx

Lines 490 to 501 in c1e9edd

	return wrapWithField<Omit<CubeSelectProps<T>, 'children'>>(
	selectField,
	ref,
	mergeProps(
	{
	...props,
	},
	{ labelProps },
	),
	);
	}

 

---

Bug: Destructured label/field styles lost in spread

The old code explicitly passed labelStyles and styles to wrapWithField despite them being destructured from props. The new code removes these explicit passes, relying on ...props to include them. However, destructuring removes these properties from the remaining spread, causing them to be lost. Components that extract labelStyles and fieldStyles must either avoid destructuring them or explicitly repass them.

src/components/fields/Checkbox/Checkbox.tsx#L251-L257

cube-ui-kit/src/components/fields/Checkbox/Checkbox.tsx

Lines 251 to 257 in c1e9edd

	if (!groupState) {
	return wrapWithField(checkboxField, domRef, {
	...props,
	children: null,
	inputStyles,
	});
	}

 

---

Bug: Destructured label/field styles lost in spread

The component destructures styles from props and applies it to RadioGroupElement. When passing to wrapWithField, the old code explicitly passed styles: props.fieldStyles. The new code removes this, but props.fieldStyles would still need to be explicitly passed to survive destructuring of the original styles variable. Using ...props alone loses destructured properties.

src/components/fields/RadioGroup/RadioGroup.tsx#L160-L167

cube-ui-kit/src/components/fields/RadioGroup/RadioGroup.tsx

Lines 160 to 167 in c1e9edd

	return wrapWithField(radioGroup, domRef, {
	...props,
	children: null,
	fieldProps,
	labelProps: mergeProps(baseLabelProps, labelProps),
	});
	}

 

---

[cursor]

Bug: Field wrapper element loses styling from extracted props

The wrapWithField function no longer receives or passes the styles prop to FieldWrapper, causing the field wrapper element to lose styling. Field components previously passed extracted styles from extractStyles() to wrapWithField, which passed them to FieldWrapper.styles. Removing styles from the WrapWithFieldProps interface and not extracting it breaks the styling pipeline for the field wrapper container element.