diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index e4ecf92..e9362d4 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -143,7 +143,7 @@ export function Dropdown({ ( @@ -96,12 +103,14 @@ export const Input = forwardRef( onMouseLeave, onClick, onKeyUp, - className, style, Icon, step, name, + inputClassName, type = "text", + min, + max, }, ref ) => { @@ -129,7 +138,7 @@ export const Input = forwardRef( className={classnames( ["input"], ["input-icon-input", !!Icon], - [className || ""] + [inputClassName || ""] )} style={style} {...attributes({ @@ -144,6 +153,8 @@ export const Input = forwardRef( onKeyUp={onKeyUp} type={type} step={step} + min={min} + max={max} /> diff --git a/src/components/InputGroup/InputGroup.tsx b/src/components/InputGroup/InputGroup.tsx index b798f3e..64d4357 100644 --- a/src/components/InputGroup/InputGroup.tsx +++ b/src/components/InputGroup/InputGroup.tsx @@ -11,6 +11,14 @@ export interface CustomStyleCSS extends CSSProperties { type Props = { label: string; + /** + * Apply a class to the input element + */ + inputClassName?: string; + + /** + * Apply a class to the parent element + */ className?: string; /** @@ -61,14 +69,28 @@ type Props = { * --codex-border-color */ style?: CustomStyleCSS; + + name?: string; + + /** + * Helper text to add indication about your input. + */ + helper?: string; + + min?: number; + + max?: number; }; export function InputGroup({ label, + name, + helper, type = "text", style, group, className, + inputClassName = "", onChange, onGroupChange, onMouseEnter, @@ -79,6 +101,8 @@ export function InputGroup({ step, value = undefined, groupValue = "", + min, + max, }: Props) { return (
@@ -86,13 +110,17 @@ export function InputGroup({
) : (
{group}
)} + {helper &&
}
diff --git a/src/components/InputGroup/inputGroup.css b/src/components/InputGroup/inputGroup.css index 076e8ec..462ee06 100644 --- a/src/components/InputGroup/inputGroup.css +++ b/src/components/InputGroup/inputGroup.css @@ -7,6 +7,11 @@ flex-grow: 1; } +.inputGroup-helper { + height: 15px; + display: inline-block; +} + input.inputGroup-input { border-top-right-radius: 0; border-bottom-right-radius: 0;