From 5a83307c693560ddf78d1c48ca7f76b6f818a164 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Tue, 9 Mar 2021 13:20:02 +0100
Subject: [PATCH 01/32] =?UTF-8?q?=F0=9F=93=9D=20Add=20a=20story=20for=20te?=
 =?UTF-8?q?xt=20field=20with=20unit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/stories/components/TextField.stories.tsx   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index b67bbfcf28..0928570275 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -110,6 +110,14 @@ export const Disabled: Story<TextFieldProps> = () => (
     disabled
   />
 )
+export const WithUnit: Story<TextFieldProps> = () => (
+  <TextField
+    id="storybook-unit"
+    placeholder="Placeholder text"
+    label="Price"
+    unit="$"
+  />
+)
 
 export const WithIcons: Story<TextFieldProps> = () => (
   <Wrapper>

From a3c3edabe2d5a16d48b3b4934ac5216ab7180ad9 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Tue, 9 Mar 2021 14:40:32 +0100
Subject: [PATCH 02/32] =?UTF-8?q?=F0=9F=9A=A7=20Begin=20work=20on=20unit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TextField/TextField.tokens.ts  | 15 +++++++++++++++
 .../src/components/TextField/TextField.tsx        | 13 ++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 libraries/core-react/src/components/TextField/TextField.tokens.ts

diff --git a/libraries/core-react/src/components/TextField/TextField.tokens.ts b/libraries/core-react/src/components/TextField/TextField.tokens.ts
new file mode 100644
index 0000000000..40d2553292
--- /dev/null
+++ b/libraries/core-react/src/components/TextField/TextField.tokens.ts
@@ -0,0 +1,15 @@
+import { tokens } from '@equinor/eds-tokens'
+import type { ComponentToken } from '@equinor/eds-tokens'
+
+const { colors, typography } = tokens
+
+export const textfield: ComponentToken = {
+  entities: {
+    unit: {
+      typography: {
+        ...typography.input.label,
+        color: colors.text.static_icons__tertiary.hex,
+      },
+    },
+  },
+}
diff --git a/libraries/core-react/src/components/TextField/TextField.tsx b/libraries/core-react/src/components/TextField/TextField.tsx
index 500732abcd..6020bce53e 100644
--- a/libraries/core-react/src/components/TextField/TextField.tsx
+++ b/libraries/core-react/src/components/TextField/TextField.tsx
@@ -7,6 +7,8 @@ import { Label } from '../Label'
 import { HelperText } from './HelperText'
 import { TextFieldProvider } from './context'
 import type { Variants } from './types'
+import { typographyTemplate } from '@utils'
+import { textfield as tokens } from './TextField.tokens'
 
 const Container = styled.div`
   min-width: 100px;
@@ -21,6 +23,10 @@ const PaddedInputWrapper = styled(InputWrapper)`
   padding-right: 32px;
 `
 
+const Unit = styled.span`
+  ${typographyTemplate(tokens.entities.unit.typography)}
+`
+
 export type TextFieldProps = {
   /** @ignore */
   className?: string
@@ -32,6 +38,8 @@ export type TextFieldProps = {
   label?: string
   /** Meta text */
   meta?: string
+  /** Unit text */
+  unit?: string
   /** Helper text */
   helperText?: string
   /** Placeholder text */
@@ -59,6 +67,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       id,
       label,
       meta,
+      unit,
       helperText,
       placeholder,
       disabled,
@@ -80,6 +89,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       variant,
       ref: inputRef,
       inputIcon,
+      unit,
       ...other,
     }
 
@@ -109,12 +119,13 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         <TextFieldProvider>
           {showLabel && <Label {...labelProps} />}
           <RelativeContainer>
-            {inputIcon ? (
+            {inputIcon || unit ? (
               <>
                 <PaddedInputWrapper {...inputProps} />
                 <Icon isDisabled={disabled} variant={variant}>
                   {inputIcon}
                 </Icon>
+                <Unit>{unit}</Unit>
               </>
             ) : (
               <InputWrapper {...inputProps} />

From 29aa142589fae90edd2482bf2ebdfa432c97453b Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Tue, 9 Mar 2021 15:36:44 +0100
Subject: [PATCH 03/32] =?UTF-8?q?=F0=9F=9A=A7=20Approach=20with=20absolute?=
 =?UTF-8?q?=20positioning,=20doesn't=20work=20very=20well?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TextField/Icon/Icon.tsx    | 22 +++------------
 .../components/TextField/TextField.tokens.ts  | 11 +++++++-
 .../src/components/TextField/TextField.tsx    | 24 ++++++++++++++---
 .../stories/components/TextField.stories.tsx  | 27 ++++++++++++++-----
 4 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/Icon/Icon.tsx b/libraries/core-react/src/components/TextField/Icon/Icon.tsx
index 7268347606..bee2ae292b 100644
--- a/libraries/core-react/src/components/TextField/Icon/Icon.tsx
+++ b/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>
     )
   },
 )
diff --git a/libraries/core-react/src/components/TextField/TextField.tokens.ts b/libraries/core-react/src/components/TextField/TextField.tokens.ts
index 40d2553292..bc255d5bdc 100644
--- a/libraries/core-react/src/components/TextField/TextField.tokens.ts
+++ b/libraries/core-react/src/components/TextField/TextField.tokens.ts
@@ -1,9 +1,18 @@
 import { tokens } from '@equinor/eds-tokens'
 import type { ComponentToken } from '@equinor/eds-tokens'
 
-const { colors, typography } = tokens
+const {
+  colors,
+  typography,
+  spacings: { comfortable },
+} = tokens
 
 export const textfield: ComponentToken = {
+  spacings: {
+    left: comfortable.small,
+    right: comfortable.small,
+    top: '0px',
+  },
   entities: {
     unit: {
       typography: {
diff --git a/libraries/core-react/src/components/TextField/TextField.tsx b/libraries/core-react/src/components/TextField/TextField.tsx
index 6020bce53e..d436f10fc1 100644
--- a/libraries/core-react/src/components/TextField/TextField.tsx
+++ b/libraries/core-react/src/components/TextField/TextField.tsx
@@ -27,6 +27,18 @@ const Unit = styled.span`
   ${typographyTemplate(tokens.entities.unit.typography)}
 `
 
+const UnitAndIconWrapper = styled.div`
+  position: absolute;
+  right: ${tokens.spacings.right};
+  top: ${tokens.spacings.top};
+  display: flex;
+  align-items: center;
+  height: 100%;
+  & div:nth-child(2) {
+    margin-left: ${tokens.spacings.left};
+  }
+`
+
 export type TextFieldProps = {
   /** @ignore */
   className?: string
@@ -122,10 +134,14 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             {inputIcon || unit ? (
               <>
                 <PaddedInputWrapper {...inputProps} />
-                <Icon isDisabled={disabled} variant={variant}>
-                  {inputIcon}
-                </Icon>
-                <Unit>{unit}</Unit>
+                <UnitAndIconWrapper>
+                  {unit && <Unit>{unit}</Unit>}
+                  {inputIcon && (
+                    <Icon isDisabled={disabled} variant={variant}>
+                      {inputIcon}
+                    </Icon>
+                  )}
+                </UnitAndIconWrapper>
               </>
             ) : (
               <InputWrapper {...inputProps} />
diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 0928570275..a8f9a79d97 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -111,12 +111,27 @@ export const Disabled: Story<TextFieldProps> = () => (
   />
 )
 export const WithUnit: Story<TextFieldProps> = () => (
-  <TextField
-    id="storybook-unit"
-    placeholder="Placeholder text"
-    label="Price"
-    unit="$"
-  />
+  <Wrapper>
+    <TextField
+      id="storybook-unit"
+      placeholder="Placeholder text text text"
+      label="Price"
+      unit="$"
+    />
+    <TextField
+      id="storybook-unit"
+      placeholder="Placeholder text text text"
+      label="Speed"
+      unit="km/h"
+    />
+    <TextField
+      id="storybook-unit"
+      placeholder="Placeholder text text text"
+      label="Price"
+      unit="$"
+      inputIcon={<Icon name="thumbs_up" />}
+    />
+  </Wrapper>
 )
 
 export const WithIcons: Story<TextFieldProps> = () => (

From f69dd99be461ba68959803c1d6e7588035b49511 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Tue, 9 Mar 2021 16:16:59 +0100
Subject: [PATCH 04/32] =?UTF-8?q?=F0=9F=9A=A7=20Some=20work=20for=20extend?=
 =?UTF-8?q?ed=20=20input=20approach?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/src/components/Input/Input.tsx |  1 -
 .../src/components/TextField/InputWrapper.tsx | 60 +++++++++++++++++--
 .../src/components/TextField/TextField.tsx    |  5 +-
 3 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/libraries/core-react/src/components/Input/Input.tsx b/libraries/core-react/src/components/Input/Input.tsx
index 502064ed45..0fa91ddc31 100644
--- a/libraries/core-react/src/components/Input/Input.tsx
+++ b/libraries/core-react/src/components/Input/Input.tsx
@@ -51,7 +51,6 @@ const StyledInput = styled.input<StyledProps>`
   margin: 0;
   border: none;
   appearance: none;
-
   background: ${tokens.background};
 
   ${({ spacings }) => spacingsTemplate(spacings)}
diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 53ef06085d..a575bf5c10 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -1,8 +1,35 @@
 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 styled from 'styled-components'
+import { typographyTemplate } from '@utils'
+import { textfield as tokens } from './TextField.tokens'
+
+const InlineStuffWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  box-shadow: inset 0 -1px 0 0 #6f6f6f;
+  background: #f7f7f7;
+  padding-right: ${tokens.spacings.right};
+`
+
+const Unit = styled.span`
+  ${typographyTemplate(tokens.entities.unit.typography)}
+`
+
+const UnitAndIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin-left: ${tokens.spacings.left};
+  & div:nth-child(2) {
+    margin-left: ${tokens.spacings.left};
+  }
+`
 
 type TextfieldInputProps = {
   /** Specifies if text should be bold */
@@ -17,13 +44,20 @@ 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()
+
+  console.log('is focused', isFocused)
 
   const inputProps = {
     multiline,
@@ -34,5 +68,23 @@ export const InputWrapper = React.forwardRef<
     ...other,
   }
 
-  return <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
+  return (
+    <>
+      {(!multiline && inputIcon) || unit ? (
+        <InlineStuffWrapper>
+          <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
+          <UnitAndIconWrapper>
+            {unit && <Unit>{unit}</Unit>}
+            {inputIcon && (
+              <Icon isDisabled={disabled} variant={variant}>
+                {inputIcon}
+              </Icon>
+            )}
+          </UnitAndIconWrapper>
+        </InlineStuffWrapper>
+      ) : (
+        <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
+      )}
+    </>
+  )
 })
diff --git a/libraries/core-react/src/components/TextField/TextField.tsx b/libraries/core-react/src/components/TextField/TextField.tsx
index d436f10fc1..6f8966f5bd 100644
--- a/libraries/core-react/src/components/TextField/TextField.tsx
+++ b/libraries/core-react/src/components/TextField/TextField.tsx
@@ -33,6 +33,7 @@ const UnitAndIconWrapper = styled.div`
   top: ${tokens.spacings.top};
   display: flex;
   align-items: center;
+  justify-content: center;
   height: 100%;
   & div:nth-child(2) {
     margin-left: ${tokens.spacings.left};
@@ -134,14 +135,14 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             {inputIcon || unit ? (
               <>
                 <PaddedInputWrapper {...inputProps} />
-                <UnitAndIconWrapper>
+                {/*  <UnitAndIconWrapper>
                   {unit && <Unit>{unit}</Unit>}
                   {inputIcon && (
                     <Icon isDisabled={disabled} variant={variant}>
                       {inputIcon}
                     </Icon>
                   )}
-                </UnitAndIconWrapper>
+                </UnitAndIconWrapper> */}
               </>
             ) : (
               <InputWrapper {...inputProps} />

From 61bca8c14b4d54fc21f7c6b0adac2ce90f702980 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Thu, 11 Mar 2021 21:10:02 +0100
Subject: [PATCH 05/32] =?UTF-8?q?=F0=9F=9A=A7=20Lot's=20of=20playing=20aro?=
 =?UTF-8?q?und=20with=20the=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/src/components/Input/Input.tsx | 28 ++++++-
 .../src/components/TextField/InputWrapper.tsx | 83 ++++++++++++++++---
 .../components/TextField/TextField.tokens.ts  | 75 +++++++++++++++++
 .../src/components/TextField/TextField.tsx    | 36 +-------
 .../src/components/TextField/context.tsx      |  1 -
 libraries/tokens/src/types/focus.ts           |  2 +-
 6 files changed, 173 insertions(+), 52 deletions(-)

diff --git a/libraries/core-react/src/components/Input/Input.tsx b/libraries/core-react/src/components/Input/Input.tsx
index 0fa91ddc31..3220e5c2cb 100644
--- a/libraries/core-react/src/components/Input/Input.tsx
+++ b/libraries/core-react/src/components/Input/Input.tsx
@@ -3,10 +3,17 @@ 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 { InlineStuffWrapper } 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 ``
   }
@@ -14,12 +21,15 @@ const Variation = ({ variant }: { variant: InputVariantProps }) => {
   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};
+    ${InlineStuffWrapper} & {
+      outline: none;
+    }
     &:active,
     &:focus {
       outline-offset: 0;
@@ -27,6 +37,12 @@ const Variation = ({ variant }: { variant: InputVariantProps }) => {
       outline: ${focusBorderOutline.width} solid ${focusBorderOutline.color};
     }
 
+    ${InlineStuffWrapper} &:active,
+    ${InlineStuffWrapper} &:focus {
+      outline: none;
+      box-shadow: none;
+    }
+
     &:disabled {
       cursor: not-allowed;
       box-shadow: none;
@@ -42,7 +58,8 @@ const Variation = ({ variant }: { variant: InputVariantProps }) => {
 
 type StyledProps = {
   spacings: Spacing
-  variant: InputVariantProps
+  token: InputVariantProps
+  variant: string
 }
 
 const StyledInput = styled.input<StyledProps>`
@@ -75,6 +92,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>(
@@ -97,7 +116,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       ref,
       type,
       disabled,
-      variant: inputVariant,
+      variant: variant,
+      token: inputVariant,
       spacings: spacings,
       ...other,
     }
diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index a575bf5c10..69215c6393 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -4,20 +4,68 @@ import { useTextField } from './context'
 import { Input } from '../Input'
 import { Icon } from './Icon'
 import type { Variants } from './types'
-import styled from 'styled-components'
-import { typographyTemplate } from '@utils'
-import { textfield as tokens } from './TextField.tokens'
+import type { Outline, ComponentToken } from '@equinor/eds-tokens'
+import styled, { css } from 'styled-components'
+import { typographyTemplate, outlineTemplate } from '@utils'
+import * as tokens from './TextField.tokens'
 
-const InlineStuffWrapper = styled.div`
+const { textfield, error } = tokens
+
+const Variation = ({
+  variant,
+  isFocused,
+  token,
+}: {
+  variant: string
+  token: ComponentToken
+  isFocused: boolean
+}) => {
+  if (!variant) {
+    return ``
+  }
+  console.log('isFocused ----------', isFocused)
+  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
+          }`};
+    outline: ${() =>
+      isFocused
+        ? `${token.states.focus.outline.width} solid ${token.states.focus.outline.color}`
+        : 'none'};
+  `
+}
+
+type InlineStuffWrapperType = {
+  isFocused: boolean
+  isDisabled: boolean
+  variant: string
+  token: ComponentToken
+}
+export const InlineStuffWrapper = styled.div<InlineStuffWrapperType>`
   display: flex;
   align-items: center;
-  box-shadow: inset 0 -1px 0 0 #6f6f6f;
+
   background: #f7f7f7;
-  padding-right: ${tokens.spacings.right};
+  padding-right: ${textfield.spacings.right};
+  ${Variation}
+  ${({ isDisabled }) =>
+    isDisabled && {
+      /* outlineTemplate(states.focus.outline) */
+      boxShadow: 'none',
+      cursor: 'not-allowed',
+      outline: 'none',
+    }}
 `
 
 const Unit = styled.span`
-  ${typographyTemplate(tokens.entities.unit.typography)}
+  ${typographyTemplate(textfield.entities.unit.typography)}
 `
 
 const UnitAndIconWrapper = styled.div`
@@ -25,9 +73,9 @@ const UnitAndIconWrapper = styled.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  margin-left: ${tokens.spacings.left};
+  margin-left: ${textfield.spacings.left};
   & div:nth-child(2) {
-    margin-left: ${tokens.spacings.left};
+    margin-left: ${textfield.spacings.left};
   }
 `
 
@@ -59,6 +107,9 @@ export const InputWrapper = React.forwardRef<
 
   console.log('is focused', isFocused)
 
+  const variantzz = variant === 'default' ? 'textfield' : variant
+  const inputVariant = tokens[variantzz]
+  console.log('variant', variant, inputVariant)
   const inputProps = {
     multiline,
     ref,
@@ -71,8 +122,18 @@ export const InputWrapper = React.forwardRef<
   return (
     <>
       {(!multiline && inputIcon) || unit ? (
-        <InlineStuffWrapper>
-          <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
+        <InlineStuffWrapper
+          isFocused={isFocused}
+          isDisabled={disabled}
+          variant={variant}
+          token={inputVariant}
+        >
+          <Input
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            {...inputProps}
+            handleFocus={false}
+          />
           <UnitAndIconWrapper>
             {unit && <Unit>{unit}</Unit>}
             {inputIcon && (
diff --git a/libraries/core-react/src/components/TextField/TextField.tokens.ts b/libraries/core-react/src/components/TextField/TextField.tokens.ts
index bc255d5bdc..ceb214d364 100644
--- a/libraries/core-react/src/components/TextField/TextField.tokens.ts
+++ b/libraries/core-react/src/components/TextField/TextField.tokens.ts
@@ -8,11 +8,28 @@ const {
 } = tokens
 
 export const textfield: ComponentToken = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.primary__resting.hex,
+  },
   spacings: {
     left: comfortable.small,
     right: comfortable.small,
     top: '0px',
   },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.primary__resting.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px',
+      },
+    },
+  },
   entities: {
     unit: {
       typography: {
@@ -22,3 +39,61 @@ export const textfield: ComponentToken = {
     },
   },
 }
+
+export const error: ComponentToken = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.danger__resting.hex,
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.danger__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px',
+      },
+    },
+  },
+}
+export const warning: ComponentToken = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.warning__resting.hex,
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.warning__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px',
+      },
+    },
+  },
+}
+export const success: ComponentToken = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.success__resting.hex,
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.success__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px',
+      },
+    },
+  },
+}
diff --git a/libraries/core-react/src/components/TextField/TextField.tsx b/libraries/core-react/src/components/TextField/TextField.tsx
index 6f8966f5bd..73815832fb 100644
--- a/libraries/core-react/src/components/TextField/TextField.tsx
+++ b/libraries/core-react/src/components/TextField/TextField.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react'
 import { ReactNode, InputHTMLAttributes, TextareaHTMLAttributes } from 'react'
 import styled from 'styled-components'
-import { Icon } from './Icon'
 import { InputWrapper } from './InputWrapper'
 import { Label } from '../Label'
 import { HelperText } from './HelperText'
 import { TextFieldProvider } from './context'
 import type { Variants } from './types'
-import { typographyTemplate } from '@utils'
-import { textfield as tokens } from './TextField.tokens'
 
 const Container = styled.div`
   min-width: 100px;
@@ -23,23 +20,6 @@ const PaddedInputWrapper = styled(InputWrapper)`
   padding-right: 32px;
 `
 
-const Unit = styled.span`
-  ${typographyTemplate(tokens.entities.unit.typography)}
-`
-
-const UnitAndIconWrapper = styled.div`
-  position: absolute;
-  right: ${tokens.spacings.right};
-  top: ${tokens.spacings.top};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  & div:nth-child(2) {
-    margin-left: ${tokens.spacings.left};
-  }
-`
-
 export type TextFieldProps = {
   /** @ignore */
   className?: string
@@ -132,21 +112,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         <TextFieldProvider>
           {showLabel && <Label {...labelProps} />}
           <RelativeContainer>
-            {inputIcon || unit ? (
-              <>
-                <PaddedInputWrapper {...inputProps} />
-                {/*  <UnitAndIconWrapper>
-                  {unit && <Unit>{unit}</Unit>}
-                  {inputIcon && (
-                    <Icon isDisabled={disabled} variant={variant}>
-                      {inputIcon}
-                    </Icon>
-                  )}
-                </UnitAndIconWrapper> */}
-              </>
-            ) : (
-              <InputWrapper {...inputProps} />
-            )}
+            <InputWrapper {...inputProps} />
           </RelativeContainer>
           {showHelperText && <HelperText {...helperProps} />}
         </TextFieldProvider>
diff --git a/libraries/core-react/src/components/TextField/context.tsx b/libraries/core-react/src/components/TextField/context.tsx
index d24d6e39ca..462919dca1 100644
--- a/libraries/core-react/src/components/TextField/context.tsx
+++ b/libraries/core-react/src/components/TextField/context.tsx
@@ -26,7 +26,6 @@ export const TextFieldProvider = ({ children }: ProviderProps): JSX.Element => {
   const [state, setState] = useState<State>(initalState)
 
   const handleFocus = () => {
-    console.log('handle focus', state.isFocused)
     setState((prevState) => ({ ...prevState, isFocused: true }))
   }
   const handleBlur = () => {
diff --git a/libraries/tokens/src/types/focus.ts b/libraries/tokens/src/types/focus.ts
index 95b7a8764e..f47a2f3122 100644
--- a/libraries/tokens/src/types/focus.ts
+++ b/libraries/tokens/src/types/focus.ts
@@ -2,6 +2,6 @@ export type Outline = {
   type: 'outline'
   color: string
   width: string
-  style: 'dashed'
+  style: 'dashed' | 'solid'
   offset?: string
 }

From 7eed6d2ed5dfe2a750f0443f9479bfb5af80d308 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 08:26:44 +0100
Subject: [PATCH 06/32] =?UTF-8?q?=F0=9F=93=9D=20Add=20more=20stories=20for?=
 =?UTF-8?q?=20testing=20the=20different=20variants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/components/TextField.stories.tsx  | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index a8f9a79d97..73e4d93fc1 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -90,14 +90,23 @@ export const types: Story<TextFieldProps> = () => (
 types.storyName = 'Types of input fields'
 
 export const Multiline: Story<TextFieldProps> = () => (
-  <TextField
-    id="storybook-multiline"
-    placeholder="Placeholder text"
-    label="Multline"
-    meta="Meta"
-    helperText="Helper Text"
-    multiline
-  />
+  <>
+    <TextField
+      id="storybook-multiline"
+      placeholder="Placeholder text"
+      label="Multline"
+      meta="Meta"
+      helperText="Helper Text"
+      multiline
+    />
+    <TextField
+      id="storybook-multiline-two"
+      placeholder="Placeholder text"
+      label="Multline with icon"
+      multiline
+      inputIcon={<Icon name="warning_filled" />}
+    />
+  </>
 )
 
 export const Disabled: Story<TextFieldProps> = () => (
@@ -119,18 +128,26 @@ export const WithUnit: Story<TextFieldProps> = () => (
       unit="$"
     />
     <TextField
-      id="storybook-unit"
+      id="storybook-unit-two"
       placeholder="Placeholder text text text"
       label="Speed"
       unit="km/h"
     />
     <TextField
-      id="storybook-unit"
+      id="storybook-unit-three"
       placeholder="Placeholder text text text"
       label="Price"
       unit="$"
       inputIcon={<Icon name="thumbs_up" />}
     />
+    <TextField
+      id="storybook-unit-four"
+      placeholder="Placeholder text text text"
+      label="Disabled price"
+      unit="$"
+      disabled
+      inputIcon={<Icon name="warning_filled" />}
+    />
   </Wrapper>
 )
 

From 50cf1c0b260610a9abed1e53ce0076bdb3eae59d Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 10:47:05 +0100
Subject: [PATCH 07/32] =?UTF-8?q?=F0=9F=93=9D=20Add=20even=20more=20storie?=
 =?UTF-8?q?s=20to=20hightlight=20missing=20default=20text=20color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/components/TextField.stories.tsx  | 52 ++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 73e4d93fc1..8888eb8cbd 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -110,14 +110,24 @@ export const Multiline: Story<TextFieldProps> = () => (
 )
 
 export const Disabled: Story<TextFieldProps> = () => (
-  <TextField
-    id="storybook-disabled"
-    placeholder="Placeholder text"
-    label="Disabled"
-    meta="Meta"
-    helperText="Helper Text"
-    disabled
-  />
+  <Wrapper>
+    <TextField
+      id="storybook-disabled"
+      placeholder="Placeholder text"
+      label="Disabled"
+      meta="Meta"
+      helperText="Helper Text"
+      disabled
+    />
+    <TextField
+      id="storybook-disabled-two"
+      value="Input text"
+      label="Disabled"
+      meta="Meta"
+      helperText="Helper Text"
+      disabled
+    />
+  </Wrapper>
 )
 export const WithUnit: Story<TextFieldProps> = () => (
   <Wrapper>
@@ -148,6 +158,14 @@ export const WithUnit: Story<TextFieldProps> = () => (
       disabled
       inputIcon={<Icon name="warning_filled" />}
     />
+    <TextField
+      id="storybook-unit-four"
+      value="Input value"
+      label="Disabled price"
+      unit="$"
+      disabled
+      inputIcon={<Icon name="warning_filled" />}
+    />
   </Wrapper>
 )
 
@@ -156,11 +174,11 @@ export const WithIcons: Story<TextFieldProps> = () => (
     <TextField
       id="storybook-warning-icon"
       placeholder="Placeholder text"
-      label="Some warning input"
+      label="Label text"
       inputIcon={<Icon name="thumbs_up" />}
     />
     <TextField
-      id="storybook-warning-icon"
+      id="storybook-disabled"
       placeholder="Placeholder text"
       label="Disabled input"
       disabled
@@ -168,13 +186,23 @@ export const WithIcons: Story<TextFieldProps> = () => (
     />
 
     <TextField
-      id="storybook-disabled"
-      placeholder="Placeholder text"
+      id="icons-text"
+      value="Input text"
       label="Label text"
       meta="Meta"
       helperText="Helper Text"
       inputIcon={<Icon name="thumbs_up" />}
     />
+
+    <TextField
+      id="storybook-disabled-two"
+      value="Input text"
+      label="Disabled with value"
+      meta="Meta"
+      disabled
+      helperText="Helper Text"
+      inputIcon={<Icon name="thumbs_up" />}
+    />
   </Wrapper>
 )
 WithIcons.storyName = 'With icons'

From 29f619948e323285b02a16be58cef442496971dc Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 10:47:22 +0100
Subject: [PATCH 08/32] =?UTF-8?q?=E2=9C=A8=20Temporary=20fix=20of=20the=20?=
 =?UTF-8?q?missing=20default=20color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 libraries/core-react/src/components/Input/Input.tokens.ts | 2 ++
 libraries/core-react/src/components/Input/Input.tsx       | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/libraries/core-react/src/components/Input/Input.tokens.ts b/libraries/core-react/src/components/Input/Input.tokens.ts
index 3f25e29fab..9358ad57b7 100644
--- a/libraries/core-react/src/components/Input/Input.tokens.ts
+++ b/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: {
diff --git a/libraries/core-react/src/components/Input/Input.tsx b/libraries/core-react/src/components/Input/Input.tsx
index 3220e5c2cb..2561a2629a 100644
--- a/libraries/core-react/src/components/Input/Input.tsx
+++ b/libraries/core-react/src/components/Input/Input.tsx
@@ -47,7 +47,6 @@ const Variation = ({
       cursor: not-allowed;
       box-shadow: none;
       outline: none;
-
       &:focus,
       &:active {
         outline: none;
@@ -77,6 +76,9 @@ const StyledInput = styled.input<StyledProps>`
   &::placeholder {
     color: ${tokens.placeholderColor};
   }
+  &:disabled {
+    color: ${tokens.disabledColor};
+  }
 `
 
 export type InputProps = {

From f7f728a0929188a974aaa01316fcc8cd1bb11ea3 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 11:17:07 +0100
Subject: [PATCH 09/32] =?UTF-8?q?=F0=9F=90=9B=20Fix=20positioning=20of=20i?=
 =?UTF-8?q?con=20in=20textarea.=20Resize=20none=20to=20make=20things=20loo?=
 =?UTF-8?q?k=20OK?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TextField/InputWrapper.tsx   | 17 ++++++++++++++---
 .../components/TextField/TextField.tokens.ts    |  2 +-
 .../stories/components/TextField.stories.tsx    |  1 +
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 69215c6393..74d02ce74c 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -48,6 +48,10 @@ type InlineStuffWrapperType = {
   variant: string
   token: ComponentToken
 }
+
+type UnitAndIconWrapper = {
+  multiline: boolean
+}
 export const InlineStuffWrapper = styled.div<InlineStuffWrapperType>`
   display: flex;
   align-items: center;
@@ -68,15 +72,22 @@ const Unit = styled.span`
   ${typographyTemplate(textfield.entities.unit.typography)}
 `
 
-const UnitAndIconWrapper = styled.div`
+const UnitAndIconWrapper = styled.div<UnitAndIconWrapper>`
   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 && {
+      /* outlineTemplate(states.focus.outline) */
+      alignSelf: 'start',
+      marginTop: `${textfield.spacings.top}`,
+    }}
 `
 
 type TextfieldInputProps = {
@@ -121,7 +132,7 @@ export const InputWrapper = React.forwardRef<
 
   return (
     <>
-      {(!multiline && inputIcon) || unit ? (
+      {inputIcon || unit ? (
         <InlineStuffWrapper
           isFocused={isFocused}
           isDisabled={disabled}
@@ -134,7 +145,7 @@ export const InputWrapper = React.forwardRef<
             {...inputProps}
             handleFocus={false}
           />
-          <UnitAndIconWrapper>
+          <UnitAndIconWrapper multiline={multiline}>
             {unit && <Unit>{unit}</Unit>}
             {inputIcon && (
               <Icon isDisabled={disabled} variant={variant}>
diff --git a/libraries/core-react/src/components/TextField/TextField.tokens.ts b/libraries/core-react/src/components/TextField/TextField.tokens.ts
index ceb214d364..1b8e30aca7 100644
--- a/libraries/core-react/src/components/TextField/TextField.tokens.ts
+++ b/libraries/core-react/src/components/TextField/TextField.tokens.ts
@@ -17,7 +17,7 @@ export const textfield: ComponentToken = {
   spacings: {
     left: comfortable.small,
     right: comfortable.small,
-    top: '0px',
+    top: comfortable.small,
   },
   states: {
     focus: {
diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 8888eb8cbd..3287296a49 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -104,6 +104,7 @@ export const Multiline: Story<TextFieldProps> = () => (
       placeholder="Placeholder text"
       label="Multline with icon"
       multiline
+      style={{ resize: 'none' }}
       inputIcon={<Icon name="warning_filled" />}
     />
   </>

From 3dda844fae18a71778a6bc7721a2cd0f593a1a9b Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 11:45:51 +0100
Subject: [PATCH 10/32] =?UTF-8?q?=E2=AC=87=EF=B8=8F=20Add=20guidelines=20f?=
 =?UTF-8?q?or=20using=20multiline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/components/TextField.stories.tsx           | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 3287296a49..8fe5afe27b 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -98,17 +98,27 @@ export const Multiline: Story<TextFieldProps> = () => (
       meta="Meta"
       helperText="Helper Text"
       multiline
+      style={{ resize: 'none' }}
+      rows={5}
     />
+    <div style={{ height: '2rem' }} />
     <TextField
       id="storybook-multiline-two"
       placeholder="Placeholder text"
       label="Multline with icon"
       multiline
       style={{ resize: 'none' }}
+      rows={3}
       inputIcon={<Icon name="warning_filled" />}
     />
   </>
 )
+Multiline.parameters = {
+  docs: {
+    storyDescription: `With multiline we recommend to use <code>rows</code> in combination with a CSS rule of
+    <code>resize: 'none'</code>`,
+  },
+}
 
 export const Disabled: Story<TextFieldProps> = () => (
   <Wrapper>

From 3b89e933f0ddb0e6dddcf0a75c88b5046d190740 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 12:30:02 +0100
Subject: [PATCH 11/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Use=20the=20term=20a?=
 =?UTF-8?q?dornment=20for=20unit=20and=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/src/components/Input/Input.tsx |  8 +++----
 .../src/components/TextField/InputWrapper.tsx | 21 +++++++++----------
 .../components/TextField/TextField.tokens.ts  |  1 +
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/libraries/core-react/src/components/Input/Input.tsx b/libraries/core-react/src/components/Input/Input.tsx
index 2561a2629a..0571300a41 100644
--- a/libraries/core-react/src/components/Input/Input.tsx
+++ b/libraries/core-react/src/components/Input/Input.tsx
@@ -3,7 +3,7 @@ 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 { InlineStuffWrapper } from '../TextField/InputWrapper'
+import { InputWithAdornments } from '../TextField/InputWrapper'
 import type { Variants } from '../TextField/types'
 import type { Spacing } from '@equinor/eds-tokens'
 
@@ -27,7 +27,7 @@ const Variation = ({
     border: none;
     outline: ${borderOutline.width} solid ${borderOutline.color};
     box-shadow: inset 0 -${borderBottom.width} 0 0 ${borderBottom.color};
-    ${InlineStuffWrapper} & {
+    ${InputWithAdornments} & {
       outline: none;
     }
     &:active,
@@ -37,8 +37,8 @@ const Variation = ({
       outline: ${focusBorderOutline.width} solid ${focusBorderOutline.color};
     }
 
-    ${InlineStuffWrapper} &:active,
-    ${InlineStuffWrapper} &:focus {
+    ${InputWithAdornments} &:active,
+    ${InputWithAdornments} &:focus {
       outline: none;
       box-shadow: none;
     }
diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 74d02ce74c..569a56177d 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -23,7 +23,7 @@ const Variation = ({
   if (!variant) {
     return ``
   }
-  console.log('isFocused ----------', isFocused)
+
   return css`
     box-shadow: ${() =>
       isFocused
@@ -42,21 +42,20 @@ const Variation = ({
   `
 }
 
-type InlineStuffWrapperType = {
+type InputWithAdornmentsType = {
   isFocused: boolean
   isDisabled: boolean
   variant: string
   token: ComponentToken
 }
 
-type UnitAndIconWrapper = {
+type AdornmentsType = {
   multiline: boolean
 }
-export const InlineStuffWrapper = styled.div<InlineStuffWrapperType>`
+export const InputWithAdornments = styled.div<InputWithAdornmentsType>`
   display: flex;
   align-items: center;
-
-  background: #f7f7f7;
+  background: ${textfield.background};
   padding-right: ${textfield.spacings.right};
   ${Variation}
   ${({ isDisabled }) =>
@@ -72,7 +71,7 @@ const Unit = styled.span`
   ${typographyTemplate(textfield.entities.unit.typography)}
 `
 
-const UnitAndIconWrapper = styled.div<UnitAndIconWrapper>`
+const Adornments = styled.div<AdornmentsType>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -133,7 +132,7 @@ export const InputWrapper = React.forwardRef<
   return (
     <>
       {inputIcon || unit ? (
-        <InlineStuffWrapper
+        <InputWithAdornments
           isFocused={isFocused}
           isDisabled={disabled}
           variant={variant}
@@ -145,15 +144,15 @@ export const InputWrapper = React.forwardRef<
             {...inputProps}
             handleFocus={false}
           />
-          <UnitAndIconWrapper multiline={multiline}>
+          <Adornments multiline={multiline}>
             {unit && <Unit>{unit}</Unit>}
             {inputIcon && (
               <Icon isDisabled={disabled} variant={variant}>
                 {inputIcon}
               </Icon>
             )}
-          </UnitAndIconWrapper>
-        </InlineStuffWrapper>
+          </Adornments>
+        </InputWithAdornments>
       ) : (
         <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
       )}
diff --git a/libraries/core-react/src/components/TextField/TextField.tokens.ts b/libraries/core-react/src/components/TextField/TextField.tokens.ts
index 1b8e30aca7..c27cf87414 100644
--- a/libraries/core-react/src/components/TextField/TextField.tokens.ts
+++ b/libraries/core-react/src/components/TextField/TextField.tokens.ts
@@ -8,6 +8,7 @@ const {
 } = tokens
 
 export const textfield: ComponentToken = {
+  background: colors.ui.background__light.hex,
   border: {
     type: 'border',
     radius: 0,

From d375252d532dc7bceb5320e04c4f366f6d048a97 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 12:59:02 +0100
Subject: [PATCH 12/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Use=20outline=20temp?=
 =?UTF-8?q?late?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TextField/InputWrapper.tsx          | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 569a56177d..25f84946e3 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -4,12 +4,12 @@ import { useTextField } from './context'
 import { Input } from '../Input'
 import { Icon } from './Icon'
 import type { Variants } from './types'
-import type { Outline, ComponentToken } from '@equinor/eds-tokens'
+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, error } = tokens
+const { textfield } = tokens
 
 const Variation = ({
   variant,
@@ -35,10 +35,7 @@ const Variation = ({
         : `0 0 0 1px ${
             token.border?.type === 'border' && token.border?.color
           }`};
-    outline: ${() =>
-      isFocused
-        ? `${token.states.focus.outline.width} solid ${token.states.focus.outline.color}`
-        : 'none'};
+    ${isFocused && outlineTemplate(token.states.focus.outline)}
   `
 }
 
@@ -119,7 +116,6 @@ export const InputWrapper = React.forwardRef<
 
   const variantzz = variant === 'default' ? 'textfield' : variant
   const inputVariant = tokens[variantzz]
-  console.log('variant', variant, inputVariant)
   const inputProps = {
     multiline,
     ref,

From 901ebb862a303521a4fa513ac6d86a78b36d3c39 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 13:00:04 +0100
Subject: [PATCH 13/32] =?UTF-8?q?=F0=9F=94=A5=20Delete=20comments=20and=20?=
 =?UTF-8?q?unused=20vars?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 libraries/core-react/src/components/TextField/InputWrapper.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 25f84946e3..6432ae9e68 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -57,7 +57,6 @@ export const InputWithAdornments = styled.div<InputWithAdornmentsType>`
   ${Variation}
   ${({ isDisabled }) =>
     isDisabled && {
-      /* outlineTemplate(states.focus.outline) */
       boxShadow: 'none',
       cursor: 'not-allowed',
       outline: 'none',
@@ -80,7 +79,6 @@ const Adornments = styled.div<AdornmentsType>`
   }
   ${({ multiline }) =>
     multiline && {
-      /* outlineTemplate(states.focus.outline) */
       alignSelf: 'start',
       marginTop: `${textfield.spacings.top}`,
     }}

From f1a44c6f943ae280c81307357ac77d23c6d81ecc Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 13:01:23 +0100
Subject: [PATCH 14/32] =?UTF-8?q?=F0=9F=93=9D=20Use=20defaultValue=20as=20?=
 =?UTF-8?q?it's=20no=20need=20for=20the=20examples=20to=20be=20controlled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/stories/components/TextField.stories.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 8fe5afe27b..112079d779 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -132,7 +132,7 @@ export const Disabled: Story<TextFieldProps> = () => (
     />
     <TextField
       id="storybook-disabled-two"
-      value="Input text"
+      defaultValue="Input text"
       label="Disabled"
       meta="Meta"
       helperText="Helper Text"
@@ -171,7 +171,7 @@ export const WithUnit: Story<TextFieldProps> = () => (
     />
     <TextField
       id="storybook-unit-four"
-      value="Input value"
+      defaultValue="Input value"
       label="Disabled price"
       unit="$"
       disabled
@@ -198,7 +198,7 @@ export const WithIcons: Story<TextFieldProps> = () => (
 
     <TextField
       id="icons-text"
-      value="Input text"
+      defaultValue="Input text"
       label="Label text"
       meta="Meta"
       helperText="Helper Text"
@@ -207,7 +207,7 @@ export const WithIcons: Story<TextFieldProps> = () => (
 
     <TextField
       id="storybook-disabled-two"
-      value="Input text"
+      defaultValue="Input text"
       label="Disabled with value"
       meta="Meta"
       disabled

From b3672fb0b9d6244a82d370312fb573fdc19fe99c Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 13:38:18 +0100
Subject: [PATCH 15/32] =?UTF-8?q?=F0=9F=94=A5=20More=20clean=20up.=20Remov?=
 =?UTF-8?q?e=20unnecessary=20wrappers=20and=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TextField/InputWrapper.tsx | 20 +++++++------------
 .../src/components/TextField/TextField.tsx    | 12 +----------
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 6432ae9e68..9d75b01ded 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -46,9 +46,6 @@ type InputWithAdornmentsType = {
   token: ComponentToken
 }
 
-type AdornmentsType = {
-  multiline: boolean
-}
 export const InputWithAdornments = styled.div<InputWithAdornmentsType>`
   display: flex;
   align-items: center;
@@ -67,6 +64,10 @@ const Unit = styled.span`
   ${typographyTemplate(textfield.entities.unit.typography)}
 `
 
+type AdornmentsType = {
+  multiline: boolean
+}
+
 const Adornments = styled.div<AdornmentsType>`
   display: flex;
   align-items: center;
@@ -110,10 +111,8 @@ export const InputWrapper = React.forwardRef<
 ) {
   const { handleFocus, handleBlur, isFocused } = useTextField()
 
-  console.log('is focused', isFocused)
-
-  const variantzz = variant === 'default' ? 'textfield' : variant
-  const inputVariant = tokens[variantzz]
+  const actualVariant = variant === 'default' ? 'textfield' : variant
+  const inputVariant = tokens[actualVariant]
   const inputProps = {
     multiline,
     ref,
@@ -132,12 +131,7 @@ export const InputWrapper = React.forwardRef<
           variant={variant}
           token={inputVariant}
         >
-          <Input
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            {...inputProps}
-            handleFocus={false}
-          />
+          <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
           <Adornments multiline={multiline}>
             {unit && <Unit>{unit}</Unit>}
             {inputIcon && (
diff --git a/libraries/core-react/src/components/TextField/TextField.tsx b/libraries/core-react/src/components/TextField/TextField.tsx
index 73815832fb..6b18608742 100644
--- a/libraries/core-react/src/components/TextField/TextField.tsx
+++ b/libraries/core-react/src/components/TextField/TextField.tsx
@@ -12,14 +12,6 @@ const Container = styled.div`
   width: 100%;
 `
 
-const RelativeContainer = styled.div`
-  position: relative;
-`
-
-const PaddedInputWrapper = styled(InputWrapper)`
-  padding-right: 32px;
-`
-
 export type TextFieldProps = {
   /** @ignore */
   className?: string
@@ -111,9 +103,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       <Container {...containerProps}>
         <TextFieldProvider>
           {showLabel && <Label {...labelProps} />}
-          <RelativeContainer>
-            <InputWrapper {...inputProps} />
-          </RelativeContainer>
+          <InputWrapper {...inputProps} />
           {showHelperText && <HelperText {...helperProps} />}
         </TextFieldProvider>
       </Container>

From f6fc6b2677fdc0e7e3b7fb8ca5a1cf93d7e409b1 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 13:46:45 +0100
Subject: [PATCH 16/32] =?UTF-8?q?=F0=9F=92=84=20Add=20a=20tiny=20top=20mar?=
 =?UTF-8?q?gin=20to=20the=20unit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/src/components/TextField/InputWrapper.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 9d75b01ded..8872ebab34 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -61,7 +61,11 @@ export const InputWithAdornments = styled.div<InputWithAdornmentsType>`
 `
 
 const Unit = styled.span`
-  ${typographyTemplate(textfield.entities.unit.typography)}
+  ${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;
 `
 
 type AdornmentsType = {

From ed979570603373cd2f7f616c79307ea5d24c240d Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 14:54:30 +0100
Subject: [PATCH 17/32] =?UTF-8?q?=F0=9F=93=9D=20Add=20variants=20for=20tex?=
 =?UTF-8?q?t=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/components/TextField.stories.tsx  | 65 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 112079d779..7f3591cb37 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -180,6 +180,8 @@ export const WithUnit: Story<TextFieldProps> = () => (
   </Wrapper>
 )
 
+WithUnit.storyName = 'With unit'
+
 export const WithIcons: Story<TextFieldProps> = () => (
   <Wrapper>
     <TextField
@@ -256,7 +258,6 @@ export const Variants: Story<TextFieldProps> = () => (
       variant="warning"
       inputIcon={<Icon name="warning_filled" title="Warning" />}
     />
-
     <TextField
       id="storybook-success"
       placeholder="Placeholder text Placeholder text Placeholder text"
@@ -275,12 +276,72 @@ export const Variants: Story<TextFieldProps> = () => (
       variant="success"
       inputIcon={<Icon name="thumbs_up" title="Success" />}
     />
+    <TextField
+      id="multi-error"
+      label="Multline"
+      multiline
+      style={{ resize: 'none' }}
+      rows={3}
+      helperText="Validation error"
+      variant="error"
+      helperIcon={<Icon name="error_filled" title="Error" />}
+    />
+    <TextField
+      id="multi-error-two"
+      label="Multline"
+      multiline
+      style={{ resize: 'none' }}
+      rows={3}
+      helperText="Validation error"
+      variant="error"
+      inputIcon={<Icon name="warning_filled" title="Warning" />}
+    />
+    <TextField
+      id="multi-warning"
+      label="Multline"
+      multiline
+      style={{ resize: 'none' }}
+      rows={3}
+      helperText="Helper/warning text"
+      variant="warning"
+      helperIcon={<Icon name="error_filled" title="Error" />}
+    />
+    <TextField
+      id="multi-warning-two"
+      label="Multline"
+      multiline
+      style={{ resize: 'none' }}
+      rows={3}
+      helperText="Helper/warning text"
+      variant="warning"
+      inputIcon={<Icon name="warning_filled" title="Warning" />}
+    />
+    <TextField
+      id="multi-success"
+      label="Multline"
+      multiline
+      style={{ resize: 'none' }}
+      rows={3}
+      helperText="Helper text"
+      variant="success"
+      helperIcon={<Icon name="error_filled" title="Error" />}
+    />
+    <TextField
+      id="multi-success-two"
+      label="Multline"
+      multiline
+      style={{ resize: 'none' }}
+      rows={3}
+      helperText="Helper text"
+      variant="success"
+      inputIcon={<Icon name="warning_filled" title="Warning" />}
+    />
   </Wrapper>
 )
 
 Variants.parameters = {
   docs: {
     storyDescription: `Examples of validation states. You can add the icon in the helper
-    text or inside the text input, both not both places.`,
+    text or inside the text input, both not in both places.`,
   },
 }

From 60af98789ae5d55a053db0f7a0804451e9bc8ed2 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 15:01:09 +0100
Subject: [PATCH 18/32] =?UTF-8?q?=F0=9F=93=9D=20More=20clarifications=20in?=
 =?UTF-8?q?=20the=20stories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/components/TextField.stories.tsx  | 62 ++++++++-----------
 1 file changed, 27 insertions(+), 35 deletions(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 7f3591cb37..ecebe9d53a 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -95,7 +95,6 @@ export const Multiline: Story<TextFieldProps> = () => (
       id="storybook-multiline"
       placeholder="Placeholder text"
       label="Multline"
-      meta="Meta"
       helperText="Helper Text"
       multiline
       style={{ resize: 'none' }}
@@ -130,6 +129,14 @@ export const Disabled: Story<TextFieldProps> = () => (
       helperText="Helper Text"
       disabled
     />
+    <TextField
+      id="storybook-unit-four"
+      placeholder="Placeholder text text text"
+      label="Disabled price"
+      unit="$"
+      disabled
+      inputIcon={<Icon name="warning_filled" />}
+    />
     <TextField
       id="storybook-disabled-two"
       defaultValue="Input text"
@@ -138,6 +145,24 @@ export const Disabled: Story<TextFieldProps> = () => (
       helperText="Helper Text"
       disabled
     />
+    <TextField
+      id="storybook-disabled-two"
+      defaultValue="Input text"
+      label="Disabled with value"
+      meta="Meta"
+      disabled
+      helperText="Helper Text"
+      inputIcon={<Icon name="thumbs_up" />}
+    />
+
+    <TextField
+      id="storybook-unit-four"
+      defaultValue="Input value"
+      label="Disabled price"
+      unit="$"
+      disabled
+      inputIcon={<Icon name="warning_filled" />}
+    />
   </Wrapper>
 )
 export const WithUnit: Story<TextFieldProps> = () => (
@@ -154,29 +179,6 @@ export const WithUnit: Story<TextFieldProps> = () => (
       label="Speed"
       unit="km/h"
     />
-    <TextField
-      id="storybook-unit-three"
-      placeholder="Placeholder text text text"
-      label="Price"
-      unit="$"
-      inputIcon={<Icon name="thumbs_up" />}
-    />
-    <TextField
-      id="storybook-unit-four"
-      placeholder="Placeholder text text text"
-      label="Disabled price"
-      unit="$"
-      disabled
-      inputIcon={<Icon name="warning_filled" />}
-    />
-    <TextField
-      id="storybook-unit-four"
-      defaultValue="Input value"
-      label="Disabled price"
-      unit="$"
-      disabled
-      inputIcon={<Icon name="warning_filled" />}
-    />
   </Wrapper>
 )
 
@@ -206,16 +208,6 @@ export const WithIcons: Story<TextFieldProps> = () => (
       helperText="Helper Text"
       inputIcon={<Icon name="thumbs_up" />}
     />
-
-    <TextField
-      id="storybook-disabled-two"
-      defaultValue="Input text"
-      label="Disabled with value"
-      meta="Meta"
-      disabled
-      helperText="Helper Text"
-      inputIcon={<Icon name="thumbs_up" />}
-    />
   </Wrapper>
 )
 WithIcons.storyName = 'With icons'
@@ -235,7 +227,7 @@ export const Variants: Story<TextFieldProps> = () => (
       id="storybook-error-two"
       placeholder="Placeholder text "
       label="Error"
-      meta="Meta"
+      unit="Unit"
       helperText="Validation error"
       variant="error"
       inputIcon={<Icon name="error_filled" title="Error" />}

From 16e69a59f812e918d0f5d72896e904cb46ca3361 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 15:09:52 +0100
Subject: [PATCH 19/32] =?UTF-8?q?=E2=9C=A8=20Separate=20disabled=20color?=
 =?UTF-8?q?=20for=20unit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TextField/InputWrapper.tsx        | 12 ++++++++++--
 .../src/components/TextField/TextField.tokens.ts     |  7 +++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 8872ebab34..e214216109 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -60,12 +60,20 @@ export const InputWithAdornments = styled.div<InputWithAdornmentsType>`
     }}
 `
 
-const Unit = styled.span`
+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 = {
@@ -137,7 +145,7 @@ export const InputWrapper = React.forwardRef<
         >
           <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
           <Adornments multiline={multiline}>
-            {unit && <Unit>{unit}</Unit>}
+            {unit && <Unit isDisabled={disabled}>{unit}</Unit>}
             {inputIcon && (
               <Icon isDisabled={disabled} variant={variant}>
                 {inputIcon}
diff --git a/libraries/core-react/src/components/TextField/TextField.tokens.ts b/libraries/core-react/src/components/TextField/TextField.tokens.ts
index c27cf87414..58adadb0c3 100644
--- a/libraries/core-react/src/components/TextField/TextField.tokens.ts
+++ b/libraries/core-react/src/components/TextField/TextField.tokens.ts
@@ -37,6 +37,13 @@ export const textfield: ComponentToken = {
         ...typography.input.label,
         color: colors.text.static_icons__tertiary.hex,
       },
+      states: {
+        disabled: {
+          typography: {
+            color: colors.interactive.disabled__text.hex,
+          },
+        },
+      },
     },
   },
 }

From a61567c392dfdcd42059a8e36b7e6c6a65e1218d Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 15:16:03 +0100
Subject: [PATCH 20/32] =?UTF-8?q?=F0=9F=93=9D=20Add=20a=20more=20complete?=
 =?UTF-8?q?=20TextField=20as=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/stories/components/TextField.stories.tsx  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index ecebe9d53a..8f8702fadf 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -39,7 +39,14 @@ const Wrapper = styled.div`
   grid-template-columns: repeat(2, fit-content(100%));
 `
 export const Default: Story<TextFieldProps> = (args) => (
-  <TextField {...args}></TextField>
+  <TextField
+    meta="meta"
+    id="playWithMe"
+    label="Play with me"
+    unit="Unit"
+    helperText="Helper text"
+    {...args}
+  ></TextField>
 )
 
 export const types: Story<TextFieldProps> = () => (

From 2eef26508febf7dbcf354cc1476dd72ae5d28d69 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 15:25:36 +0100
Subject: [PATCH 21/32] =?UTF-8?q?=F0=9F=93=9D=20Better=20textfield=20in=20?=
 =?UTF-8?q?demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 libraries/core-react/stories/components/TextField.stories.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 8f8702fadf..811015e210 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -45,6 +45,8 @@ export const Default: Story<TextFieldProps> = (args) => (
     label="Play with me"
     unit="Unit"
     helperText="Helper text"
+    style={{ resize: 'none' }}
+    rows={3}
     {...args}
   ></TextField>
 )

From 73851cbf9ea9572138367fb08f3489fe90c00879 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Fri, 12 Mar 2021 16:07:15 +0100
Subject: [PATCH 22/32] =?UTF-8?q?=F0=9F=93=9D=20Change=20helperIcon=20and?=
 =?UTF-8?q?=20inputIcon=20by=20selecting=20from=20defined=20options.=20Sol?=
 =?UTF-8?q?ve=20#1128?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/components/TextField.stories.tsx  | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 811015e210..9a9ec570af 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -3,22 +3,42 @@ import { TextField, TextFieldProps, Icon } from '@components'
 import { Story, Meta } from '@storybook/react'
 import { thumbs_up, warning_filled, error_filled } from '@equinor/eds-icons'
 
-Icon.add({
+const icons = {
   thumbs_up,
   warning_filled,
   error_filled,
-})
+}
 
+Icon.add(icons)
 import styled from 'styled-components'
 
 export default {
   title: 'Components/TextField',
   component: TextField,
   argTypes: {
-    rows: {
-      control: 'number',
-      description: 'Rows when "multiline" is true',
-      default: 1,
+    inputIcon: {
+      control: {
+        type: 'select',
+        options: {
+          error: [<Icon name="error_filled" key="error" />],
+          warning: [<Icon name="warning_filled" key="warning" />],
+          success: [<Icon name="thumbs_up" key="thumbs" />],
+        },
+      },
+      description:
+        'Please note that the option list of icons is not complete, this selection is only for demo purposes',
+    },
+    helperIcon: {
+      control: {
+        type: 'select',
+        options: {
+          error: [<Icon name="error_filled" key="error" />],
+          warning: [<Icon name="warning_filled" key="warning" />],
+          success: [<Icon name="thumbs_up" key="thumbs" />],
+        },
+      },
+      description:
+        'Please note that the option list of icons is not complete, this selection is only for demo purposes',
     },
   },
   parameters: {

From 43e705d8828cf5d379c292d968bc65cf4ff1f000 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Mon, 15 Mar 2021 19:04:16 +0100
Subject: [PATCH 23/32] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Remove=20unused?=
 =?UTF-8?q?=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 libraries/core-react/src/components/Input/Input.tsx            | 2 --
 libraries/core-react/src/components/TextField/InputWrapper.tsx | 1 -
 2 files changed, 3 deletions(-)

diff --git a/libraries/core-react/src/components/Input/Input.tsx b/libraries/core-react/src/components/Input/Input.tsx
index 0571300a41..0f24615430 100644
--- a/libraries/core-react/src/components/Input/Input.tsx
+++ b/libraries/core-react/src/components/Input/Input.tsx
@@ -94,8 +94,6 @@ 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>(
diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index e214216109..b4f1279eab 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -84,7 +84,6 @@ const Adornments = styled.div<AdornmentsType>`
   display: flex;
   align-items: center;
   justify-content: center;
-
   height: 100%;
   margin-left: ${textfield.spacings.left};
   & div:nth-child(2) {

From 1bb0c41e1df4a2f6b1c82125db578d408d0530ef Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Mon, 15 Mar 2021 19:05:31 +0100
Subject: [PATCH 24/32] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Fix=20typo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 libraries/core-react/stories/components/TextField.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index 9a9ec570af..d6130c8bcc 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -123,7 +123,7 @@ export const Multiline: Story<TextFieldProps> = () => (
     <TextField
       id="storybook-multiline"
       placeholder="Placeholder text"
-      label="Multline"
+      label="Multiline"
       helperText="Helper Text"
       multiline
       style={{ resize: 'none' }}

From ef5072fe78555226566447040ec838fb58f32162 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Mon, 15 Mar 2021 19:26:21 +0100
Subject: [PATCH 25/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Let=20InputWrapper?=
 =?UTF-8?q?=20extend=20Input=20and=20remove=20outline=20and=20box=20shadow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Will probably remove outline all together as we move on and this will make things more simple.
---
 .../core-react/src/components/Input/Input.tsx    | 11 +----------
 .../src/components/TextField/InputWrapper.tsx    | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/libraries/core-react/src/components/Input/Input.tsx b/libraries/core-react/src/components/Input/Input.tsx
index 0f24615430..f724e04a6c 100644
--- a/libraries/core-react/src/components/Input/Input.tsx
+++ b/libraries/core-react/src/components/Input/Input.tsx
@@ -3,7 +3,6 @@ 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'
 
@@ -27,9 +26,7 @@ const Variation = ({
     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;
@@ -37,12 +34,6 @@ const Variation = ({
       outline: ${focusBorderOutline.width} solid ${focusBorderOutline.color};
     }
 
-    ${InputWithAdornments} &:active,
-    ${InputWithAdornments} &:focus {
-      outline: none;
-      box-shadow: none;
-    }
-
     &:disabled {
       cursor: not-allowed;
       box-shadow: none;
diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index b4f1279eab..8f5869406a 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -39,6 +39,16 @@ const Variation = ({
   `
 }
 
+const StyledInput = styled(Input)`
+  outline: none;
+
+  &:active,
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+`
+
 type InputWithAdornmentsType = {
   isFocused: boolean
   isDisabled: boolean
@@ -142,7 +152,11 @@ export const InputWrapper = React.forwardRef<
           variant={variant}
           token={inputVariant}
         >
-          <Input onBlur={handleBlur} onFocus={handleFocus} {...inputProps} />
+          <StyledInput
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            {...inputProps}
+          />
           <Adornments multiline={multiline}>
             {unit && <Unit isDisabled={disabled}>{unit}</Unit>}
             {inputIcon && (

From a48db283c6140e1c48eed877e241b8dfe1417ca4 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Mon, 15 Mar 2021 19:33:28 +0100
Subject: [PATCH 26/32] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Use=20TextFieldTy?=
 =?UTF-8?q?pe=20to=20type=20the=20use=20of=20entities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TextField/InputWrapper.tsx       |  6 +++---
 .../src/components/TextField/TextField.tokens.ts    | 13 +++++++++----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 8f5869406a..44df75b3a2 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -4,7 +4,7 @@ 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 type { TextFieldToken } from './TextField.tokens'
 import styled, { css } from 'styled-components'
 import { typographyTemplate, outlineTemplate } from '@utils'
 import * as tokens from './TextField.tokens'
@@ -17,7 +17,7 @@ const Variation = ({
   token,
 }: {
   variant: string
-  token: ComponentToken
+  token: TextFieldToken
   isFocused: boolean
 }) => {
   if (!variant) {
@@ -53,7 +53,7 @@ type InputWithAdornmentsType = {
   isFocused: boolean
   isDisabled: boolean
   variant: string
-  token: ComponentToken
+  token: TextFieldToken
 }
 
 export const InputWithAdornments = styled.div<InputWithAdornmentsType>`
diff --git a/libraries/core-react/src/components/TextField/TextField.tokens.ts b/libraries/core-react/src/components/TextField/TextField.tokens.ts
index 58adadb0c3..4cc94dd721 100644
--- a/libraries/core-react/src/components/TextField/TextField.tokens.ts
+++ b/libraries/core-react/src/components/TextField/TextField.tokens.ts
@@ -7,7 +7,12 @@ const {
   spacings: { comfortable },
 } = tokens
 
-export const textfield: ComponentToken = {
+export type TextFieldToken = ComponentToken & {
+  entities?: {
+    unit: ComponentToken
+  }
+}
+export const textfield: TextFieldToken = {
   background: colors.ui.background__light.hex,
   border: {
     type: 'border',
@@ -48,7 +53,7 @@ export const textfield: ComponentToken = {
   },
 }
 
-export const error: ComponentToken = {
+export const error: TextFieldToken = {
   border: {
     type: 'border',
     radius: 0,
@@ -67,7 +72,7 @@ export const error: ComponentToken = {
     },
   },
 }
-export const warning: ComponentToken = {
+export const warning: TextFieldToken = {
   border: {
     type: 'border',
     radius: 0,
@@ -86,7 +91,7 @@ export const warning: ComponentToken = {
     },
   },
 }
-export const success: ComponentToken = {
+export const success: TextFieldToken = {
   border: {
     type: 'border',
     radius: 0,

From 7ff84896d4f7667ac8dd02481d19764d62ce90a7 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Mon, 15 Mar 2021 19:41:07 +0100
Subject: [PATCH 27/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Easier=20to=20read?=
 =?UTF-8?q?=20with=20this=20Mickey-invented=20syntax=20:heart:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/src/components/TextField/InputWrapper.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 44df75b3a2..941de87d69 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -59,8 +59,10 @@ type InputWithAdornmentsType = {
 export const InputWithAdornments = styled.div<InputWithAdornmentsType>`
   display: flex;
   align-items: center;
-  background: ${textfield.background};
-  padding-right: ${textfield.spacings.right};
+  ${{
+    background: textfield.background,
+    paddingRight: textfield.spacings.right,
+  }}
   ${Variation}
   ${({ isDisabled }) =>
     isDisabled && {

From 3c9a85cf146bc838868ec8dbcc2988b475ee77f7 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Mon, 15 Mar 2021 19:43:21 +0100
Subject: [PATCH 28/32] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Unit=20optional?=
 =?UTF-8?q?=20as=20well?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/src/components/TextField/TextField.tokens.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libraries/core-react/src/components/TextField/TextField.tokens.ts b/libraries/core-react/src/components/TextField/TextField.tokens.ts
index 4cc94dd721..e789ca2a14 100644
--- a/libraries/core-react/src/components/TextField/TextField.tokens.ts
+++ b/libraries/core-react/src/components/TextField/TextField.tokens.ts
@@ -9,7 +9,7 @@ const {
 
 export type TextFieldToken = ComponentToken & {
   entities?: {
-    unit: ComponentToken
+    unit?: ComponentToken
   }
 }
 export const textfield: TextFieldToken = {

From 4c574c38b438bffed7c3d73797725ae562808900 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Mon, 15 Mar 2021 19:53:00 +0100
Subject: [PATCH 29/32] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Remove=20duplicate?=
 =?UTF-8?q?=20ids?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/stories/components/TextField.stories.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index d6130c8bcc..b4963b9aec 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -175,7 +175,7 @@ export const Disabled: Story<TextFieldProps> = () => (
       disabled
     />
     <TextField
-      id="storybook-disabled-two"
+      id="storybook-disabled-thumbs"
       defaultValue="Input text"
       label="Disabled with value"
       meta="Meta"
@@ -185,7 +185,7 @@ export const Disabled: Story<TextFieldProps> = () => (
     />
 
     <TextField
-      id="storybook-unit-four"
+      id="storybook-unit-four-input"
       defaultValue="Input value"
       label="Disabled price"
       unit="$"
@@ -222,7 +222,7 @@ export const WithIcons: Story<TextFieldProps> = () => (
       inputIcon={<Icon name="thumbs_up" />}
     />
     <TextField
-      id="storybook-disabled"
+      id="storybook-disabled-with-icons"
       placeholder="Placeholder text"
       label="Disabled input"
       disabled

From 5e4db76e9d87c49c8306640bafe03d8b6f0298a8 Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Tue, 16 Mar 2021 10:49:29 +0100
Subject: [PATCH 30/32] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Fix=20the=20rest=20o?=
 =?UTF-8?q?f=20the=20multline=20typos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/components/TextField.stories.tsx       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/libraries/core-react/stories/components/TextField.stories.tsx b/libraries/core-react/stories/components/TextField.stories.tsx
index b4963b9aec..f065040953 100644
--- a/libraries/core-react/stories/components/TextField.stories.tsx
+++ b/libraries/core-react/stories/components/TextField.stories.tsx
@@ -133,7 +133,7 @@ export const Multiline: Story<TextFieldProps> = () => (
     <TextField
       id="storybook-multiline-two"
       placeholder="Placeholder text"
-      label="Multline with icon"
+      label="Multiline with icon"
       multiline
       style={{ resize: 'none' }}
       rows={3}
@@ -299,7 +299,7 @@ export const Variants: Story<TextFieldProps> = () => (
     />
     <TextField
       id="multi-error"
-      label="Multline"
+      label="Multiline"
       multiline
       style={{ resize: 'none' }}
       rows={3}
@@ -309,7 +309,7 @@ export const Variants: Story<TextFieldProps> = () => (
     />
     <TextField
       id="multi-error-two"
-      label="Multline"
+      label="Multiline"
       multiline
       style={{ resize: 'none' }}
       rows={3}
@@ -319,7 +319,7 @@ export const Variants: Story<TextFieldProps> = () => (
     />
     <TextField
       id="multi-warning"
-      label="Multline"
+      label="Multiline"
       multiline
       style={{ resize: 'none' }}
       rows={3}
@@ -329,7 +329,7 @@ export const Variants: Story<TextFieldProps> = () => (
     />
     <TextField
       id="multi-warning-two"
-      label="Multline"
+      label="Multiline"
       multiline
       style={{ resize: 'none' }}
       rows={3}
@@ -339,7 +339,7 @@ export const Variants: Story<TextFieldProps> = () => (
     />
     <TextField
       id="multi-success"
-      label="Multline"
+      label="Multiline"
       multiline
       style={{ resize: 'none' }}
       rows={3}
@@ -349,7 +349,7 @@ export const Variants: Story<TextFieldProps> = () => (
     />
     <TextField
       id="multi-success-two"
-      label="Multline"
+      label="Multiline"
       multiline
       style={{ resize: 'none' }}
       rows={3}

From 92a9d0c752281888cc1b5e2bea89bfc2f11f370b Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Tue, 16 Mar 2021 11:07:12 +0100
Subject: [PATCH 31/32] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Use=20correct=20t?=
 =?UTF-8?q?ype=20name.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core-react/src/components/TextField/InputWrapper.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index 941de87d69..a97d4ca9d1 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -108,7 +108,7 @@ const Adornments = styled.div<AdornmentsType>`
     }}
 `
 
-type TextfieldInputProps = {
+type InputWrapperProps = {
   /** Specifies if text should be bold */
   multiline?: boolean
   /** Placeholder */
@@ -121,13 +121,15 @@ type TextfieldInputProps = {
   type?: string
   /** Read Only */
   readonly?: boolean
+  /** Unit text */
   unit?: string
+  /* Input icon */
   inputIcon?: ReactNode
 } & InputHTMLAttributes<HTMLInputElement>
 
 export const InputWrapper = React.forwardRef<
   HTMLInputElement,
-  TextfieldInputProps
+  InputWrapperProps
 >(function InputWrapper(
   { multiline, variant, disabled, type, unit, inputIcon, ...other },
   ref,

From e5b4019b2ba894bb08de24acb263e22019629ddf Mon Sep 17 00:00:00 2001
From: Wenche Tollevsen <wenche.tollevsen@gmail.com>
Date: Tue, 16 Mar 2021 12:17:09 +0100
Subject: [PATCH 32/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Remove=20func?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TextField/InputWrapper.tsx   | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/libraries/core-react/src/components/TextField/InputWrapper.tsx b/libraries/core-react/src/components/TextField/InputWrapper.tsx
index a97d4ca9d1..4989d2407b 100644
--- a/libraries/core-react/src/components/TextField/InputWrapper.tsx
+++ b/libraries/core-react/src/components/TextField/InputWrapper.tsx
@@ -25,16 +25,13 @@ const Variation = ({
   }
 
   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
-          }`};
+    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)}
   `
 }