@ews-admin/global-design-system 1.1.7 → 1.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Input/Input.d.ts +4 -0
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Input/Input.tsx +10 -4
package/package.json
CHANGED
|
@@ -40,6 +40,10 @@ export interface InputProps
|
|
|
40
40
|
* Whether to show password toggle for password inputs
|
|
41
41
|
*/
|
|
42
42
|
showPasswordToggle?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Whether the input is required (shows red asterisk)
|
|
45
|
+
*/
|
|
46
|
+
required?: boolean;
|
|
43
47
|
}
|
|
44
48
|
|
|
45
49
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
@@ -55,6 +59,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
|
55
59
|
rightIcon,
|
|
56
60
|
fullWidth = false,
|
|
57
61
|
showPasswordToggle = false,
|
|
62
|
+
required = false,
|
|
58
63
|
id,
|
|
59
64
|
type = "text",
|
|
60
65
|
...props
|
|
@@ -102,11 +107,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
|
102
107
|
className="block text-sm font-medium text-ews-gray-700"
|
|
103
108
|
>
|
|
104
109
|
{label}
|
|
110
|
+
{required && <span className="ml-1 text-ews-error">*</span>}
|
|
105
111
|
</label>
|
|
106
112
|
)}
|
|
107
113
|
<div className="relative">
|
|
108
114
|
{leftIcon && (
|
|
109
|
-
<div className="absolute inset-y-0 left-0 pl-3
|
|
115
|
+
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
|
110
116
|
<span className={cn("text-ews-gray-400", iconSizes[size])}>
|
|
111
117
|
{leftIcon}
|
|
112
118
|
</span>
|
|
@@ -127,7 +133,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
|
127
133
|
{...props}
|
|
128
134
|
/>
|
|
129
135
|
{rightIcon && !shouldShowPasswordToggle && (
|
|
130
|
-
<div className="absolute inset-y-0 right-0 pr-3
|
|
136
|
+
<div className="flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none">
|
|
131
137
|
<span className={cn("text-ews-gray-400", iconSizes[size])}>
|
|
132
138
|
{rightIcon}
|
|
133
139
|
</span>
|
|
@@ -136,13 +142,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
|
136
142
|
{shouldShowPasswordToggle && (
|
|
137
143
|
<button
|
|
138
144
|
type="button"
|
|
139
|
-
className="absolute inset-y-0 right-0 pr-3
|
|
145
|
+
className="flex absolute inset-y-0 right-0 items-center pr-3"
|
|
140
146
|
onClick={() => setShowPassword(!showPassword)}
|
|
141
147
|
tabIndex={-1}
|
|
142
148
|
>
|
|
143
149
|
<span
|
|
144
150
|
className={cn(
|
|
145
|
-
"text-ews-gray-400 hover:text-ews-gray-600
|
|
151
|
+
"transition-colors text-ews-gray-400 hover:text-ews-gray-600",
|
|
146
152
|
iconSizes[size]
|
|
147
153
|
)}
|
|
148
154
|
>
|