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`
)
}