Merged in feat/new-passwordinput-component (pull request #3376)

feat(SW-3672): Update PasswordInput component

* Update PasswordInput component

* Removed some tests not working as expected

* Remove IconButton from PasswordInput

* Remove IconButton from Input

* Merge branch 'master' into feat/new-passwordinput-component


Approved-by: Linus Flood

packages/design-system/lib/components/Input/Input.tsx

@@ -12,7 +12,7 @@ import { InputLabel } from '../InputLabel'
 
 import styles from './input.module.css'
 
-import { IconButton } from '../IconButton'
+import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'
 import type { InputProps } from './types'
 import { clearInput, useInputHasValue } from './utils'
@@ -105,15 +105,15 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
           </label>
           {showClearContentIcon && hasValue && (
             <div className={styles.rightIconContainer}>
-              <IconButton
+              <button
+                type="button"
                 className={styles.rightIconButton}
-                variant="Muted"
-                emphasis
-                onPress={onClearContent}
+                onClick={onClearContent}
                 // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                 aria-label="Clear content"
-                iconName="cancel"
-              />
+              >
+                <MaterialIcon icon="cancel" />
+              </button>
             </div>
           )}
           {rightIcon && !(showClearContentIcon && hasValue) && (
@@ -153,15 +153,15 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
       </AriaLabel>
       {showClearContentIcon && hasValue && (
         <div className={styles.rightIconContainer}>
-          <IconButton
+          <button
+            type="button"
             className={styles.rightIconButton}
-            variant="Muted"
-            emphasis
-            onPress={onClearContent}
+            onClick={onClearContent}
             // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             aria-label="Clear content"
-            iconName="cancel"
-          />
+          >
+            <MaterialIcon icon="cancel" />
+          </button>
         </div>
       )}
       {rightIcon && !(showClearContentIcon && hasValue) && (

packages/design-system/lib/components/Input/input.module.css

@@ -131,6 +131,18 @@
 .rightIconButton {
   width: 24px;
   height: 24px;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rightIconButton:focus-visible {
+  outline: 2px solid var(--Focus-ring-color, currentColor);
+  border-radius: 100%;
 }
 
 @media (hover: hover) {