fix props name with camel case (#170)

platformbuilders · Feb 2, 2024 · 18c8a74 · 18c8a74
1 parent 590f654
commit 18c8a74
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/fluid-react",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": false,
   "description": "Builders React for Fluid Design System",
   "keywords": [

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -10,7 +10,7 @@ const Button: FC<ButtonProps> = ({
   accessibility,
   disabled = false,
   loading = false,
-  fullWidth = false,
+  $fullWidth = false,
   variant = 'filled',
   typographyVariant = 'md',
   leftIconName,
@@ -21,26 +21,28 @@ const Button: FC<ButtonProps> = ({
 }) => {
   const LeftIcon = leftIconName ? Icons[leftIconName] : undefined;
   const RightIcon = rightIconName ? Icons[rightIconName] : undefined;
+  const contentWrapperProps = {
+    variant,
+    size,
+    $fullWidth,
+  };
+  const touchableProps = {
+    accessibility,
+    disabled: loading || disabled,
+    variant,
+    onPress,
+    colorVariant,
+    size,
+  };
 
   return (
-    <Touchable
-      id={id || accessibility}
-      accessibility={accessibility}
-      disabled={loading || disabled}
-      onPress={onPress}
-      variant={variant}
-      colorVariant={colorVariant}
-      size={size}
-      {...rest}
-    >
+    <Touchable id={id || accessibility} {...touchableProps} {...rest}>
       {loading ? (
         <Loading />
       ) : (
         <ContentWrapper
           accessibility="container button"
-          variant={variant}
-          size={size}
-          fullWidth={fullWidth}
+          {...contentWrapperProps}
         >
           {LeftIcon ? <LeftIcon /> : null}
           <TextButton className="text-button" variant={typographyVariant}>

diff --git a/src/components/Button/styles.tsx b/src/components/Button/styles.tsx
@@ -104,7 +104,7 @@ export const Touchable = styled(TouchableComponent)<ButtonWrapperProps>`
   border: none;
   ${getStylesButton}
   ${({ size }) => !!size && sizeButton[size]}
-  width: ${({ fullWidth }) => (!!fullWidth ? '100%' : undefined)};
+  width: ${({ $fullWidth }) => (!!$fullWidth ? '100%' : undefined)};
   padding: ${spacingSm}px;
   cursor: ${isDisabled('not-allowed', 'pointer')};
   flex-direction: row;

diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
@@ -10,7 +10,7 @@ export type ButtonProps = {
   style?: any;
   type?: 'button' | 'submit' | 'reset';
   loading?: boolean;
-  fullWidth?: boolean;
+  $fullWidth?: boolean;
   variant?: ButtonVariants;
   typographyVariant?: TypographyVariants;
   children?: string | ReactNode;

diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -24,23 +24,23 @@ type IconsType = keyof typeof Icons;
 type InputMaskProps = ReactElementProps<any> & {
   inputRef: Ref<any>;
   hasError?: boolean;
-  hasIconLeft?: boolean;
-  hasIconRight?: boolean;
+  $hasIconLeft?: boolean;
+  $hasIconRight?: boolean;
 };
 
 const InputMask = IMaskMixin(
   ({
     inputRef,
     hasError,
-    hasIconRight,
-    hasIconLeft,
+    $hasIconRight,
+    $hasIconLeft,
     ...props
   }: InputMaskProps) => (
     <Input
       {...props}
       $hasError={!!hasError}
-      hasIconLeft={!!hasIconLeft}
-      hasIconRight={!!hasIconRight}
+      $hasIconLeft={!!$hasIconLeft}
+      $hasIconRight={!!$hasIconRight}
       ref={inputRef as RefObject<HTMLInputElement> | undefined}
     />
   ),
@@ -133,8 +133,8 @@ const TextInput: FC<TextInputType> = ({
           onAccept={onAccept}
           autoFocus={autoFocus}
           hasError={hasError}
-          hasIconLeft={!!iconLeft}
-          hasIconRight={!!iconRight}
+          $hasIconLeft={!!iconLeft}
+          $hasIconRight={!!iconRight}
           defaultValue={value}
           {...rest}
         />
@@ -151,8 +151,8 @@ const TextInput: FC<TextInputType> = ({
           maxLength={maxLength}
           autoFocus={autoFocus}
           $hasError={hasError}
-          hasIconLeft={!!iconLeft}
-          hasIconRight={!!iconRight}
+          $hasIconLeft={!!iconLeft}
+          $hasIconRight={!!iconRight}
           {...rest}
         />
       )}
@@ -166,8 +166,8 @@ const TextInput: FC<TextInputType> = ({
       )}
       <PlaceholderLabel
         className="text-input-label"
-        hasIconLeft={!!iconLeft}
-        hasIconRight={!!iconRight}
+        $hasIconLeft={!!iconLeft}
+        $hasIconRight={!!iconRight}
         $hasError={hasError}
         $hasValue={hasValue}
       >

diff --git a/src/components/TextInput/styles.tsx b/src/components/TextInput/styles.tsx
@@ -2,8 +2,8 @@ import styled from 'styled-components';
 import { getTheme, ifStyle, pxToRem } from '@platformbuilders/theme-toolkit';
 
 type HasIcon = {
-  hasIconLeft?: boolean;
-  hasIconRight?: boolean;
+  $hasIconLeft?: boolean;
+  $hasIconRight?: boolean;
 };
 
 type PlaceholderLabelProps = {
@@ -38,7 +38,7 @@ export const PlaceholderLabel = styled.span<PlaceholderLabelProps>`
   left: ${pxToRem(14)};
   line-height: 147.6%;
   transition: top 0.2s;
-  ${({ hasIconLeft }) => !!hasIconLeft && `left: ${pxToRem(36)};`}
+  ${({ $hasIconLeft }) => !!$hasIconLeft && `left: ${pxToRem(36)};`}
   ${(props) =>
     props.$hasValue && `top: 0; font-size: ${fontSizeMd}; margin-bottom: 40px;`}
 
@@ -53,8 +53,8 @@ export const Input = styled.input<InputProps>`
   display: flex;
   height: ${pxToRem(44)};
   padding: ${spacingXs}px ${spacingSm}px ${spacingXs}px ${spacingMd}px;
-  ${({ hasIconRight }) => !!hasIconRight && `padding-right: ${pxToRem(36)};`}
-  ${({ hasIconLeft }) => !!hasIconLeft && `padding-left: ${pxToRem(36)};`}
+  ${({ $hasIconRight }) => !!$hasIconRight && `padding-right: ${pxToRem(36)};`}
+  ${({ $hasIconLeft }) => !!$hasIconLeft && `padding-left: ${pxToRem(36)};`}
   align-items: center;
   gap: ${pxToRem(12)};
   background: ${(props) =>