diff --git a/.changeset/fix-styles-extraction.md b/.changeset/fix-styles-extraction.md new file mode 100644 index 000000000..589de6eff --- /dev/null +++ b/.changeset/fix-styles-extraction.md @@ -0,0 +1,6 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Fixed `styles` prop leaking to inner elements in `TextInput` and `Switch` components + diff --git a/src/components/fields/NumberInput/NumberInput.tsx b/src/components/fields/NumberInput/NumberInput.tsx index 283f537bd..45e009208 100644 --- a/src/components/fields/NumberInput/NumberInput.tsx +++ b/src/components/fields/NumberInput/NumberInput.tsx @@ -22,7 +22,7 @@ export interface CubeNumberInputProps } const StyledTextInputBase = tasty(TextInputBase, { - styles: { + inputStyles: { textAlign: 'right', }, }); diff --git a/src/components/fields/Switch/Switch.tsx b/src/components/fields/Switch/Switch.tsx index 340adb319..8477da7d7 100644 --- a/src/components/fields/Switch/Switch.tsx +++ b/src/components/fields/Switch/Switch.tsx @@ -164,7 +164,9 @@ function Switch(props: WithNullableSelected, ref) { let styles = extractStyles(props, OUTER_STYLES); - inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles); + inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles, undefined, [ + 'styles', + ]); let { isFocused, focusProps } = useFocus({ isDisabled }, true); let { hoverProps, isHovered } = useHover({ isDisabled }); diff --git a/src/components/fields/TextInput/TextInputBase.tsx b/src/components/fields/TextInput/TextInputBase.tsx index 1b776f145..0bd4cc267 100644 --- a/src/components/fields/TextInput/TextInputBase.tsx +++ b/src/components/fields/TextInput/TextInputBase.tsx @@ -263,7 +263,13 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) { let styles = extractStyles(otherProps, OUTER_STYLES); let type = otherProps.type; - inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles); + inputStyles = extractStyles( + otherProps, + INPUT_STYLE_PROPS_LIST, + inputStyles, + undefined, + ['styles'], + ); let ElementType: 'textarea' | 'input' = multiLine ? 'textarea' : 'input'; let { isFocused, focusProps } = useFocus({ isDisabled }); diff --git a/src/tasty/utils/styles.ts b/src/tasty/utils/styles.ts index aee216d97..c40254027 100644 --- a/src/tasty/utils/styles.ts +++ b/src/tasty/utils/styles.ts @@ -373,7 +373,7 @@ export function extractStyles( ): Styles { const styles: Styles = { ...defaultStyles, - ...props.styles, + ...(ignoreList.includes('styles') ? undefined : props.styles), }; Object.keys(props).forEach((prop) => {