🔍 Feature/scmi 106973/right addon no borders

components/atom/input/demo/index.js

@@ -463,6 +463,27 @@ const BorderlessDemo = () => {
   )
 }
 
+const LabelDemo = () => {
+  return (
+    <Article>
+      <H2>Label</H2>
+      <Paragraph>
+        Input can be used with a label using the <Code>label</Code> prop.
+      </Paragraph>
+      <Grid cols={2} gutter={[8, 8]}>
+        <Cell>
+          <Label>Right Label</Label>
+          <AtomInput rightLabel="m2" />
+        </Cell>
+        <Cell>
+          <Label>Left Label</Label>
+          <AtomInput leftLabel="m2" />
+        </Cell>
+      </Grid>
+    </Article>
+  )
+}
+
 const StateDemo = () => {
   return (
     <Article>
@@ -603,6 +624,7 @@ const Demo = () => (
       <br />
       <SizeDemo />
       <br />
+      <LabelDemo />
       <DisabledReadOnlyDemo />
       <br />
       <AddonAndIconDemo />

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
 }

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;
   }

components/atom/input/src/Input/Wrappers/Addons/InputAddons.js

@@ -4,18 +4,33 @@ 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 (
     <div
       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 && (
+        <span className={getClassName({type: ADDON_TYPES.LEFT_LABEL, shape})}>
+          {leftLabel}
+        </span>
+      )}
       {leftAddon && (
         <span className={getClassName({type: ADDON_TYPES.LEFT, shape})}>
           {leftAddon}
@@ -27,6 +42,11 @@ const InputAddon = ({leftAddon, rightAddon, shape, size, children}) => {
           {rightAddon}
         </span>
       )}
+      {rightLabel && (
+        <span className={getClassName({type: ADDON_TYPES.RIGHT_LABEL, shape})}>
+          {rightLabel}
+        </span>
+      )}
     </div>
   )
 }
@@ -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 */

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

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(

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,14 +33,22 @@ const BaseInput = forwardRef(
           rightAddon={rightAddon}
           shape={inputProps.shape}
           size={size}
+          rightLabel={rightLabel}
+          leftLabel={leftLabel}
         >
           <InputIcons
             leftIcon={leftIcon}
             rightIcon={rightIcon}
             onClickLeftIcon={onClickLeftIcon}
             onClickRightIcon={onClickRightIcon}
           >
-            <Input ref={forwardedRef} {...inputProps} size={size}>
+            <Input
+              ref={forwardedRef}
+              {...inputProps}
+              rightLabel={rightLabel}
+              leftLabel={leftLabel}
+              size={size}
+            >
               {children}
             </Input>
           </InputIcons>
@@ -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 */

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