diff --git a/packages/core/src/components/EditableContent/EditableContent.tsx b/packages/core/src/components/EditableContent/EditableContent.tsx index 7197d1613..208700aad 100644 --- a/packages/core/src/components/EditableContent/EditableContent.tsx +++ b/packages/core/src/components/EditableContent/EditableContent.tsx @@ -5,6 +5,8 @@ import { FocusEventAttrProps, GlobalAttrProps, MouseEventAttrProps, + StyledOverloadCssProps, + StyledPolymorphicProps, } from '../../declarations'; import { StyledEditableContent } from './StyledEditableContent'; @@ -14,17 +16,20 @@ export interface EditableContentProps MouseEventAttrProps, FocusEventAttrProps, ContainerEventAttrProps, - FieldEventAttrProps { + FieldEventAttrProps, + StyledPolymorphicProps, + StyledOverloadCssProps { children?: React.ReactNode; } export const EditableContent: React.FC = React.forwardRef< HTMLDivElement, EditableContentProps ->(({ children, tooltip, ...nativeProps }, ref) => { +>(({ children, tooltip, styles, ...nativeProps }, ref) => { return ( , Pick, - MouseEventAttrProps { + MouseEventAttrProps, + StyledOverloadCssProps, + StyledPolymorphicProps { /** Children to be passed */ children: FieldChildrenProps; /** Field control predefined width for Input, Select… etc. */ @@ -73,6 +77,7 @@ export interface FieldProps } export const PartField: React.FC = ({ + as, children, disabled = false, controlWidth, @@ -88,6 +93,7 @@ export const PartField: React.FC = ({ role, size = 'md', status = 'base', + styles, tooltip, ...mouseEventAttrProps }) => { @@ -109,7 +115,13 @@ export const PartField: React.FC = ({ /> ); return ( - + {label && ( { children: React.ReactNode; } export const FieldContainer: React.FC = ({ + as, children, onClick, onMouseDown, @@ -27,6 +30,7 @@ export const FieldContainer: React.FC = ({ tooltip, }) => ( = ({ requiredMarkTooltip, size = 'md', status = 'base', + styles, tooltip, ...restNativeInputProps }) => ( @@ -59,6 +60,7 @@ export const Checkbox: React.FC = ({ requiredMarkTooltip={requiredMarkTooltip} size={size} status={status} + styles={styles} tooltip={tooltip} > = ({ requiredMarkTooltip, size = 'md', status = 'base', + styles, tooltip, value, }) => { @@ -89,6 +90,7 @@ export const ColorPicker: React.FC = ({ requiredMarkTooltip={requiredMarkTooltip} size={size} status={status} + styled={styles} tooltip={tooltip} > = ({ hideLabel, labelPosition, label, + styles, // Common id, size = 'md', @@ -103,6 +104,7 @@ export const FieldsCombiner: React.FC = ({ required={required} size={size} status={status} + styles={styles} tooltip={tooltip} > diff --git a/packages/form/src/components/Input/Input.tsx b/packages/form/src/components/Input/Input.tsx index 9372b9235..fcb04e3a0 100644 --- a/packages/form/src/components/Input/Input.tsx +++ b/packages/form/src/components/Input/Input.tsx @@ -39,6 +39,7 @@ export const Input: React.FC = ({ requiredMarkTooltip, size = 'md', status = 'base', + styles, tooltip, type = 'text', ...restNativeInputProps @@ -63,6 +64,7 @@ export const Input: React.FC = ({ requiredMarkTooltip={requiredMarkTooltip} size={size} status={status} + styles={styles} tooltip={tooltip} > = ({ requiredMarkTooltip, size = 'md', status = 'base', + styles, tooltip, ...restNativeInputProps }) => ( @@ -59,6 +60,7 @@ export const Radio: React.FC = ({ requiredMarkTooltip={requiredMarkTooltip} size={size} status={status} + styles={styles} tooltip={tooltip} > = ({ hideLabel, label, labelPosition = 'top', + styles, tooltip, // SELECT ---------------------------------- ...props @@ -59,6 +60,7 @@ export const Select: React.FC = ({ hideLabel={hideLabel} label={label} labelPosition={labelPosition} + styles={styles} tooltip={tooltip} > = ({ requiredMarkTooltip, size = 'md', status = 'base', + styles, tooltip, ...restSwitchControlProps }) => { @@ -53,6 +54,7 @@ export const Switch: React.FC = ({ requiredMarkTooltip={requiredMarkTooltip} size={size} status={status} + styles={styles} tooltip={tooltip} > = ({ requiredMarkTooltip, size = 'md', status = 'base', + styles, tooltip, ...restNativeTextareaProps }) => ( @@ -56,6 +57,7 @@ export const Textarea: React.FC = ({ requiredMarkTooltip={requiredMarkTooltip} size={size} status={status} + styles={styles} tooltip={tooltip} > = (props) => { requiredMarkTooltip, size = 'md', status = 'base', + styles, tooltip, // FilePondProps acceptedFileTypes, @@ -102,6 +103,7 @@ export const UploadFiles: React.FC = (props) => { requiredMarkTooltip={requiredMarkTooltip} size={size} status={status} + styles={styles} tooltip={tooltip} >