feat: css overlapping for form package components

DevoInc · Jul 5, 2023 · bb90400 · bb90400
1 parent f986506
commit bb90400
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 4 deletions.
diff --git 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<EditableContentProps> = React.forwardRef<
   HTMLDivElement,
   EditableContentProps
->(({ children, tooltip, ...nativeProps }, ref) => {
+>(({ children, tooltip, styles, ...nativeProps }, ref) => {
   return (
     <StyledEditableContent
       {...nativeProps}
+      css={styles}
       contentEditable
       ref={ref}
       title={tooltip}

diff --git a/packages/core/src/components/Field/Field.tsx b/packages/core/src/components/Field/Field.tsx
@@ -8,6 +8,8 @@ import {
   FieldStatus,
   GlobalAttrProps,
   MouseEventAttrProps,
+  StyledOverloadCssProps,
+  StyledPolymorphicProps,
 } from '../../declarations';
 import { LabelPosition } from './declarations';
 import {
@@ -47,7 +49,9 @@ export type FieldChildrenProps = React.ReactElement<{
 export interface FieldProps
   extends WithRequired<GlobalAttrProps, 'id'>,
     Pick<FieldAttrProps, 'disabled' | 'required'>,
-    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<FieldProps> = ({
+  as,
   children,
   disabled = false,
   controlWidth,
@@ -88,6 +93,7 @@ export const PartField: React.FC<FieldProps> = ({
   role,
   size = 'md',
   status = 'base',
+  styles,
   tooltip,
   ...mouseEventAttrProps
 }) => {
@@ -109,7 +115,13 @@ export const PartField: React.FC<FieldProps> = ({
     />
   );
   return (
-    <Field.Container {...mouseEventAttrProps} role={role} tooltip={tooltip}>
+    <Field.Container
+      {...mouseEventAttrProps}
+      as={as}
+      role={role}
+      styles={styles}
+      tooltip={tooltip}
+    >
       <Field.LabelDistributor direction={direction}>
         {label && (
           <Field.Label

diff --git a/packages/core/src/components/Field/components/FieldContainer.tsx b/packages/core/src/components/Field/components/FieldContainer.tsx
@@ -3,17 +3,20 @@ import {
   GlobalAttrProps,
   MouseEventAttrProps,
   StyledOverloadCssProps,
+  StyledPolymorphicProps,
 } from '../../../declarations';
 import { Flex } from '../../Flex';
 
 export interface FieldContainerProps
   extends MouseEventAttrProps,
     StyledOverloadCssProps,
+    StyledPolymorphicProps,
     Pick<GlobalAttrProps, 'tooltip' | 'role'> {
   children: React.ReactNode;
 }
 
 export const FieldContainer: React.FC<FieldContainerProps> = ({
+  as,
   children,
   onClick,
   onMouseDown,
@@ -27,6 +30,7 @@ export const FieldContainer: React.FC<FieldContainerProps> = ({
   tooltip,
 }) => (
   <Flex
+    as={as}
     onClick={onClick}
     onMouseDown={onMouseDown}
     onMouseLeave={onMouseLeave}

diff --git a/packages/form/src/components/Checkbox/Checkbox.tsx b/packages/form/src/components/Checkbox/Checkbox.tsx
@@ -36,6 +36,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   requiredMarkTooltip,
   size = 'md',
   status = 'base',
+  styles,
   tooltip,
   ...restNativeInputProps
 }) => (
@@ -59,6 +60,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
     requiredMarkTooltip={requiredMarkTooltip}
     size={size}
     status={status}
+    styles={styles}
     tooltip={tooltip}
   >
     <CheckboxControl

diff --git a/packages/form/src/components/ColorPicker/ColorPicker.tsx b/packages/form/src/components/ColorPicker/ColorPicker.tsx
@@ -46,6 +46,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   requiredMarkTooltip,
   size = 'md',
   status = 'base',
+  styles,
   tooltip,
   value,
 }) => {
@@ -89,6 +90,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
       requiredMarkTooltip={requiredMarkTooltip}
       size={size}
       status={status}
+      styled={styles}
       tooltip={tooltip}
     >
       <Popper

diff --git a/packages/form/src/components/FieldsCombiner/FieldsCombiner.tsx b/packages/form/src/components/FieldsCombiner/FieldsCombiner.tsx
@@ -59,6 +59,7 @@ export const FieldsCombiner: React.FC<FieldsCombinerProps> = ({
   hideLabel,
   labelPosition,
   label,
+  styles,
   // Common
   id,
   size = 'md',
@@ -103,6 +104,7 @@ export const FieldsCombiner: React.FC<FieldsCombinerProps> = ({
       required={required}
       size={size}
       status={status}
+      styles={styles}
       tooltip={tooltip}
     >
       <StyledFieldsCombinerWrapper>

diff --git 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<InputProps> = ({
   requiredMarkTooltip,
   size = 'md',
   status = 'base',
+  styles,
   tooltip,
   type = 'text',
   ...restNativeInputProps
@@ -63,6 +64,7 @@ export const Input: React.FC<InputProps> = ({
     requiredMarkTooltip={requiredMarkTooltip}
     size={size}
     status={status}
+    styles={styles}
     tooltip={tooltip}
   >
     <InputControl

diff --git a/packages/form/src/components/Radio/Radio.tsx b/packages/form/src/components/Radio/Radio.tsx
@@ -36,6 +36,7 @@ export const Radio: React.FC<RadioProps> = ({
   requiredMarkTooltip,
   size = 'md',
   status = 'base',
+  styles,
   tooltip,
   ...restNativeInputProps
 }) => (
@@ -59,6 +60,7 @@ export const Radio: React.FC<RadioProps> = ({
     requiredMarkTooltip={requiredMarkTooltip}
     size={size}
     status={status}
+    styles={styles}
     tooltip={tooltip}
   >
     <RadioControl

diff --git a/packages/form/src/components/Select/Select.tsx b/packages/form/src/components/Select/Select.tsx
@@ -39,6 +39,7 @@ export const Select: React.FC<SelectProps> = ({
   hideLabel,
   label,
   labelPosition = 'top',
+  styles,
   tooltip,
   // SELECT ----------------------------------
   ...props
@@ -59,6 +60,7 @@ export const Select: React.FC<SelectProps> = ({
     hideLabel={hideLabel}
     label={label}
     labelPosition={labelPosition}
+    styles={styles}
     tooltip={tooltip}
   >
     <SelectControl

diff --git a/packages/form/src/components/Switch/Switch.tsx b/packages/form/src/components/Switch/Switch.tsx
@@ -29,6 +29,7 @@ export const Switch: React.FC<SwitchProps> = ({
   requiredMarkTooltip,
   size = 'md',
   status = 'base',
+  styles,
   tooltip,
   ...restSwitchControlProps
 }) => {
@@ -53,6 +54,7 @@ export const Switch: React.FC<SwitchProps> = ({
       requiredMarkTooltip={requiredMarkTooltip}
       size={size}
       status={status}
+      styles={styles}
       tooltip={tooltip}
     >
       <SwitchControl

diff --git a/packages/form/src/components/Textarea/Textarea.tsx b/packages/form/src/components/Textarea/Textarea.tsx
@@ -34,6 +34,7 @@ export const Textarea: React.FC<TextareaProps> = ({
   requiredMarkTooltip,
   size = 'md',
   status = 'base',
+  styles,
   tooltip,
   ...restNativeTextareaProps
 }) => (
@@ -56,6 +57,7 @@ export const Textarea: React.FC<TextareaProps> = ({
     requiredMarkTooltip={requiredMarkTooltip}
     size={size}
     status={status}
+    styles={styles}
     tooltip={tooltip}
   >
     <TextareaControl

diff --git a/packages/form/src/components/UploadFiles/UploadFiles.tsx b/packages/form/src/components/UploadFiles/UploadFiles.tsx
@@ -59,6 +59,7 @@ export const UploadFiles: React.FC<UploadFilesProps> = (props) => {
     requiredMarkTooltip,
     size = 'md',
     status = 'base',
+    styles,
     tooltip,
     // FilePondProps
     acceptedFileTypes,
@@ -102,6 +103,7 @@ export const UploadFiles: React.FC<UploadFilesProps> = (props) => {
       requiredMarkTooltip={requiredMarkTooltip}
       size={size}
       status={status}
+      styles={styles}
       tooltip={tooltip}
     >
       <Box flex="1 1 100%">