Use new Button features for SearchField

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);
-  }
-}

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>
   ),
 )
 

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}" },