diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js index 761f0bbfd1..58791bbbb7 100644 --- a/components/atom/input/demo/index.js +++ b/components/atom/input/demo/index.js @@ -463,6 +463,27 @@ const BorderlessDemo = () => { ) } +const LabelDemo = () => { + return ( +
+

Label

+ + Input can be used with a label using the label prop. + + + + + + + + + + + +
+ ) +} + const StateDemo = () => { return (
@@ -603,6 +624,7 @@ const Demo = () => (

+
diff --git a/components/atom/input/src/Input/Component/index.js b/components/atom/input/src/Input/Component/index.js index 13539f485f..5b1cd23f6d 100644 --- a/components/atom/input/src/Input/Component/index.js +++ b/components/atom/input/src/Input/Component/index.js @@ -33,6 +33,8 @@ const Input = forwardRef( state, type, value, + leftLabel, + rightLabel, charsSize, tabIndex, ariaLabel, @@ -88,7 +90,9 @@ const Input = forwardRef( readOnly, errorState, state, - shape + shape, + leftLabel, + rightLabel }) return ( @@ -204,6 +208,10 @@ Input.propTypes = { inputMode: PropTypes.string, /** Sets the shape of the input field. It can be 'rounded', 'square' or 'circle' */ shape: PropTypes.oneOf(Object.values(INPUT_SHAPES)), + /** Text to be rendered inside the component */ + leftLabel: PropTypes.string, + /** Text to be rendered inside the component */ + rightLabel: PropTypes.string, /** Nodes to be rendered inside the component */ children: PropTypes.node } diff --git a/components/atom/input/src/Input/Component/index.scss b/components/atom/input/src/Input/Component/index.scss index 17bfbf0236..79a9da2ef9 100644 --- a/components/atom/input/src/Input/Component/index.scss +++ b/components/atom/input/src/Input/Component/index.scss @@ -14,6 +14,14 @@ $class-read-only: '#{$base-class-input}--readOnly'; width: inherit; } + &-right-label { + border-right: none; + } + + &-left-label { + border-left: none; + } + &--hidden { display: none; } diff --git a/components/atom/input/src/Input/Wrappers/Addons/InputAddons.js b/components/atom/input/src/Input/Wrappers/Addons/InputAddons.js index af4999be14..a5be82b6e3 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/InputAddons.js +++ b/components/atom/input/src/Input/Wrappers/Addons/InputAddons.js @@ -4,8 +4,16 @@ import PropTypes from 'prop-types' import {INPUT_SHAPES, SIZES} from '../../../config.js' import {ADDON_TYPES, BASE_CLASS_ADDON_WRAPPER, getClassName} from './config.js' -const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => { - if (!(leftAddon || rightAddon)) { +const InputAddon = ({ + leftAddon, + rightAddon, + rightLabel, + leftLabel, + shape, + size, + children +}) => { + if (!(leftAddon || rightAddon || rightLabel || leftLabel)) { return children } return ( @@ -13,9 +21,16 @@ const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => { className={cx( BASE_CLASS_ADDON_WRAPPER, shape && `${BASE_CLASS_ADDON_WRAPPER}-shape-${shape}`, - size && `${BASE_CLASS_ADDON_WRAPPER}-size-${size}` + size && `${BASE_CLASS_ADDON_WRAPPER}-size-${size}`, + rightLabel && `${BASE_CLASS_ADDON_WRAPPER}-right-label`, + leftLabel && `${BASE_CLASS_ADDON_WRAPPER}-left-label` )} > + {leftLabel && ( + + {leftLabel} + + )} {leftAddon && ( {leftAddon} @@ -27,6 +42,11 @@ const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => { {rightAddon} )} + {rightLabel && ( + + {rightLabel} + + )} ) } @@ -36,8 +56,12 @@ InputAddon.propTypes = { children: PropTypes.node, /* Left addon component, text,... */ leftAddon: PropTypes.any, + /* Left label component, text,... */ + leftLabel: PropTypes.any, /* Right addon component, text,... */ rightAddon: PropTypes.any, + /* Right label component, text,... */ + rightLabel: PropTypes.any, /** Sets the shape of the input field. It can be 'rounded', 'square' or 'circle' */ shape: PropTypes.oneOf(Object.values(INPUT_SHAPES)), /* 'Sets the size of the inputAddon */ diff --git a/components/atom/input/src/Input/Wrappers/Addons/config.js b/components/atom/input/src/Input/Wrappers/Addons/config.js index f561c5393b..703b3f5d2b 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/config.js +++ b/components/atom/input/src/Input/Wrappers/Addons/config.js @@ -6,7 +6,9 @@ export const BASE_CLASS_ADDON = `${BASE}--withAddon` export const BASE_CLASS_ADDON_WRAPPER = `${BASE_CLASS_ADDON}Wrapper` export const ADDON_TYPES = { LEFT: 'left', - RIGHT: 'right' + RIGHT: 'right', + RIGHT_LABEL: 'rightLabel', + LEFT_LABEL: 'leftLabel' } export const getClassName = ({type}) => diff --git a/components/atom/input/src/Input/Wrappers/Addons/index.scss b/components/atom/input/src/Input/Wrappers/Addons/index.scss index e66319f7d0..211b85b63d 100644 --- a/components/atom/input/src/Input/Wrappers/Addons/index.scss +++ b/components/atom/input/src/Input/Wrappers/Addons/index.scss @@ -20,6 +20,16 @@ border-width: $bdw-atom-input-addon-left; } + &--rightLabel { + border-width: $bdw-atom-input-addon-right; + background: none; + } + + &--leftLabel { + background: none; + border-width: $bdw-atom-input-addon-left; + } + &Wrapper { display: flex; @include atom-input-shape-wrapper( diff --git a/components/atom/input/src/Input/index.js b/components/atom/input/src/Input/index.js index 1bdf066e20..0e0702d4da 100644 --- a/components/atom/input/src/Input/index.js +++ b/components/atom/input/src/Input/index.js @@ -12,13 +12,15 @@ const BaseInput = forwardRef( ( { button, + children, leftAddon, - rightAddon, leftIcon, - rightIcon, - children, + leftLabel, onClickLeftIcon, onClickRightIcon, + rightAddon, + rightIcon, + rightLabel, size = SIZES.MEDIUM, ...inputProps }, @@ -31,6 +33,8 @@ const BaseInput = forwardRef( rightAddon={rightAddon} shape={inputProps.shape} size={size} + rightLabel={rightLabel} + leftLabel={leftLabel} > - + {children} @@ -57,10 +67,14 @@ BaseInput.propTypes = { leftAddon: PropTypes.any, /* Right addon component, text,... */ rightAddon: PropTypes.any, + /* Right label component, text,... */ + rightLabel: PropTypes.string, /* Left icon component */ leftIcon: PropTypes.node, /* Left icon component */ rightIcon: PropTypes.node, + /* Left label component, text,... */ + leftLabel: PropTypes.string, /* Left icon click callback */ onClickLeftIcon: PropTypes.func, /* Right icon click callback */ diff --git a/components/atom/input/src/config.js b/components/atom/input/src/config.js index e8c731416f..196b9b2abe 100644 --- a/components/atom/input/src/config.js +++ b/components/atom/input/src/config.js @@ -49,6 +49,8 @@ export const getClassNames = ({ size, charsSize, hideInput, + rightLabel, + leftLabel, noBorder, readOnly, errorState, @@ -65,6 +67,8 @@ export const getClassNames = ({ errorState && `${BASE_CLASS}--${INPUT_STATES.ERROR}`, errorState === false && `${BASE_CLASS}--${INPUT_STATES.SUCCESS}`, state && `${BASE_CLASS}--${state}`, - shape && `${BASE_CLASS}-shape-${shape}` + shape && `${BASE_CLASS}-shape-${shape}`, + rightLabel && `${BASE_CLASS}-right-label`, + leftLabel && `${BASE_CLASS}-left-label` ) }