chore(html): arrange input helpers for prefix/suffix support

telerik · Jan 2, 2024 · 426f291 · 426f291
1 parent 5b047d0
commit 426f291
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 10 deletions.
diff --git a/packages/html/src/input/index.ts b/packages/html/src/input/index.ts
@@ -8,4 +8,6 @@ export * from './input-loading-icon';
 export * from './input-validation-icon';
 export * from './input-prefix';
 export * from './input-suffix';
+export * from './input-prefix-text';
+export * from './input-suffix-text';
 export * from './input-separator';
diff --git a/packages/html/src/input/input-prefix-text.tsx b/packages/html/src/input/input-prefix-text.tsx
@@ -0,0 +1,22 @@
+import { classNames } from '../misc';
+
+const className = `k-input-prefix-text`;
+
+export const InputPrefixText = (props: React.HTMLAttributes<HTMLSpanElement>) => {
+
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <span
+            {...other}
+            className={classNames(
+                className,
+                props.className
+            )}>
+            {children}
+        </span>
+    );
+};
diff --git a/packages/html/src/input/input-prefix.tsx b/packages/html/src/input/input-prefix.tsx
@@ -2,14 +2,38 @@ import { classNames } from '../misc';
 
 const className = `k-input-prefix`;
 
-export const InputPrefix = (props: React.HTMLAttributes<HTMLSpanElement>) => {
+export type KendoInputPrefixProps = {
+    direction?: "horizontal" | "vertical";
+};
+
+const defaultProps = {
+    direction: "horizontal"
+};
+
+export const InputPrefix = (props:
+    KendoInputPrefixProps &
+    React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        direction = defaultProps.direction,
+        ...other
+    } = props;
 
     if (!props.children) {
         return <></>;
     }
 
     return (
-        <span className={classNames(className, props.className)}>
+        <span
+            {...other}
+            className={
+                classNames(
+                    className,
+                    props.className,
+                    {
+                        [`k-input-prefix-${direction}`]: direction,
+                    }
+                )}>
             {props.children}
         </span>
     );

diff --git a/packages/html/src/input/input-separator.tsx b/packages/html/src/input/input-separator.tsx
@@ -2,8 +2,34 @@ import { classNames } from '../misc';
 
 const className = `k-input-separator`;
 
-export const InputSeparator = (props: React.HTMLAttributes<HTMLSpanElement>) => (
-    <span
-        className={classNames(className, props.className)}
-    />
-);
+export type InputSeparatorProps = {
+    direction?: "horizontal" | "vertical";
+};
+
+const defaultProps = {
+    direction: "vertical"
+};
+
+export const InputSeparator = (props:
+    React.HTMLAttributes<HTMLSpanElement> &
+    InputSeparatorProps
+) => {
+    const {
+        direction = defaultProps.direction,
+        ...other
+    } = props;
+
+
+    return (
+        <span
+            {...other}
+            className={classNames(
+                className,
+                props.className,
+                {
+                    [`${className}-${direction}`]: direction,
+                }
+            )}
+        />
+    );
+};
diff --git a/packages/html/src/input/input-suffix-text.tsx b/packages/html/src/input/input-suffix-text.tsx
@@ -0,0 +1,22 @@
+import { classNames } from '../misc';
+
+const className = `k-input-suffix-text`;
+
+export const InputSuffixText = (props: React.HTMLAttributes<HTMLSpanElement>) => {
+
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <span
+            {...other}
+            className={classNames(
+                className,
+                props.className
+            )}>
+            {children}
+        </span>
+    );
+};
diff --git a/packages/html/src/input/input-suffix.tsx b/packages/html/src/input/input-suffix.tsx
@@ -2,14 +2,38 @@ import { classNames } from '../misc';
 
 const className = `k-input-suffix`;
 
-export const InputSuffix = (props: React.HTMLAttributes<HTMLSpanElement>) => {
+export type KendoInputSuffixProps = {
+    direction?: "horizontal" | "vertical";
+};
+
+const defaultProps = {
+    direction: "horizontal"
+};
+
+export const InputSuffix = (props:
+    KendoInputSuffixProps &
+    React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        direction = defaultProps.direction,
+        ...other
+    } = props;
 
     if (!props.children) {
         return <></>;
     }
 
     return (
-        <span className={classNames(className, props.className)}>
+        <span
+            {...other}
+            className={
+                classNames(
+                    className,
+                    props.className,
+                    {
+                        [`k-input-suffix-${direction}`]: direction,
+                    }
+                )}>
             {props.children}
         </span>
     );

diff --git a/packages/html/src/input/input-validation-icon.tsx b/packages/html/src/input/input-validation-icon.tsx
@@ -24,7 +24,7 @@ export const InputValidationIcon = (
         disabled,
         loading } = props;
 
-    const iconName = invalid ? 'exclamation-circle' : 'check';
+    const iconName = invalid ? 'warning-circle' : 'check-circle';
     const renderValidationIcon = Boolean( valid || invalid );
 
     if (disabled || loading || !renderValidationIcon) {