From 3f9b3565b09e7beb112a96ecc5828c9c7dbd65bb Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Mon, 27 Jun 2022 15:09:20 +0200
Subject: [PATCH 01/20] =?UTF-8?q?=F0=9F=9A=A7=20WIP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HelperText/HelperText.token.ts            | 59 +++++++++++++++++
 .../InputWrapper/HelperText/HelperText.tsx    | 47 ++++++++++++++
 .../InputWrapper/HelperText/index.ts          |  1 +
 .../components/InputWrapper/InputWrapper.tsx  | 64 +++++++++++++++++++
 .../src/components/InputWrapper/index.tsx     |  1 +
 5 files changed, 172 insertions(+)
 create mode 100644 packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts
 create mode 100644 packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
 create mode 100644 packages/eds-core-react/src/components/InputWrapper/HelperText/index.ts
 create mode 100644 packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
 create mode 100644 packages/eds-core-react/src/components/InputWrapper/index.tsx

diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts
new file mode 100644
index 0000000000..72c8c314f4
--- /dev/null
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts
@@ -0,0 +1,59 @@
+import { tokens } from '@equinor/eds-tokens'
+import type { Spacing, Typography } from '@equinor/eds-tokens'
+
+const {
+  colors,
+  spacings: { comfortable },
+  typography,
+} = tokens
+
+export type HelperTextProps = {
+  background: string
+  typography: Typography
+  spacings: {
+    comfortable: Spacing
+    compact: Spacing
+  }
+}
+
+export const helperText: HelperTextProps = {
+  background: colors.ui.background__light.hex,
+  typography: typography.input.helper,
+  spacings: {
+    comfortable: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: comfortable.small,
+      bottom: '6px',
+    },
+    compact: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: comfortable.xx_small,
+      bottom: '6px',
+    },
+  },
+}
+
+const colorVariants = {
+  default: {
+    color: colors.text.static_icons__tertiary.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.text.static_icons__tertiary.hex,
+  },
+  error: {
+    color: colors.interactive.danger__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.danger__hover.hex,
+  },
+  warning: {
+    color: colors.interactive.warning__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.warning__hover.hex,
+  },
+  success: {
+    color: colors.interactive.success__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.success__hover.hex,
+  },
+}
diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
new file mode 100644
index 0000000000..f740e14516
--- /dev/null
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
@@ -0,0 +1,47 @@
+import { ReactNode, forwardRef } from 'react'
+import styled from 'styled-components'
+import { typographyTemplate } from '@equinor/eds-utils'
+import { helperText as tokens } from './HelperText.token'
+import { Icon } from '../../Icon'
+import type { Spacing } from '@equinor/eds-tokens'
+
+type VariationProps = {
+  isFocused?: boolean
+  isDisabled?: boolean
+}
+
+type StyledProps = {
+  spacings?: Spacing
+}
+
+const Container = styled.div<StyledProps>`
+  display: flex;
+  align-items: flex-start;
+  margin-top: ${({ spacings }) => spacings.top};
+`
+const Text = styled.p<StyledProps & VariationProps>`
+  ${typographyTemplate(tokens.typography)}
+  margin: 0 0 0 ${({ spacings }) => spacings.left};
+`
+
+type HelperTextProps = {
+  /** Helper text */
+  text?: string
+  /** Icon */
+  icon?: ReactNode
+  /** Disabled */
+  disabled?: boolean
+}
+
+const TextfieldHelperText = forwardRef<HTMLDivElement, HelperTextProps>(
+  function TextfieldHelperText({ text, icon, ...rest }, ref) {
+    return (
+      <Container ref={ref} {...rest}>
+        {icon && <Icon size={16}>{icon}</Icon>}
+        <Text>{text}</Text>
+      </Container>
+    )
+  },
+)
+
+export { TextfieldHelperText as HelperText }
diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/index.ts b/packages/eds-core-react/src/components/InputWrapper/HelperText/index.ts
new file mode 100644
index 0000000000..23c77d008a
--- /dev/null
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/index.ts
@@ -0,0 +1 @@
+export { HelperText } from './HelperText'
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
new file mode 100644
index 0000000000..49194a5325
--- /dev/null
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
@@ -0,0 +1,64 @@
+import { ReactNode, forwardRef } from 'react'
+import styled, { css } from 'styled-components'
+import { Label } from '../Label'
+import { useEds } from './../EdsProvider'
+
+type InputWrapperType = {
+  isFocused?: boolean
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  variant?: string
+  inputIcon?: ReactNode
+  unit?: string
+  multiline?: boolean
+}
+
+export const Box = styled.div<InputWrapperType>``
+
+type UnitType = {
+  isDisabled: boolean
+}
+
+const Unit = styled.span<UnitType>`
+  // TODO 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;
+`
+
+const Adornments = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  align-self: flex-start;
+`
+
+type InputWrapperProps = {
+  /** Label */
+  label: string
+  /** Meta */
+  meta: string
+  /** Disabled state */
+  disabled?: boolean
+
+  /** Read Only */
+  readOnly?: boolean
+}
+
+export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(
+  function InputWrapper(
+    { disabled, readOnly, label, meta, children, ...other },
+    ref,
+  ) {
+    const { density } = useEds()
+
+    return (
+      <Box {...other} ref={ref}>
+        <Label label={label} meta={meta} />
+        {children}
+      </Box>
+    )
+  },
+)
diff --git a/packages/eds-core-react/src/components/InputWrapper/index.tsx b/packages/eds-core-react/src/components/InputWrapper/index.tsx
new file mode 100644
index 0000000000..7472ad1d6e
--- /dev/null
+++ b/packages/eds-core-react/src/components/InputWrapper/index.tsx
@@ -0,0 +1 @@
+export { InputWrapper } from './InputWrapper'

From c96d13e92c66b6f4c342b0641207feeef4d7e5d1 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Tue, 28 Jun 2022 10:02:50 +0200
Subject: [PATCH 02/20] =?UTF-8?q?=F0=9F=93=9D=20Added=20story?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputWrapper/InputWrapper.stories.tsx     | 14 +++++++++++
 .../components/InputWrapper/InputWrapper.tsx  | 24 +++++++------------
 .../src/components/InputWrapper/index.tsx     |  2 +-
 packages/eds-core-react/src/index.ts          |  1 +
 4 files changed, 25 insertions(+), 16 deletions(-)
 create mode 100644 packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx

diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
new file mode 100644
index 0000000000..00d257bdc5
--- /dev/null
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
@@ -0,0 +1,14 @@
+import { InputWrapper, InputWrapperProps, Input } from '../..'
+import { Story } from '@storybook/react/types-6-0'
+import { ComponentMeta } from '@storybook/react'
+
+export default {
+  title: 'Inputs/InputWrapper',
+  component: InputWrapper,
+} as ComponentMeta<typeof InputWrapper>
+
+export const Introduction: Story<InputWrapperProps> = (args) => (
+  <InputWrapper label="I'm a label, play with me!" {...args}>
+    <Input />
+  </InputWrapper>
+)
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
index 49194a5325..02e2aafd21 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
@@ -1,19 +1,14 @@
-import { ReactNode, forwardRef } from 'react'
+import { HTMLAttributes, forwardRef } from 'react'
 import styled, { css } from 'styled-components'
 import { Label } from '../Label'
 import { useEds } from './../EdsProvider'
 
-type InputWrapperType = {
-  isFocused?: boolean
-  isDisabled?: boolean
-  isReadOnly?: boolean
-  variant?: string
-  inputIcon?: ReactNode
-  unit?: string
-  multiline?: boolean
-}
-
-export const Box = styled.div<InputWrapperType>``
+export const Box = styled.div`
+  display: grid;
+  gap: 8px;
+  grid-template-columns: auto;
+  align-items: center;
+`
 
 type UnitType = {
   isDisabled: boolean
@@ -29,13 +24,12 @@ const Unit = styled.span<UnitType>`
 
 const Adornments = styled.div`
   display: flex;
-  align-items: center;
   justify-content: center;
   height: 100%;
   align-self: flex-start;
 `
 
-type InputWrapperProps = {
+export type InputWrapperProps = {
   /** Label */
   label: string
   /** Meta */
@@ -45,7 +39,7 @@ type InputWrapperProps = {
 
   /** Read Only */
   readOnly?: boolean
-}
+} & HTMLAttributes<HTMLDivElement>
 
 export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(
   function InputWrapper(
diff --git a/packages/eds-core-react/src/components/InputWrapper/index.tsx b/packages/eds-core-react/src/components/InputWrapper/index.tsx
index 7472ad1d6e..8099646987 100644
--- a/packages/eds-core-react/src/components/InputWrapper/index.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/index.tsx
@@ -1 +1 @@
-export { InputWrapper } from './InputWrapper'
+export * from './InputWrapper'
diff --git a/packages/eds-core-react/src/index.ts b/packages/eds-core-react/src/index.ts
index 5ff66c4536..8e025e8aa9 100644
--- a/packages/eds-core-react/src/index.ts
+++ b/packages/eds-core-react/src/index.ts
@@ -35,4 +35,5 @@ export * from './components/Switch'
 export * from './components/EdsProvider'
 export * from './components/Paper'
 export * from './components/Autocomplete'
+export * from './components/InputWrapper'
 /* eslint-enable */

From 5efa75b2fe4b3ecf119681eb70e51e67d39daf86 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Tue, 28 Jun 2022 15:51:19 +0200
Subject: [PATCH 03/20] wip

---
 .../InputWrapper/HelperText/HelperText.tsx    |  4 ++++
 .../components/InputWrapper/InputWrapper.tsx  | 23 +++++++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
index f740e14516..4c5d152f43 100644
--- a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
@@ -35,6 +35,10 @@ type HelperTextProps = {
 
 const TextfieldHelperText = forwardRef<HTMLDivElement, HelperTextProps>(
   function TextfieldHelperText({ text, icon, ...rest }, ref) {
+    if (!text) {
+      return null
+    }
+
     return (
       <Container ref={ref} {...rest}>
         {icon && <Icon size={16}>{icon}</Icon>}
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
index 02e2aafd21..80fc23fccb 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
@@ -1,6 +1,8 @@
-import { HTMLAttributes, forwardRef } from 'react'
+import { HTMLAttributes, forwardRef, ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 import { Label } from '../Label'
+import { HelperText } from './HelperText'
+import { Icon } from '../Icon'
 import { useEds } from './../EdsProvider'
 
 export const Box = styled.div`
@@ -22,7 +24,7 @@ const Unit = styled.span<UnitType>`
   margin-top: 3px;
 `
 
-const Adornments = styled.div`
+export const Adornments = styled.div`
   display: flex;
   justify-content: center;
   height: 100%;
@@ -36,14 +38,26 @@ export type InputWrapperProps = {
   meta: string
   /** Disabled state */
   disabled?: boolean
-
   /** Read Only */
   readOnly?: boolean
+  /** Helper text icon */
+  helperIcon?: typeof Icon
+  /** Helper text */
+  helperText?: string
 } & HTMLAttributes<HTMLDivElement>
 
 export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(
   function InputWrapper(
-    { disabled, readOnly, label, meta, children, ...other },
+    {
+      disabled,
+      readOnly,
+      label,
+      meta,
+      children,
+      helperIcon,
+      helperText,
+      ...other
+    },
     ref,
   ) {
     const { density } = useEds()
@@ -52,6 +66,7 @@ export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(
       <Box {...other} ref={ref}>
         <Label label={label} meta={meta} />
         {children}
+        <HelperText icon={helperIcon} text={helperText}></HelperText>
       </Box>
     )
   },

From dafcf19a3d95c3947eba17c8c3be40e8033983cb Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 29 Jun 2022 14:18:28 +0200
Subject: [PATCH 04/20] =?UTF-8?q?=F0=9F=9A=A7=20WIP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HelperText/HelperText.token.ts            |   5 +-
 .../InputWrapper/HelperText/HelperText.tsx    |  26 +--
 .../InputWrapper/InputWrapper.stories.tsx     |  34 +++-
 .../InputWrapper/InputWrapper.tokens.ts       | 180 ++++++++++++++++++
 .../components/InputWrapper/InputWrapper.tsx  |  83 +++++---
 .../src/components/InputWrapper/index.tsx     |  19 +-
 6 files changed, 299 insertions(+), 48 deletions(-)
 create mode 100644 packages/eds-core-react/src/components/InputWrapper/InputWrapper.tokens.ts

diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts
index 72c8c314f4..485c079ae4 100644
--- a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts
@@ -18,7 +18,10 @@ export type HelperTextProps = {
 
 export const helperText: HelperTextProps = {
   background: colors.ui.background__light.hex,
-  typography: typography.input.helper,
+  typography: {
+    ...typography.input.helper,
+    color: colors.text.static_icons__tertiary.rgba,
+  },
   spacings: {
     comfortable: {
       left: comfortable.small,
diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
index 4c5d152f43..19787ed40e 100644
--- a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, forwardRef } from 'react'
+import React, { forwardRef, useMemo, cloneElement, ReactElement } from 'react'
 import styled from 'styled-components'
 import { typographyTemplate } from '@equinor/eds-utils'
 import { helperText as tokens } from './HelperText.token'
@@ -10,38 +10,38 @@ type VariationProps = {
   isDisabled?: boolean
 }
 
-type StyledProps = {
-  spacings?: Spacing
-}
-
-const Container = styled.div<StyledProps>`
-  display: flex;
-  align-items: flex-start;
-  margin-top: ${({ spacings }) => spacings.top};
+const Container = styled.div`
+  display: grid;
+  gap: 8px;
+  grid-auto-flow: column;
+  align-items: start;
+  justify-content: start;
+  color: ${tokens.typography.color};
 `
-const Text = styled.p<StyledProps & VariationProps>`
+const Text = styled.p<VariationProps>`
   ${typographyTemplate(tokens.typography)}
-  margin: 0 0 0 ${({ spacings }) => spacings.left};
 `
 
 type HelperTextProps = {
   /** Helper text */
   text?: string
   /** Icon */
-  icon?: ReactNode
+  icon?: ReactElement
   /** Disabled */
   disabled?: boolean
 }
 
 const TextfieldHelperText = forwardRef<HTMLDivElement, HelperTextProps>(
   function TextfieldHelperText({ text, icon, ...rest }, ref) {
+    const smallIcon = useMemo(() => cloneElement(icon, { size: 16 }), [icon])
+
     if (!text) {
       return null
     }
 
     return (
       <Container ref={ref} {...rest}>
-        {icon && <Icon size={16}>{icon}</Icon>}
+        {smallIcon}
         <Text>{text}</Text>
       </Container>
     )
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
index 00d257bdc5..35fa6b1649 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
@@ -1,14 +1,38 @@
-import { InputWrapper, InputWrapperProps, Input } from '../..'
-import { Story } from '@storybook/react/types-6-0'
-import { ComponentMeta } from '@storybook/react'
+import { Story, ComponentMeta } from '@storybook/react'
+import { accessible, dropper } from '@equinor/eds-icons'
+import { InputWrapper, InputWrapperProps, Input, Icon } from '../..'
+import styled from 'styled-components'
 
 export default {
   title: 'Inputs/InputWrapper',
   component: InputWrapper,
 } as ComponentMeta<typeof InputWrapper>
 
+const StrippedInput = styled(Input)`
+  box-shadow: none;
+  background: none;
+  padding: 0;
+  &:active,
+  &:focus {
+    outline: none;
+  }
+`
+
 export const Introduction: Story<InputWrapperProps> = (args) => (
-  <InputWrapper label="I'm a label, play with me!" {...args}>
-    <Input />
+  <InputWrapper
+    label="I'm a label, play with me!"
+    helperIcon={<Icon data={accessible} />}
+    {...args}
+  >
+    <InputWrapper.Adornments>left</InputWrapper.Adornments>
+    <StrippedInput />
+    <InputWrapper.Adornments>
+      right
+      <Icon data={dropper} />
+    </InputWrapper.Adornments>
   </InputWrapper>
 )
+
+Introduction.args = {
+  helperText: 'Helper text',
+}
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tokens.ts b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tokens.ts
new file mode 100644
index 0000000000..28213f7eb3
--- /dev/null
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tokens.ts
@@ -0,0 +1,180 @@
+import { tokens } from '@equinor/eds-tokens'
+import type { ComponentToken } from '@equinor/eds-tokens'
+import { mergeDeepRight } from 'ramda'
+
+const {
+  colors: {
+    ui: {
+      background__light: { rgba: background },
+    },
+    text: { static_icons__default, static_icons__tertiary },
+    interactive: {
+      disabled__text,
+      primary__resting,
+      danger__resting,
+      danger__hover,
+      warning__resting,
+      warning__hover,
+      success__resting,
+      success__hover,
+    },
+  },
+  spacings: {
+    comfortable: { small, x_small },
+  },
+  typography,
+  shape,
+} = tokens
+
+export type InputToken = ComponentToken
+
+export const input: InputToken = {
+  minHeight: shape.straight.minHeight,
+  background,
+  spacings: {
+    left: small,
+    right: small,
+    top: '6px',
+    bottom: '6px',
+  },
+  typography: {
+    ...typography.input.text,
+    color: static_icons__default.rgba,
+  },
+  entities: {
+    placeholder: {
+      typography: {
+        color: static_icons__tertiary.rgba,
+      },
+    },
+
+    adornment: {
+      typography: {
+        ...typography.input.label,
+        color: static_icons__tertiary.rgba,
+      },
+      states: {
+        disabled: {
+          typography: {
+            color: disabled__text.rgba,
+          },
+        },
+      },
+    },
+  },
+  states: {
+    disabled: {
+      typography: {
+        color: disabled__text.rgba,
+      },
+    },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none',
+    },
+    active: {
+      outline: {
+        type: 'outline',
+        color: 'transparent',
+        width: '1px',
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: primary__resting.rgba,
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+  },
+  boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
+  modes: {
+    compact: {
+      minHeight: shape._modes.compact.straight.minHeight,
+      spacings: {
+        left: x_small,
+        right: x_small,
+        top: x_small,
+        bottom: x_small,
+      },
+    },
+  },
+}
+
+export const error: InputToken = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: danger__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: danger__hover.rgba,
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+  },
+})
+
+export const warning: InputToken = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: warning__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: warning__hover.rgba,
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+  },
+})
+
+export const success: InputToken = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: success__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: success__hover.rgba,
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+  },
+})
+
+export const inputToken = { input, error, warning, success }
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
index 80fc23fccb..219001f86f 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
@@ -1,35 +1,59 @@
-import { HTMLAttributes, forwardRef, ReactNode } from 'react'
-import styled, { css } from 'styled-components'
+import { HTMLAttributes, forwardRef, ReactElement } from 'react'
+import styled, { css, ThemeProvider } from 'styled-components'
 import { Label } from '../Label'
 import { HelperText } from './HelperText'
-import { Icon } from '../Icon'
 import { useEds } from './../EdsProvider'
+import { inputToken } from './InputWrapper.tokens'
+import {
+  outlineTemplate,
+  useToken,
+  spacingsTemplate,
+  typographyTemplate,
+} from '@equinor/eds-utils'
 
-export const Box = styled.div`
+const Container = styled.div`
   display: grid;
   gap: 8px;
-  grid-template-columns: auto;
-  align-items: center;
 `
 
-type UnitType = {
-  isDisabled: boolean
-}
+const Field = styled.div(({ theme }) => {
+  const {
+    states: {
+      focus: { outline: focusOutline },
+      active: { outline: activeOutline },
+      disabled,
+      readOnly,
+    },
+    boxShadow,
+  } = theme
 
-const Unit = styled.span<UnitType>`
-  // TODO 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;
-`
+  return css`
+    display: flex;
+    flex-direction: row;
+    column-gap: 8px;
+    background: ${theme.background};
+    height: ${theme.minHeight};
+    box-shadow: ${boxShadow};
 
-export const Adornments = styled.div`
-  display: flex;
-  justify-content: center;
-  height: 100%;
-  align-self: flex-start;
-`
+    &:focus-within {
+      ${outlineTemplate(focusOutline)}
+      box-shadow: none;
+    }
+  `
+})
+
+export const Adornments = styled.div(({ theme }) => {
+  return css`
+    display: flex;
+    column-gap: 8px;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+
+    ${spacingsTemplate(theme.spacings)}
+    ${typographyTemplate(theme.entities.adornment.typography)}
+  `
+})
 
 export type InputWrapperProps = {
   /** Label */
@@ -41,7 +65,7 @@ export type InputWrapperProps = {
   /** Read Only */
   readOnly?: boolean
   /** Helper text icon */
-  helperIcon?: typeof Icon
+  helperIcon?: ReactElement
   /** Helper text */
   helperText?: string
 } & HTMLAttributes<HTMLDivElement>
@@ -61,13 +85,16 @@ export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(
     ref,
   ) {
     const { density } = useEds()
+    const token = inputToken.input
 
     return (
-      <Box {...other} ref={ref}>
-        <Label label={label} meta={meta} />
-        {children}
-        <HelperText icon={helperIcon} text={helperText}></HelperText>
-      </Box>
+      <ThemeProvider theme={token}>
+        <Container {...other} ref={ref}>
+          <Label label={label} meta={meta} />
+          <Field tabIndex={0}>{children}</Field>
+          <HelperText icon={helperIcon} text={helperText}></HelperText>
+        </Container>
+      </ThemeProvider>
     )
   },
 )
diff --git a/packages/eds-core-react/src/components/InputWrapper/index.tsx b/packages/eds-core-react/src/components/InputWrapper/index.tsx
index 8099646987..cb1329bedb 100644
--- a/packages/eds-core-react/src/components/InputWrapper/index.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/index.tsx
@@ -1 +1,18 @@
-export * from './InputWrapper'
+import {
+  InputWrapper as BaseComponent,
+  Adornments,
+  InputWrapperProps,
+} from './InputWrapper'
+
+type InputWrapperCompoundProps = typeof BaseComponent & {
+  Adornments: typeof Adornments
+}
+
+const InputWrapper = BaseComponent as InputWrapperCompoundProps
+
+InputWrapper.Adornments = Adornments
+
+InputWrapper.Adornments.displayName = 'InputWrapper.Adornments'
+
+export { InputWrapper }
+export type { InputWrapperProps }

From da22d9df2da156be3b4b4f0448e08571a461c175 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 29 Jun 2022 14:47:04 +0200
Subject: [PATCH 05/20] =?UTF-8?q?=F0=9F=9A=A7=20WIP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputWrapper/HelperText/HelperText.tsx    |  4 +---
 .../InputWrapper/InputWrapper.stories.tsx     | 21 ++++++++++++++-----
 .../components/InputWrapper/InputWrapper.tsx  |  4 ++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
index 19787ed40e..8becea925c 100644
--- a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
@@ -33,15 +33,13 @@ type HelperTextProps = {
 
 const TextfieldHelperText = forwardRef<HTMLDivElement, HelperTextProps>(
   function TextfieldHelperText({ text, icon, ...rest }, ref) {
-    const smallIcon = useMemo(() => cloneElement(icon, { size: 16 }), [icon])
-
     if (!text) {
       return null
     }
 
     return (
       <Container ref={ref} {...rest}>
-        {smallIcon}
+        {icon}
         <Text>{text}</Text>
       </Container>
     )
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
index 35fa6b1649..68b557c45c 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
@@ -1,6 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react'
-import { accessible, dropper } from '@equinor/eds-icons'
-import { InputWrapper, InputWrapperProps, Input, Icon } from '../..'
+import { accessible, dropper, clear, search } from '@equinor/eds-icons'
+import { InputWrapper, InputWrapperProps, Input, Icon, Button } from '../..'
 import styled from 'styled-components'
 
 export default {
@@ -18,17 +18,28 @@ const StrippedInput = styled(Input)`
   }
 `
 
+const SmallButton = styled(Button)`
+  height: 24px;
+  width: 24px;
+`
+
 export const Introduction: Story<InputWrapperProps> = (args) => (
   <InputWrapper
     label="I'm a label, play with me!"
-    helperIcon={<Icon data={accessible} />}
+    meta="meta tag"
+    helperIcon={<Icon data={accessible} size={16} />}
     {...args}
   >
-    <InputWrapper.Adornments>left</InputWrapper.Adornments>
+    <InputWrapper.Adornments>
+      <Icon data={search} size={16} />
+    </InputWrapper.Adornments>
     <StrippedInput />
     <InputWrapper.Adornments>
       right
-      <Icon data={dropper} />
+      <Icon data={dropper} size={16} />
+      <SmallButton variant="ghost_icon">
+        <Icon data={clear} size={16} />
+      </SmallButton>
     </InputWrapper.Adornments>
   </InputWrapper>
 )
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
index 219001f86f..5308f64ff4 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
@@ -57,9 +57,9 @@ export const Adornments = styled.div(({ theme }) => {
 
 export type InputWrapperProps = {
   /** Label */
-  label: string
+  label?: string
   /** Meta */
-  meta: string
+  meta?: string
   /** Disabled state */
   disabled?: boolean
   /** Read Only */

From 411f134a18266af6f7fca95158fe1f68101c0bc7 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 30 Jun 2022 11:31:11 +0200
Subject: [PATCH 06/20] =?UTF-8?q?=F0=9F=9A=A7=20wip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputWrapper/HelperText/HelperText.tsx           | 12 ++++++++----
 .../components/InputWrapper/InputWrapper.stories.tsx |  2 +-
 .../src/components/InputWrapper/InputWrapper.tsx     |  9 +++------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
index 8becea925c..77513062ac 100644
--- a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
@@ -1,9 +1,13 @@
-import React, { forwardRef, useMemo, cloneElement, ReactElement } from 'react'
+import {
+  forwardRef,
+  ReactNode,
+  useMemo,
+  cloneElement,
+  ReactElement,
+} from 'react'
 import styled from 'styled-components'
 import { typographyTemplate } from '@equinor/eds-utils'
 import { helperText as tokens } from './HelperText.token'
-import { Icon } from '../../Icon'
-import type { Spacing } from '@equinor/eds-tokens'
 
 type VariationProps = {
   isFocused?: boolean
@@ -26,7 +30,7 @@ type HelperTextProps = {
   /** Helper text */
   text?: string
   /** Icon */
-  icon?: ReactElement
+  icon?: ReactNode
   /** Disabled */
   disabled?: boolean
 }
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
index 68b557c45c..3b13ee3722 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
@@ -33,7 +33,7 @@ export const Introduction: Story<InputWrapperProps> = (args) => (
     <InputWrapper.Adornments>
       <Icon data={search} size={16} />
     </InputWrapper.Adornments>
-    <StrippedInput />
+    <Input />
     <InputWrapper.Adornments>
       right
       <Icon data={dropper} size={16} />
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
index 5308f64ff4..93eab1d531 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
@@ -1,4 +1,4 @@
-import { HTMLAttributes, forwardRef, ReactElement } from 'react'
+import { HTMLAttributes, forwardRef, ReactElement, ReactNode } from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 import { Label } from '../Label'
 import { HelperText } from './HelperText'
@@ -20,9 +20,6 @@ const Field = styled.div(({ theme }) => {
   const {
     states: {
       focus: { outline: focusOutline },
-      active: { outline: activeOutline },
-      disabled,
-      readOnly,
     },
     boxShadow,
   } = theme
@@ -65,7 +62,7 @@ export type InputWrapperProps = {
   /** Read Only */
   readOnly?: boolean
   /** Helper text icon */
-  helperIcon?: ReactElement
+  helperIcon?: ReactNode
   /** Helper text */
   helperText?: string
 } & HTMLAttributes<HTMLDivElement>
@@ -85,7 +82,7 @@ export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(
     ref,
   ) {
     const { density } = useEds()
-    const token = inputToken.input
+    const token = useToken({ density }, inputToken.input)
 
     return (
       <ThemeProvider theme={token}>

From f8a5603a14c34ed32dd2e8dae0f6a0767d8e4bcd Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 6 Jul 2022 14:46:31 +0200
Subject: [PATCH 07/20] =?UTF-8?q?=F0=9F=9A=9A=20Moved=20over=20`Input`=20a?=
 =?UTF-8?q?dornment=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Input/Input.docs.mdx       |   7 +-
 .../src/components/Input/Input.stories.tsx    |  94 +++++++++++-
 .../src/components/Input/Input.tokens.ts      | 131 ++++++++++-------
 .../src/components/Input/Input.tsx            | 137 +++++++++++++-----
 packages/eds-tokens/src/types/component.ts    |   7 +-
 5 files changed, 281 insertions(+), 95 deletions(-)

diff --git a/packages/eds-core-react/src/components/Input/Input.docs.mdx b/packages/eds-core-react/src/components/Input/Input.docs.mdx
index 268f96ba62..0267ac8c02 100644
--- a/packages/eds-core-react/src/components/Input/Input.docs.mdx
+++ b/packages/eds-core-react/src/components/Input/Input.docs.mdx
@@ -52,4 +52,9 @@ It's important to link the `Input` to the corresponding label.
 
 Compact `Input` using `EdsProvider`.
 
-<Story id="inputs-input--compact" />
\ No newline at end of file
+<Story id="inputs-input--compact" />
+
+### With Adornments
+
+
+<Story id="inputs-input--with-adornments" />
diff --git a/packages/eds-core-react/src/components/Input/Input.stories.tsx b/packages/eds-core-react/src/components/Input/Input.stories.tsx
index 9bd943488a..3f34a7c23b 100644
--- a/packages/eds-core-react/src/components/Input/Input.stories.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.stories.tsx
@@ -1,9 +1,12 @@
 import { useState, useEffect } from 'react'
+import { Story, ComponentMeta } from '@storybook/react'
+import { anchor } from '@equinor/eds-icons'
 import { Input, InputProps, Label, EdsProvider, Density } from '../..'
-import { Story } from '@storybook/react/types-6-0'
-import { ComponentMeta } from '@storybook/react'
+import styled from 'styled-components'
 import { Stack } from './../../../.storybook/components'
 import page from './Input.docs.mdx'
+import { Button } from '../Button'
+import { Icon } from '../Icon'
 
 export default {
   title: 'Inputs/Input',
@@ -198,3 +201,90 @@ Compact.decorators = [
     )
   },
 ]
+
+const SmallButton = styled(Button)`
+  height: 24px;
+  width: 24px;
+`
+
+export const WithAdornments: Story<InputProps> = () => {
+  return (
+    <EdsProvider>
+      <Label htmlFor="adornments-error" label="Default" />
+      <Input
+        type="text"
+        id="adornments-error"
+        variant="error"
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-warning" label="Default" />
+      <Input
+        type="text"
+        id="adornments-warning"
+        variant="warning"
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-success" label="Default" />
+      <Input
+        type="text"
+        id="adornments-success"
+        variant="success"
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-disabled" label="Disabled" />
+      <Input
+        type="text"
+        id="adornments-disabled"
+        disabled
+        leftAdornments={
+          <>
+            <SmallButton disabled variant="ghost_icon">
+              IT
+            </SmallButton>
+          </>
+        }
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-readonly" label="Readonly" />
+      <Input
+        type="text"
+        id="adornments-readonly"
+        readOnly
+        leftAdornments={
+          <>
+            <SmallButton variant="ghost_icon">IT</SmallButton>
+          </>
+        }
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+    </EdsProvider>
+  )
+}
diff --git a/packages/eds-core-react/src/components/Input/Input.tokens.ts b/packages/eds-core-react/src/components/Input/Input.tokens.ts
index f4958a82cf..80732915a5 100644
--- a/packages/eds-core-react/src/components/Input/Input.tokens.ts
+++ b/packages/eds-core-react/src/components/Input/Input.tokens.ts
@@ -29,7 +29,7 @@ const {
 export type InputToken = ComponentToken
 
 export const input: InputToken = {
-  minHeight: shape.straight.minHeight,
+  height: shape.straight.minHeight,
   background,
   spacings: {
     left: small,
@@ -41,12 +41,32 @@ export const input: InputToken = {
     ...typography.input.text,
     color: static_icons__default.rgba,
   },
+  outline: {
+    type: 'outline',
+    color: 'transparent',
+    width: '1px',
+    style: 'solid',
+    offset: '0px',
+  },
   entities: {
     placeholder: {
       typography: {
         color: static_icons__tertiary.rgba,
       },
     },
+    adornment: {
+      typography: {
+        ...typography.input.label,
+        color: static_icons__tertiary.rgba,
+      },
+      states: {
+        disabled: {
+          typography: {
+            color: disabled__text.rgba,
+          },
+        },
+      },
+    },
   },
   states: {
     disabled: {
@@ -58,15 +78,7 @@ export const input: InputToken = {
       background: 'transparent',
       boxShadow: 'none',
     },
-    active: {
-      outline: {
-        type: 'outline',
-        color: 'transparent',
-        width: '1px',
-        style: 'solid',
-        offset: '0px',
-      },
-    },
+    active: {},
     focus: {
       outline: {
         type: 'outline',
@@ -92,72 +104,87 @@ export const input: InputToken = {
 }
 
 export const error: InputToken = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: danger__resting.rgba,
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: danger__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px',
-      },
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
         color: danger__hover.rgba,
-        style: 'solid',
-        offset: '0px',
+      },
+    },
+  },
+  entities: {
+    adornment: {
+      typography: {
+        ...typography.input.label,
+        color: danger__resting.rgba,
+      },
+      states: {
+        focus: {
+          outline: {
+            color: danger__hover.rgba,
+          },
+        },
       },
     },
   },
 })
 
 export const warning: InputToken = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: warning__resting.rgba,
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: warning__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px',
-      },
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
         color: warning__hover.rgba,
-        style: 'solid',
-        offset: '0px',
+      },
+    },
+  },
+  entities: {
+    adornment: {
+      typography: {
+        ...typography.input.label,
+        color: warning__resting.rgba,
+      },
+      states: {
+        focus: {
+          outline: {
+            color: warning__hover.rgba,
+          },
+        },
       },
     },
   },
 })
 
 export const success: InputToken = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  boxShadow: 'none',
+  outline: {
+    color: success__resting.rgba,
+  },
   states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: success__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px',
-      },
-    },
     focus: {
       outline: {
-        type: 'outline',
-        width: '2px',
         color: success__hover.rgba,
-        style: 'solid',
-        offset: '0px',
+      },
+    },
+  },
+  entities: {
+    adornment: {
+      typography: {
+        ...typography.input.label,
+        color: success__resting.rgba,
+      },
+      states: {
+        focus: {
+          outline: {
+            color: success__hover.rgba,
+          },
+        },
       },
     },
   },
diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 848e329597..19e1daa51a 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, forwardRef } from 'react'
+import { InputHTMLAttributes, forwardRef, ReactNode } from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 import { inputToken as tokens } from './Input.tokens'
 import type { InputToken } from './Input.tokens'
@@ -11,62 +11,90 @@ import {
 import type { Variants } from '../TextField/types'
 import { useEds } from '../EdsProvider'
 
-const StyledInput = styled.input(({ theme }: StyledProps) => {
-  const {
-    states: {
-      focus: { outline: focusOutline },
-      active: { outline: activeOutline },
-      disabled,
-      readOnly,
-    },
-    boxShadow,
-  } = theme
+const Container = styled.div(({ theme, disabled, readOnly }: StyledProps) => {
+  const { states, entities } = theme
 
   return css`
-    width: 100%;
+    --eds-input-adornment-color: ${entities.adornment.typography.color};
+
+    display: flex;
+    flex-direction: row;
+    column-gap: 8px;
+    border: none;
     box-sizing: border-box;
-    margin: 0;
-    appearance: none;
+    height: ${theme.height};
+    box-shadow: ${theme.boxShadow};
     background: ${theme.background};
-    border: none;
-    height: ${theme.minHeight};
-    box-shadow: ${boxShadow};
-
-    ${outlineTemplate(activeOutline)}
+    ${outlineTemplate(theme.outline)}
+    ${spacingsTemplate(theme.spacings)}
     ${typographyTemplate(theme.typography)}
-    ${spacingsTemplate(theme.spacings)};
 
-    &::placeholder {
-      color: ${theme.entities.placeholder.typography.color};
-    }
 
-    &:active,
-    &:focus {
-      outline-offset: 0;
+    &:focus-within {
+      --eds-input-adornment-color: ${entities.adornment?.states.focus?.outline
+        .color};
+
       box-shadow: none;
-      ${outlineTemplate(focusOutline)}
+      ${outlineTemplate(states.focus.outline)}
     }
 
-    &:disabled {
-      color: ${disabled.typography.color};
+    ${disabled &&
+    css`
+      --eds-input-adornment-color: ${states.disabled.typography.color};
+      color: ${states.disabled.typography.color};
       cursor: not-allowed;
       box-shadow: none;
       outline: none;
-      &:focus,
-      &:active {
+      &:focus-within {
         outline: none;
       }
+    `}
+    ${readOnly &&
+    css({
+      background: states.readOnly.background,
+      boxShadow: states.readOnly.boxShadow,
+    })}
+  `
+})
+
+const StyledInput = styled.input(({ theme }: StyledProps) => {
+  const {
+    states: { disabled },
+  } = theme
+
+  return css`
+    width: 100%;
+    border: none;
+    background: transparent;
+    ${typographyTemplate(theme.typography)}
+    outline: none;
+
+    &::placeholder {
+      color: ${theme.entities.placeholder.typography.color};
     }
-    &[readOnly] {
-      background: ${readOnly.background};
-      box-shadow: ${readOnly.boxShadow};
+
+    &:disabled {
+      color: ${disabled.typography.color};
+      cursor: not-allowed;
     }
   `
 })
 
+export const Adornments = styled.div(({ theme }: StyledProps) => {
+  return css`
+    display: flex;
+    column-gap: 8px;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+    ${typographyTemplate(theme.entities.adornment.typography)}
+    color: var(--eds-input-adornment-color);
+  `
+})
+
 type StyledProps = {
   theme: InputToken
-}
+} & Required<Pick<InputProps, 'readOnly' | 'disabled'>>
 
 export type InputProps = {
   /** Placeholder */
@@ -79,10 +107,24 @@ export type InputProps = {
   type?: string
   /** Read Only */
   readOnly?: boolean
+  /** Left adornments */
+  leftAdornments?: ReactNode
+  /** Right adornments */
+  rightAdornments?: ReactNode
 } & InputHTMLAttributes<HTMLInputElement>
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { variant = 'default', disabled = false, type = 'text', ...other },
+  {
+    variant = 'default',
+    disabled = false,
+    type = 'text',
+    leftAdornments,
+    rightAdornments,
+    readOnly,
+    className,
+    style,
+    ...other
+  },
   ref,
 ) {
   const actualVariant = variant === 'default' ? 'input' : variant
@@ -94,12 +136,33 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     ref,
     type,
     disabled,
+    readOnly,
     ...other,
   }
 
+  const containerProps = {
+    disabled,
+    readOnly,
+    className,
+    style,
+  }
+
+  const adornmentProps = {
+    disabled,
+    readOnly,
+  }
+
   return (
     <ThemeProvider theme={token}>
-      <StyledInput {...inputProps} />
+      <Container {...containerProps}>
+        {leftAdornments ? (
+          <Adornments {...adornmentProps}>{leftAdornments}</Adornments>
+        ) : null}
+        <StyledInput {...inputProps} />
+        {rightAdornments ? (
+          <Adornments {...adornmentProps}>{rightAdornments}</Adornments>
+        ) : null}
+      </Container>
     </ThemeProvider>
   )
 })
diff --git a/packages/eds-tokens/src/types/component.ts b/packages/eds-tokens/src/types/component.ts
index c4d14cc0e8..b4596a7d88 100644
--- a/packages/eds-tokens/src/types/component.ts
+++ b/packages/eds-tokens/src/types/component.ts
@@ -22,11 +22,12 @@ export type ComponentToken = {
   border?: Borders
   typography?: Partial<Typography>
   clickbound?: Clickbound
+  outline?: Outline
   states?: {
-    active?: ComponentToken & { outline?: Outline }
+    active?: ComponentToken
     disabled?: ComponentToken
-    readOnly?: ComponentToken & { outline?: Outline }
-    focus?: ComponentToken & { outline?: Outline }
+    readOnly?: ComponentToken
+    focus?: ComponentToken
     hover?: ComponentToken
     pressed?: ComponentToken & { pressed?: Pressed }
   }

From 050717bf361f26d102a7b2178a65127c3ce42ef2 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 6 Jul 2022 14:47:07 +0200
Subject: [PATCH 08/20] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Added=20`OldInput`?=
 =?UTF-8?q?=20for=20interim=20development?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/OldInput/Input.docs.mdx    |  55 ++++++
 .../src/components/OldInput/Input.stories.tsx | 141 +++++++++++++++
 .../src/components/OldInput/Input.test.tsx    | 124 +++++++++++++
 .../src/components/OldInput/Input.tokens.ts   | 166 ++++++++++++++++++
 .../src/components/OldInput/Input.tsx         | 105 +++++++++++
 .../__snapshots__/Input.test.tsx.snap         |  83 +++++++++
 .../src/components/OldInput/index.ts          |   1 +
 packages/eds-core-react/src/index.ts          |   2 +-
 8 files changed, 676 insertions(+), 1 deletion(-)
 create mode 100644 packages/eds-core-react/src/components/OldInput/Input.docs.mdx
 create mode 100644 packages/eds-core-react/src/components/OldInput/Input.stories.tsx
 create mode 100644 packages/eds-core-react/src/components/OldInput/Input.test.tsx
 create mode 100644 packages/eds-core-react/src/components/OldInput/Input.tokens.ts
 create mode 100644 packages/eds-core-react/src/components/OldInput/Input.tsx
 create mode 100644 packages/eds-core-react/src/components/OldInput/__snapshots__/Input.test.tsx.snap
 create mode 100644 packages/eds-core-react/src/components/OldInput/index.ts

diff --git a/packages/eds-core-react/src/components/OldInput/Input.docs.mdx b/packages/eds-core-react/src/components/OldInput/Input.docs.mdx
new file mode 100644
index 0000000000..268f96ba62
--- /dev/null
+++ b/packages/eds-core-react/src/components/OldInput/Input.docs.mdx
@@ -0,0 +1,55 @@
+import { Links, PropsTable, Story } from './../../../.storybook/components'
+import { Input } from '.'
+
+# Input
+
+Is intended to use if you need to more flexibility than the wrapped TextField or select components give.
+
+<Links 
+    ariaUrl="https://www.w3.org/TR/wai-aria-1.1/#input"
+    sourceUrl="https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/src/components/Input/Input.tsx"
+    npmUrl="https://www.npmjs.com/package/@equinor/eds-core-react"
+/>
+
+<Story id="inputs-input--introduction" />
+<PropsTable />
+
+## Usage
+
+```tsx
+import { Input } from '@equinor/eds-core-react'
+
+<Input />
+```
+
+## Examples
+
+### Types
+
+This is the native type property and here is a small selection of examples of all the possible types.
+
+<Story id="inputs-input--types" />
+
+### Variants
+
+<Story id="inputs-input--variants" />
+
+### Disabled
+
+<Story id="inputs-input--disabled" />
+
+### Read only
+
+<Story id="inputs-input--read-only" />
+
+### Accessiblity
+
+It's important to link the `Input` to the corresponding label.
+
+<Story id="inputs-input--accessiblity" />
+
+### Compact
+
+Compact `Input` using `EdsProvider`.
+
+<Story id="inputs-input--compact" />
\ No newline at end of file
diff --git a/packages/eds-core-react/src/components/OldInput/Input.stories.tsx b/packages/eds-core-react/src/components/OldInput/Input.stories.tsx
new file mode 100644
index 0000000000..814e2516d4
--- /dev/null
+++ b/packages/eds-core-react/src/components/OldInput/Input.stories.tsx
@@ -0,0 +1,141 @@
+import { useState, useEffect } from 'react'
+import { Input, InputProps, Label, EdsProvider, Density } from '../..'
+import { Story } from '@storybook/react/types-6-0'
+import { ComponentMeta } from '@storybook/react'
+import { Stack } from '../../../.storybook/components'
+import page from './Input.docs.mdx'
+
+export default {
+  title: 'Inputs/Input',
+  component: Input,
+  parameters: {
+    docs: {
+      page,
+    },
+  },
+} as ComponentMeta<typeof Input>
+
+export const Introduction: Story<InputProps> = (args) => <Input {...args} />
+
+export const Types: Story<InputProps> = () => (
+  <Stack>
+    <div>
+      <Label htmlFor="textfield-normal" label="Normal" />
+      <Input
+        id="textfield-normal"
+        placeholder="Placeholder text"
+        autoComplete="off"
+      />
+    </div>
+    <div>
+      <Label htmlFor="textfield-number" label="Number" />
+      <Input
+        type="number"
+        id="textfield-number"
+        placeholder="Placeholder text"
+      />
+    </div>
+    <div>
+      <Label htmlFor="textfield-search" label="Search" />
+      <Input
+        type="search"
+        id="textfield-search"
+        placeholder="Placeholder text"
+      />
+    </div>
+    <div>
+      <Label htmlFor="textfield-password" label="Password" />
+      <Input
+        type="password"
+        id="textfield-password"
+        placeholder="Placeholder text"
+      />
+    </div>
+    <div>
+      <Label htmlFor="textfield-email" label="Email" />
+      <Input type="email" id="textfield-email" placeholder="Placeholder text" />
+    </div>
+  </Stack>
+)
+
+export const Variants: Story<InputProps> = () => (
+  <Stack>
+    <div>
+      <Label htmlFor="textfield-default" label="Default" />
+      <Input
+        id="textfield-default"
+        placeholder="Placeholder text"
+        autoComplete="off"
+      />
+    </div>
+    <div>
+      <Label htmlFor="textfield-success" label="Success" />
+      <Input
+        id="textfield-success"
+        placeholder="Placeholder text"
+        autoComplete="off"
+        variant="success"
+      />
+    </div>
+    <div>
+      <Label htmlFor="textfield-warning" label="Warning" />
+      <Input
+        id="textfield-warning"
+        placeholder="Placeholder text"
+        autoComplete="off"
+        variant="warning"
+      />
+    </div>
+    <div>
+      <Label htmlFor="textfield-error" label="Error" />
+      <Input
+        id="textfield-error"
+        placeholder="Placeholder text"
+        autoComplete="off"
+        variant="error"
+      />
+    </div>
+  </Stack>
+)
+
+export const Disabled: Story<InputProps> = () => (
+  <>
+    <Label htmlFor="textfield-disabled" label="Disabled" />
+    <Input id="textfield-disabled" placeholder="Placeholder text" disabled />
+  </>
+)
+
+export const ReadOnly: Story<InputProps> = () => (
+  <>
+    <Label htmlFor="textfield-readOnly" label="Read only" />
+    <Input id="textfield-readOnly" placeholder="Placeholder text" readOnly />
+  </>
+)
+ReadOnly.storyName = 'Read only'
+
+export const Accessiblity: Story<InputProps> = () => {
+  // To wrap the input component inside the label element is not yet supported
+  return (
+    <>
+      <Label htmlFor="a11yExample" label="I use the htmlFor prop" />
+      <Input type="text" id="a11yExample" />
+    </>
+  )
+}
+
+export const Compact: Story<InputProps> = () => {
+  // To wrap the input component inside the label element is not yet supported
+  const [density, setDensity] = useState<Density>('comfortable')
+
+  useEffect(() => {
+    // Simulate user change
+    setDensity('compact')
+  }, [density])
+
+  return (
+    <EdsProvider density={density}>
+      <Label htmlFor="compact" label="Compact" />
+      <Input type="text" id="compact" />
+    </EdsProvider>
+  )
+}
diff --git a/packages/eds-core-react/src/components/OldInput/Input.test.tsx b/packages/eds-core-react/src/components/OldInput/Input.test.tsx
new file mode 100644
index 0000000000..fdb986e2e6
--- /dev/null
+++ b/packages/eds-core-react/src/components/OldInput/Input.test.tsx
@@ -0,0 +1,124 @@
+/* eslint-disable no-undef */
+import { render, cleanup, screen } from '@testing-library/react'
+import 'jest-styled-components'
+import '@testing-library/jest-dom'
+import { axe } from 'jest-axe'
+import styled from 'styled-components'
+import { Input } from './Input'
+import * as tokens from './Input.tokens'
+import { trimSpaces } from '@equinor/eds-utils'
+
+const {
+  error: {
+    states: { active: activeError },
+  },
+  success: {
+    states: { active: activeSuccess },
+  },
+  warning: {
+    states: { active: activeWarning },
+  },
+} = tokens
+
+afterEach(cleanup)
+
+describe('Input', () => {
+  it('Matches snapshot', () => {
+    const { asFragment } = render(<Input value="input value" readOnly />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it('Should pass a11y test when using label', async () => {
+    const { container } = render(
+      // eslint-disable-next-line jsx-a11y/label-has-associated-control
+      <label>
+        Label text
+        <Input />
+      </label>,
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+  it('Should pass a11y test when using aria-label', async () => {
+    const { container } = render(<Input aria-label="description" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+  it('Has correct default value', () => {
+    const value = 'Some value'
+    render(<Input id="test-value" value={value} readOnly />)
+    const inputElement: HTMLInputElement = screen.queryByDisplayValue(value)
+
+    expect(inputElement.value).toBe(value)
+  })
+
+  it('Has correct outline on input when variant is success', () => {
+    const label = 'success outline on input'
+    render(
+      <label>
+        {label}
+        <Input id="test-success" variant="success" />
+      </label>,
+    )
+    const inputNode = screen.getByLabelText(label)
+
+    expect(inputNode).toHaveStyleRule(
+      'outline',
+      `${activeSuccess.outline.width} solid ${trimSpaces(
+        activeSuccess.outline.color,
+      )}`,
+    )
+  })
+
+  it('Has correct outline on input when variant is warning', () => {
+    const label = 'warning outline on input'
+    render(
+      <label>
+        {label}
+        <Input id="test-warning" variant="warning" />
+      </label>,
+    )
+    const inputNode = screen.getByLabelText(label)
+
+    expect(inputNode).toHaveStyleRule(
+      'outline',
+      `${activeWarning.outline.width} solid ${trimSpaces(
+        activeWarning.outline.color,
+      )}`,
+    )
+  })
+
+  it('Has correct outline on input when variant is error', () => {
+    const label = 'error outline on input'
+    render(
+      <label>
+        {label}
+        <Input id="test-error" variant="error" />
+      </label>,
+    )
+    const inputNode = screen.getByLabelText(label)
+
+    expect(inputNode).toHaveStyleRule(
+      'outline',
+      `${activeError.outline.width} solid ${trimSpaces(
+        activeError.outline.color,
+      )}`,
+    )
+  })
+
+  const StyledTextField = styled(Input)`
+    margin-top: 48px;
+  `
+  it('Can extend the css of the component', () => {
+    render(
+      <StyledTextField
+        id="test-css-extend"
+        variant="error"
+        value="textfield"
+        readOnly
+      />,
+    )
+
+    expect(screen.getByDisplayValue('textfield')).toHaveStyleRule(
+      'margin-top',
+      '48px',
+    )
+  })
+})
diff --git a/packages/eds-core-react/src/components/OldInput/Input.tokens.ts b/packages/eds-core-react/src/components/OldInput/Input.tokens.ts
new file mode 100644
index 0000000000..f4958a82cf
--- /dev/null
+++ b/packages/eds-core-react/src/components/OldInput/Input.tokens.ts
@@ -0,0 +1,166 @@
+import { tokens } from '@equinor/eds-tokens'
+import type { ComponentToken } from '@equinor/eds-tokens'
+import { mergeDeepRight } from 'ramda'
+
+const {
+  colors: {
+    ui: {
+      background__light: { rgba: background },
+    },
+    text: { static_icons__default, static_icons__tertiary },
+    interactive: {
+      disabled__text,
+      primary__resting,
+      danger__resting,
+      danger__hover,
+      warning__resting,
+      warning__hover,
+      success__resting,
+      success__hover,
+    },
+  },
+  spacings: {
+    comfortable: { small, x_small },
+  },
+  typography,
+  shape,
+} = tokens
+
+export type InputToken = ComponentToken
+
+export const input: InputToken = {
+  minHeight: shape.straight.minHeight,
+  background,
+  spacings: {
+    left: small,
+    right: small,
+    top: '6px',
+    bottom: '6px',
+  },
+  typography: {
+    ...typography.input.text,
+    color: static_icons__default.rgba,
+  },
+  entities: {
+    placeholder: {
+      typography: {
+        color: static_icons__tertiary.rgba,
+      },
+    },
+  },
+  states: {
+    disabled: {
+      typography: {
+        color: disabled__text.rgba,
+      },
+    },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none',
+    },
+    active: {
+      outline: {
+        type: 'outline',
+        color: 'transparent',
+        width: '1px',
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: primary__resting.rgba,
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+  },
+  boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
+  modes: {
+    compact: {
+      minHeight: shape._modes.compact.straight.minHeight,
+      spacings: {
+        left: x_small,
+        right: x_small,
+        top: x_small,
+        bottom: x_small,
+      },
+    },
+  },
+}
+
+export const error: InputToken = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: danger__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: danger__hover.rgba,
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+  },
+})
+
+export const warning: InputToken = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: warning__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: warning__hover.rgba,
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+  },
+})
+
+export const success: InputToken = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: success__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: success__hover.rgba,
+        style: 'solid',
+        offset: '0px',
+      },
+    },
+  },
+})
+
+export const inputToken = { input, error, warning, success }
diff --git a/packages/eds-core-react/src/components/OldInput/Input.tsx b/packages/eds-core-react/src/components/OldInput/Input.tsx
new file mode 100644
index 0000000000..848e329597
--- /dev/null
+++ b/packages/eds-core-react/src/components/OldInput/Input.tsx
@@ -0,0 +1,105 @@
+import { InputHTMLAttributes, forwardRef } from 'react'
+import styled, { css, ThemeProvider } from 'styled-components'
+import { inputToken as tokens } from './Input.tokens'
+import type { InputToken } from './Input.tokens'
+import {
+  typographyTemplate,
+  spacingsTemplate,
+  outlineTemplate,
+  useToken,
+} from '@equinor/eds-utils'
+import type { Variants } from '../TextField/types'
+import { useEds } from '../EdsProvider'
+
+const StyledInput = styled.input(({ theme }: StyledProps) => {
+  const {
+    states: {
+      focus: { outline: focusOutline },
+      active: { outline: activeOutline },
+      disabled,
+      readOnly,
+    },
+    boxShadow,
+  } = theme
+
+  return css`
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    appearance: none;
+    background: ${theme.background};
+    border: none;
+    height: ${theme.minHeight};
+    box-shadow: ${boxShadow};
+
+    ${outlineTemplate(activeOutline)}
+    ${typographyTemplate(theme.typography)}
+    ${spacingsTemplate(theme.spacings)};
+
+    &::placeholder {
+      color: ${theme.entities.placeholder.typography.color};
+    }
+
+    &:active,
+    &:focus {
+      outline-offset: 0;
+      box-shadow: none;
+      ${outlineTemplate(focusOutline)}
+    }
+
+    &:disabled {
+      color: ${disabled.typography.color};
+      cursor: not-allowed;
+      box-shadow: none;
+      outline: none;
+      &:focus,
+      &:active {
+        outline: none;
+      }
+    }
+    &[readOnly] {
+      background: ${readOnly.background};
+      box-shadow: ${readOnly.boxShadow};
+    }
+  `
+})
+
+type StyledProps = {
+  theme: InputToken
+}
+
+export type InputProps = {
+  /** Placeholder */
+  placeholder?: string
+  /** Variant */
+  variant?: Variants
+  /** Disabled state */
+  disabled?: boolean
+  /** Type */
+  type?: string
+  /** Read Only */
+  readOnly?: boolean
+} & InputHTMLAttributes<HTMLInputElement>
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { variant = 'default', disabled = false, type = 'text', ...other },
+  ref,
+) {
+  const actualVariant = variant === 'default' ? 'input' : variant
+  const inputVariant = tokens[actualVariant]
+  const { density } = useEds()
+  const token = useToken({ density }, inputVariant)
+
+  const inputProps = {
+    ref,
+    type,
+    disabled,
+    ...other,
+  }
+
+  return (
+    <ThemeProvider theme={token}>
+      <StyledInput {...inputProps} />
+    </ThemeProvider>
+  )
+})
diff --git a/packages/eds-core-react/src/components/OldInput/__snapshots__/Input.test.tsx.snap b/packages/eds-core-react/src/components/OldInput/__snapshots__/Input.test.tsx.snap
new file mode 100644
index 0000000000..323a8392fd
--- /dev/null
+++ b/packages/eds-core-react/src/components/OldInput/__snapshots__/Input.test.tsx.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input Matches snapshot 1`] = `
+<DocumentFragment>
+  .c0 {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: var(--eds_ui_background__light,rgba(247,247,247,1));
+  border: none;
+  height: 36px;
+  box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  outline: 1px solid transparent;
+  outline-offset: 0px;
+  margin: 0;
+  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  font-family: Equinor;
+  font-size: 1.000rem;
+  font-weight: 400;
+  line-height: 1.500em;
+  -webkit-letter-spacing: 0.025em;
+  -moz-letter-spacing: 0.025em;
+  -ms-letter-spacing: 0.025em;
+  letter-spacing: 0.025em;
+  text-align: left;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
+}
+
+.c0::-webkit-input-placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c0::-moz-placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c0:-ms-input-placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c0::placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c0:active,
+.c0:focus {
+  outline-offset: 0;
+  box-shadow: none;
+  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  outline-offset: 0px;
+}
+
+.c0:disabled {
+  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  cursor: not-allowed;
+  box-shadow: none;
+  outline: none;
+}
+
+.c0:disabled:focus,
+.c0:disabled:active {
+  outline: none;
+}
+
+.c0[readOnly] {
+  background: transparent;
+  box-shadow: none;
+}
+
+<input
+    class="c0"
+    readonly=""
+    type="text"
+    value="input value"
+  />
+</DocumentFragment>
+`;
diff --git a/packages/eds-core-react/src/components/OldInput/index.ts b/packages/eds-core-react/src/components/OldInput/index.ts
new file mode 100644
index 0000000000..54e51f6c7b
--- /dev/null
+++ b/packages/eds-core-react/src/components/OldInput/index.ts
@@ -0,0 +1 @@
+export * from './Input'
diff --git a/packages/eds-core-react/src/index.ts b/packages/eds-core-react/src/index.ts
index 8e025e8aa9..69096b2e58 100644
--- a/packages/eds-core-react/src/index.ts
+++ b/packages/eds-core-react/src/index.ts
@@ -28,7 +28,7 @@ export * from './components/Menu'
 export * from './components/Pagination'
 export * from './components/Select'
 export * from './components/Label'
-export * from './components/Input'
+export * from './components/OldInput'
 export * from './components/Checkbox'
 export * from './components/Radio'
 export * from './components/Switch'

From f1954d3e9b98407d45aaef823782770e93fe7823 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 7 Jul 2022 09:06:23 +0200
Subject: [PATCH 09/20] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20textarea=20outline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/eds-core-react/src/components/Textarea/Textarea.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/eds-core-react/src/components/Textarea/Textarea.tsx b/packages/eds-core-react/src/components/Textarea/Textarea.tsx
index 9455ec9cc7..ab1e7e3b2b 100644
--- a/packages/eds-core-react/src/components/Textarea/Textarea.tsx
+++ b/packages/eds-core-react/src/components/Textarea/Textarea.tsx
@@ -20,9 +20,9 @@ const Variation = ({ variant, token, density }: StyledProps) => {
   }
 
   const {
+    outline,
     states: {
       focus: { outline: focusOutline },
-      active: { outline: activeOutline },
     },
     boxShadow,
   } = token
@@ -35,7 +35,7 @@ const Variation = ({ variant, token, density }: StyledProps) => {
   return css`
     border: none;
     ${spacingsTemplate(spacings)}
-    ${outlineTemplate(activeOutline)}
+    ${outlineTemplate(outline)}
     box-shadow: ${boxShadow};
 
     &:active,

From ec378bb5fe233d47cb19f182c260e83a3681cda0 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 7 Jul 2022 09:06:54 +0200
Subject: [PATCH 10/20] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20back=20to=20new=20in?=
 =?UTF-8?q?put?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/eds-core-react/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eds-core-react/src/index.ts b/packages/eds-core-react/src/index.ts
index 69096b2e58..8e025e8aa9 100644
--- a/packages/eds-core-react/src/index.ts
+++ b/packages/eds-core-react/src/index.ts
@@ -28,7 +28,7 @@ export * from './components/Menu'
 export * from './components/Pagination'
 export * from './components/Select'
 export * from './components/Label'
-export * from './components/OldInput'
+export * from './components/Input'
 export * from './components/Checkbox'
 export * from './components/Radio'
 export * from './components/Switch'

From b333a246e5346f0bb031105eed46c7e0bd90fc7a Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 7 Jul 2022 09:10:08 +0200
Subject: [PATCH 11/20] =?UTF-8?q?=F0=9F=94=A5=20removed=20OldInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/OldInput/Input.docs.mdx    |  55 ------
 .../src/components/OldInput/Input.stories.tsx | 141 ---------------
 .../src/components/OldInput/Input.test.tsx    | 124 -------------
 .../src/components/OldInput/Input.tokens.ts   | 166 ------------------
 .../src/components/OldInput/Input.tsx         | 105 -----------
 .../__snapshots__/Input.test.tsx.snap         |  83 ---------
 .../src/components/OldInput/index.ts          |   1 -
 7 files changed, 675 deletions(-)
 delete mode 100644 packages/eds-core-react/src/components/OldInput/Input.docs.mdx
 delete mode 100644 packages/eds-core-react/src/components/OldInput/Input.stories.tsx
 delete mode 100644 packages/eds-core-react/src/components/OldInput/Input.test.tsx
 delete mode 100644 packages/eds-core-react/src/components/OldInput/Input.tokens.ts
 delete mode 100644 packages/eds-core-react/src/components/OldInput/Input.tsx
 delete mode 100644 packages/eds-core-react/src/components/OldInput/__snapshots__/Input.test.tsx.snap
 delete mode 100644 packages/eds-core-react/src/components/OldInput/index.ts

diff --git a/packages/eds-core-react/src/components/OldInput/Input.docs.mdx b/packages/eds-core-react/src/components/OldInput/Input.docs.mdx
deleted file mode 100644
index 268f96ba62..0000000000
--- a/packages/eds-core-react/src/components/OldInput/Input.docs.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Links, PropsTable, Story } from './../../../.storybook/components'
-import { Input } from '.'
-
-# Input
-
-Is intended to use if you need to more flexibility than the wrapped TextField or select components give.
-
-<Links 
-    ariaUrl="https://www.w3.org/TR/wai-aria-1.1/#input"
-    sourceUrl="https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/src/components/Input/Input.tsx"
-    npmUrl="https://www.npmjs.com/package/@equinor/eds-core-react"
-/>
-
-<Story id="inputs-input--introduction" />
-<PropsTable />
-
-## Usage
-
-```tsx
-import { Input } from '@equinor/eds-core-react'
-
-<Input />
-```
-
-## Examples
-
-### Types
-
-This is the native type property and here is a small selection of examples of all the possible types.
-
-<Story id="inputs-input--types" />
-
-### Variants
-
-<Story id="inputs-input--variants" />
-
-### Disabled
-
-<Story id="inputs-input--disabled" />
-
-### Read only
-
-<Story id="inputs-input--read-only" />
-
-### Accessiblity
-
-It's important to link the `Input` to the corresponding label.
-
-<Story id="inputs-input--accessiblity" />
-
-### Compact
-
-Compact `Input` using `EdsProvider`.
-
-<Story id="inputs-input--compact" />
\ No newline at end of file
diff --git a/packages/eds-core-react/src/components/OldInput/Input.stories.tsx b/packages/eds-core-react/src/components/OldInput/Input.stories.tsx
deleted file mode 100644
index 814e2516d4..0000000000
--- a/packages/eds-core-react/src/components/OldInput/Input.stories.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Input, InputProps, Label, EdsProvider, Density } from '../..'
-import { Story } from '@storybook/react/types-6-0'
-import { ComponentMeta } from '@storybook/react'
-import { Stack } from '../../../.storybook/components'
-import page from './Input.docs.mdx'
-
-export default {
-  title: 'Inputs/Input',
-  component: Input,
-  parameters: {
-    docs: {
-      page,
-    },
-  },
-} as ComponentMeta<typeof Input>
-
-export const Introduction: Story<InputProps> = (args) => <Input {...args} />
-
-export const Types: Story<InputProps> = () => (
-  <Stack>
-    <div>
-      <Label htmlFor="textfield-normal" label="Normal" />
-      <Input
-        id="textfield-normal"
-        placeholder="Placeholder text"
-        autoComplete="off"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-number" label="Number" />
-      <Input
-        type="number"
-        id="textfield-number"
-        placeholder="Placeholder text"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-search" label="Search" />
-      <Input
-        type="search"
-        id="textfield-search"
-        placeholder="Placeholder text"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-password" label="Password" />
-      <Input
-        type="password"
-        id="textfield-password"
-        placeholder="Placeholder text"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-email" label="Email" />
-      <Input type="email" id="textfield-email" placeholder="Placeholder text" />
-    </div>
-  </Stack>
-)
-
-export const Variants: Story<InputProps> = () => (
-  <Stack>
-    <div>
-      <Label htmlFor="textfield-default" label="Default" />
-      <Input
-        id="textfield-default"
-        placeholder="Placeholder text"
-        autoComplete="off"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-success" label="Success" />
-      <Input
-        id="textfield-success"
-        placeholder="Placeholder text"
-        autoComplete="off"
-        variant="success"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-warning" label="Warning" />
-      <Input
-        id="textfield-warning"
-        placeholder="Placeholder text"
-        autoComplete="off"
-        variant="warning"
-      />
-    </div>
-    <div>
-      <Label htmlFor="textfield-error" label="Error" />
-      <Input
-        id="textfield-error"
-        placeholder="Placeholder text"
-        autoComplete="off"
-        variant="error"
-      />
-    </div>
-  </Stack>
-)
-
-export const Disabled: Story<InputProps> = () => (
-  <>
-    <Label htmlFor="textfield-disabled" label="Disabled" />
-    <Input id="textfield-disabled" placeholder="Placeholder text" disabled />
-  </>
-)
-
-export const ReadOnly: Story<InputProps> = () => (
-  <>
-    <Label htmlFor="textfield-readOnly" label="Read only" />
-    <Input id="textfield-readOnly" placeholder="Placeholder text" readOnly />
-  </>
-)
-ReadOnly.storyName = 'Read only'
-
-export const Accessiblity: Story<InputProps> = () => {
-  // To wrap the input component inside the label element is not yet supported
-  return (
-    <>
-      <Label htmlFor="a11yExample" label="I use the htmlFor prop" />
-      <Input type="text" id="a11yExample" />
-    </>
-  )
-}
-
-export const Compact: Story<InputProps> = () => {
-  // To wrap the input component inside the label element is not yet supported
-  const [density, setDensity] = useState<Density>('comfortable')
-
-  useEffect(() => {
-    // Simulate user change
-    setDensity('compact')
-  }, [density])
-
-  return (
-    <EdsProvider density={density}>
-      <Label htmlFor="compact" label="Compact" />
-      <Input type="text" id="compact" />
-    </EdsProvider>
-  )
-}
diff --git a/packages/eds-core-react/src/components/OldInput/Input.test.tsx b/packages/eds-core-react/src/components/OldInput/Input.test.tsx
deleted file mode 100644
index fdb986e2e6..0000000000
--- a/packages/eds-core-react/src/components/OldInput/Input.test.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/* eslint-disable no-undef */
-import { render, cleanup, screen } from '@testing-library/react'
-import 'jest-styled-components'
-import '@testing-library/jest-dom'
-import { axe } from 'jest-axe'
-import styled from 'styled-components'
-import { Input } from './Input'
-import * as tokens from './Input.tokens'
-import { trimSpaces } from '@equinor/eds-utils'
-
-const {
-  error: {
-    states: { active: activeError },
-  },
-  success: {
-    states: { active: activeSuccess },
-  },
-  warning: {
-    states: { active: activeWarning },
-  },
-} = tokens
-
-afterEach(cleanup)
-
-describe('Input', () => {
-  it('Matches snapshot', () => {
-    const { asFragment } = render(<Input value="input value" readOnly />)
-    expect(asFragment()).toMatchSnapshot()
-  })
-  it('Should pass a11y test when using label', async () => {
-    const { container } = render(
-      // eslint-disable-next-line jsx-a11y/label-has-associated-control
-      <label>
-        Label text
-        <Input />
-      </label>,
-    )
-    expect(await axe(container)).toHaveNoViolations()
-  })
-  it('Should pass a11y test when using aria-label', async () => {
-    const { container } = render(<Input aria-label="description" />)
-    expect(await axe(container)).toHaveNoViolations()
-  })
-  it('Has correct default value', () => {
-    const value = 'Some value'
-    render(<Input id="test-value" value={value} readOnly />)
-    const inputElement: HTMLInputElement = screen.queryByDisplayValue(value)
-
-    expect(inputElement.value).toBe(value)
-  })
-
-  it('Has correct outline on input when variant is success', () => {
-    const label = 'success outline on input'
-    render(
-      <label>
-        {label}
-        <Input id="test-success" variant="success" />
-      </label>,
-    )
-    const inputNode = screen.getByLabelText(label)
-
-    expect(inputNode).toHaveStyleRule(
-      'outline',
-      `${activeSuccess.outline.width} solid ${trimSpaces(
-        activeSuccess.outline.color,
-      )}`,
-    )
-  })
-
-  it('Has correct outline on input when variant is warning', () => {
-    const label = 'warning outline on input'
-    render(
-      <label>
-        {label}
-        <Input id="test-warning" variant="warning" />
-      </label>,
-    )
-    const inputNode = screen.getByLabelText(label)
-
-    expect(inputNode).toHaveStyleRule(
-      'outline',
-      `${activeWarning.outline.width} solid ${trimSpaces(
-        activeWarning.outline.color,
-      )}`,
-    )
-  })
-
-  it('Has correct outline on input when variant is error', () => {
-    const label = 'error outline on input'
-    render(
-      <label>
-        {label}
-        <Input id="test-error" variant="error" />
-      </label>,
-    )
-    const inputNode = screen.getByLabelText(label)
-
-    expect(inputNode).toHaveStyleRule(
-      'outline',
-      `${activeError.outline.width} solid ${trimSpaces(
-        activeError.outline.color,
-      )}`,
-    )
-  })
-
-  const StyledTextField = styled(Input)`
-    margin-top: 48px;
-  `
-  it('Can extend the css of the component', () => {
-    render(
-      <StyledTextField
-        id="test-css-extend"
-        variant="error"
-        value="textfield"
-        readOnly
-      />,
-    )
-
-    expect(screen.getByDisplayValue('textfield')).toHaveStyleRule(
-      'margin-top',
-      '48px',
-    )
-  })
-})
diff --git a/packages/eds-core-react/src/components/OldInput/Input.tokens.ts b/packages/eds-core-react/src/components/OldInput/Input.tokens.ts
deleted file mode 100644
index f4958a82cf..0000000000
--- a/packages/eds-core-react/src/components/OldInput/Input.tokens.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { tokens } from '@equinor/eds-tokens'
-import type { ComponentToken } from '@equinor/eds-tokens'
-import { mergeDeepRight } from 'ramda'
-
-const {
-  colors: {
-    ui: {
-      background__light: { rgba: background },
-    },
-    text: { static_icons__default, static_icons__tertiary },
-    interactive: {
-      disabled__text,
-      primary__resting,
-      danger__resting,
-      danger__hover,
-      warning__resting,
-      warning__hover,
-      success__resting,
-      success__hover,
-    },
-  },
-  spacings: {
-    comfortable: { small, x_small },
-  },
-  typography,
-  shape,
-} = tokens
-
-export type InputToken = ComponentToken
-
-export const input: InputToken = {
-  minHeight: shape.straight.minHeight,
-  background,
-  spacings: {
-    left: small,
-    right: small,
-    top: '6px',
-    bottom: '6px',
-  },
-  typography: {
-    ...typography.input.text,
-    color: static_icons__default.rgba,
-  },
-  entities: {
-    placeholder: {
-      typography: {
-        color: static_icons__tertiary.rgba,
-      },
-    },
-  },
-  states: {
-    disabled: {
-      typography: {
-        color: disabled__text.rgba,
-      },
-    },
-    readOnly: {
-      background: 'transparent',
-      boxShadow: 'none',
-    },
-    active: {
-      outline: {
-        type: 'outline',
-        color: 'transparent',
-        width: '1px',
-        style: 'solid',
-        offset: '0px',
-      },
-    },
-    focus: {
-      outline: {
-        type: 'outline',
-        width: '2px',
-        color: primary__resting.rgba,
-        style: 'solid',
-        offset: '0px',
-      },
-    },
-  },
-  boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
-  modes: {
-    compact: {
-      minHeight: shape._modes.compact.straight.minHeight,
-      spacings: {
-        left: x_small,
-        right: x_small,
-        top: x_small,
-        bottom: x_small,
-      },
-    },
-  },
-}
-
-export const error: InputToken = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
-  states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: danger__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px',
-      },
-    },
-    focus: {
-      outline: {
-        type: 'outline',
-        width: '2px',
-        color: danger__hover.rgba,
-        style: 'solid',
-        offset: '0px',
-      },
-    },
-  },
-})
-
-export const warning: InputToken = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
-  states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: warning__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px',
-      },
-    },
-    focus: {
-      outline: {
-        type: 'outline',
-        width: '2px',
-        color: warning__hover.rgba,
-        style: 'solid',
-        offset: '0px',
-      },
-    },
-  },
-})
-
-export const success: InputToken = mergeDeepRight(input, {
-  boxShadow: 'inset 0px -1px 0px 0px transparent',
-  states: {
-    active: {
-      outline: {
-        type: 'outline',
-        color: success__resting.rgba,
-        width: '1px',
-        style: 'solid',
-        offset: '0px',
-      },
-    },
-    focus: {
-      outline: {
-        type: 'outline',
-        width: '2px',
-        color: success__hover.rgba,
-        style: 'solid',
-        offset: '0px',
-      },
-    },
-  },
-})
-
-export const inputToken = { input, error, warning, success }
diff --git a/packages/eds-core-react/src/components/OldInput/Input.tsx b/packages/eds-core-react/src/components/OldInput/Input.tsx
deleted file mode 100644
index 848e329597..0000000000
--- a/packages/eds-core-react/src/components/OldInput/Input.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { InputHTMLAttributes, forwardRef } from 'react'
-import styled, { css, ThemeProvider } from 'styled-components'
-import { inputToken as tokens } from './Input.tokens'
-import type { InputToken } from './Input.tokens'
-import {
-  typographyTemplate,
-  spacingsTemplate,
-  outlineTemplate,
-  useToken,
-} from '@equinor/eds-utils'
-import type { Variants } from '../TextField/types'
-import { useEds } from '../EdsProvider'
-
-const StyledInput = styled.input(({ theme }: StyledProps) => {
-  const {
-    states: {
-      focus: { outline: focusOutline },
-      active: { outline: activeOutline },
-      disabled,
-      readOnly,
-    },
-    boxShadow,
-  } = theme
-
-  return css`
-    width: 100%;
-    box-sizing: border-box;
-    margin: 0;
-    appearance: none;
-    background: ${theme.background};
-    border: none;
-    height: ${theme.minHeight};
-    box-shadow: ${boxShadow};
-
-    ${outlineTemplate(activeOutline)}
-    ${typographyTemplate(theme.typography)}
-    ${spacingsTemplate(theme.spacings)};
-
-    &::placeholder {
-      color: ${theme.entities.placeholder.typography.color};
-    }
-
-    &:active,
-    &:focus {
-      outline-offset: 0;
-      box-shadow: none;
-      ${outlineTemplate(focusOutline)}
-    }
-
-    &:disabled {
-      color: ${disabled.typography.color};
-      cursor: not-allowed;
-      box-shadow: none;
-      outline: none;
-      &:focus,
-      &:active {
-        outline: none;
-      }
-    }
-    &[readOnly] {
-      background: ${readOnly.background};
-      box-shadow: ${readOnly.boxShadow};
-    }
-  `
-})
-
-type StyledProps = {
-  theme: InputToken
-}
-
-export type InputProps = {
-  /** Placeholder */
-  placeholder?: string
-  /** Variant */
-  variant?: Variants
-  /** Disabled state */
-  disabled?: boolean
-  /** Type */
-  type?: string
-  /** Read Only */
-  readOnly?: boolean
-} & InputHTMLAttributes<HTMLInputElement>
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { variant = 'default', disabled = false, type = 'text', ...other },
-  ref,
-) {
-  const actualVariant = variant === 'default' ? 'input' : variant
-  const inputVariant = tokens[actualVariant]
-  const { density } = useEds()
-  const token = useToken({ density }, inputVariant)
-
-  const inputProps = {
-    ref,
-    type,
-    disabled,
-    ...other,
-  }
-
-  return (
-    <ThemeProvider theme={token}>
-      <StyledInput {...inputProps} />
-    </ThemeProvider>
-  )
-})
diff --git a/packages/eds-core-react/src/components/OldInput/__snapshots__/Input.test.tsx.snap b/packages/eds-core-react/src/components/OldInput/__snapshots__/Input.test.tsx.snap
deleted file mode 100644
index 323a8392fd..0000000000
--- a/packages/eds-core-react/src/components/OldInput/__snapshots__/Input.test.tsx.snap
+++ /dev/null
@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Input Matches snapshot 1`] = `
-<DocumentFragment>
-  .c0 {
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: var(--eds_ui_background__light,rgba(247,247,247,1));
-  border: none;
-  height: 36px;
-  box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
-  outline: 1px solid transparent;
-  outline-offset: 0px;
-  margin: 0;
-  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
-  font-family: Equinor;
-  font-size: 1.000rem;
-  font-weight: 400;
-  line-height: 1.500em;
-  -webkit-letter-spacing: 0.025em;
-  -moz-letter-spacing: 0.025em;
-  -ms-letter-spacing: 0.025em;
-  letter-spacing: 0.025em;
-  text-align: left;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
-}
-
-.c0::-webkit-input-placeholder {
-  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
-}
-
-.c0::-moz-placeholder {
-  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
-}
-
-.c0:-ms-input-placeholder {
-  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
-}
-
-.c0::placeholder {
-  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
-}
-
-.c0:active,
-.c0:focus {
-  outline-offset: 0;
-  box-shadow: none;
-  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
-  outline-offset: 0px;
-}
-
-.c0:disabled {
-  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
-  cursor: not-allowed;
-  box-shadow: none;
-  outline: none;
-}
-
-.c0:disabled:focus,
-.c0:disabled:active {
-  outline: none;
-}
-
-.c0[readOnly] {
-  background: transparent;
-  box-shadow: none;
-}
-
-<input
-    class="c0"
-    readonly=""
-    type="text"
-    value="input value"
-  />
-</DocumentFragment>
-`;
diff --git a/packages/eds-core-react/src/components/OldInput/index.ts b/packages/eds-core-react/src/components/OldInput/index.ts
deleted file mode 100644
index 54e51f6c7b..0000000000
--- a/packages/eds-core-react/src/components/OldInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Input'

From 77dc09e2b926de310010aa608b043c618193afcf Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 27 Jul 2022 15:12:24 +0200
Subject: [PATCH 12/20] Testing something old

---
 .../src/components/Input/Input.stories.tsx    | 10 ++++
 .../src/components/Input/Input.tokens.ts      |  2 +-
 .../src/components/Input/Input.tsx            | 58 ++++++++++---------
 3 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/packages/eds-core-react/src/components/Input/Input.stories.tsx b/packages/eds-core-react/src/components/Input/Input.stories.tsx
index 3f34a7c23b..2ff72f279f 100644
--- a/packages/eds-core-react/src/components/Input/Input.stories.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.stories.tsx
@@ -288,3 +288,13 @@ export const WithAdornments: Story<InputProps> = () => {
     </EdsProvider>
   )
 }
+
+WithAdornments.decorators = [
+  (Story) => {
+    return (
+      <Stack direction="column" align="start">
+        <Story />
+      </Stack>
+    )
+  },
+]
diff --git a/packages/eds-core-react/src/components/Input/Input.tokens.ts b/packages/eds-core-react/src/components/Input/Input.tokens.ts
index 80732915a5..4152097038 100644
--- a/packages/eds-core-react/src/components/Input/Input.tokens.ts
+++ b/packages/eds-core-react/src/components/Input/Input.tokens.ts
@@ -92,7 +92,7 @@ export const input: InputToken = {
   boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
   modes: {
     compact: {
-      minHeight: shape._modes.compact.straight.minHeight,
+      height: shape._modes.compact.straight.minHeight,
       spacings: {
         left: x_small,
         right: x_small,
diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 19e1daa51a..654b5b37e4 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -1,5 +1,5 @@
 import { InputHTMLAttributes, forwardRef, ReactNode } from 'react'
-import styled, { css, ThemeProvider } from 'styled-components'
+import styled, { css } from 'styled-components'
 import { inputToken as tokens } from './Input.tokens'
 import type { InputToken } from './Input.tokens'
 import {
@@ -11,8 +11,8 @@ import {
 import type { Variants } from '../TextField/types'
 import { useEds } from '../EdsProvider'
 
-const Container = styled.div(({ theme, disabled, readOnly }: StyledProps) => {
-  const { states, entities } = theme
+const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
+  const { states, entities } = token
 
   return css`
     --eds-input-adornment-color: ${entities.adornment.typography.color};
@@ -22,12 +22,12 @@ const Container = styled.div(({ theme, disabled, readOnly }: StyledProps) => {
     column-gap: 8px;
     border: none;
     box-sizing: border-box;
-    height: ${theme.height};
-    box-shadow: ${theme.boxShadow};
-    background: ${theme.background};
-    ${outlineTemplate(theme.outline)}
-    ${spacingsTemplate(theme.spacings)}
-    ${typographyTemplate(theme.typography)}
+    height: ${token.height};
+    box-shadow: ${token.boxShadow};
+    background: ${token.background};
+    ${outlineTemplate(token.outline)}
+    ${spacingsTemplate(token.spacings)}
+    ${typographyTemplate(token.typography)}
 
 
     &:focus-within {
@@ -57,20 +57,20 @@ const Container = styled.div(({ theme, disabled, readOnly }: StyledProps) => {
   `
 })
 
-const StyledInput = styled.input(({ theme }: StyledProps) => {
+const StyledInput = styled.input(({ token }: StyledProps) => {
   const {
     states: { disabled },
-  } = theme
+  } = token
 
   return css`
     width: 100%;
     border: none;
     background: transparent;
-    ${typographyTemplate(theme.typography)}
+    ${typographyTemplate(token.typography)}
     outline: none;
 
     &::placeholder {
-      color: ${theme.entities.placeholder.typography.color};
+      color: ${token.entities.placeholder.typography.color};
     }
 
     &:disabled {
@@ -80,20 +80,20 @@ const StyledInput = styled.input(({ theme }: StyledProps) => {
   `
 })
 
-export const Adornments = styled.div(({ theme }: StyledProps) => {
+export const Adornments = styled.div(({ token }: StyledProps) => {
   return css`
     display: flex;
     column-gap: 8px;
     justify-content: center;
     align-items: center;
     width: fit-content;
-    ${typographyTemplate(theme.entities.adornment.typography)}
+    ${typographyTemplate(token.entities.adornment.typography)}
     color: var(--eds-input-adornment-color);
   `
 })
 
 type StyledProps = {
-  theme: InputToken
+  token: InputToken
 } & Required<Pick<InputProps, 'readOnly' | 'disabled'>>
 
 export type InputProps = {
@@ -130,13 +130,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   const actualVariant = variant === 'default' ? 'input' : variant
   const inputVariant = tokens[actualVariant]
   const { density } = useEds()
-  const token = useToken({ density }, inputVariant)
+  const token = useToken({ density }, inputVariant)()
 
   const inputProps = {
     ref,
     type,
     disabled,
     readOnly,
+    token,
     ...other,
   }
 
@@ -145,24 +146,25 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     readOnly,
     className,
     style,
+    token,
   }
 
   const adornmentProps = {
     disabled,
     readOnly,
+    token,
   }
 
   return (
-    <ThemeProvider theme={token}>
-      <Container {...containerProps}>
-        {leftAdornments ? (
-          <Adornments {...adornmentProps}>{leftAdornments}</Adornments>
-        ) : null}
-        <StyledInput {...inputProps} />
-        {rightAdornments ? (
-          <Adornments {...adornmentProps}>{rightAdornments}</Adornments>
-        ) : null}
-      </Container>
-    </ThemeProvider>
+    // Not using <ThemeProvider> because of cascading styling messing with adornments
+    <Container {...containerProps}>
+      {leftAdornments ? (
+        <Adornments {...adornmentProps}>{leftAdornments}</Adornments>
+      ) : null}
+      <StyledInput {...inputProps} />
+      {rightAdornments ? (
+        <Adornments {...adornmentProps}>{rightAdornments}</Adornments>
+      ) : null}
+    </Container>
   )
 })

From 7a46a98afe4f64546fa4640bbf3cb8af341118cf Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 27 Jul 2022 15:12:30 +0200
Subject: [PATCH 13/20] updated snapshots

---
 .../Input/__snapshots__/Input.test.tsx.snap   |  94 +++++++-----
 .../Search/__snapshots__/Search.test.tsx.snap | 127 +++++++++-------
 .../__snapshots__/SingleSelect.test.tsx.snap  | 139 ++++++++++--------
 3 files changed, 201 insertions(+), 159 deletions(-)

diff --git a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap
index 323a8392fd..e62e34f9e3 100644
--- a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -3,18 +3,27 @@
 exports[`Input Matches snapshot 1`] = `
 <DocumentFragment>
   .c0 {
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: var(--eds_ui_background__light,rgba(247,247,247,1));
+  --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
   border: none;
+  box-sizing: border-box;
   height: 36px;
   box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -26,58 +35,65 @@ exports[`Input Matches snapshot 1`] = `
   -ms-letter-spacing: 0.025em;
   letter-spacing: 0.025em;
   text-align: left;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
+  background: transparent;
+  box-shadow: none;
 }
 
-.c0::-webkit-input-placeholder {
-  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+.c0:focus-within {
+  box-shadow: none;
+  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  outline-offset: 0px;
+}
+
+.c1 {
+  width: 100%;
+  border: none;
+  background: transparent;
+  margin: 0;
+  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  font-family: Equinor;
+  font-size: 1.000rem;
+  font-weight: 400;
+  line-height: 1.500em;
+  -webkit-letter-spacing: 0.025em;
+  -moz-letter-spacing: 0.025em;
+  -ms-letter-spacing: 0.025em;
+  letter-spacing: 0.025em;
+  text-align: left;
+  outline: none;
 }
 
-.c0::-moz-placeholder {
+.c1::-webkit-input-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c0:-ms-input-placeholder {
+.c1::-moz-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c0::placeholder {
+.c1:-ms-input-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c0:active,
-.c0:focus {
-  outline-offset: 0;
-  box-shadow: none;
-  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
-  outline-offset: 0px;
+.c1::placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c0:disabled {
+.c1:disabled {
   color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
   cursor: not-allowed;
-  box-shadow: none;
-  outline: none;
-}
-
-.c0:disabled:focus,
-.c0:disabled:active {
-  outline: none;
-}
-
-.c0[readOnly] {
-  background: transparent;
-  box-shadow: none;
 }
 
-<input
+<div
     class="c0"
     readonly=""
-    type="text"
-    value="input value"
-  />
+  >
+    <input
+      class="c1"
+      readonly=""
+      type="text"
+      value="input value"
+    />
+  </div>
 </DocumentFragment>
 `;
diff --git a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
index 435f85cf92..5963bf8f9b 100644
--- a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Search Matches snapshot 1`] = `
 <DocumentFragment>
-  .c5 {
+  .c6 {
   display: grid;
   grid-gap: var(--eds_button__gap,8px);
   grid-auto-flow: column;
@@ -17,12 +17,12 @@ exports[`Search Matches snapshot 1`] = `
   justify-content: center;
 }
 
-.c5 > :is(svg,img) {
+.c6 > :is(svg,img) {
   margin-top: var(--eds_button__icon__margin_y,0);
   margin-bottom: var(--eds_button__icon__margin_y,0);
 }
 
-.c3 {
+.c4 {
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;
@@ -48,11 +48,11 @@ exports[`Search Matches snapshot 1`] = `
   text-align: center;
 }
 
-.c3 svg {
+.c4 svg {
   justify-self: center;
 }
 
-.c3::before {
+.c4::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -61,7 +61,7 @@ exports[`Search Matches snapshot 1`] = `
   content: '';
 }
 
-.c3::after {
+.c4::after {
   position: absolute;
   top: -0;
   left: -4px;
@@ -70,25 +70,25 @@ exports[`Search Matches snapshot 1`] = `
   content: '';
 }
 
-.c3:focus {
+.c4:focus {
   outline: none;
 }
 
-.c3[data-focus-visible-added]:focus {
+.c4[data-focus-visible-added]:focus {
   outline: 2px dashed rgba(0,112,121,1);
   outline-offset: -2px;
 }
 
-.c3:focus-visible {
+.c4:focus-visible {
   outline: 2px dashed rgba(0,112,121,1);
   outline-offset: -2px;
 }
 
-.c3::-moz-focus-inner {
+.c4::-moz-focus-inner {
   border: 0;
 }
 
-.c3:disabled {
+.c4:disabled {
   cursor: not-allowed;
   background: transparent;
   border: 1px solid transparent;
@@ -102,18 +102,27 @@ exports[`Search Matches snapshot 1`] = `
 }
 
 .c1 {
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: var(--eds_ui_background__light,rgba(247,247,247,1));
+  --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
   border: none;
+  box-sizing: border-box;
   height: 36px;
   box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -125,51 +134,51 @@ exports[`Search Matches snapshot 1`] = `
   -ms-letter-spacing: 0.025em;
   letter-spacing: 0.025em;
   text-align: left;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
 }
 
-.c1::-webkit-input-placeholder {
-  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+.c1:focus-within {
+  box-shadow: none;
+  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  outline-offset: 0px;
 }
 
-.c1::-moz-placeholder {
+.c3 {
+  width: 100%;
+  border: none;
+  background: transparent;
+  margin: 0;
+  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  font-family: Equinor;
+  font-size: 1.000rem;
+  font-weight: 400;
+  line-height: 1.500em;
+  -webkit-letter-spacing: 0.025em;
+  -moz-letter-spacing: 0.025em;
+  -ms-letter-spacing: 0.025em;
+  letter-spacing: 0.025em;
+  text-align: left;
+  outline: none;
+}
+
+.c3::-webkit-input-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c1:-ms-input-placeholder {
+.c3::-moz-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c1::placeholder {
+.c3:-ms-input-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c1:active,
-.c1:focus {
-  outline-offset: 0;
-  box-shadow: none;
-  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
-  outline-offset: 0px;
+.c3::placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c1:disabled {
+.c3:disabled {
   color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
   cursor: not-allowed;
-  box-shadow: none;
-  outline: none;
-}
-
-.c1:disabled:focus,
-.c1:disabled:active {
-  outline: none;
-}
-
-.c1[readOnly] {
-  background: transparent;
-  box-shadow: none;
 }
 
 .c0 {
@@ -269,7 +278,7 @@ exports[`Search Matches snapshot 1`] = `
   box-shadow: 0 0 0px 1000px var(--eds_ui_background__light,rgba(247,247,247,1)) inset;
 }
 
-.c4 {
+.c5 {
   visibility: hidden;
   position: absolute;
   right: 8px;
@@ -278,7 +287,7 @@ exports[`Search Matches snapshot 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:hover {
+  .c4:hover {
     background: var(--eds_interactive_primary__hover_alt,rgba(222,237,238,1));
     border: 0px solid transparent;
     border-radius: 50%;
@@ -286,7 +295,7 @@ exports[`Search Matches snapshot 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3:disabled:hover {
+  .c4:disabled:hover {
     background: transparent;
   }
 }
@@ -320,22 +329,26 @@ exports[`Search Matches snapshot 1`] = `
         height="24"
       />
     </svg>
-    <input
-      aria-label="search input"
+    <div
       class="c1 c2"
-      role="searchbox"
-      type="search"
-      value=""
-    />
+    >
+      <input
+        aria-label="search input"
+        class="c3"
+        role="searchbox"
+        type="search"
+        value=""
+      />
+    </div>
     <button
       aria-label="clear search"
-      class="c3 c4"
+      class="c4 c5"
       tabindex="0"
       title="clear"
       type="button"
     >
       <span
-        class="c5"
+        class="c6"
       >
         <svg
           aria-hidden="true"
diff --git a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
index 897bdf046d..e4a16a6e44 100644
--- a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
@@ -29,18 +29,27 @@ exports[`SingleSelect Matches snapshot 1`] = `
 }
 
 .c4 {
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: var(--eds_ui_background__light,rgba(247,247,247,1));
+  --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
   border: none;
+  box-sizing: border-box;
   height: 36px;
   box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -52,54 +61,54 @@ exports[`SingleSelect Matches snapshot 1`] = `
   -ms-letter-spacing: 0.025em;
   letter-spacing: 0.025em;
   text-align: left;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
 }
 
-.c4::-webkit-input-placeholder {
-  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+.c4:focus-within {
+  box-shadow: none;
+  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  outline-offset: 0px;
 }
 
-.c4::-moz-placeholder {
+.c6 {
+  width: 100%;
+  border: none;
+  background: transparent;
+  margin: 0;
+  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  font-family: Equinor;
+  font-size: 1.000rem;
+  font-weight: 400;
+  line-height: 1.500em;
+  -webkit-letter-spacing: 0.025em;
+  -moz-letter-spacing: 0.025em;
+  -ms-letter-spacing: 0.025em;
+  letter-spacing: 0.025em;
+  text-align: left;
+  outline: none;
+}
+
+.c6::-webkit-input-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c4:-ms-input-placeholder {
+.c6::-moz-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c4::placeholder {
+.c6:-ms-input-placeholder {
   color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c4:active,
-.c4:focus {
-  outline-offset: 0;
-  box-shadow: none;
-  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
-  outline-offset: 0px;
+.c6::placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
 }
 
-.c4:disabled {
+.c6:disabled {
   color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
   cursor: not-allowed;
-  box-shadow: none;
-  outline: none;
-}
-
-.c4:disabled:focus,
-.c4:disabled:active {
-  outline: none;
-}
-
-.c4[readOnly] {
-  background: transparent;
-  box-shadow: none;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgba(61,61,61,1);
   font-family: Equinor;
@@ -109,7 +118,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
   text-align: left;
 }
 
-.c8 {
+.c9 {
   display: grid;
   grid-gap: var(--eds_button__gap,8px);
   grid-auto-flow: column;
@@ -124,12 +133,12 @@ exports[`SingleSelect Matches snapshot 1`] = `
   justify-content: center;
 }
 
-.c8 > :is(svg,img) {
+.c9 > :is(svg,img) {
   margin-top: var(--eds_button__icon__margin_y,0);
   margin-bottom: var(--eds_button__icon__margin_y,0);
 }
 
-.c6 {
+.c7 {
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;
@@ -155,11 +164,11 @@ exports[`SingleSelect Matches snapshot 1`] = `
   text-align: center;
 }
 
-.c6 svg {
+.c7 svg {
   justify-self: center;
 }
 
-.c6::before {
+.c7::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -168,7 +177,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
   content: '';
 }
 
-.c6::after {
+.c7::after {
   position: absolute;
   top: -0;
   left: -4px;
@@ -177,25 +186,25 @@ exports[`SingleSelect Matches snapshot 1`] = `
   content: '';
 }
 
-.c6:focus {
+.c7:focus {
   outline: none;
 }
 
-.c6[data-focus-visible-added]:focus {
+.c7[data-focus-visible-added]:focus {
   outline: 2px dashed rgba(0,112,121,1);
   outline-offset: -2px;
 }
 
-.c6:focus-visible {
+.c7:focus-visible {
   outline: 2px dashed rgba(0,112,121,1);
   outline-offset: -2px;
 }
 
-.c6::-moz-focus-inner {
+.c7::-moz-focus-inner {
   border: 0;
 }
 
-.c6:disabled {
+.c7:disabled {
   cursor: not-allowed;
   background: transparent;
   border: 1px solid transparent;
@@ -216,7 +225,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
   padding-right: calc( 24px + 8px + 8px + 0px );
 }
 
-.c10 {
+.c11 {
   background-color: var(--eds_ui_background__default,rgba(255,255,255,1));
   box-shadow: 0 7px 8px rgba(0,0,0,0.2),0 5px 22px rgba(0,0,0,0.12),0 12px 17px rgba(0,0,0,0.14);
   overflow-y: scroll;
@@ -230,7 +239,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
   z-index: 50;
 }
 
-.c7 {
+.c8 {
   position: absolute;
   right: 8px;
   height: 24px;
@@ -244,7 +253,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6:hover {
+  .c7:hover {
     background: var(--eds_interactive_primary__hover_alt,rgba(222,237,238,1));
     border: 0px solid transparent;
     border-radius: 50%;
@@ -252,7 +261,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6:disabled:hover {
+  .c7:disabled:hover {
     background: transparent;
   }
 }
@@ -278,26 +287,30 @@ exports[`SingleSelect Matches snapshot 1`] = `
       class="c3"
       role="combobox"
     >
-      <input
-        aria-autocomplete="list"
-        aria-controls="downshift-0-menu"
-        aria-labelledby="downshift-0-label"
-        autocomplete="off"
+      <div
         class="c4 c5"
-        id="downshift-0-input"
-        type="text"
-        value=""
-      />
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="downshift-0-menu"
+          aria-labelledby="downshift-0-label"
+          autocomplete="off"
+          class="c6"
+          id="downshift-0-input"
+          type="text"
+          value=""
+        />
+      </div>
       <button
         aria-label="toggle options"
-        class="c6 c7"
+        class="c7 c8"
         id="downshift-0-toggle-button"
         tabindex="-1"
         title="open"
         type="button"
       >
         <span
-          class="c8"
+          class="c9"
         >
           <svg
             aria-hidden="true"
@@ -322,7 +335,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
     </div>
     <ul
       aria-labelledby="downshift-0-label"
-      class="c9 c10"
+      class="c10 c11"
       id="downshift-0-menu"
       role="listbox"
     />

From 4bde5f528ace092cb78d6ef96702cfabe5a25365 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Fri, 29 Jul 2022 13:41:10 +0200
Subject: [PATCH 14/20] its something

---
 .../Autocomplete/Autocomplete.tokens.ts       |  1 +
 .../components/Autocomplete/Autocomplete.tsx  | 70 ++++++--------
 .../src/components/Input/Input.tsx            | 91 ++++++++++++++-----
 3 files changed, 98 insertions(+), 64 deletions(-)

diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tokens.ts b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tokens.ts
index aa5ddb0950..9d15ee7550 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tokens.ts
+++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tokens.ts
@@ -55,6 +55,7 @@ export const selectTokens: ComponentToken = {
   entities: {
     button: {
       height: '24px',
+      width: '24px',
       spacings: {
         left: spacingSmall,
         right: spacingSmall,
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
index edd948de6d..17f8ac284d 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -39,21 +39,6 @@ const Container = styled.div`
   position: relative;
 `
 
-const StyledInput = styled(Input)(
-  ({
-    theme: {
-      entities: { button },
-    },
-  }) => {
-    return css`
-      padding-right: calc(
-        ${button.spacings.left} + ${button.spacings.right} +
-          (${button.height} * 2)
-      );
-    `
-  },
-)
-
 const StyledList = styled(List)(
   ({ theme }) => css`
     background-color: ${theme.background};
@@ -75,11 +60,8 @@ const StyledButton = styled(Button)(
       entities: { button },
     },
   }) => css`
-    position: absolute;
     height: ${button.height};
     width: ${button.height};
-    right: ${button.spacings.right};
-    top: ${button.spacings.top};
   `,
 )
 
@@ -578,7 +560,7 @@ function AutocompleteInner<T>(
         />
 
         <Container {...getComboboxProps()}>
-          <StyledInput
+          <Input
             {...getInputProps(
               // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
               getDropdownProps({
@@ -591,30 +573,36 @@ function AutocompleteInner<T>(
             readOnly={readOnly}
             onFocus={openSelect}
             onClick={openSelect}
+            rightAdornmentsWidth={24 * 2 + 8 + 8}
+            rightAdornments={
+              <>
+                {showClearButton && (
+                  <StyledButton
+                    variant="ghost_icon"
+                    disabled={disabled || readOnly}
+                    aria-label={'clear options'}
+                    title="clear"
+                    onClick={clear}
+                  >
+                    <Icon data={close} size={16} />
+                  </StyledButton>
+                )}
+                <StyledButton
+                  variant="ghost_icon"
+                  {...getToggleButtonProps({ disabled: disabled || readOnly })}
+                  aria-label={'toggle options'}
+                  title="open"
+                >
+                  {!readOnly && (
+                    <Icon
+                      data={isOpen ? arrow_drop_up : arrow_drop_down}
+                    ></Icon>
+                  )}
+                </StyledButton>
+              </>
+            }
             {...other}
           />
-          {showClearButton && (
-            <StyledButton
-              variant="ghost_icon"
-              disabled={disabled || readOnly}
-              aria-label={'clear options'}
-              title="clear"
-              onClick={clear}
-              style={{ right: 32 }}
-            >
-              <Icon data={close} size={16} />
-            </StyledButton>
-          )}
-          <StyledButton
-            variant="ghost_icon"
-            {...getToggleButtonProps({ disabled: disabled || readOnly })}
-            aria-label={'toggle options'}
-            title="open"
-          >
-            {!readOnly && (
-              <Icon data={isOpen ? arrow_drop_up : arrow_drop_down}></Icon>
-            )}
-          </StyledButton>
         </Container>
         {disablePortal
           ? optionsList
diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 654b5b37e4..63f8f44bcd 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, forwardRef, ReactNode } from 'react'
+import { InputHTMLAttributes, forwardRef, ReactNode, useMemo } from 'react'
 import styled, { css } from 'styled-components'
 import { inputToken as tokens } from './Input.tokens'
 import type { InputToken } from './Input.tokens'
@@ -10,6 +10,7 @@ import {
 } from '@equinor/eds-utils'
 import type { Variants } from '../TextField/types'
 import { useEds } from '../EdsProvider'
+import { ComponentToken } from '@equinor/eds-tokens'
 
 const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
   const { states, entities } = token
@@ -17,8 +18,10 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
   return css`
     --eds-input-adornment-color: ${entities.adornment.typography.color};
 
-    display: flex;
-    flex-direction: row;
+    position: relative;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: auto auto auto;
     column-gap: 8px;
     border: none;
     box-sizing: border-box;
@@ -26,7 +29,6 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
     box-shadow: ${token.boxShadow};
     background: ${token.background};
     ${outlineTemplate(token.outline)}
-    ${spacingsTemplate(token.spacings)}
     ${typographyTemplate(token.typography)}
 
 
@@ -66,6 +68,7 @@ const StyledInput = styled.input(({ token }: StyledProps) => {
     width: 100%;
     border: none;
     background: transparent;
+    ${spacingsTemplate(token.spacings)}
     ${typographyTemplate(token.typography)}
     outline: none;
 
@@ -80,17 +83,30 @@ const StyledInput = styled.input(({ token }: StyledProps) => {
   `
 })
 
-export const Adornments = styled.div(({ token }: StyledProps) => {
-  return css`
-    display: flex;
-    column-gap: 8px;
-    justify-content: center;
-    align-items: center;
-    width: fit-content;
-    ${typographyTemplate(token.entities.adornment.typography)}
-    color: var(--eds-input-adornment-color);
-  `
-})
+type AdornmentProps = {
+  token: InputToken
+  width: string
+  left?: number
+  right?: number
+}
+
+export const Adornments = styled.div(
+  ({ token, width, left, right }: AdornmentProps) => {
+    return css`
+      top: 0;
+      bottom: 0;
+      left: ${left};
+      right: ${right};
+      width: ${width}px;
+      display: flex;
+      column-gap: 8px;
+      justify-content: center;
+      align-items: center;
+      ${typographyTemplate(token.entities.adornment.typography)}
+      color: var(--eds-input-adornment-color);
+    `
+  },
+)
 
 type StyledProps = {
   token: InputToken
@@ -109,8 +125,12 @@ export type InputProps = {
   readOnly?: boolean
   /** Left adornments */
   leftAdornments?: ReactNode
+  /** Left adornments width */
+  leftAdornmentsWidth?: number
   /** Right adornments */
   rightAdornments?: ReactNode
+  /** Right adornments width */
+  rightAdornmentsWidth?: number
 } & InputHTMLAttributes<HTMLInputElement>
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
@@ -120,6 +140,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     type = 'text',
     leftAdornments,
     rightAdornments,
+    leftAdornmentsWidth,
+    rightAdornmentsWidth,
     readOnly,
     className,
     style,
@@ -132,12 +154,30 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   const { density } = useEds()
   const token = useToken({ density }, inputVariant)()
 
+  const updatedToken = useMemo(
+    (): ComponentToken => ({
+      ...token,
+      // spacings: {
+      //   left:
+      //     typeof leftAdornmentsWidth !== 'undefined'
+      //       ? `${leftAdornmentsWidth}px`
+      //       : token.spacings.left,
+      //   right:
+      //     typeof rightAdornmentsWidth !== 'undefined'
+      //       ? `${rightAdornmentsWidth}px`
+      //       : token.spacings.right,
+      // },
+    }),
+    [leftAdornmentsWidth, rightAdornmentsWidth, token],
+  )
   const inputProps = {
     ref,
     type,
     disabled,
     readOnly,
-    token,
+    token: updatedToken,
+    leftAdornmentsWidth,
+    rightAdornmentsWidth,
     ...other,
   }
 
@@ -146,24 +186,29 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     readOnly,
     className,
     style,
-    token,
+    token: updatedToken,
   }
 
-  const adornmentProps = {
-    disabled,
-    readOnly,
-    token,
+  const leftAdornmentProps = {
+    token: updatedToken,
+    width: leftAdornmentsWidth,
+    left: 0,
+  }
+  const rightAdornmentProps = {
+    token: updatedToken,
+    width: rightAdornmentsWidth,
+    right: 0,
   }
 
   return (
     // Not using <ThemeProvider> because of cascading styling messing with adornments
     <Container {...containerProps}>
       {leftAdornments ? (
-        <Adornments {...adornmentProps}>{leftAdornments}</Adornments>
+        <Adornments {...leftAdornmentProps}>{leftAdornments}</Adornments>
       ) : null}
       <StyledInput {...inputProps} />
       {rightAdornments ? (
-        <Adornments {...adornmentProps}>{rightAdornments}</Adornments>
+        <Adornments {...rightAdornmentProps}>{rightAdornments}</Adornments>
       ) : null}
     </Container>
   )

From 993084871a4ac85d7b81e29f01be23a1eb839cc0 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Tue, 2 Aug 2022 13:24:48 +0200
Subject: [PATCH 15/20] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20working=20version=20?=
 =?UTF-8?q?before=20testing=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Autocomplete/Autocomplete.tsx  | 20 +++--
 .../src/components/Input/Input.tokens.ts      |  4 +
 .../src/components/Input/Input.tsx            | 84 ++++++++++---------
 3 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
index 17f8ac284d..53bb260877 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -587,18 +587,20 @@ function AutocompleteInner<T>(
                     <Icon data={close} size={16} />
                   </StyledButton>
                 )}
-                <StyledButton
-                  variant="ghost_icon"
-                  {...getToggleButtonProps({ disabled: disabled || readOnly })}
-                  aria-label={'toggle options'}
-                  title="open"
-                >
-                  {!readOnly && (
+                {!readOnly && (
+                  <StyledButton
+                    variant="ghost_icon"
+                    {...getToggleButtonProps({
+                      disabled: disabled || readOnly,
+                    })}
+                    aria-label={'toggle options'}
+                    title="open"
+                  >
                     <Icon
                       data={isOpen ? arrow_drop_up : arrow_drop_down}
                     ></Icon>
-                  )}
-                </StyledButton>
+                  </StyledButton>
+                )}
               </>
             }
             {...other}
diff --git a/packages/eds-core-react/src/components/Input/Input.tokens.ts b/packages/eds-core-react/src/components/Input/Input.tokens.ts
index 4152097038..26b85d45db 100644
--- a/packages/eds-core-react/src/components/Input/Input.tokens.ts
+++ b/packages/eds-core-react/src/components/Input/Input.tokens.ts
@@ -59,6 +59,10 @@ export const input: InputToken = {
         ...typography.input.label,
         color: static_icons__tertiary.rgba,
       },
+      spacings: {
+        left: small,
+        right: small,
+      },
       states: {
         disabled: {
           typography: {
diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 63f8f44bcd..1599fefdce 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -18,11 +18,9 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
   return css`
     --eds-input-adornment-color: ${entities.adornment.typography.color};
 
-    position: relative;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: auto auto auto;
-    column-gap: 8px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
     border: none;
     box-sizing: border-box;
     height: ${token.height};
@@ -85,27 +83,34 @@ const StyledInput = styled.input(({ token }: StyledProps) => {
 
 type AdornmentProps = {
   token: InputToken
-  width: string
-  left?: number
-  right?: number
+  width: number
 }
 
-export const Adornments = styled.div(
-  ({ token, width, left, right }: AdornmentProps) => {
-    return css`
-      top: 0;
-      bottom: 0;
-      left: ${left};
-      right: ${right};
-      width: ${width}px;
-      display: flex;
-      column-gap: 8px;
-      justify-content: center;
-      align-items: center;
-      ${typographyTemplate(token.entities.adornment.typography)}
-      color: var(--eds-input-adornment-color);
-    `
-  },
+const Adornments = styled.div<AdornmentProps>(({ token, width }) => {
+  return css`
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: ${width};
+    display: flex;
+    align-items: center;
+    ${typographyTemplate(token.entities.adornment.typography)}
+    color: var(--eds-input-adornment-color);
+  `
+})
+
+const LeftAdornments = styled(Adornments)(
+  ({ token }) => css`
+    left: 0;
+    padding-left: ${token.entities.adornment.spacings.left};
+  `,
+)
+
+const RightAdornments = styled(Adornments)(
+  ({ token }) => css`
+    right: 0;
+    padding-right: ${token.entities.adornment.spacings.right};
+  `,
 )
 
 type StyledProps = {
@@ -157,16 +162,17 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   const updatedToken = useMemo(
     (): ComponentToken => ({
       ...token,
-      // spacings: {
-      //   left:
-      //     typeof leftAdornmentsWidth !== 'undefined'
-      //       ? `${leftAdornmentsWidth}px`
-      //       : token.spacings.left,
-      //   right:
-      //     typeof rightAdornmentsWidth !== 'undefined'
-      //       ? `${rightAdornmentsWidth}px`
-      //       : token.spacings.right,
-      // },
+      spacings: {
+        ...token.spacings,
+        left:
+          typeof leftAdornmentsWidth !== 'undefined'
+            ? `${leftAdornmentsWidth}px`
+            : token.spacings.left,
+        right:
+          typeof rightAdornmentsWidth !== 'undefined'
+            ? `${rightAdornmentsWidth}px`
+            : token.spacings.right,
+      },
     }),
     [leftAdornmentsWidth, rightAdornmentsWidth, token],
   )
@@ -192,23 +198,25 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   const leftAdornmentProps = {
     token: updatedToken,
     width: leftAdornmentsWidth,
-    left: 0,
   }
   const rightAdornmentProps = {
     token: updatedToken,
     width: rightAdornmentsWidth,
-    right: 0,
   }
 
   return (
     // Not using <ThemeProvider> because of cascading styling messing with adornments
     <Container {...containerProps}>
       {leftAdornments ? (
-        <Adornments {...leftAdornmentProps}>{leftAdornments}</Adornments>
+        <LeftAdornments {...leftAdornmentProps}>
+          {leftAdornments}
+        </LeftAdornments>
       ) : null}
       <StyledInput {...inputProps} />
       {rightAdornments ? (
-        <Adornments {...rightAdornmentProps}>{rightAdornments}</Adornments>
+        <RightAdornments {...rightAdornmentProps}>
+          {rightAdornments}
+        </RightAdornments>
       ) : null}
     </Container>
   )

From 33e3248e3414eb9af8045b907155e8ec94418443 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Tue, 2 Aug 2022 15:26:52 +0200
Subject: [PATCH 16/20] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Further=20testing=20?=
 =?UTF-8?q?and=20tweaking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Input/Input.stories.tsx    | 33 +++++++++++++++++--
 .../src/components/Input/Input.tsx            | 22 +++----------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/eds-core-react/src/components/Input/Input.stories.tsx b/packages/eds-core-react/src/components/Input/Input.stories.tsx
index 2ff72f279f..9504bcf265 100644
--- a/packages/eds-core-react/src/components/Input/Input.stories.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.stories.tsx
@@ -210,12 +210,29 @@ const SmallButton = styled(Button)`
 export const WithAdornments: Story<InputProps> = () => {
   return (
     <EdsProvider>
-      <Label htmlFor="adornments-error" label="Default" />
+      <Label htmlFor="adornments-default" label="Default" />
+      <Input
+        type="text"
+        id="adornments-default"
+        placeholder="Placeholder text Placeholder text"
+        leftAdornmentsWidth={40}
+        leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornmentsWidth={52}
+        rightAdornments={
+          <>
+            unit
+            <Icon data={anchor} size={18}></Icon>
+          </>
+        }
+      />
+      <Label htmlFor="adornments-error" label="Error" />
       <Input
         type="text"
         id="adornments-error"
         variant="error"
+        leftAdornmentsWidth={40}
         leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornmentsWidth={52}
         rightAdornments={
           <>
             unit
@@ -223,12 +240,14 @@ export const WithAdornments: Story<InputProps> = () => {
           </>
         }
       />
-      <Label htmlFor="adornments-warning" label="Default" />
+      <Label htmlFor="adornments-warning" label="Warning" />
       <Input
         type="text"
         id="adornments-warning"
         variant="warning"
+        leftAdornmentsWidth={40}
         leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornmentsWidth={52}
         rightAdornments={
           <>
             unit
@@ -236,12 +255,14 @@ export const WithAdornments: Story<InputProps> = () => {
           </>
         }
       />
-      <Label htmlFor="adornments-success" label="Default" />
+      <Label htmlFor="adornments-success" label="Success" />
       <Input
         type="text"
         id="adornments-success"
         variant="success"
+        leftAdornmentsWidth={40}
         leftAdornments={<SmallButton variant="ghost_icon">IT</SmallButton>}
+        rightAdornmentsWidth={52}
         rightAdornments={
           <>
             unit
@@ -254,6 +275,9 @@ export const WithAdornments: Story<InputProps> = () => {
         type="text"
         id="adornments-disabled"
         disabled
+        placeholder="Placeholder text Placeholder text"
+        value="Some text Some textSome textSome text"
+        leftAdornmentsWidth={40}
         leftAdornments={
           <>
             <SmallButton disabled variant="ghost_icon">
@@ -261,6 +285,7 @@ export const WithAdornments: Story<InputProps> = () => {
             </SmallButton>
           </>
         }
+        rightAdornmentsWidth={52}
         rightAdornments={
           <>
             unit
@@ -273,11 +298,13 @@ export const WithAdornments: Story<InputProps> = () => {
         type="text"
         id="adornments-readonly"
         readOnly
+        leftAdornmentsWidth={40}
         leftAdornments={
           <>
             <SmallButton variant="ghost_icon">IT</SmallButton>
           </>
         }
+        rightAdornmentsWidth={52}
         rightAdornments={
           <>
             unit
diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 1599fefdce..9582721715 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -17,7 +17,9 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
 
   return css`
     --eds-input-adornment-color: ${entities.adornment.typography.color};
+    --eds-input-color: ${token.typography.color};
 
+    position: relative;
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -27,8 +29,6 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
     box-shadow: ${token.boxShadow};
     background: ${token.background};
     ${outlineTemplate(token.outline)}
-    ${typographyTemplate(token.typography)}
-
 
     &:focus-within {
       --eds-input-adornment-color: ${entities.adornment?.states.focus?.outline
@@ -41,13 +41,9 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
     ${disabled &&
     css`
       --eds-input-adornment-color: ${states.disabled.typography.color};
-      color: ${states.disabled.typography.color};
+      --eds-input-color: ${states.disabled.typography.color};
       cursor: not-allowed;
       box-shadow: none;
-      outline: none;
-      &:focus-within {
-        outline: none;
-      }
     `}
     ${readOnly &&
     css({
@@ -58,10 +54,6 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
 })
 
 const StyledInput = styled.input(({ token }: StyledProps) => {
-  const {
-    states: { disabled },
-  } = token
-
   return css`
     width: 100%;
     border: none;
@@ -75,7 +67,7 @@ const StyledInput = styled.input(({ token }: StyledProps) => {
     }
 
     &:disabled {
-      color: ${disabled.typography.color};
+      color: var(--eds-input-color);
       cursor: not-allowed;
     }
   `
@@ -83,15 +75,13 @@ const StyledInput = styled.input(({ token }: StyledProps) => {
 
 type AdornmentProps = {
   token: InputToken
-  width: number
 }
 
-const Adornments = styled.div<AdornmentProps>(({ token, width }) => {
+const Adornments = styled.div<AdornmentProps>(({ token }) => {
   return css`
     position: absolute;
     top: 0;
     bottom: 0;
-    width: ${width};
     display: flex;
     align-items: center;
     ${typographyTemplate(token.entities.adornment.typography)}
@@ -197,11 +187,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 
   const leftAdornmentProps = {
     token: updatedToken,
-    width: leftAdornmentsWidth,
   }
   const rightAdornmentProps = {
     token: updatedToken,
-    width: rightAdornmentsWidth,
   }
 
   return (

From 88216e376352e20687b4f12aa693d813eac89c67 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Tue, 2 Aug 2022 15:51:21 +0200
Subject: [PATCH 17/20] =?UTF-8?q?=F0=9F=93=B8=20=E2=9C=85=20Updated=20test?=
 =?UTF-8?q?=20&=20snapshots?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Input/Input.test.tsx       | 51 ++++++++-----------
 .../Input/__snapshots__/Input.test.tsx.snap   | 26 +++-------
 .../Search/__snapshots__/Search.test.tsx.snap | 26 +++-------
 .../__snapshots__/SingleSelect.test.tsx.snap  | 26 +++-------
 .../components/TextField/TextField.test.tsx   |  8 +--
 5 files changed, 50 insertions(+), 87 deletions(-)

diff --git a/packages/eds-core-react/src/components/Input/Input.test.tsx b/packages/eds-core-react/src/components/Input/Input.test.tsx
index fdb986e2e6..e2690e96fe 100644
--- a/packages/eds-core-react/src/components/Input/Input.test.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.test.tsx
@@ -8,18 +8,6 @@ import { Input } from './Input'
 import * as tokens from './Input.tokens'
 import { trimSpaces } from '@equinor/eds-utils'
 
-const {
-  error: {
-    states: { active: activeError },
-  },
-  success: {
-    states: { active: activeSuccess },
-  },
-  warning: {
-    states: { active: activeWarning },
-  },
-} = tokens
-
 afterEach(cleanup)
 
 describe('Input', () => {
@@ -57,12 +45,13 @@ describe('Input', () => {
         <Input id="test-success" variant="success" />
       </label>,
     )
-    const inputNode = screen.getByLabelText(label)
+    // eslint-disable-next-line testing-library/no-node-access
+    const inputWrapper = screen.getByLabelText(label).parentElement
 
-    expect(inputNode).toHaveStyleRule(
+    expect(inputWrapper).toHaveStyleRule(
       'outline',
-      `${activeSuccess.outline.width} solid ${trimSpaces(
-        activeSuccess.outline.color,
+      `${tokens.input.outline.width} solid ${trimSpaces(
+        tokens.success.outline.color,
       )}`,
     )
   })
@@ -75,12 +64,13 @@ describe('Input', () => {
         <Input id="test-warning" variant="warning" />
       </label>,
     )
-    const inputNode = screen.getByLabelText(label)
+    // eslint-disable-next-line testing-library/no-node-access
+    const inputWrapper = screen.getByLabelText(label).parentElement
 
-    expect(inputNode).toHaveStyleRule(
+    expect(inputWrapper).toHaveStyleRule(
       'outline',
-      `${activeWarning.outline.width} solid ${trimSpaces(
-        activeWarning.outline.color,
+      `${tokens.input.outline.width} solid ${trimSpaces(
+        tokens.warning.outline.color,
       )}`,
     )
   })
@@ -93,22 +83,23 @@ describe('Input', () => {
         <Input id="test-error" variant="error" />
       </label>,
     )
-    const inputNode = screen.getByLabelText(label)
+    // eslint-disable-next-line testing-library/no-node-access
+    const inputWrapper = screen.getByLabelText(label).parentElement
 
-    expect(inputNode).toHaveStyleRule(
+    expect(inputWrapper).toHaveStyleRule(
       'outline',
-      `${activeError.outline.width} solid ${trimSpaces(
-        activeError.outline.color,
+      `${tokens.input.outline.width} solid ${trimSpaces(
+        tokens.error.outline.color,
       )}`,
     )
   })
 
-  const StyledTextField = styled(Input)`
+  const StyledInput = styled(Input)`
     margin-top: 48px;
   `
   it('Can extend the css of the component', () => {
     render(
-      <StyledTextField
+      <StyledInput
         id="test-css-extend"
         variant="error"
         value="textfield"
@@ -116,9 +107,9 @@ describe('Input', () => {
       />,
     )
 
-    expect(screen.getByDisplayValue('textfield')).toHaveStyleRule(
-      'margin-top',
-      '48px',
-    )
+    // eslint-disable-next-line testing-library/no-node-access
+    const inputWrapper = screen.getByDisplayValue('textfield').parentElement
+
+    expect(inputWrapper).toHaveStyleRule('margin-top', '48px')
   })
 })
diff --git a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap
index e62e34f9e3..780d6214a9 100644
--- a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -4,6 +4,9 @@ exports[`Input Matches snapshot 1`] = `
 <DocumentFragment>
   .c0 {
   --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  position: relative;
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11,8 +14,6 @@ exports[`Input Matches snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-column-gap: 8px;
-  column-gap: 8px;
   border: none;
   box-sizing: border-box;
   height: 36px;
@@ -20,21 +21,6 @@ exports[`Input Matches snapshot 1`] = `
   background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
-  margin: 0;
-  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
-  font-family: Equinor;
-  font-size: 1.000rem;
-  font-weight: 400;
-  line-height: 1.500em;
-  -webkit-letter-spacing: 0.025em;
-  -moz-letter-spacing: 0.025em;
-  -ms-letter-spacing: 0.025em;
-  letter-spacing: 0.025em;
-  text-align: left;
   background: transparent;
   box-shadow: none;
 }
@@ -49,6 +35,10 @@ exports[`Input Matches snapshot 1`] = `
   width: 100%;
   border: none;
   background: transparent;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -80,7 +70,7 @@ exports[`Input Matches snapshot 1`] = `
 }
 
 .c1:disabled {
-  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  color: var(--eds-input-color);
   cursor: not-allowed;
 }
 
diff --git a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
index 5963bf8f9b..6a20622740 100644
--- a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
@@ -103,6 +103,9 @@ exports[`Search Matches snapshot 1`] = `
 
 .c1 {
   --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  position: relative;
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -110,8 +113,6 @@ exports[`Search Matches snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-column-gap: 8px;
-  column-gap: 8px;
   border: none;
   box-sizing: border-box;
   height: 36px;
@@ -119,21 +120,6 @@ exports[`Search Matches snapshot 1`] = `
   background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
-  margin: 0;
-  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
-  font-family: Equinor;
-  font-size: 1.000rem;
-  font-weight: 400;
-  line-height: 1.500em;
-  -webkit-letter-spacing: 0.025em;
-  -moz-letter-spacing: 0.025em;
-  -ms-letter-spacing: 0.025em;
-  letter-spacing: 0.025em;
-  text-align: left;
 }
 
 .c1:focus-within {
@@ -146,6 +132,10 @@ exports[`Search Matches snapshot 1`] = `
   width: 100%;
   border: none;
   background: transparent;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -177,7 +167,7 @@ exports[`Search Matches snapshot 1`] = `
 }
 
 .c3:disabled {
-  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  color: var(--eds-input-color);
   cursor: not-allowed;
 }
 
diff --git a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
index e4a16a6e44..a31d6424ae 100644
--- a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
@@ -30,6 +30,9 @@ exports[`SingleSelect Matches snapshot 1`] = `
 
 .c4 {
   --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  position: relative;
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,8 +40,6 @@ exports[`SingleSelect Matches snapshot 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-column-gap: 8px;
-  column-gap: 8px;
   border: none;
   box-sizing: border-box;
   height: 36px;
@@ -46,21 +47,6 @@ exports[`SingleSelect Matches snapshot 1`] = `
   background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
-  margin: 0;
-  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
-  font-family: Equinor;
-  font-size: 1.000rem;
-  font-weight: 400;
-  line-height: 1.500em;
-  -webkit-letter-spacing: 0.025em;
-  -moz-letter-spacing: 0.025em;
-  -ms-letter-spacing: 0.025em;
-  letter-spacing: 0.025em;
-  text-align: left;
 }
 
 .c4:focus-within {
@@ -73,6 +59,10 @@ exports[`SingleSelect Matches snapshot 1`] = `
   width: 100%;
   border: none;
   background: transparent;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -104,7 +94,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
 }
 
 .c6:disabled {
-  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  color: var(--eds-input-color);
   cursor: not-allowed;
 }
 
diff --git a/packages/eds-core-react/src/components/TextField/TextField.test.tsx b/packages/eds-core-react/src/components/TextField/TextField.test.tsx
index 4cc1563d11..f1875e0aac 100644
--- a/packages/eds-core-react/src/components/TextField/TextField.test.tsx
+++ b/packages/eds-core-react/src/components/TextField/TextField.test.tsx
@@ -98,10 +98,12 @@ describe('TextField', () => {
         inputIcon={<Icon data={save} />}
       />,
     )
+    const textFieldContainer =
+      // eslint-disable-next-line testing-library/no-node-access
+      screen.getByLabelText(labelText).parentElement.parentElement
+
     // eslint-disable-next-line testing-library/no-node-access
-    const inputNode = screen.getByLabelText(labelText).parentElement
-    // eslint-disable-next-line testing-library/no-node-access
-    expect(inputNode.querySelectorAll('svg')).toHaveLength(1)
+    expect(textFieldContainer.querySelectorAll('svg')).toHaveLength(1)
   })
   it('Can have an icon by the helper text', () => {
     const helperText = 'Help me'

From a11fe4f612d1ed5835cc112e2b2174ad684878f8 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 3 Aug 2022 13:39:45 +0200
Subject: [PATCH 18/20] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20working=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Input/Input.tokens.ts      |  1 +
 .../src/components/Input/Input.tsx            | 29 ++++++++++-------
 .../components/InputWrapper/InputWrapper.tsx  | 31 ++-----------------
 3 files changed, 20 insertions(+), 41 deletions(-)

diff --git a/packages/eds-core-react/src/components/Input/Input.tokens.ts b/packages/eds-core-react/src/components/Input/Input.tokens.ts
index 26b85d45db..859316bf05 100644
--- a/packages/eds-core-react/src/components/Input/Input.tokens.ts
+++ b/packages/eds-core-react/src/components/Input/Input.tokens.ts
@@ -30,6 +30,7 @@ export type InputToken = ComponentToken
 
 export const input: InputToken = {
   height: shape.straight.minHeight,
+  width: '100%',
   background,
   spacings: {
     left: small,
diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 9582721715..50e7b9c647 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -2,15 +2,22 @@ import { InputHTMLAttributes, forwardRef, ReactNode, useMemo } from 'react'
 import styled, { css } from 'styled-components'
 import { inputToken as tokens } from './Input.tokens'
 import type { InputToken } from './Input.tokens'
-import {
-  typographyTemplate,
-  spacingsTemplate,
-  outlineTemplate,
-  useToken,
-} from '@equinor/eds-utils'
+import { spacingsTemplate, outlineTemplate, useToken } from '@equinor/eds-utils'
 import type { Variants } from '../TextField/types'
 import { useEds } from '../EdsProvider'
-import { ComponentToken } from '@equinor/eds-tokens'
+import { ComponentToken, Typography } from '@equinor/eds-tokens'
+
+const typographyMixin = (typography: Partial<Typography>) => {
+  const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } =
+    typography
+  return css({
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+  })
+}
 
 const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
   const { states, entities } = token
@@ -20,7 +27,7 @@ const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
     --eds-input-color: ${token.typography.color};
 
     position: relative;
-    width: 100%;
+    width: ${token.width};
     display: flex;
     flex-direction: row;
     border: none;
@@ -59,7 +66,7 @@ const StyledInput = styled.input(({ token }: StyledProps) => {
     border: none;
     background: transparent;
     ${spacingsTemplate(token.spacings)}
-    ${typographyTemplate(token.typography)}
+    ${typographyMixin(token.typography)}
     outline: none;
 
     &::placeholder {
@@ -84,7 +91,7 @@ const Adornments = styled.div<AdornmentProps>(({ token }) => {
     bottom: 0;
     display: flex;
     align-items: center;
-    ${typographyTemplate(token.entities.adornment.typography)}
+    ${typographyMixin(token.entities.adornment.typography)}
     color: var(--eds-input-adornment-color);
   `
 })
@@ -172,8 +179,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     disabled,
     readOnly,
     token: updatedToken,
-    leftAdornmentsWidth,
-    rightAdornmentsWidth,
     ...other,
   }
 
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
index 93eab1d531..f43aed5952 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
@@ -4,12 +4,7 @@ import { Label } from '../Label'
 import { HelperText } from './HelperText'
 import { useEds } from './../EdsProvider'
 import { inputToken } from './InputWrapper.tokens'
-import {
-  outlineTemplate,
-  useToken,
-  spacingsTemplate,
-  typographyTemplate,
-} from '@equinor/eds-utils'
+import { outlineTemplate, useToken } from '@equinor/eds-utils'
 
 const Container = styled.div`
   display: grid;
@@ -39,19 +34,6 @@ const Field = styled.div(({ theme }) => {
   `
 })
 
-export const Adornments = styled.div(({ theme }) => {
-  return css`
-    display: flex;
-    column-gap: 8px;
-    justify-content: center;
-    align-items: center;
-    width: fit-content;
-
-    ${spacingsTemplate(theme.spacings)}
-    ${typographyTemplate(theme.entities.adornment.typography)}
-  `
-})
-
 export type InputWrapperProps = {
   /** Label */
   label?: string
@@ -69,16 +51,7 @@ export type InputWrapperProps = {
 
 export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(
   function InputWrapper(
-    {
-      disabled,
-      readOnly,
-      label,
-      meta,
-      children,
-      helperIcon,
-      helperText,
-      ...other
-    },
+    { label, meta, children, helperIcon, helperText, ...other },
     ref,
   ) {
     const { density } = useEds()

From c8cbf3a10064b96c0c6687ce6842c8c93a6b4336 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 4 Aug 2022 09:49:57 +0200
Subject: [PATCH 19/20] =?UTF-8?q?=F0=9F=9A=9A=20Moved=20typographymixin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Input/Input.tsx            | 21 +++++---------
 packages/eds-utils/src/index.ts               |  1 +
 packages/eds-utils/src/mixins/index.ts        |  1 +
 packages/eds-utils/src/mixins/typography.ts   | 28 +++++++++++++++++++
 4 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 packages/eds-utils/src/mixins/index.ts
 create mode 100644 packages/eds-utils/src/mixins/typography.ts

diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 50e7b9c647..9eb15c8b45 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -1,23 +1,16 @@
 import { InputHTMLAttributes, forwardRef, ReactNode, useMemo } from 'react'
 import styled, { css } from 'styled-components'
+import { ComponentToken } from '@equinor/eds-tokens'
+import {
+  typographyMixin,
+  spacingsTemplate,
+  outlineTemplate,
+  useToken,
+} from '@equinor/eds-utils'
 import { inputToken as tokens } from './Input.tokens'
 import type { InputToken } from './Input.tokens'
-import { spacingsTemplate, outlineTemplate, useToken } from '@equinor/eds-utils'
 import type { Variants } from '../TextField/types'
 import { useEds } from '../EdsProvider'
-import { ComponentToken, Typography } from '@equinor/eds-tokens'
-
-const typographyMixin = (typography: Partial<Typography>) => {
-  const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } =
-    typography
-  return css({
-    fontFamily,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    letterSpacing,
-  })
-}
 
 const Container = styled.div(({ token, disabled, readOnly }: StyledProps) => {
   const { states, entities } = token
diff --git a/packages/eds-utils/src/index.ts b/packages/eds-utils/src/index.ts
index 3ab6ab31a7..20c01718e7 100644
--- a/packages/eds-utils/src/index.ts
+++ b/packages/eds-utils/src/index.ts
@@ -1,4 +1,5 @@
 /* eslint-disable import/prefer-default-export */
 export * from './hooks'
 export * from './utils'
+export * from './mixins'
 /* eslint-enable */
diff --git a/packages/eds-utils/src/mixins/index.ts b/packages/eds-utils/src/mixins/index.ts
new file mode 100644
index 0000000000..324025ef71
--- /dev/null
+++ b/packages/eds-utils/src/mixins/index.ts
@@ -0,0 +1 @@
+export * from './typography'
diff --git a/packages/eds-utils/src/mixins/typography.ts b/packages/eds-utils/src/mixins/typography.ts
new file mode 100644
index 0000000000..243cd37b49
--- /dev/null
+++ b/packages/eds-utils/src/mixins/typography.ts
@@ -0,0 +1,28 @@
+import { CSSObject } from 'styled-components'
+import type { Typography } from '@equinor/eds-tokens'
+
+/** Simpler version `typographyTemplate` that does not set `color` and `margin` */
+export const typographyMixin = (typography: Partial<Typography>): CSSObject => {
+  const {
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+    fontFeature,
+    textDecoration,
+    textTransform,
+    fontStyle,
+  } = typography
+  return {
+    fontFeatureSettings: fontFeature,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    lineHeight,
+    textDecoration,
+    textTransform: textTransform as CSSObject['textTransform'],
+    fontStyle,
+  }
+}

From 2e9d5e1450a29ed6bd6a38f803aa8e938b1ac7ed Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 4 Aug 2022 09:50:23 +0200
Subject: [PATCH 20/20] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Started=20cleaning?=
 =?UTF-8?q?=20up=20helpertext?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputWrapper/HelperText/HelperText.tsx    | 53 +++++++++----------
 .../InputWrapper/InputWrapper.stories.tsx     | 20 -------
 .../components/InputWrapper/InputWrapper.tsx  | 40 ++++----------
 .../src/components/InputWrapper/index.tsx     | 20 +------
 4 files changed, 39 insertions(+), 94 deletions(-)

diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
index 77513062ac..6825f626d9 100644
--- a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.tsx
@@ -1,29 +1,25 @@
-import {
-  forwardRef,
-  ReactNode,
-  useMemo,
-  cloneElement,
-  ReactElement,
-} from 'react'
-import styled from 'styled-components'
-import { typographyTemplate } from '@equinor/eds-utils'
+import { forwardRef, ReactNode, HTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
+import { typographyMixin } from '@equinor/eds-utils'
 import { helperText as tokens } from './HelperText.token'
 
-type VariationProps = {
-  isFocused?: boolean
-  isDisabled?: boolean
+type ContainerProps = {
+  color?: string
 }
 
-const Container = styled.div`
-  display: grid;
-  gap: 8px;
-  grid-auto-flow: column;
-  align-items: start;
-  justify-content: start;
-  color: ${tokens.typography.color};
-`
-const Text = styled.p<VariationProps>`
-  ${typographyTemplate(tokens.typography)}
+const Container = styled.div<ContainerProps>(({ color }) =>
+  css({
+    display: 'grid',
+    gap: '8px',
+    gridAutoFlow: 'column',
+    alignItems: 'start',
+    justifyContent: 'start',
+    color,
+  }),
+)
+const Text = styled.p`
+  margin: 0;
+  ${typographyMixin(tokens.typography)};
 `
 
 type HelperTextProps = {
@@ -31,18 +27,21 @@ type HelperTextProps = {
   text?: string
   /** Icon */
   icon?: ReactNode
-  /** Disabled */
-  disabled?: boolean
-}
+  /** Color */
+  color?: string
+} & HTMLAttributes<HTMLDivElement>
 
 const TextfieldHelperText = forwardRef<HTMLDivElement, HelperTextProps>(
-  function TextfieldHelperText({ text, icon, ...rest }, ref) {
+  function TextfieldHelperText(
+    { text, icon, color = tokens.typography.color, ...rest },
+    ref,
+  ) {
     if (!text) {
       return null
     }
 
     return (
-      <Container ref={ref} {...rest}>
+      <Container {...{ ...rest, color, ref }}>
         {icon}
         <Text>{text}</Text>
       </Container>
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
index 3b13ee3722..7e6230b285 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.stories.tsx
@@ -8,16 +8,6 @@ export default {
   component: InputWrapper,
 } as ComponentMeta<typeof InputWrapper>
 
-const StrippedInput = styled(Input)`
-  box-shadow: none;
-  background: none;
-  padding: 0;
-  &:active,
-  &:focus {
-    outline: none;
-  }
-`
-
 const SmallButton = styled(Button)`
   height: 24px;
   width: 24px;
@@ -30,17 +20,7 @@ export const Introduction: Story<InputWrapperProps> = (args) => (
     helperIcon={<Icon data={accessible} size={16} />}
     {...args}
   >
-    <InputWrapper.Adornments>
-      <Icon data={search} size={16} />
-    </InputWrapper.Adornments>
     <Input />
-    <InputWrapper.Adornments>
-      right
-      <Icon data={dropper} size={16} />
-      <SmallButton variant="ghost_icon">
-        <Icon data={clear} size={16} />
-      </SmallButton>
-    </InputWrapper.Adornments>
   </InputWrapper>
 )
 
diff --git a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
index f43aed5952..cab39c3c2e 100644
--- a/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/InputWrapper.tsx
@@ -4,35 +4,14 @@ import { Label } from '../Label'
 import { HelperText } from './HelperText'
 import { useEds } from './../EdsProvider'
 import { inputToken } from './InputWrapper.tokens'
-import { outlineTemplate, useToken } from '@equinor/eds-utils'
+import { useToken } from '@equinor/eds-utils'
 
-const Container = styled.div`
-  display: grid;
-  gap: 8px;
-`
-
-const Field = styled.div(({ theme }) => {
-  const {
-    states: {
-      focus: { outline: focusOutline },
-    },
-    boxShadow,
-  } = theme
+const Container = styled.div``
 
-  return css`
-    display: flex;
-    flex-direction: row;
-    column-gap: 8px;
-    background: ${theme.background};
-    height: ${theme.minHeight};
-    box-shadow: ${boxShadow};
-
-    &:focus-within {
-      ${outlineTemplate(focusOutline)}
-      box-shadow: none;
-    }
-  `
-})
+const WrapperHelperText = styled(HelperText)`
+  margin-top: 8px;
+  margin-left: 8px;
+`
 
 export type InputWrapperProps = {
   /** Label */
@@ -61,8 +40,11 @@ export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(
       <ThemeProvider theme={token}>
         <Container {...other} ref={ref}>
           <Label label={label} meta={meta} />
-          <Field tabIndex={0}>{children}</Field>
-          <HelperText icon={helperIcon} text={helperText}></HelperText>
+          {children}
+          <WrapperHelperText
+            icon={helperIcon}
+            text={helperText}
+          ></WrapperHelperText>
         </Container>
       </ThemeProvider>
     )
diff --git a/packages/eds-core-react/src/components/InputWrapper/index.tsx b/packages/eds-core-react/src/components/InputWrapper/index.tsx
index cb1329bedb..5da7d3d650 100644
--- a/packages/eds-core-react/src/components/InputWrapper/index.tsx
+++ b/packages/eds-core-react/src/components/InputWrapper/index.tsx
@@ -1,18 +1,2 @@
-import {
-  InputWrapper as BaseComponent,
-  Adornments,
-  InputWrapperProps,
-} from './InputWrapper'
-
-type InputWrapperCompoundProps = typeof BaseComponent & {
-  Adornments: typeof Adornments
-}
-
-const InputWrapper = BaseComponent as InputWrapperCompoundProps
-
-InputWrapper.Adornments = Adornments
-
-InputWrapper.Adornments.displayName = 'InputWrapper.Adornments'
-
-export { InputWrapper }
-export type { InputWrapperProps }
+export { InputWrapper } from './InputWrapper'
+export type { InputWrapperProps } from './InputWrapper'