Support for unit in TextField

libraries/core-react/src/components/Input/Input.tokens.ts

@@ -42,6 +42,7 @@ type InputProps = {
   background: string
   typography: Typography
   placeholderColor: string
+  disabledColor: string
   spacings: {
     comfortable: Spacing
     compact: Spacing
@@ -59,6 +60,7 @@ export const input: InputProps = {
     color: colors.text.static_icons__default.hex,
   },
   placeholderColor: colors.text.static_icons__tertiary.hex,
+  disabledColor: colors.interactive.disabled__text.hex,
   spacings,
   default: {
     border: {

libraries/core-react/src/components/Input/Input.tsx

@@ -3,35 +3,50 @@ import { ElementType, InputHTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { InputVariantProps, input as tokens } from './Input.tokens'
 import { typographyTemplate, spacingsTemplate } from '@utils'
+import { InputWithAdornments } from '../TextField/InputWrapper'
 import type { Variants } from '../TextField/types'
 import type { Spacing } from '@equinor/eds-tokens'
 
-const Variation = ({ variant }: { variant: InputVariantProps }) => {
+const Variation = ({
+  variant,
+  token,
+}: {
+  variant: string
+  token: InputVariantProps
+}) => {
   if (!variant) {
     return ``
   }
 
   const {
     focus: { border: focusBorderOutline },
     border: { outline: borderOutline, bottom: borderBottom },
-  } = variant
+  } = token
 
   return css`
     border: none;
     outline: ${borderOutline.width} solid ${borderOutline.color};
     box-shadow: inset 0 -${borderBottom.width} 0 0 ${borderBottom.color};
+    ${InputWithAdornments} & {
+      outline: none;
+    }
     &:active,
     &:focus {
       outline-offset: 0;
       box-shadow: none;
       outline: ${focusBorderOutline.width} solid ${focusBorderOutline.color};
     }
 
+    ${InputWithAdornments} &:active,
+    ${InputWithAdornments} &:focus {
+      outline: none;
+      box-shadow: none;
+    }
+
     &:disabled {
       cursor: not-allowed;
       box-shadow: none;
       outline: none;
-
       &:focus,
       &:active {
         outline: none;
@@ -42,7 +57,8 @@ const Variation = ({ variant }: { variant: InputVariantProps }) => {
 
 type StyledProps = {
   spacings: Spacing
-  variant: InputVariantProps
+  token: InputVariantProps
+  variant: string
 }
 
 const StyledInput = styled.input<StyledProps>`
@@ -51,7 +67,6 @@ const StyledInput = styled.input<StyledProps>`
   margin: 0;
   border: none;
   appearance: none;
-
   background: ${tokens.background};
 
   ${({ spacings }) => spacingsTemplate(spacings)}
@@ -61,6 +76,9 @@ const StyledInput = styled.input<StyledProps>`
   &::placeholder {
     color: ${tokens.placeholderColor};
   }
+  &:disabled {
+    color: ${tokens.disabledColor};
+  }
 `
 
 export type InputProps = {
@@ -76,6 +94,8 @@ export type InputProps = {
   type?: string
   /** Read Only */
   readonly?: boolean
+  /* By default Input will handle focus*/
+  handleFocus?: boolean
 } & InputHTMLAttributes<HTMLInputElement>
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -98,7 +118,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       ref,
       type,
       disabled,
-      variant: inputVariant,
+      variant: variant,
+      token: inputVariant,
       spacings: spacings,
       ...other,
     }

libraries/core-react/src/components/TextField/Icon/Icon.tsx

@@ -49,13 +49,6 @@ const StyledIcon = styled.div<StyledIconProps>`
   ${Variation}
 `
 
-const StyledIputIcon = styled(StyledIcon)`
-  position: absolute;
-  right: ${({ spacings }) => spacings.right};
-  top: ${({ spacings }) => spacings.top};
-  bottom: ${({ spacings }) => spacings.bottom};
-`
-
 type TextfieldIconProps = {
   /** isDisabled */
   isDisabled?: boolean
@@ -74,7 +67,6 @@ const InputIcon = React.forwardRef<HTMLDivElement, TextfieldIconProps>(
     {
       variant = 'default',
       isDisabled = false,
-      isInputIcon = true,
       spacings = tokens.spacings.comfortable,
       colors = {
         color: tokens[variant].color,
@@ -96,17 +88,9 @@ const InputIcon = React.forwardRef<HTMLDivElement, TextfieldIconProps>(
     }
 
     return (
-      <>
-        {isInputIcon ? (
-          <StyledIputIcon ref={ref} {...iconProps} {...other}>
-            {children}
-          </StyledIputIcon>
-        ) : (
-          <StyledIcon ref={ref} {...iconProps} {...other}>
-            {children}
-          </StyledIcon>
-        )}
-      </>
+      <StyledIcon ref={ref} {...iconProps} {...other}>
+        {children}
+      </StyledIcon>
     )
   },
 )

libraries/core-react/src/components/TextField/InputWrapper.tsx

@@ -1,8 +1,101 @@
 import * as React from 'react'
-import { InputHTMLAttributes } from 'react'
+import { InputHTMLAttributes, ReactNode } from 'react'
 import { useTextField } from './context'
 import { Input } from '../Input'
+import { Icon } from './Icon'
 import type { Variants } from './types'
+import type { ComponentToken } from '@equinor/eds-tokens'
+import styled, { css } from 'styled-components'
+import { typographyTemplate, outlineTemplate } from '@utils'
+import * as tokens from './TextField.tokens'
+
+const { textfield } = tokens
+
+const Variation = ({
+  variant,
+  isFocused,
+  token,
+}: {
+  variant: string
+  token: ComponentToken
+  isFocused: boolean
+}) => {
+  if (!variant) {
+    return ``
+  }
+
+  return css`
+    box-shadow: ${() =>
+      isFocused
+        ? `none`
+        : variant === 'default'
+        ? `inset 0 -1px 0 0 ${
+            token.border?.type === 'border' && token.border?.color
+          }`
+        : `0 0 0 1px ${
+            token.border?.type === 'border' && token.border?.color
+          }`};
+    ${isFocused && outlineTemplate(token.states.focus.outline)}
+  `
+}
+
+type InputWithAdornmentsType = {
+  isFocused: boolean
+  isDisabled: boolean
+  variant: string
+  token: ComponentToken
+}
+
+export const InputWithAdornments = styled.div<InputWithAdornmentsType>`
+  display: flex;
+  align-items: center;
+  background: ${textfield.background};
+  padding-right: ${textfield.spacings.right};
+  ${Variation}
+  ${({ isDisabled }) =>
+    isDisabled && {
+      boxShadow: 'none',
+      cursor: 'not-allowed',
+      outline: 'none',
+    }}
+`
+
+type UnitType = {
+  isDisabled: boolean
+}
+
+const Unit = styled.span<UnitType>`
+  ${typographyTemplate(textfield.entities.unit.typography)};
+  /*   Yes, we don't like magic numbers, but if you have both unit and icon, 
+  the unit is slightly off due to line-height and font */
+  display: inline-block;
+  margin-top: 3px;
+  ${({ isDisabled }) =>
+    isDisabled && {
+      color: textfield.entities.unit.states.disabled.typography.color,
+    }}
+`
+
+type AdornmentsType = {
+  multiline: boolean
+}
+
+const Adornments = styled.div<AdornmentsType>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+  margin-left: ${textfield.spacings.left};
+  & div:nth-child(2) {
+    margin-left: ${textfield.spacings.left};
+  }
+  ${({ multiline }) =>
+    multiline && {
+      alignSelf: 'start',
+      marginTop: `${textfield.spacings.top}`,
+    }}
+`
 
 type TextfieldInputProps = {
   /** Specifies if text should be bold */
@@ -17,14 +110,21 @@ type TextfieldInputProps = {
   type?: string
   /** Read Only */
   readonly?: boolean
+  unit?: string
+  inputIcon?: ReactNode
 } & InputHTMLAttributes<HTMLInputElement>
 
 export const InputWrapper = React.forwardRef<
   HTMLInputElement,
   TextfieldInputProps
->(function InputWrapper({ multiline, variant, disabled, type, ...other }, ref) {
-  const { handleFocus, handleBlur } = useTextField()
+>(function InputWrapper(
+  { multiline, variant, disabled, type, unit, inputIcon, ...other },
+  ref,
+) {
+  const { handleFocus, handleBlur, isFocused } = useTextField()
 
+  const actualVariant = variant === 'default' ? 'textfield' : variant
+  const inputVariant = tokens[actualVariant]
   const inputProps = {
     multiline,
     ref,
@@ -34,5 +134,28 @@ export const InputWrapper = React.forwardRef<
     ...other,
   }
 
-  return <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
+  return (
+    <>
+      {inputIcon || unit ? (
+        <InputWithAdornments
+          isFocused={isFocused}
+          isDisabled={disabled}
+          variant={variant}
+          token={inputVariant}
+        >
+          <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
+          <Adornments multiline={multiline}>
+            {unit && <Unit isDisabled={disabled}>{unit}</Unit>}
+            {inputIcon && (
+              <Icon isDisabled={disabled} variant={variant}>
+                {inputIcon}
+              </Icon>
+            )}
+          </Adornments>
+        </InputWithAdornments>
+      ) : (
+        <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
+      )}
+    </>
+  )
 })