From 1c5c91709480c1df1915eac78d9a0a19b8fc5d0d Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 23 Oct 2024 12:58:38 +0200
Subject: [PATCH] Use new Button features for SearchField

---
 .../components/search-field/search-field.scss | 26 ------------------
 .../src/SearchField/SearchFieldButton.tsx     | 27 ++++++++++---------
 .../components/ams/search-field.tokens.json   | 10 -------
 3 files changed, 14 insertions(+), 49 deletions(-)

diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index d914fb2ee1..76ac9a79b1 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -68,29 +68,3 @@
   inline-size: var(--ams-search-field-input-cancel-button-inline-size);
   margin-inline-start: 0.5rem;
 }
-
-@mixin reset-button {
-  border: 0;
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-
-  // [1] Remove the margin in older Safari.
-}
-
-.ams-search-field__button {
-  background-color: var(--ams-search-field-button-background-color);
-  color: var(--ams-search-field-button-color);
-  cursor: pointer;
-  outline-offset: var(--ams-search-field-button-outline-offset);
-
-  // TODO Check if these paddings are necessary
-  padding-block: var(--ams-search-field-button-padding-block);
-  padding-inline: var(--ams-search-field-button-padding-inline);
-  touch-action: manipulation;
-
-  @include reset-button;
-
-  &:hover {
-    background-color: var(--ams-search-field-button-hover-background-color);
-  }
-}
diff --git a/packages/react/src/SearchField/SearchFieldButton.tsx b/packages/react/src/SearchField/SearchFieldButton.tsx
index e91ee9918a..898e68924e 100644
--- a/packages/react/src/SearchField/SearchFieldButton.tsx
+++ b/packages/react/src/SearchField/SearchFieldButton.tsx
@@ -6,22 +6,23 @@
 import { SearchIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type { ForwardedRef, HTMLAttributes } from 'react'
-import { Icon } from '../Icon'
+import type { ForwardedRef } from 'react'
+import { Button } from '../Button'
+import type { ButtonProps } from '../Button'
 
-type SearchFieldButtonProps = {
-  /** Describes the field for screen readers. */
-  label?: string
-} & HTMLAttributes<HTMLButtonElement>
+type SearchFieldButtonProps = Omit<ButtonProps, 'icon' | 'iconPosition' | 'variant'>
 
-// TODO: replace this with IconButton when that's done
-// TODO: discuss if IconButton is the right component to replace this
 export const SearchFieldButton = forwardRef(
-  ({ label = 'Zoeken', className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
-    <button {...restProps} ref={ref} className={clsx('ams-search-field__button', className)}>
-      <span className="ams-visually-hidden">{label}</span>
-      <Icon svg={SearchIcon} size="level-5" square />
-    </button>
+  ({ className, children = 'Zoeken', ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
+    <Button
+      {...restProps}
+      className={clsx('ams-search-field__button', className)}
+      icon={SearchIcon}
+      iconPosition="only"
+      ref={ref}
+    >
+      {children}
+    </Button>
   ),
 )
 
diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
index 52ec22ad3d..e5f24de100 100644
--- a/proprietary/tokens/src/components/ams/search-field.tokens.json
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -1,16 +1,6 @@
 {
   "ams": {
     "search-field": {
-      "button": {
-        "background-color": { "value": "{ams.color.primary-blue}" },
-        "color": { "value": "{ams.color.primary-white}" },
-        "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "padding-block": { "value": "{ams.space.sm}" },
-        "padding-inline": { "value": "{ams.space.sm}" },
-        "hover": {
-          "background-color": { "value": "{ams.color.dark-blue}" }
-        }
-      },
       "input": {
         "background-color": { "value": "{ams.color.primary-white}" },
         "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },