From 7978a2b2c3c26abcacca85b0f3c93dee7a99709e Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Wed, 30 Oct 2024 13:54:24 +0100
Subject: [PATCH 01/32] feat(Search): api changes

---
 .../src/components/form/Search/Search.tsx     | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index c1dd736ec4..9e5fe16c64 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -9,17 +9,12 @@ import { omit } from '../../../utilities';
 import { Button } from '../../Button/Button';
 import { Label } from '../../Label';
 import { Paragraph } from '../../Paragraph';
+import { Input } from '../Input/Input';
 import type { FormFieldProps } from '../useFormField';
 
 import { useSearch } from './useSearch';
 
 export type SearchProps = {
-  /** Label */
-  label?: ReactNode;
-  /** Visually hides `label` and `description` (still available for screen readers)
-   * @default true
-   */
-  hideLabel?: boolean;
   /** Variant
    * @default 'simple'
    */
@@ -45,7 +40,12 @@ export type SearchProps = {
   'size' | 'description' | 'readOnly' | 'error' | 'errorId'
 > &
   Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'readOnly'> &
-  DefaultProps;
+  DefaultProps &
+  (
+    | { 'aria-label': string; 'aria-labelledby'?: never; label?: never }
+    | { 'aria-label'?: never; 'aria-labelledby'?: never; label: ReactNode }
+    | { 'aria-label'?: never; 'aria-labelledby': string; label?: never }
+  );
 
 /** Search field
  *
@@ -59,7 +59,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     const {
       label,
       style,
-      hideLabel = true,
       variant = 'simple',
       searchButtonLabel = 'Søk',
       clearButtonLabel = 'Tøm',
@@ -115,13 +114,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           )}
         >
           {label && (
-            <Label
-              data-size={size}
-              weight='medium'
-              htmlFor={inputProps.id}
-              className={cl('ds-search__label', hideLabel && 'ds-sr-only')}
-            >
-              <span>{label}</span>
+            <Label weight='medium' htmlFor={inputProps.id}>
+              {label}
             </Label>
           )}
 
@@ -133,7 +127,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                   aria-hidden
                 ></MagnifyingGlassIcon>
               )}
-              <input
+              <Input
                 ref={mergedRef}
                 size={htmlSize}
                 value={value ?? internalValue}
@@ -155,8 +149,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                   type='button'
                   onClick={handleClear}
                   disabled={disabled}
+                  aria-label={clearButtonLabel}
                 >
-                  <span className={`ds-sr-only`}>{clearButtonLabel}</span>
                   <XMarkIcon aria-hidden />
                 </button>
               )}

From 735100bd3543116a1e158ecd4db78060aefdf229 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Wed, 30 Oct 2024 14:43:14 +0100
Subject: [PATCH 02/32] more work, start new API

---
 packages/css/search.css                       | 129 ++++++------------
 .../src/components/form/Search/Search.tsx     | 116 ++++++----------
 .../src/components/form/Search/useSearch.ts   |   2 +-
 3 files changed, 84 insertions(+), 163 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 132a0c758f..816fa487f8 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -5,37 +5,49 @@
   --dsc-search-input-border: 1px solid var(--dsc-search-input-border-color);
   --dsc-search-input-color: var(--ds-color-neutral-text-default);
 
-  display: inline-grid;
-  width: 100%;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-search--sm {
-  --dsc-search-clear-button-size: var(--ds-sizing-5);
-}
-
-.ds-search--md {
-  --dsc-search-clear-button-size: var(--ds-sizing-6);
-}
-
-.ds-search--lg {
-  --dsc-search-clear-button-size: var(--ds-sizing-8);
-}
-
-.ds-search__label {
-  min-width: min-content;
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--ds-spacing-1);
-  align-items: center;
-}
-
-.ds-search__field {
   display: flex;
   width: 100%;
   align-items: stretch;
   border-radius: var(--ds-border-radius-default);
   position: relative;
+
+  & label {
+    min-width: min-content;
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--ds-spacing-1);
+    align-items: center;
+  }
+
+  & [type='search'] {
+    &:focus-visible {
+      z-index: 1;
+    }
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+  }
+
+  & .ds-search__clear-button {
+    color: var(--ds-color-neutral-text-default);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    background: none;
+    border: none;
+    right: 0.6em;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    height: var(--dsc-search-clear-button-size);
+    width: var(--dsc-search-clear-button-size);
+    border-radius: var(--ds-border-radius-default);
+    font-size: 1.25rem;
+    padding: 0;
+    z-index: 2;
+  }
 }
 
 .ds-search__icon {
@@ -47,11 +59,6 @@
   pointer-events: none;
 }
 
-[type='search']::-webkit-search-decoration,
-[type='search']::-webkit-search-cancel-button {
-  appearance: none;
-}
-
 .ds-search__input {
   background: var(--dsc-search-input-background);
   color: var(--dsc-search-input-color);
@@ -76,10 +83,6 @@
   cursor: not-allowed;
 }
 
-.ds-search__input[type='search']:focus-visible {
-  z-index: 1;
-}
-
 .ds-search:has(.ds-search__input:disabled) {
   opacity: var(--ds-disabled-opacity);
 }
@@ -97,62 +100,6 @@
   z-index: 1;
 }
 
-.ds-search__clear-button {
-  color: var(--ds-color-neutral-text-default);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  background: none;
-  border: none;
-  right: 0.6em;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  height: var(--dsc-search-clear-button-size);
-  width: var(--dsc-search-clear-button-size);
-  border-radius: var(--ds-border-radius-default);
-  font-size: 1.25rem;
-  padding: 0;
-  z-index: 2;
-}
-
-.ds-search--sm .ds-search__input {
-  --dsc-search-clear-button-size: var(--ds-sizing-4);
-
-  height: var(--ds-sizing-10);
-  padding: 0 var(--ds-spacing-3);
-  padding-right: 2.5em;
-}
-
-.ds-search--sm .ds-search__icon {
-  left: var(--ds-spacing-3);
-}
-
-.ds-search--md .ds-search__input {
-  --dsc-search-clear-button-size: var(--ds-sizing-6);
-
-  height: var(--ds-sizing-12);
-  padding: 0 var(--ds-spacing-4);
-  padding-right: 2.2em;
-}
-
-.ds-search--md .ds-search__icon {
-  left: var(--ds-spacing-4);
-}
-
-.ds-search--lg .ds-search__input {
-  --dsc-search-clear-button-size: var(--ds-sizing-12);
-
-  height: var(--ds-sizing-14);
-  padding: 0 var(--ds-spacing-5);
-  padding-right: 2em;
-}
-
-.ds-search--lg .ds-search__icon {
-  left: var(--ds-spacing-5);
-}
-
 .ds-search__input.ds-search__input--simple {
   padding-left: 2.4em;
 }
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 9e5fe16c64..d5d84a320a 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -7,13 +7,9 @@ import { forwardRef, useCallback, useRef, useState } from 'react';
 import type { DefaultProps } from '../../../types';
 import { omit } from '../../../utilities';
 import { Button } from '../../Button/Button';
-import { Label } from '../../Label';
-import { Paragraph } from '../../Paragraph';
 import { Input } from '../Input/Input';
 import type { FormFieldProps } from '../useFormField';
 
-import { useSearch } from './useSearch';
-
 export type SearchProps = {
   /** Variant
    * @default 'simple'
@@ -70,11 +66,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onSearchClick,
       htmlSize = 27,
       className,
+      'data-size': size,
       ...rest
     } = props;
 
-    const { inputProps, size = 'md' } = useSearch(props);
-
     const inputRef = useRef<HTMLInputElement>();
     const mergedRef = useMergeRefs([ref, inputRef]);
 
@@ -103,73 +98,52 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     const showClearButton = Boolean(value ?? internalValue) && !disabled;
 
     return (
-      <Paragraph asChild data-size={size}>
-        <div
-          style={style}
+      <div
+        style={style}
+        className={cl('ds-search', className)}
+        data-size={size}
+        data-variant={variant}
+      >
+        {isSimple && (
+          <MagnifyingGlassIcon className={'ds-search__icon'} aria-hidden />
+        )}
+        <Input
+          ref={mergedRef}
+          size={htmlSize}
+          value={value ?? internalValue}
+          disabled={disabled}
           className={cl(
-            'ds-search',
-            inputProps.disabled && 'ds-search--disabled',
-            `ds-search--${size}`,
-            className,
+            `ds-focus`,
+            isSimple
+              ? 'ds-search__input--simple'
+              : 'ds-search__input--with-search-button',
           )}
-        >
-          {label && (
-            <Label weight='medium' htmlFor={inputProps.id}>
-              {label}
-            </Label>
-          )}
-
-          <div className={'ds-search__field'}>
-            <div className={cl('ds-search__field', `ds-search--${size}`)}>
-              {isSimple && (
-                <MagnifyingGlassIcon
-                  className={'ds-search__icon'}
-                  aria-hidden
-                ></MagnifyingGlassIcon>
-              )}
-              <Input
-                ref={mergedRef}
-                size={htmlSize}
-                value={value ?? internalValue}
-                disabled={disabled}
-                className={cl(
-                  'ds-search__input',
-                  `ds-focus`,
-                  isSimple
-                    ? 'ds-search__input--simple'
-                    : 'ds-search__input--with-search-button',
-                )}
-                {...omit(['size', 'error', 'errorId', 'readOnly'], rest)}
-                {...inputProps}
-                onChange={handleChange}
-              />
-              {showClearButton && (
-                <button
-                  className={cl('ds-search__clear-button', `ds-focus`)}
-                  type='button'
-                  onClick={handleClear}
-                  disabled={disabled}
-                  aria-label={clearButtonLabel}
-                >
-                  <XMarkIcon aria-hidden />
-                </button>
-              )}
-            </div>
-            {!isSimple && (
-              <Button
-                className={'ds-search__search-button'}
-                data-size={size}
-                variant={variant}
-                type='submit'
-                onClick={handleSearchClick}
-                disabled={disabled}
-              >
-                {searchButtonLabel}
-              </Button>
-            )}
-          </div>
-        </div>
-      </Paragraph>
+          {...omit(['size', 'error', 'errorId', 'readOnly'], rest)}
+          onChange={handleChange}
+        />
+        {showClearButton && (
+          <button
+            className={cl('ds-search__clear-button', `ds-focus`)}
+            type='button'
+            onClick={handleClear}
+            disabled={disabled}
+            aria-label={clearButtonLabel}
+          >
+            <XMarkIcon aria-hidden />
+          </button>
+        )}
+        {!isSimple && (
+          <Button
+            className={'ds-search__search-button'}
+            variant={variant}
+            type='submit'
+            onClick={handleSearchClick}
+            disabled={disabled}
+          >
+            {searchButtonLabel}
+          </Button>
+        )}
+      </div>
     );
   },
 );
diff --git a/packages/react/src/components/form/Search/useSearch.ts b/packages/react/src/components/form/Search/useSearch.ts
index 4427c47d21..5b5d41f26a 100644
--- a/packages/react/src/components/form/Search/useSearch.ts
+++ b/packages/react/src/components/form/Search/useSearch.ts
@@ -21,7 +21,7 @@ export const useSearch: UseSearch = (props) => {
   const {
     inputProps,
     readOnly,
-    size = fieldset?.size ?? 'md',
+    size = fieldset?.size,
     ...rest
   } = useFormField(props, 'search');
 

From 3d721a2f46ee51374540aa16ccca924423f1992b Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Wed, 30 Oct 2024 15:40:23 +0100
Subject: [PATCH 03/32] use less classnames and misc

---
 packages/css/search.css                       | 71 +++++++++++--------
 .../src/components/form/Search/Search.tsx     | 25 +++----
 2 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 816fa487f8..b3e5154899 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -4,22 +4,47 @@
   --dsc-search-input-border-color: var(--ds-color-neutral-border-default);
   --dsc-search-input-border: 1px solid var(--dsc-search-input-border-color);
   --dsc-search-input-color: var(--ds-color-neutral-text-default);
+  --dsc-search-icon-color: var(--ds-color-neutral-text-default);
+  --dsc-search-magnifying-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
+  --dsc-search-icon-size: var(--ds-sizing-7);
 
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   width: 100%;
-  align-items: stretch;
   border-radius: var(--ds-border-radius-default);
   position: relative;
 
-  & label {
-    min-width: min-content;
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--ds-spacing-1);
-    align-items: center;
+  &[data-variant='simple'] {
+    & [type='search'] {
+      padding-left: 2.4em;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: var(--ds-sizing-2);
+      top: 50%;
+      transform: translateY(-50%);
+      height: var(--dsc-search-icon-size);
+      aspect-ratio: 1 / 1;
+      mask: var(--dsc-search-magnifying-icon) center / contain no-repeat;
+      background: currentcolor;
+      z-index: 2;
+      pointer-events: none;
+    }
+  }
+
+  &:not([data-variant='simple']) {
+    & [type='search'] {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   & [type='search'] {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+
     &:focus-visible {
       z-index: 1;
     }
@@ -29,23 +54,20 @@
     }
   }
 
-  & .ds-search__clear-button {
-    color: var(--ds-color-neutral-text-default);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    background: none;
+  & [type='reset'] {
+    --dsc-button-padding: 0;
+
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    justify-self: end;
+    align-self: center;
+    margin-right: var(--ds-spacing-2);
     border: none;
-    right: 0.6em;
-    top: 50%;
-    transform: translateY(-50%);
     cursor: pointer;
     height: var(--dsc-search-clear-button-size);
     width: var(--dsc-search-clear-button-size);
     border-radius: var(--ds-border-radius-default);
-    font-size: 1.25rem;
-    padding: 0;
+    font-size: 0.6em;
     z-index: 2;
   }
 }
@@ -74,11 +96,6 @@
   padding: 0 var(--ds-spacing-3);
 }
 
-.ds-search__input.ds-search__input--with-search-button {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
 .ds-search__input:disabled {
   cursor: not-allowed;
 }
@@ -100,10 +117,6 @@
   z-index: 1;
 }
 
-.ds-search__input.ds-search__input--simple {
-  padding-left: 2.4em;
-}
-
 @media (hover: hover) and (pointer: fine) {
   .ds-search__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
     --dsc-search-input-border-color: var(--ds-color-accent-border-strong);
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index d5d84a320a..85733a2cf6 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -1,5 +1,5 @@
 import { useMergeRefs } from '@floating-ui/react';
-import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
+import { XMarkIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useCallback, useRef, useState } from 'react';
@@ -104,33 +104,28 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         data-size={size}
         data-variant={variant}
       >
-        {isSimple && (
-          <MagnifyingGlassIcon className={'ds-search__icon'} aria-hidden />
-        )}
         <Input
           ref={mergedRef}
           size={htmlSize}
           value={value ?? internalValue}
           disabled={disabled}
-          className={cl(
-            `ds-focus`,
-            isSimple
-              ? 'ds-search__input--simple'
-              : 'ds-search__input--with-search-button',
-          )}
           {...omit(['size', 'error', 'errorId', 'readOnly'], rest)}
+          type='search'
           onChange={handleChange}
         />
         {showClearButton && (
-          <button
-            className={cl('ds-search__clear-button', `ds-focus`)}
-            type='button'
-            onClick={handleClear}
+          <Button
+            variant='secondary'
+            type='reset'
+            onClick={(e) => {
+              e.preventDefault();
+              handleClear();
+            }}
             disabled={disabled}
             aria-label={clearButtonLabel}
           >
             <XMarkIcon aria-hidden />
-          </button>
+          </Button>
         )}
         {!isSimple && (
           <Button

From f17016f68a0df1e27a8d4e146ea53cb8066c1d55 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Wed, 30 Oct 2024 15:41:17 +0100
Subject: [PATCH 04/32] chnageevent

---
 packages/react/src/components/form/Search/Search.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 85733a2cf6..2c29f1ea55 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -84,7 +84,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       [onChange, value],
     );
 
-    const handleClear = () => {
+    const handleClear = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    ) => {
+      e.preventDefault();
       onClear?.(internalValue);
       setInternalValue('');
       inputRef?.current?.focus();
@@ -117,10 +120,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           <Button
             variant='secondary'
             type='reset'
-            onClick={(e) => {
-              e.preventDefault();
-              handleClear();
-            }}
+            onClick={handleClear}
             disabled={disabled}
             aria-label={clearButtonLabel}
           >

From 9509d13945384840d403a9fcec87721876a44da0 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 31 Oct 2024 09:15:12 +0100
Subject: [PATCH 05/32] only one css class

---
 packages/css/search.css                       | 68 +++++--------------
 .../src/components/form/Search/Search.tsx     |  1 -
 2 files changed, 18 insertions(+), 51 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index b3e5154899..b21cfe93b1 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -70,61 +70,29 @@
     font-size: 0.6em;
     z-index: 2;
   }
-}
-
-.ds-search__icon {
-  position: absolute;
-  height: 100%;
-  z-index: 2;
-  left: var(--ds-spacing-4);
-  transform: scale(1.5);
-  pointer-events: none;
-}
-
-.ds-search__input {
-  background: var(--dsc-search-input-background);
-  color: var(--dsc-search-input-color);
-  border: var(--dsc-search-input-border);
-  border-radius: var(--ds-border-radius-default);
-  font-family: inherit;
-  position: relative;
-  box-sizing: border-box;
-  flex: 0 1 auto;
-  height: 100%;
-  width: 100%;
-  appearance: none;
-  padding: 0 var(--ds-spacing-3);
-}
-
-.ds-search__input:disabled {
-  cursor: not-allowed;
-}
 
-.ds-search:has(.ds-search__input:disabled) {
-  opacity: var(--ds-disabled-opacity);
-}
+  & [type='submit'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 
-.ds-search__search-button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.ds-search__search-button:not(:focus-visible) {
-  border-left: 0;
-}
+    &:focus-visible {
+      z-index: 1;
+    }
 
-.ds-search__search-button:focus-visible {
-  z-index: 1;
-}
+    &:not(:focus-visible) {
+      border-left: 0;
+    }
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .ds-search__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
-    --dsc-search-input-border-color: var(--ds-color-accent-border-strong);
+  @media (hover: hover) and (pointer: fine) {
+    [type='search']:not(:focus-visible, :disabled, [aria-disabled]):hover {
+      --dsc-search-input-border-color: var(--ds-color-accent-border-strong);
 
-    box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
-  }
+      box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
+    }
 
-  .ds-search__clear-button:not(:focus-visible, :disabled, [aria-disabled]):hover {
-    background: var(--ds-color-accent-surface-hover);
+    [type='reset']:not(:focus-visible, :disabled, [aria-disabled]):hover {
+      background: var(--ds-color-accent-surface-hover);
+    }
   }
 }
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 2c29f1ea55..6d0d9108eb 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -129,7 +129,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         )}
         {!isSimple && (
           <Button
-            className={'ds-search__search-button'}
             variant={variant}
             type='submit'
             onClick={handleSearchClick}

From 878446a41c5ed304c390dc9accf4f73310c94860 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 31 Oct 2024 10:43:34 +0100
Subject: [PATCH 06/32] tests, last css

---
 packages/css/search.css                       | 18 ++++++-
 .../components/form/Search/Search.test.tsx    | 40 +++++---------
 .../src/components/form/Search/Search.tsx     | 22 ++------
 .../src/components/form/Search/useSearch.ts   | 53 -------------------
 4 files changed, 34 insertions(+), 99 deletions(-)
 delete mode 100644 packages/react/src/components/form/Search/useSearch.ts

diff --git a/packages/css/search.css b/packages/css/search.css
index b21cfe93b1..3bc6c16b8c 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -6,6 +6,7 @@
   --dsc-search-input-color: var(--ds-color-neutral-text-default);
   --dsc-search-icon-color: var(--ds-color-neutral-text-default);
   --dsc-search-magnifying-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
+  --dsc-search-x-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
   --dsc-search-icon-size: var(--ds-sizing-7);
 
   display: grid;
@@ -67,8 +68,23 @@
     height: var(--dsc-search-clear-button-size);
     width: var(--dsc-search-clear-button-size);
     border-radius: var(--ds-border-radius-default);
-    font-size: 0.6em;
+    font-size: 0.5em;
     z-index: 2;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      height: var(--dsc-search-icon-size);
+      aspect-ratio: 1 / 1;
+      mask: var(--dsc-search-x-icon) center / contain no-repeat;
+      background: currentcolor;
+      z-index: 2;
+      pointer-events: none;
+    }
   }
 
   & [type='submit'] {
diff --git a/packages/react/src/components/form/Search/Search.test.tsx b/packages/react/src/components/form/Search/Search.test.tsx
index b0609e48d4..2b47b35fbd 100644
--- a/packages/react/src/components/form/Search/Search.test.tsx
+++ b/packages/react/src/components/form/Search/Search.test.tsx
@@ -6,17 +6,13 @@ import type { SearchProps } from './Search';
 import { Search } from './Search';
 
 describe('Search', () => {
-  test('has correct value and label', () => {
-    render({ value: 'test', label: 'label', clearButtonLabel: 'clear' });
-    expect(screen.getByLabelText('label')).toBeDefined();
-    expect(screen.getByText('clear')).toBeDefined();
-    expect(screen.getByDisplayValue('test')).toBeDefined();
-  });
-
-  test('has correct label when label is hidden', () => {
-    render({ label: 'label', hideLabel: true });
-
-    expect(screen.getByLabelText('label')).toBeDefined();
+  test('has correct value and aria-label', () => {
+    const ariaLabel = 'Search';
+    const value = 'search value';
+    render({ 'aria-label': ariaLabel, value });
+    const element = screen.getByRole('searchbox');
+    expect(element).toHaveAttribute('aria-label', ariaLabel);
+    expect(element).toHaveValue(value);
   });
 
   it('Triggers onBlur event when field loses focus', async () => {
@@ -46,20 +42,6 @@ describe('Search', () => {
     expect(screen.getByRole('searchbox')).toHaveAttribute('id', id);
   });
 
-  it('Focuses on search field when label is clicked and id is not given', async () => {
-    const label = 'Lorem ipsum';
-    const { user } = render({ label });
-    await act(async () => await user.click(screen.getByText(label)));
-    expect(screen.getByRole('searchbox')).toHaveFocus();
-  });
-
-  it('Focuses on search field when label is clicked and id is given', async () => {
-    const label = 'Lorem ipsum';
-    const { user } = render({ id: 'some-unique-id', label });
-    await act(async () => await user.click(screen.getByText(label)));
-    expect(screen.getByRole('searchbox')).toHaveFocus();
-  });
-
   it('clear value with clear button and focus is set to searchbox afterwards', async () => {
     const onClear = vi.fn();
     const clearButtonLabel = 'clear';
@@ -71,7 +53,11 @@ describe('Search', () => {
     await act(async () => await user.type(searchbox, typedText));
     expect(searchbox.value).toBe(typedText);
 
-    const clearButton = screen.getByText(clearButtonLabel);
+    const clearButton = document.querySelector('button');
+
+    if (!clearButton) {
+      throw new Error('clear button not found');
+    }
 
     await act(async () => await user.click(clearButton));
 
@@ -110,7 +96,7 @@ describe('Search', () => {
 
     renderRtl(
       <form onSubmit={onSubmit}>
-        <Search />
+        <Search aria-label='sæk' />
       </form>,
     );
 
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 6d0d9108eb..5df69ab855 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -1,5 +1,4 @@
 import { useMergeRefs } from '@floating-ui/react';
-import { XMarkIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useCallback, useRef, useState } from 'react';
@@ -27,14 +26,7 @@ export type SearchProps = {
    * @default 'Tøm'
    */
   clearButtonLabel?: string;
-  /** Exposes the HTML `size` attribute.
-   * @default 27
-   */
-  htmlSize?: number;
-} & Omit<
-  FormFieldProps,
-  'size' | 'description' | 'readOnly' | 'error' | 'errorId'
-> &
+} & Omit<FormFieldProps, 'description' | 'readOnly' | 'error' | 'errorId'> &
   Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'readOnly'> &
   DefaultProps &
   (
@@ -47,13 +39,12 @@ export type SearchProps = {
  *
  * @example
  * ```tsx
- * <Search label="Search" label">
+ * <Search aria-label="Search" />
  * ```
  */
 export const Search = forwardRef<HTMLInputElement, SearchProps>(
   (props, ref) => {
     const {
-      label,
       style,
       variant = 'simple',
       searchButtonLabel = 'Søk',
@@ -64,7 +55,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onClear,
       disabled,
       onSearchClick,
-      htmlSize = 27,
       className,
       'data-size': size,
       ...rest
@@ -97,7 +87,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onSearchClick?.((value ?? internalValue).toString());
     };
 
-    const isSimple = variant === 'simple';
     const showClearButton = Boolean(value ?? internalValue) && !disabled;
 
     return (
@@ -109,7 +98,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       >
         <Input
           ref={mergedRef}
-          size={htmlSize}
           value={value ?? internalValue}
           disabled={disabled}
           {...omit(['size', 'error', 'errorId', 'readOnly'], rest)}
@@ -123,11 +111,9 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             onClick={handleClear}
             disabled={disabled}
             aria-label={clearButtonLabel}
-          >
-            <XMarkIcon aria-hidden />
-          </Button>
+          />
         )}
-        {!isSimple && (
+        {variant !== 'simple' && (
           <Button
             variant={variant}
             type='submit'
diff --git a/packages/react/src/components/form/Search/useSearch.ts b/packages/react/src/components/form/Search/useSearch.ts
deleted file mode 100644
index 5b5d41f26a..0000000000
--- a/packages/react/src/components/form/Search/useSearch.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import { useContext } from 'react';
-
-import { FieldsetContext } from '../Fieldset/FieldsetContext';
-import type { FormField } from '../useFormField';
-import { useFormField } from '../useFormField';
-
-import type { SearchProps } from './Search';
-
-type UseSearch = (props: SearchProps) => Omit<FormField, 'inputProps'> & {
-  inputProps: Pick<
-    InputHTMLAttributes<HTMLInputElement>,
-    'readOnly' | 'name' | 'required' | 'onClick' | 'onChange'
-  > &
-    FormField['inputProps'];
-};
-
-/** Handles props for `Search` in context with `Fieldset` */
-export const useSearch: UseSearch = (props) => {
-  const fieldset = useContext(FieldsetContext);
-  const {
-    inputProps,
-    readOnly,
-    size = fieldset?.size,
-    ...rest
-  } = useFormField(props, 'search');
-
-  return {
-    ...rest,
-    readOnly,
-    size,
-    inputProps: {
-      ...inputProps,
-      type: 'search',
-      name: props.name ?? 'q',
-      readOnly,
-      onClick: (e) => {
-        if (readOnly) {
-          e.preventDefault();
-          return;
-        }
-        props?.onClick?.(e);
-      },
-      onChange: (e) => {
-        if (readOnly) {
-          e.preventDefault();
-          return;
-        }
-        props?.onChange?.(e);
-      },
-    },
-  };
-};

From e21c9fa00a68558d4368f974335d099f482bbbbb Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 31 Oct 2024 10:56:45 +0100
Subject: [PATCH 07/32] css var clean

---
 packages/css/search.css | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 3bc6c16b8c..e20bb96f01 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -1,12 +1,7 @@
 .ds-search {
   --dsc-search-clear-button-size: var(--ds-sizing-6);
-  --dsc-search-input-background: var(--ds-color-neutral-background-default);
-  --dsc-search-input-border-color: var(--ds-color-neutral-border-default);
-  --dsc-search-input-border: 1px solid var(--dsc-search-input-border-color);
-  --dsc-search-input-color: var(--ds-color-neutral-text-default);
-  --dsc-search-icon-color: var(--ds-color-neutral-text-default);
-  --dsc-search-magnifying-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
-  --dsc-search-x-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
+  --dsc-search-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
+  --dsc-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
   --dsc-search-icon-size: var(--ds-sizing-7);
 
   display: grid;
@@ -28,7 +23,7 @@
       transform: translateY(-50%);
       height: var(--dsc-search-icon-size);
       aspect-ratio: 1 / 1;
-      mask: var(--dsc-search-magnifying-icon) center / contain no-repeat;
+      mask: var(--dsc-search-input-icon) center / contain no-repeat;
       background: currentcolor;
       z-index: 2;
       pointer-events: none;
@@ -80,7 +75,7 @@
       transform: translate(-50%, -50%);
       height: var(--dsc-search-icon-size);
       aspect-ratio: 1 / 1;
-      mask: var(--dsc-search-x-icon) center / contain no-repeat;
+      mask: var(--dsc-search-clear-icon) center / contain no-repeat;
       background: currentcolor;
       z-index: 2;
       pointer-events: none;
@@ -101,12 +96,6 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
-    [type='search']:not(:focus-visible, :disabled, [aria-disabled]):hover {
-      --dsc-search-input-border-color: var(--ds-color-accent-border-strong);
-
-      box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
-    }
-
     [type='reset']:not(:focus-visible, :disabled, [aria-disabled]):hover {
       background: var(--ds-color-accent-surface-hover);
     }

From 139b533c667e65b82522c134952f66f01c22c4be Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 31 Oct 2024 11:00:14 +0100
Subject: [PATCH 08/32] less js checks

---
 packages/css/search.css                        |  6 ++++++
 .../src/components/form/Search/Search.tsx      | 18 ++++++++----------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index e20bb96f01..4114f6870f 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -11,6 +11,12 @@
   position: relative;
 
   &[data-variant='simple'] {
+    /* This really does not matter, if consumer makes the component in markup,
+    they won't add the submit button, but it's less for us */
+    & [type='submit'] {
+      display: none;
+    }
+
     & [type='search'] {
       padding-left: 2.4em;
     }
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 5df69ab855..e1f93c57bb 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -113,16 +113,14 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             aria-label={clearButtonLabel}
           />
         )}
-        {variant !== 'simple' && (
-          <Button
-            variant={variant}
-            type='submit'
-            onClick={handleSearchClick}
-            disabled={disabled}
-          >
-            {searchButtonLabel}
-          </Button>
-        )}
+        <Button
+          variant={variant === 'primary' ? 'primary' : 'secondary'}
+          type='submit'
+          onClick={handleSearchClick}
+          disabled={disabled}
+        >
+          {searchButtonLabel}
+        </Button>
       </div>
     );
   },

From c6bc0835383bcac98b3bef5339da6a0ce4622cc6 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 31 Oct 2024 11:00:52 +0100
Subject: [PATCH 09/32] lets not omit size..

---
 packages/react/src/components/form/Search/Search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index e1f93c57bb..8b14b699ba 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -100,7 +100,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           ref={mergedRef}
           value={value ?? internalValue}
           disabled={disabled}
-          {...omit(['size', 'error', 'errorId', 'readOnly'], rest)}
+          {...omit(['error', 'errorId', 'readOnly'], rest)}
           type='search'
           onChange={handleChange}
         />

From 3047f8c0f51cf2d110b53a53c16b2f1b40290550 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 08:20:58 +0100
Subject: [PATCH 10/32] more cleaning

---
 .../components/form/Search/Search.test.tsx    | 24 -------------
 .../src/components/form/Search/Search.tsx     | 35 +++++++++----------
 2 files changed, 17 insertions(+), 42 deletions(-)

diff --git a/packages/react/src/components/form/Search/Search.test.tsx b/packages/react/src/components/form/Search/Search.test.tsx
index 2b47b35fbd..da525d6a9b 100644
--- a/packages/react/src/components/form/Search/Search.test.tsx
+++ b/packages/react/src/components/form/Search/Search.test.tsx
@@ -42,30 +42,6 @@ describe('Search', () => {
     expect(screen.getByRole('searchbox')).toHaveAttribute('id', id);
   });
 
-  it('clear value with clear button and focus is set to searchbox afterwards', async () => {
-    const onClear = vi.fn();
-    const clearButtonLabel = 'clear';
-    const typedText = 'typed text by user';
-
-    const { user } = render({ onClear, clearButtonLabel });
-
-    const searchbox = screen.getByRole<HTMLInputElement>('searchbox');
-    await act(async () => await user.type(searchbox, typedText));
-    expect(searchbox.value).toBe(typedText);
-
-    const clearButton = document.querySelector('button');
-
-    if (!clearButton) {
-      throw new Error('clear button not found');
-    }
-
-    await act(async () => await user.click(clearButton));
-
-    expect(onClear).toBeCalledWith(typedText);
-    expect(searchbox.value).toBe('');
-    expect(searchbox).toHaveFocus();
-  });
-
   it('onSearchClick is triggered with correct search value when search button is interacted', async () => {
     const onSearchClick = vi.fn();
     const searchButtonLabel = 'search';
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 8b14b699ba..511b3c5243 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -1,11 +1,12 @@
 import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
-import { forwardRef, useCallback, useRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 
 import type { DefaultProps } from '../../../types';
 import { omit } from '../../../utilities';
 import { Button } from '../../Button/Button';
+import { setReactInputValue } from '../Combobox/utilities';
 import { Input } from '../Input/Input';
 import type { FormFieldProps } from '../useFormField';
 
@@ -14,20 +15,21 @@ export type SearchProps = {
    * @default 'simple'
    */
   variant?: 'primary' | 'secondary' | 'simple';
-  /** Callback for when clear button is activated */
-  onClear?: (value: InputHTMLAttributes<HTMLInputElement>['value']) => void;
   /**Callback for Search-button submit */
   onSearchClick?: (value: string) => void;
   /** Search button label. Use this for providing a descriptive button text and/or icon
    * @default 'Søk'
    */
   searchButtonLabel?: ReactNode;
-  /** Clear button label. Hidden visually. Used for screen readers
+  /**
+   * Clear button label. Hidden visually. Used for screen readers.
+   * Set to `null` to hide the button from screen readers.
+   *
    * @default 'Tøm'
    */
   clearButtonLabel?: string;
 } & Omit<FormFieldProps, 'description' | 'readOnly' | 'error' | 'errorId'> &
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'readOnly'> &
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'> &
   DefaultProps &
   (
     | { 'aria-label': string; 'aria-labelledby'?: never; label?: never }
@@ -52,34 +54,28 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       defaultValue,
       value,
       onChange,
-      onClear,
       disabled,
       onSearchClick,
       className,
       'data-size': size,
       ...rest
     } = props;
-
     const inputRef = useRef<HTMLInputElement>();
     const mergedRef = useMergeRefs([ref, inputRef]);
 
     const [internalValue, setInternalValue] = useState(defaultValue ?? '');
 
-    const handleChange = useCallback(
-      (e: ChangeEvent<HTMLInputElement>) => {
-        const newValue = e.target.value;
-        value === undefined && setInternalValue(newValue);
-        onChange?.(e);
-      },
-      [onChange, value],
-    );
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e);
+      value === undefined && setInternalValue(e.target.value);
+    };
 
     const handleClear = (
       e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     ) => {
+      if (!inputRef.current) throw new Error('Input ref is missing');
       e.preventDefault();
-      onClear?.(internalValue);
-      setInternalValue('');
+      setReactInputValue(inputRef.current, '');
       inputRef?.current?.focus();
     };
 
@@ -87,7 +83,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onSearchClick?.((value ?? internalValue).toString());
     };
 
-    const showClearButton = Boolean(value ?? internalValue) && !disabled;
+    const showClearButton =
+      Boolean(value ?? internalValue) &&
+      !disabled &&
+      typeof searchButtonLabel === 'string';
 
     return (
       <div

From 75c108e20b9d85556b25174ac50349079707fd43 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 08:42:37 +0100
Subject: [PATCH 11/32] docs, misc, etc

---
 .../src/components/form/Search/Search.mdx     |  6 +++
 .../components/form/Search/Search.stories.tsx | 40 ++++++++++++-------
 .../components/form/Search/Search.test.tsx    |  2 +
 .../src/components/form/Search/Search.tsx     |  5 +--
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/form/Search/Search.mdx b/packages/react/src/components/form/Search/Search.mdx
index ffe281f0a5..85092fb4e4 100644
--- a/packages/react/src/components/form/Search/Search.mdx
+++ b/packages/react/src/components/form/Search/Search.mdx
@@ -25,6 +25,12 @@ Bruk `searchButtonLabel` og `clearButtonLabel` til å sett innholdet i knappene
 
 <Canvas of={SearchStories.OnlyIcon} />
 
+## Med Label
+
+Dersom du vil ha label på søkefeltet, må du legge til en `Label` komponent som du kobler sammen med `aria-labelledby` på `Search`.
+
+<Canvas of={SearchStories.WithLabel} />
+
 ## Skjema
 
 Søkeknappen har typen `"submit"` og vil dermed automatisk sende inn skjema.
diff --git a/packages/react/src/components/form/Search/Search.stories.tsx b/packages/react/src/components/form/Search/Search.stories.tsx
index c8d72f7cc6..1994abea75 100644
--- a/packages/react/src/components/form/Search/Search.stories.tsx
+++ b/packages/react/src/components/form/Search/Search.stories.tsx
@@ -2,7 +2,7 @@ import { MagnifyingGlassIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { Button, Divider, Heading, Paragraph } from '../..';
+import { Button, Divider, Field, Label, Paragraph } from '../..';
 
 import { Search } from '.';
 
@@ -15,7 +15,7 @@ export default {
 
 export const Preview: Story = {
   args: {
-    label: 'Label',
+    'aria-label': 'Label',
     disabled: false,
     'data-size': 'md',
     placeholder: '',
@@ -25,7 +25,7 @@ export const Preview: Story = {
 
 export const FullWidth: Story = {
   args: {
-    label: 'Label',
+    'aria-label': 'Label',
   },
   parameters: {
     layout: 'padded',
@@ -37,10 +37,9 @@ export const Controlled: StoryFn<typeof Search> = () => {
   return (
     <>
       <Search
-        label='Kontroller meg!'
+        aria-label='Kontroller meg!'
         value={value}
         onChange={(e) => setValue(e.target.value)}
-        onClear={() => setValue('')}
       />
 
       <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
@@ -56,7 +55,7 @@ export const Controlled: StoryFn<typeof Search> = () => {
 export const OnlyIcon: StoryFn<typeof Search> = () => {
   return (
     <Search
-      label='Search for content'
+      aria-label='Search for content'
       clearButtonLabel='Empty'
       searchButtonLabel={
         <MagnifyingGlassIcon fontSize={'1.5em'} title='Search' />
@@ -72,13 +71,6 @@ export const Form: StoryFn<typeof Search> = () => {
 
   return (
     <>
-      <Heading
-        level={3}
-        data-size='2xs'
-        style={{ marginBottom: 'var(--ds-spacing-2)' }}
-      >
-        Submitted value: {submittedValue}
-      </Heading>
       <form
         onSubmit={(e) => {
           // Prevent navigation from Storybook
@@ -87,7 +79,7 @@ export const Form: StoryFn<typeof Search> = () => {
         }}
       >
         <Search
-          label='Search for content'
+          aria-label='Search for content'
           clearButtonLabel='Empty'
           onChange={(e) => setValue(e.target.value)}
           searchButtonLabel={
@@ -96,6 +88,26 @@ export const Form: StoryFn<typeof Search> = () => {
           variant='primary'
         />
       </form>
+      <Paragraph data-size='md' style={{ marginTop: 'var(--ds-spacing-2)' }}>
+        Submitted value: {submittedValue}
+      </Paragraph>
     </>
   );
 };
+
+export const WithLabel: StoryFn<typeof Search> = (args) => {
+  return (
+    <Field>
+      <Label htmlFor='search' id='search-label'>
+        Search
+      </Label>
+      <Search
+        {...args}
+        id='search'
+        name='search'
+        aria-labelledby='search-label'
+        aria-label={undefined}
+      />
+    </Field>
+  );
+};
diff --git a/packages/react/src/components/form/Search/Search.test.tsx b/packages/react/src/components/form/Search/Search.test.tsx
index da525d6a9b..663696ee27 100644
--- a/packages/react/src/components/form/Search/Search.test.tsx
+++ b/packages/react/src/components/form/Search/Search.test.tsx
@@ -97,6 +97,8 @@ const render = (props: Partial<SearchProps> = {}) => {
           onChange: vi.fn(),
           ...props,
         }}
+        aria-label='søk'
+        aria-labelledby={undefined}
       />,
     ),
   };
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 511b3c5243..a2956d351a 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -32,9 +32,8 @@ export type SearchProps = {
   Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'> &
   DefaultProps &
   (
-    | { 'aria-label': string; 'aria-labelledby'?: never; label?: never }
-    | { 'aria-label'?: never; 'aria-labelledby'?: never; label: ReactNode }
-    | { 'aria-label'?: never; 'aria-labelledby': string; label?: never }
+    | { 'aria-label': string; 'aria-labelledby'?: never }
+    | { 'aria-label'?: never; 'aria-labelledby': string }
   );
 
 /** Search field

From f5577f64b17b3e5b1b117eea45e5029251a2e76c Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 10:19:44 +0100
Subject: [PATCH 12/32] brand new shiny api

---
 packages/css/search.css                       |  14 +-
 .../src/components/form/Search/Search.mdx     |  12 +-
 .../components/form/Search/Search.stories.tsx | 131 +++++++++++-------
 .../components/form/Search/Search.test.tsx    | 111 +++------------
 .../src/components/form/Search/Search.tsx     | 113 +--------------
 .../components/form/Search/SearchButton.tsx   |  19 +++
 .../components/form/Search/SearchClear.tsx    |  41 ++++++
 .../components/form/Search/SearchInput.tsx    |  50 +++++++
 .../react/src/components/form/Search/index.ts |  20 ++-
 9 files changed, 248 insertions(+), 263 deletions(-)
 create mode 100644 packages/react/src/components/form/Search/SearchButton.tsx
 create mode 100644 packages/react/src/components/form/Search/SearchClear.tsx
 create mode 100644 packages/react/src/components/form/Search/SearchInput.tsx

diff --git a/packages/css/search.css b/packages/css/search.css
index 4114f6870f..2e9fdd9ced 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -10,14 +10,14 @@
   border-radius: var(--ds-border-radius-default);
   position: relative;
 
-  &[data-variant='simple'] {
+  &:not(:has([type='submit'])) {
     /* This really does not matter, if consumer makes the component in markup,
     they won't add the submit button, but it's less for us */
     & [type='submit'] {
       display: none;
     }
 
-    & [type='search'] {
+    & input {
       padding-left: 2.4em;
     }
 
@@ -36,14 +36,14 @@
     }
   }
 
-  &:not([data-variant='simple']) {
-    & [type='search'] {
+  &:has([type='submit']) {
+    & input {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
 
-  & [type='search'] {
+  & input {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
 
@@ -88,6 +88,10 @@
     }
   }
 
+  &:has(input:placeholder-shown) [type='reset'] {
+    display: none;
+  }
+
   & [type='submit'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
diff --git a/packages/react/src/components/form/Search/Search.mdx b/packages/react/src/components/form/Search/Search.mdx
index 85092fb4e4..c6ed7ef83a 100644
--- a/packages/react/src/components/form/Search/Search.mdx
+++ b/packages/react/src/components/form/Search/Search.mdx
@@ -14,20 +14,16 @@ import * as SearchStories from './Search.stories';
 
 <Canvas of={SearchStories.Controlled} />
 
-## Full bredde
+## Varianter
 
-<Canvas of={SearchStories.FullWidth} />
+Du kan endre `variant` på `Button`, eller ta den bort for å få forskjellige varianter.
 
-## Ikon søkeknapp
-
-Bruk `searchButtonLabel` og `clearButtonLabel` til å sett innholdet i knappene på `Search`.
-Ønsker du å bruke kun et ikon på søkeknappen, sørg for at den har `title` definert.
-
-<Canvas of={SearchStories.OnlyIcon} />
+<Canvas of={SearchStories.Variants} />
 
 ## Med Label
 
 Dersom du vil ha label på søkefeltet, må du legge til en `Label` komponent som du kobler sammen med `aria-labelledby` på `Search`.
+I eksempelet har vi brukt `Field` for å få oppkobling mellom `Label` og `Search.Input`.
 
 <Canvas of={SearchStories.WithLabel} />
 
diff --git a/packages/react/src/components/form/Search/Search.stories.tsx b/packages/react/src/components/form/Search/Search.stories.tsx
index 1994abea75..6ce1d81f6c 100644
--- a/packages/react/src/components/form/Search/Search.stories.tsx
+++ b/packages/react/src/components/form/Search/Search.stories.tsx
@@ -1,4 +1,3 @@
-import { MagnifyingGlassIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
@@ -13,34 +12,27 @@ export default {
   component: Search,
 } as Meta;
 
-export const Preview: Story = {
-  args: {
-    'aria-label': 'Label',
-    disabled: false,
-    'data-size': 'md',
-    placeholder: '',
-    variant: 'simple',
-  },
-};
-
-export const FullWidth: Story = {
-  args: {
-    'aria-label': 'Label',
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
+export const Preview: StoryFn<typeof Search> = (args) => (
+  <Search {...args}>
+    <Search.Input aria-label='Søk' />
+    <Search.Clear />
+    <Search.Button />
+  </Search>
+);
 
 export const Controlled: StoryFn<typeof Search> = () => {
   const [value, setValue] = useState<string>();
   return (
     <>
-      <Search
-        aria-label='Kontroller meg!'
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
+      <Search>
+        <Search.Input
+          aria-label='Søk'
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <Search.Clear />
+        <Search.Button />
+      </Search>
 
       <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
 
@@ -52,20 +44,74 @@ export const Controlled: StoryFn<typeof Search> = () => {
   );
 };
 
-export const OnlyIcon: StoryFn<typeof Search> = () => {
+export const Variants: StoryFn<typeof Search> = () => (
+  <div>
+    <Search>
+      <Search.Input aria-label='Søk' />
+      <Search.Clear />
+    </Search>
+
+    <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
+
+    <Search>
+      <Search.Input aria-label='Søk' />
+      <Search.Clear />
+      <Search.Button />
+    </Search>
+
+    <Divider style={{ marginTop: 'var(--ds-spacing-4)' }} />
+
+    <Search>
+      <Search.Input aria-label='Søk' />
+      <Search.Clear />
+      <Search.Button variant='secondary' />
+    </Search>
+  </div>
+);
+
+export const WithLabel: StoryFn<typeof Search> = () => (
+  <Field>
+    <Label id='label'>Søk etter katter</Label>
+    <Search>
+      <Search.Input name='cat-search' aria-labelledby='label' />
+      <Search.Clear />
+      <Search.Button />
+    </Search>
+  </Field>
+);
+
+export const Form: StoryFn<typeof Search> = () => {
+  const [value, setValue] = useState<string>();
+  const [submittedValue, setSubmittedValue] = useState<string>();
+
   return (
-    <Search
-      aria-label='Search for content'
-      clearButtonLabel='Empty'
-      searchButtonLabel={
-        <MagnifyingGlassIcon fontSize={'1.5em'} title='Search' />
-      }
-      variant='primary'
-    />
+    <>
+      <form
+        onSubmit={(e) => {
+          // Prevent navigation from Storybook
+          e.preventDefault();
+          setSubmittedValue(value);
+        }}
+      >
+        <Search>
+          <Search.Input
+            aria-label='Søk'
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+          <Search.Clear />
+          <Search.Button />
+        </Search>
+      </form>
+
+      <Paragraph data-size='md' style={{ marginTop: 'var(--ds-spacing-2)' }}>
+        Submitted value: {submittedValue}
+      </Paragraph>
+    </>
   );
 };
 
-export const Form: StoryFn<typeof Search> = () => {
+export const Form2: StoryFn<typeof Search> = () => {
   const [value, setValue] = useState<string>();
   const [submittedValue, setSubmittedValue] = useState<string>();
 
@@ -94,20 +140,3 @@ export const Form: StoryFn<typeof Search> = () => {
     </>
   );
 };
-
-export const WithLabel: StoryFn<typeof Search> = (args) => {
-  return (
-    <Field>
-      <Label htmlFor='search' id='search-label'>
-        Search
-      </Label>
-      <Search
-        {...args}
-        id='search'
-        name='search'
-        aria-labelledby='search-label'
-        aria-label={undefined}
-      />
-    </Field>
-  );
-};
diff --git a/packages/react/src/components/form/Search/Search.test.tsx b/packages/react/src/components/form/Search/Search.test.tsx
index 663696ee27..933e00324b 100644
--- a/packages/react/src/components/form/Search/Search.test.tsx
+++ b/packages/react/src/components/form/Search/Search.test.tsx
@@ -1,105 +1,32 @@
-import { render as renderRtl, screen } from '@testing-library/react';
+import { act, render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { act } from 'react';
-
-import type { SearchProps } from './Search';
-import { Search } from './Search';
+import { Search } from './';
 
 describe('Search', () => {
-  test('has correct value and aria-label', () => {
-    const ariaLabel = 'Search';
-    const value = 'search value';
-    render({ 'aria-label': ariaLabel, value });
-    const element = screen.getByRole('searchbox');
-    expect(element).toHaveAttribute('aria-label', ariaLabel);
-    expect(element).toHaveValue(value);
-  });
-
-  it('Triggers onBlur event when field loses focus', async () => {
-    const onBlur = vi.fn();
-    const { user } = render({ onBlur });
-    const element = screen.getByRole('searchbox');
-    await act(async () => await user.click(element));
-    expect(element).toHaveFocus();
-    await act(async () => await user.tab());
-    expect(onBlur).toHaveBeenCalledTimes(1);
-  });
-
-  it('Triggers onChange event for each keystroke', async () => {
-    const onChange = vi.fn();
-    const data = 'test';
-    const { user } = render({ onChange });
-    const element = screen.getByRole('searchbox');
-    await act(async () => await user.click(element));
-    expect(element).toHaveFocus();
-    await act(async () => await user.keyboard(data));
-    expect(onChange).toHaveBeenCalledTimes(data.length);
-  });
-
-  it('Sets given id on search field', () => {
-    const id = 'some-unique-id';
-    render({ id });
-    expect(screen.getByRole('searchbox')).toHaveAttribute('id', id);
-  });
-
-  it('onSearchClick is triggered with correct search value when search button is interacted', async () => {
-    const onSearchClick = vi.fn();
-    const searchButtonLabel = 'search';
-    const typedText = 'typed text by user';
-
-    const { user } = render({
-      onSearchClick,
-      searchButtonLabel,
-      variant: 'primary',
-    });
+  it('should clear input when clear button is clickd', async () => {
+    renderRtl(
+      <Search>
+        <Search.Input aria-label='Søk' />
+        <Search.Clear />
+      </Search>,
+    );
 
-    const searchbox = screen.getByRole<HTMLInputElement>('searchbox');
-    await act(async () => await user.type(searchbox, typedText));
-    expect(searchbox.value).toBe(typedText);
+    const input = screen.getByRole('searchbox');
+    const clearButton = screen.getByRole('button');
 
-    const searchButton = screen.getByText(searchButtonLabel);
+    expect(input).toHaveValue('');
+    expect(clearButton).toBeInTheDocument();
 
-    await act(async () => await user.click(searchButton));
+    input.focus();
 
-    expect(onSearchClick).toBeCalledWith(typedText);
-  });
+    expect(input).toHaveFocus();
 
-  it('trigger onSubmit in form by default', async () => {
-    const user = userEvent.setup();
+    await act(async () => await userEvent.type(input, 'Hello, World!'));
 
-    const onSubmit = vi.fn();
-    const typedText = 'typed text by user';
+    expect(input).toHaveValue('Hello, World!');
 
-    renderRtl(
-      <form onSubmit={onSubmit}>
-        <Search aria-label='sæk' />
-      </form>,
-    );
+    await act(async () => await userEvent.click(clearButton));
 
-    const searchbox = screen.getByRole<HTMLInputElement>('searchbox');
-    await act(async () => await user.type(searchbox, typedText));
-    expect(searchbox.value).toBe(typedText);
-
-    await act(async () => await user.keyboard('[Enter]'));
-
-    expect(onSubmit).toHaveBeenCalled();
+    expect(input).toHaveValue('');
   });
 });
-
-const render = (props: Partial<SearchProps> = {}) => {
-  const user = userEvent.setup();
-
-  return {
-    user,
-    ...renderRtl(
-      <Search
-        {...{
-          onChange: vi.fn(),
-          ...props,
-        }}
-        aria-label='søk'
-        aria-labelledby={undefined}
-      />,
-    ),
-  };
-};
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index a2956d351a..94ea9e10ba 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -1,40 +1,9 @@
-import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
-import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
-import { forwardRef, useRef, useState } from 'react';
+import { forwardRef } from 'react';
 
 import type { DefaultProps } from '../../../types';
-import { omit } from '../../../utilities';
-import { Button } from '../../Button/Button';
-import { setReactInputValue } from '../Combobox/utilities';
-import { Input } from '../Input/Input';
-import type { FormFieldProps } from '../useFormField';
 
-export type SearchProps = {
-  /** Variant
-   * @default 'simple'
-   */
-  variant?: 'primary' | 'secondary' | 'simple';
-  /**Callback for Search-button submit */
-  onSearchClick?: (value: string) => void;
-  /** Search button label. Use this for providing a descriptive button text and/or icon
-   * @default 'Søk'
-   */
-  searchButtonLabel?: ReactNode;
-  /**
-   * Clear button label. Hidden visually. Used for screen readers.
-   * Set to `null` to hide the button from screen readers.
-   *
-   * @default 'Tøm'
-   */
-  clearButtonLabel?: string;
-} & Omit<FormFieldProps, 'description' | 'readOnly' | 'error' | 'errorId'> &
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'> &
-  DefaultProps &
-  (
-    | { 'aria-label': string; 'aria-labelledby'?: never }
-    | { 'aria-label'?: never; 'aria-labelledby': string }
-  );
+export type SearchProps = DefaultProps & React.HTMLAttributes<HTMLDivElement>;
 
 /** Search field
  *
@@ -43,83 +12,15 @@ export type SearchProps = {
  * <Search aria-label="Search" />
  * ```
  */
-export const Search = forwardRef<HTMLInputElement, SearchProps>(
-  (props, ref) => {
-    const {
-      style,
-      variant = 'simple',
-      searchButtonLabel = 'Søk',
-      clearButtonLabel = 'Tøm',
-      defaultValue,
-      value,
-      onChange,
-      disabled,
-      onSearchClick,
-      className,
-      'data-size': size,
-      ...rest
-    } = props;
-    const inputRef = useRef<HTMLInputElement>();
-    const mergedRef = useMergeRefs([ref, inputRef]);
-
-    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e);
-      value === undefined && setInternalValue(e.target.value);
-    };
-
-    const handleClear = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    ) => {
-      if (!inputRef.current) throw new Error('Input ref is missing');
-      e.preventDefault();
-      setReactInputValue(inputRef.current, '');
-      inputRef?.current?.focus();
-    };
-
-    const handleSearchClick = () => {
-      onSearchClick?.((value ?? internalValue).toString());
-    };
-
-    const showClearButton =
-      Boolean(value ?? internalValue) &&
-      !disabled &&
-      typeof searchButtonLabel === 'string';
-
+export const Search = forwardRef<HTMLDivElement, SearchProps>(
+  ({ 'data-size': size, className, ...rest }, ref) => {
     return (
       <div
-        style={style}
+        ref={ref}
         className={cl('ds-search', className)}
         data-size={size}
-        data-variant={variant}
-      >
-        <Input
-          ref={mergedRef}
-          value={value ?? internalValue}
-          disabled={disabled}
-          {...omit(['error', 'errorId', 'readOnly'], rest)}
-          type='search'
-          onChange={handleChange}
-        />
-        {showClearButton && (
-          <Button
-            variant='secondary'
-            type='reset'
-            onClick={handleClear}
-            disabled={disabled}
-            aria-label={clearButtonLabel}
-          />
-        )}
-        <Button
-          variant={variant === 'primary' ? 'primary' : 'secondary'}
-          type='submit'
-          onClick={handleSearchClick}
-          disabled={disabled}
-        >
-          {searchButtonLabel}
-        </Button>
-      </div>
+        {...rest}
+      />
     );
   },
 );
diff --git a/packages/react/src/components/form/Search/SearchButton.tsx b/packages/react/src/components/form/Search/SearchButton.tsx
new file mode 100644
index 0000000000..3e9643ec39
--- /dev/null
+++ b/packages/react/src/components/form/Search/SearchButton.tsx
@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+
+import { Button, type ButtonProps } from '../../Button';
+
+export type SearchButtonProps = {
+  variant?: 'primary' | 'secondary';
+} & Omit<ButtonProps, 'variant'>;
+
+export const SearchButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { className, children = 'Søk', ...rest } = props;
+
+    return (
+      <Button ref={ref} type='submit' {...rest}>
+        {children}
+      </Button>
+    );
+  },
+);
diff --git a/packages/react/src/components/form/Search/SearchClear.tsx b/packages/react/src/components/form/Search/SearchClear.tsx
new file mode 100644
index 0000000000..d24d56b307
--- /dev/null
+++ b/packages/react/src/components/form/Search/SearchClear.tsx
@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import { Button, type ButtonProps } from '../../Button';
+import { setReactInputValue } from '../Combobox/utilities';
+
+export type SearchClearProps = Omit<ButtonProps, 'variant'>;
+
+export const SearchClear = forwardRef<HTMLButtonElement, SearchClearProps>(
+  (props, ref) => {
+    const { 'aria-label': label = 'Tøm', onClick, ...rest } = props;
+
+    const handleClear = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    ) => {
+      const target = e.target;
+      let input: HTMLElement | null | undefined = null;
+
+      if (target instanceof HTMLElement)
+        input = target.closest('.ds-search')?.querySelector('input');
+
+      if (!input) throw new Error('Input is missing');
+      if (!(input instanceof HTMLInputElement))
+        throw new Error('Input is not an input element');
+
+      e.preventDefault();
+      setReactInputValue(input, '');
+      input.focus();
+      onClick?.(e);
+    };
+
+    return (
+      <Button
+        ref={ref}
+        variant='secondary'
+        type='reset'
+        aria-label={label}
+        onClick={handleClear}
+        {...rest}
+      />
+    );
+  },
+);
diff --git a/packages/react/src/components/form/Search/SearchInput.tsx b/packages/react/src/components/form/Search/SearchInput.tsx
new file mode 100644
index 0000000000..5497758429
--- /dev/null
+++ b/packages/react/src/components/form/Search/SearchInput.tsx
@@ -0,0 +1,50 @@
+import { useMergeRefs } from '@floating-ui/react';
+import { type ChangeEvent, forwardRef, useRef, useState } from 'react';
+import { omit } from '../../../utilities';
+import { Input } from '../Input';
+
+type SearchInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'readOnly' | 'type'
+> &
+  (
+    | { 'aria-label': string; 'aria-labelledby'?: never }
+    | { 'aria-label'?: never; 'aria-labelledby': string }
+  );
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (props, ref) => {
+    const {
+      style,
+      defaultValue,
+      value,
+      onChange,
+      disabled,
+      className,
+      ...rest
+    } = props;
+    const inputRef = useRef<HTMLInputElement>();
+    const mergedRef = useMergeRefs([ref, inputRef]);
+
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e);
+      value === undefined && setInternalValue(e.target.value);
+    };
+
+    return (
+      <Input
+        ref={mergedRef}
+        value={value ?? internalValue}
+        disabled={disabled}
+        {...omit(['error', 'errorId', 'readOnly'], rest)}
+        type='search'
+        onChange={handleChange}
+        /* We need an empty placeholder for the clear button to be able to show/hide */
+        placeholder=''
+        {...rest}
+      />
+    );
+  },
+);
diff --git a/packages/react/src/components/form/Search/index.ts b/packages/react/src/components/form/Search/index.ts
index addd53308b..de071f0582 100644
--- a/packages/react/src/components/form/Search/index.ts
+++ b/packages/react/src/components/form/Search/index.ts
@@ -1 +1,19 @@
-export * from './Search';
+import { Search as SearchRoot } from './Search';
+import { SearchButton } from './SearchButton';
+import { SearchClear } from './SearchClear';
+import { SearchInput } from './SearchInput';
+
+export const Search = Object.assign(SearchRoot, {
+  Clear: SearchClear,
+  Button: SearchButton,
+  Input: SearchInput,
+});
+
+Search.Clear.displayName = 'Search.Clear';
+Search.Button.displayName = 'Search.Button';
+Search.Input.displayName = 'Search.Input';
+
+export type { SearchProps } from './Search';
+export type { SearchButtonProps } from './SearchButton';
+export type { SearchClearProps } from './SearchClear';
+export { SearchClear, SearchButton, SearchInput };

From 77014dde4ce06655bee0f5fbbbbf1a98887f9fdb Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 10:20:01 +0100
Subject: [PATCH 13/32] remove dummy story

---
 .../components/form/Search/Search.stories.tsx | 30 -------------------
 1 file changed, 30 deletions(-)

diff --git a/packages/react/src/components/form/Search/Search.stories.tsx b/packages/react/src/components/form/Search/Search.stories.tsx
index 6ce1d81f6c..227a136c6b 100644
--- a/packages/react/src/components/form/Search/Search.stories.tsx
+++ b/packages/react/src/components/form/Search/Search.stories.tsx
@@ -110,33 +110,3 @@ export const Form: StoryFn<typeof Search> = () => {
     </>
   );
 };
-
-export const Form2: StoryFn<typeof Search> = () => {
-  const [value, setValue] = useState<string>();
-  const [submittedValue, setSubmittedValue] = useState<string>();
-
-  return (
-    <>
-      <form
-        onSubmit={(e) => {
-          // Prevent navigation from Storybook
-          e.preventDefault();
-          setSubmittedValue(value);
-        }}
-      >
-        <Search
-          aria-label='Search for content'
-          clearButtonLabel='Empty'
-          onChange={(e) => setValue(e.target.value)}
-          searchButtonLabel={
-            <MagnifyingGlassIcon fontSize={'1.5em'} title='Search' />
-          }
-          variant='primary'
-        />
-      </form>
-      <Paragraph data-size='md' style={{ marginTop: 'var(--ds-spacing-2)' }}>
-        Submitted value: {submittedValue}
-      </Paragraph>
-    </>
-  );
-};

From bfbdec3aa9a540799f31b4952797850ed42f38ac Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 10:40:43 +0100
Subject: [PATCH 14/32] cleaning

---
 packages/css/search.css                       | 30 ++++++++-----------
 .../components/form/Search/Search.stories.tsx |  4 +--
 .../components/form/Search/SearchClear.tsx    |  3 +-
 .../components/form/Search/SearchInput.tsx    |  2 +-
 .../react/src/components/form/Search/index.ts |  1 +
 5 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 2e9fdd9ced..2219b02c69 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -10,13 +10,8 @@
   border-radius: var(--ds-border-radius-default);
   position: relative;
 
+  /* The simple variant, when no submit button is present */
   &:not(:has([type='submit'])) {
-    /* This really does not matter, if consumer makes the component in markup,
-    they won't add the submit button, but it's less for us */
-    & [type='submit'] {
-      display: none;
-    }
-
     & input {
       padding-left: 2.4em;
     }
@@ -35,14 +30,6 @@
       pointer-events: none;
     }
   }
-
-  &:has([type='submit']) {
-    & input {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
   & input {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
@@ -56,6 +43,10 @@
     }
   }
 
+  &:has(input:placeholder-shown) [type='reset'] {
+    display: none;
+  }
+
   & [type='reset'] {
     --dsc-button-padding: 0;
 
@@ -88,10 +79,6 @@
     }
   }
 
-  &:has(input:placeholder-shown) [type='reset'] {
-    display: none;
-  }
-
   & [type='submit'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -105,6 +92,13 @@
     }
   }
 
+  &:has([type='submit']) {
+    & input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
   @media (hover: hover) and (pointer: fine) {
     [type='reset']:not(:focus-visible, :disabled, [aria-disabled]):hover {
       background: var(--ds-color-accent-surface-hover);
diff --git a/packages/react/src/components/form/Search/Search.stories.tsx b/packages/react/src/components/form/Search/Search.stories.tsx
index 227a136c6b..d188854219 100644
--- a/packages/react/src/components/form/Search/Search.stories.tsx
+++ b/packages/react/src/components/form/Search/Search.stories.tsx
@@ -1,12 +1,10 @@
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 import { Button, Divider, Field, Label, Paragraph } from '../..';
 
 import { Search } from '.';
 
-type Story = StoryObj<typeof Search>;
-
 export default {
   title: 'Komponenter/Search',
   component: Search,
diff --git a/packages/react/src/components/form/Search/SearchClear.tsx b/packages/react/src/components/form/Search/SearchClear.tsx
index d24d56b307..3db82e2a49 100644
--- a/packages/react/src/components/form/Search/SearchClear.tsx
+++ b/packages/react/src/components/form/Search/SearchClear.tsx
@@ -2,7 +2,8 @@ import { forwardRef } from 'react';
 import { Button, type ButtonProps } from '../../Button';
 import { setReactInputValue } from '../Combobox/utilities';
 
-export type SearchClearProps = Omit<ButtonProps, 'variant'>;
+/* We omit children since we render the icon with css */
+export type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'>;
 
 export const SearchClear = forwardRef<HTMLButtonElement, SearchClearProps>(
   (props, ref) => {
diff --git a/packages/react/src/components/form/Search/SearchInput.tsx b/packages/react/src/components/form/Search/SearchInput.tsx
index 5497758429..a90c804416 100644
--- a/packages/react/src/components/form/Search/SearchInput.tsx
+++ b/packages/react/src/components/form/Search/SearchInput.tsx
@@ -3,7 +3,7 @@ import { type ChangeEvent, forwardRef, useRef, useState } from 'react';
 import { omit } from '../../../utilities';
 import { Input } from '../Input';
 
-type SearchInputProps = Omit<
+export type SearchInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'readOnly' | 'type'
 > &
diff --git a/packages/react/src/components/form/Search/index.ts b/packages/react/src/components/form/Search/index.ts
index de071f0582..4da1b2a2d8 100644
--- a/packages/react/src/components/form/Search/index.ts
+++ b/packages/react/src/components/form/Search/index.ts
@@ -16,4 +16,5 @@ Search.Input.displayName = 'Search.Input';
 export type { SearchProps } from './Search';
 export type { SearchButtonProps } from './SearchButton';
 export type { SearchClearProps } from './SearchClear';
+export type { SearchInputProps } from './SearchInput';
 export { SearchClear, SearchButton, SearchInput };

From 58a9ad4844e4fc64c0d09a111d9e2233fc6fcb5a Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 10:50:06 +0100
Subject: [PATCH 15/32] some docs

---
 packages/css/search.css                         |  5 +++--
 .../react/src/components/form/Search/Search.mdx | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 2219b02c69..e688e85c95 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -3,6 +3,7 @@
   --dsc-search-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
   --dsc-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
   --dsc-search-icon-size: var(--ds-sizing-7);
+  --dsc-search-clear-icon-size: var(--ds-sizing-9);
 
   display: grid;
   grid-template-columns: 1fr auto;
@@ -54,7 +55,7 @@
     grid-row: 1 / 2;
     justify-self: end;
     align-self: center;
-    margin-right: var(--ds-spacing-2);
+    margin-right: var(--ds-spacing-3);
     border: none;
     cursor: pointer;
     height: var(--dsc-search-clear-button-size);
@@ -70,7 +71,7 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      height: var(--dsc-search-icon-size);
+      height: var(--dsc-search-clear-icon-size);
       aspect-ratio: 1 / 1;
       mask: var(--dsc-search-clear-icon) center / contain no-repeat;
       background: currentcolor;
diff --git a/packages/react/src/components/form/Search/Search.mdx b/packages/react/src/components/form/Search/Search.mdx
index c6ed7ef83a..ef1d1ef1ae 100644
--- a/packages/react/src/components/form/Search/Search.mdx
+++ b/packages/react/src/components/form/Search/Search.mdx
@@ -10,6 +10,23 @@ import * as SearchStories from './Search.stories';
 <Primary />
 <Controls />
 
+## Slik bruker du Search
+
+Du velger selv om du vil bruke `Search.Clear` og `Search.Button`. Vi anbefaler at du bruker `Search.Clear` for å gi brukeren mulighet til å fjerne søket.
+Dersom du ikke har `Search.Button` vil input feltet få et søkeikon.
+
+`ara-label` eller `aria-labelledby` er påkrevd på `Search.Input`.
+
+```tsx
+import { Search } from '@digdir/designsystemet-react';
+
+<Search>
+  <Search.Input aria-label="Sæk" />
+  <Search.Clear />
+  <Search.Button>Søk</Search.Button>
+</Search.Clear>
+```
+
 ## Kontrollert
 
 <Canvas of={SearchStories.Controlled} />

From 13a473ca69c0b2428893820b9a0ee60c84b9b569 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 11:52:30 +0100
Subject: [PATCH 16/32] fix showcase

---
 packages/react/stories/showcase.stories.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
index c2f91981b2..b9fdfba633 100644
--- a/packages/react/stories/showcase.stories.tsx
+++ b/packages/react/stories/showcase.stories.tsx
@@ -157,12 +157,10 @@ export const Showcase: StoryFn = () => {
               </Select>
               <Button className={classes.tableBtn}>Utfør</Button>
             </div>
-            <Search
-              label='Label'
-              placeholder='Søk etter bruker...'
-              variant='simple'
-              className={classes.tableSearch}
-            />
+            <Search className={classes.tableSearch}>
+              <Search.Input aria-label='Søk' />
+              <Search.Clear />
+            </Search>
           </div>
           <Table border className={classes.table}>
             <Table.Head>

From d9a73f72e7a23addec7f2e34dd50cd547b7233db Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 11:53:03 +0100
Subject: [PATCH 17/32] jsdoc

---
 packages/react/src/components/form/Search/Search.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 94ea9e10ba..628a71357f 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -5,11 +5,16 @@ import type { DefaultProps } from '../../../types';
 
 export type SearchProps = DefaultProps & React.HTMLAttributes<HTMLDivElement>;
 
-/** Search field
+/**
+ * Search field
  *
  * @example
  * ```tsx
- * <Search aria-label="Search" />
+ * <Search>
+ *  <Search.Input aria-label='Søk' />
+ *  <Search.Clear />
+ *  <Search.Button />
+ * </Search>
  * ```
  */
 export const Search = forwardRef<HTMLDivElement, SearchProps>(

From c79763c05013967c4a451f7a73449ac557ca16eb Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 11:53:36 +0100
Subject: [PATCH 18/32] Create few-squids-speak.md

---
 .changeset/few-squids-speak.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/few-squids-speak.md

diff --git a/.changeset/few-squids-speak.md b/.changeset/few-squids-speak.md
new file mode 100644
index 0000000000..ef1ef07ab5
--- /dev/null
+++ b/.changeset/few-squids-speak.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": major
+"@digdir/designsystemet-react": major
+---
+
+Search: New compound API

From b29497804b383cbcf76c4af2b26b23572fea2b9f Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 13:57:51 +0100
Subject: [PATCH 19/32] a lot of misc

---
 packages/css/search.css                       | 56 ++++++++-----------
 .../src/components/form/Search/Search.tsx     | 11 +---
 .../components/form/Search/SearchClear.tsx    |  3 +-
 .../components/form/Search/SearchInput.tsx    | 32 ++---------
 4 files changed, 31 insertions(+), 71 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index e688e85c95..9612da4616 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -1,4 +1,5 @@
 .ds-search {
+  --dsc-search-padding-inline: var(--ds-spacing-2) var(--ds-spacing-3);
   --dsc-search-clear-button-size: var(--ds-sizing-6);
   --dsc-search-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
   --dsc-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
@@ -11,8 +12,17 @@
   border-radius: var(--ds-border-radius-default);
   position: relative;
 
+  /* Moves the focused element to the top, so it is not hidden by an adjacent element */
+  &:focus-visible {
+    z-index: 1;
+  }
+
+  & input {
+    padding-inline: var(--dsc-search-padding-inline);
+  }
+
   /* The simple variant, when no submit button is present */
-  &:not(:has([type='submit'])) {
+  &:not(:has(button[type='submit'])) {
     & input {
       padding-left: 2.4em;
     }
@@ -20,7 +30,8 @@
     &::before {
       content: '';
       position: absolute;
-      left: var(--ds-sizing-2);
+      left: 0;
+      margin-inline: var(--dsc-search-padding-inline);
       top: 50%;
       transform: translateY(-50%);
       height: var(--dsc-search-icon-size);
@@ -28,51 +39,36 @@
       mask: var(--dsc-search-input-icon) center / contain no-repeat;
       background: currentcolor;
       z-index: 2;
-      pointer-events: none;
     }
   }
   & input {
-    grid-column: 1 / 2;
-    grid-row: 1 / 2;
+    grid-area: 1 / 1;
 
-    &:focus-visible {
-      z-index: 1;
-    }
     &::-webkit-search-decoration,
     &::-webkit-search-cancel-button {
       appearance: none;
     }
   }
 
-  &:has(input:placeholder-shown) [type='reset'] {
+  &:has(input:placeholder-shown) button[type='reset'] {
     display: none;
   }
 
-  & [type='reset'] {
-    --dsc-button-padding: 0;
-
-    grid-column: 1 / 2;
-    grid-row: 1 / 2;
+  & button[type='reset'] {
+    grid-area: 1 / 1;
     justify-self: end;
     align-self: center;
-    margin-right: var(--ds-spacing-3);
-    border: none;
-    cursor: pointer;
+    margin-inline: var(--dsc-search-padding-inline);
     height: var(--dsc-search-clear-button-size);
     width: var(--dsc-search-clear-button-size);
-    border-radius: var(--ds-border-radius-default);
     font-size: 0.5em;
     z-index: 2;
     position: relative;
 
     &::before {
       content: '';
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
       height: var(--dsc-search-clear-icon-size);
-      aspect-ratio: 1 / 1;
+      width: var(--dsc-search-clear-icon-size);
       mask: var(--dsc-search-clear-icon) center / contain no-repeat;
       background: currentcolor;
       z-index: 2;
@@ -80,29 +76,23 @@
     }
   }
 
-  & [type='submit'] {
+  & button[type='submit'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
-    &:focus-visible {
-      z-index: 1;
-    }
-
     &:not(:focus-visible) {
       border-left: 0;
     }
   }
 
-  &:has([type='submit']) {
+  &:has(button[type='submit']) {
     & input {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
 
-  @media (hover: hover) and (pointer: fine) {
-    [type='reset']:not(:focus-visible, :disabled, [aria-disabled]):hover {
-      background: var(--ds-color-accent-surface-hover);
-    }
+  &:has(input:is(:read-only, :disabled, [aria-disabled='true'])) button[type='reset'] {
+    display: none;
   }
 }
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 628a71357f..74971ee0d3 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -18,15 +18,8 @@ export type SearchProps = DefaultProps & React.HTMLAttributes<HTMLDivElement>;
  * ```
  */
 export const Search = forwardRef<HTMLDivElement, SearchProps>(
-  ({ 'data-size': size, className, ...rest }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cl('ds-search', className)}
-        data-size={size}
-        {...rest}
-      />
-    );
+  ({ className, ...rest }, ref) => {
+    return <div ref={ref} className={cl('ds-search', className)} {...rest} />;
   },
 );
 
diff --git a/packages/react/src/components/form/Search/SearchClear.tsx b/packages/react/src/components/form/Search/SearchClear.tsx
index 3db82e2a49..302d0dbe00 100644
--- a/packages/react/src/components/form/Search/SearchClear.tsx
+++ b/packages/react/src/components/form/Search/SearchClear.tsx
@@ -31,10 +31,11 @@ export const SearchClear = forwardRef<HTMLButtonElement, SearchClearProps>(
     return (
       <Button
         ref={ref}
-        variant='secondary'
+        variant='tertiary'
         type='reset'
         aria-label={label}
         onClick={handleClear}
+        icon={true}
         {...rest}
       />
     );
diff --git a/packages/react/src/components/form/Search/SearchInput.tsx b/packages/react/src/components/form/Search/SearchInput.tsx
index a90c804416..23e4d3914b 100644
--- a/packages/react/src/components/form/Search/SearchInput.tsx
+++ b/packages/react/src/components/form/Search/SearchInput.tsx
@@ -1,6 +1,4 @@
-import { useMergeRefs } from '@floating-ui/react';
-import { type ChangeEvent, forwardRef, useRef, useState } from 'react';
-import { omit } from '../../../utilities';
+import { forwardRef } from 'react';
 import { Input } from '../Input';
 
 export type SearchInputProps = Omit<
@@ -13,34 +11,12 @@ export type SearchInputProps = Omit<
   );
 
 export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  (props, ref) => {
-    const {
-      style,
-      defaultValue,
-      value,
-      onChange,
-      disabled,
-      className,
-      ...rest
-    } = props;
-    const inputRef = useRef<HTMLInputElement>();
-    const mergedRef = useMergeRefs([ref, inputRef]);
-
-    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e);
-      value === undefined && setInternalValue(e.target.value);
-    };
-
+  ({ className, ...rest }, ref) => {
     return (
       <Input
-        ref={mergedRef}
-        value={value ?? internalValue}
-        disabled={disabled}
-        {...omit(['error', 'errorId', 'readOnly'], rest)}
+        ref={ref}
+        {...rest}
         type='search'
-        onChange={handleChange}
         /* We need an empty placeholder for the clear button to be able to show/hide */
         placeholder=''
         {...rest}

From b012108078ffe09f9b0204929e5ab8bf3b644fe5 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 13:59:09 +0100
Subject: [PATCH 20/32] display none

---
 packages/css/search.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 9612da4616..72b58f132f 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -41,6 +41,7 @@
       z-index: 2;
     }
   }
+
   & input {
     grid-area: 1 / 1;
 
@@ -50,7 +51,9 @@
     }
   }
 
-  &:has(input:placeholder-shown) button[type='reset'] {
+  /* We hide the clear button when input is empty */
+  &:has(input:placeholder-shown) button[type='reset'],
+  &:has(input:is(:read-only, :disabled, [aria-disabled='true'])) button[type='reset'] {
     display: none;
   }
 
@@ -91,8 +94,4 @@
       border-bottom-right-radius: 0;
     }
   }
-
-  &:has(input:is(:read-only, :disabled, [aria-disabled='true'])) button[type='reset'] {
-    display: none;
-  }
 }

From 29b9c6382062223f4d51117320e01d0398d5e0a2 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 14:41:46 +0100
Subject: [PATCH 21/32] inline-X/Y

---
 packages/css/search.css                          | 16 +++++++++++-----
 .../react/src/components/form/Search/Search.mdx  |  2 +-
 .../src/components/form/Search/SearchClear.tsx   |  1 +
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 72b58f132f..1b0f0bfd3c 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -1,5 +1,6 @@
 .ds-search {
-  --dsc-search-padding-inline: var(--ds-spacing-2) var(--ds-spacing-3);
+  --dsc-search-padding-inline-x: var(--ds-spacing-2);
+  --dsc-search-padding-inline-y: var(--ds-spacing-1);
   --dsc-search-clear-button-size: var(--ds-sizing-6);
   --dsc-search-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
   --dsc-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
@@ -18,7 +19,7 @@
   }
 
   & input {
-    padding-inline: var(--dsc-search-padding-inline);
+    padding-inline: var(--dsc-search-padding-inline-x) var(--dsc-search-padding-inline-y);
   }
 
   /* The simple variant, when no submit button is present */
@@ -30,8 +31,7 @@
     &::before {
       content: '';
       position: absolute;
-      left: 0;
-      margin-inline: var(--dsc-search-padding-inline);
+      margin-inline: var(--dsc-search-padding-inline-x) var(--dsc-search-padding-inline-y);
       top: 50%;
       transform: translateY(-50%);
       height: var(--dsc-search-icon-size);
@@ -57,11 +57,17 @@
     display: none;
   }
 
+  &:has(button[type='reset']) {
+    & input {
+      padding-inline-end: calc(var(--dsc-search-clear-button-size) + var(--dsc-search-padding-inline-x) * 2);
+    }
+  }
+
   & button[type='reset'] {
     grid-area: 1 / 1;
     justify-self: end;
     align-self: center;
-    margin-inline: var(--dsc-search-padding-inline);
+    margin-inline-end: calc(var(--dsc-search-padding-inline-x) * 2);
     height: var(--dsc-search-clear-button-size);
     width: var(--dsc-search-clear-button-size);
     font-size: 0.5em;
diff --git a/packages/react/src/components/form/Search/Search.mdx b/packages/react/src/components/form/Search/Search.mdx
index ef1d1ef1ae..f6f6b6e637 100644
--- a/packages/react/src/components/form/Search/Search.mdx
+++ b/packages/react/src/components/form/Search/Search.mdx
@@ -23,7 +23,7 @@ import { Search } from '@digdir/designsystemet-react';
 <Search>
   <Search.Input aria-label="Sæk" />
   <Search.Clear />
-  <Search.Button>Søk</Search.Button>
+  <Search.Button />
 </Search.Clear>
 ```
 
diff --git a/packages/react/src/components/form/Search/SearchClear.tsx b/packages/react/src/components/form/Search/SearchClear.tsx
index 302d0dbe00..8092b78855 100644
--- a/packages/react/src/components/form/Search/SearchClear.tsx
+++ b/packages/react/src/components/form/Search/SearchClear.tsx
@@ -19,6 +19,7 @@ export const SearchClear = forwardRef<HTMLButtonElement, SearchClearProps>(
         input = target.closest('.ds-search')?.querySelector('input');
 
       if (!input) throw new Error('Input is missing');
+      /* narrow type to make TS happy */
       if (!(input instanceof HTMLInputElement))
         throw new Error('Input is not an input element');
 

From 72ba1dd2f405939fdd1b07e0546ac290889d425a Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Fri, 1 Nov 2024 14:46:26 +0100
Subject: [PATCH 22/32] correct y spacing

---
 packages/css/search.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 1b0f0bfd3c..a5eafa2568 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -1,6 +1,6 @@
 .ds-search {
   --dsc-search-padding-inline-x: var(--ds-spacing-2);
-  --dsc-search-padding-inline-y: var(--ds-spacing-1);
+  --dsc-search-padding-inline-y: var(--ds-spacing-3);
   --dsc-search-clear-button-size: var(--ds-sizing-6);
   --dsc-search-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
   --dsc-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");

From f2d39353117befe1e3d88cf02daec54926ea4c91 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 4 Nov 2024 08:16:33 +0100
Subject: [PATCH 23/32] double rest and classname

---
 packages/react/src/components/form/Search/SearchInput.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/form/Search/SearchInput.tsx b/packages/react/src/components/form/Search/SearchInput.tsx
index 23e4d3914b..17967248bc 100644
--- a/packages/react/src/components/form/Search/SearchInput.tsx
+++ b/packages/react/src/components/form/Search/SearchInput.tsx
@@ -11,11 +11,10 @@ export type SearchInputProps = Omit<
   );
 
 export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ className, ...rest }, ref) => {
+  ({ ...rest }, ref) => {
     return (
       <Input
         ref={ref}
-        {...rest}
         type='search'
         /* We need an empty placeholder for the clear button to be able to show/hide */
         placeholder=''

From 9431de00d41c0c59543957e8f119339044aa4359 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 4 Nov 2024 08:26:51 +0100
Subject: [PATCH 24/32] misc props and send `className`

---
 packages/react/src/components/form/Search/SearchButton.tsx | 2 +-
 packages/react/src/components/form/Search/SearchClear.tsx  | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/form/Search/SearchButton.tsx b/packages/react/src/components/form/Search/SearchButton.tsx
index 3e9643ec39..5836dc367a 100644
--- a/packages/react/src/components/form/Search/SearchButton.tsx
+++ b/packages/react/src/components/form/Search/SearchButton.tsx
@@ -8,7 +8,7 @@ export type SearchButtonProps = {
 
 export const SearchButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
-    const { className, children = 'Søk', ...rest } = props;
+    const { children = 'Søk', ...rest } = props;
 
     return (
       <Button ref={ref} type='submit' {...rest}>
diff --git a/packages/react/src/components/form/Search/SearchClear.tsx b/packages/react/src/components/form/Search/SearchClear.tsx
index 8092b78855..1ac520a816 100644
--- a/packages/react/src/components/form/Search/SearchClear.tsx
+++ b/packages/react/src/components/form/Search/SearchClear.tsx
@@ -6,9 +6,7 @@ import { setReactInputValue } from '../Combobox/utilities';
 export type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'>;
 
 export const SearchClear = forwardRef<HTMLButtonElement, SearchClearProps>(
-  (props, ref) => {
-    const { 'aria-label': label = 'Tøm', onClick, ...rest } = props;
-
+  ({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) => {
     const handleClear = (
       e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     ) => {

From a9d8cb1924fa8b17d38d3ba7f91d2bea3805e073 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 4 Nov 2024 12:20:44 +0100
Subject: [PATCH 25/32] changes from #2723

Co-authored-by: Eirik Backer <eirik.backer@gmail.com>
---
 packages/css/button.css                       |  2 +
 packages/css/search.css                       | 84 ++++++++-----------
 .../components/form/Search/Search.stories.tsx |  4 +-
 .../src/components/form/Search/Search.tsx     | 23 ++---
 .../components/form/Search/SearchButton.tsx   |  4 +-
 .../components/form/Search/SearchClear.tsx    |  2 +-
 .../components/form/Search/SearchInput.tsx    |  2 +-
 .../react/src/components/form/Search/index.ts | 16 +++-
 8 files changed, 64 insertions(+), 73 deletions(-)

diff --git a/packages/css/button.css b/packages/css/button.css
index 450c1c59ae..ce70cc8584 100644
--- a/packages/css/button.css
+++ b/packages/css/button.css
@@ -47,6 +47,8 @@
   }
 
   &[data-icon] {
+    width: var(--dsc-button-size); /* Ensure it keeps square shape */
+    height: var(--dsc-button-size); /* Ensure it keeps square shape */
     padding: 0;
   }
 
diff --git a/packages/css/search.css b/packages/css/search.css
index a5eafa2568..1480db1184 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -1,49 +1,45 @@
 .ds-search {
-  --dsc-search-padding-inline-x: var(--ds-spacing-2);
-  --dsc-search-padding-inline-y: var(--ds-spacing-3);
-  --dsc-search-clear-button-size: var(--ds-sizing-6);
-  --dsc-search-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
-  --dsc-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
+  --dsc-search-padding-inline: var(--ds-spacing-2);
+  --dsc-search-clear-padding: var(--ds-sizing-1);
+  --dsc-search-clear-size: var(--ds-sizing-9);
+  --dsc-search-clear-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
+  --dsc-search-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
   --dsc-search-icon-size: var(--ds-sizing-7);
-  --dsc-search-clear-icon-size: var(--ds-sizing-9);
 
   display: grid;
+  align-items: center;
   grid-template-columns: 1fr auto;
   width: 100%;
   border-radius: var(--ds-border-radius-default);
   position: relative;
 
-  /* Moves the focused element to the top, so it is not hidden by an adjacent element */
-  &:focus-visible {
-    z-index: 1;
-  }
-
-  & input {
-    padding-inline: var(--dsc-search-padding-inline-x) var(--dsc-search-padding-inline-y);
-  }
-
-  /* The simple variant, when no submit button is present */
+  /* Add magnifier icon when no submit button is present */
   &:not(:has(button[type='submit'])) {
     & input {
-      padding-left: 2.4em;
+      padding-inline-start: calc(var(--dsc-search-icon-size) + calc(var(--dsc-search-padding-inline) * 2));
     }
-
     &::before {
-      content: '';
-      position: absolute;
-      margin-inline: var(--dsc-search-padding-inline-x) var(--dsc-search-padding-inline-y);
-      top: 50%;
-      transform: translateY(-50%);
-      height: var(--dsc-search-icon-size);
-      aspect-ratio: 1 / 1;
-      mask: var(--dsc-search-input-icon) center / contain no-repeat;
-      background: currentcolor;
+      grid-area: 1 / 1;
+      margin-inline: var(--dsc-search-padding-inline);
+      pointer-events: none;
+      position: relative;
       z-index: 2;
     }
   }
 
+  /* Render magnifier icon when no submit button, or submit button is empty */
+  &:not(:has(button[type='submit']))::before,
+  & button[type='submit']:empty::before {
+    background: currentcolor;
+    content: '';
+    height: var(--dsc-search-icon-size);
+    width: var(--dsc-search-icon-size);
+    mask: var(--dsc-search-icon-url) center / contain no-repeat;
+  }
+
   & input {
     grid-area: 1 / 1;
+    padding-inline: var(--dsc-search-padding-inline);
 
     &::-webkit-search-decoration,
     &::-webkit-search-cancel-button {
@@ -57,31 +53,27 @@
     display: none;
   }
 
-  &:has(button[type='reset']) {
-    & input {
-      padding-inline-end: calc(var(--dsc-search-clear-button-size) + var(--dsc-search-padding-inline-x) * 2);
-    }
+  &:has(button[type='reset']) input {
+    padding-inline-end: calc(var(--dsc-search-clear-size) + var(--dsc-search-padding-inline));
   }
 
   & button[type='reset'] {
+    --dsc-button-size: var(--dsc-search-clear-size);
+
     grid-area: 1 / 1;
     justify-self: end;
-    align-self: center;
-    margin-inline-end: calc(var(--dsc-search-padding-inline-x) * 2);
-    height: var(--dsc-search-clear-button-size);
-    width: var(--dsc-search-clear-button-size);
-    font-size: 0.5em;
-    z-index: 2;
+    margin-inline: var(--dsc-search-padding-inline);
+    padding: var(--dsc-search-clear-padding);
     position: relative;
+    scale: 0.75;
+    z-index: 2;
 
     &::before {
       content: '';
-      height: var(--dsc-search-clear-icon-size);
-      width: var(--dsc-search-clear-icon-size);
-      mask: var(--dsc-search-clear-icon) center / contain no-repeat;
+      height: var(--dsc-search-clear-size);
+      width: var(--dsc-search-clear-size);
+      mask: var(--dsc-search-clear-icon-url) center / contain no-repeat;
       background: currentcolor;
-      z-index: 2;
-      pointer-events: none;
     }
   }
 
@@ -94,10 +86,8 @@
     }
   }
 
-  &:has(button[type='submit']) {
-    & input {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  &:has(button[type='submit']) input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 }
diff --git a/packages/react/src/components/form/Search/Search.stories.tsx b/packages/react/src/components/form/Search/Search.stories.tsx
index d188854219..c7b71ee38d 100644
--- a/packages/react/src/components/form/Search/Search.stories.tsx
+++ b/packages/react/src/components/form/Search/Search.stories.tsx
@@ -69,9 +69,9 @@ export const Variants: StoryFn<typeof Search> = () => (
 
 export const WithLabel: StoryFn<typeof Search> = () => (
   <Field>
-    <Label id='label'>Søk etter katter</Label>
+    <Label>Søk etter katter</Label>
     <Search>
-      <Search.Input name='cat-search' aria-labelledby='label' />
+      <Search.Input name='cat-search' aria-labelledby='' />
       <Search.Clear />
       <Search.Button />
     </Search>
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 74971ee0d3..5cc3d64e6e 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -5,22 +5,11 @@ import type { DefaultProps } from '../../../types';
 
 export type SearchProps = DefaultProps & React.HTMLAttributes<HTMLDivElement>;
 
-/**
- * Search field
- *
- * @example
- * ```tsx
- * <Search>
- *  <Search.Input aria-label='Søk' />
- *  <Search.Clear />
- *  <Search.Button />
- * </Search>
- * ```
- */
-export const Search = forwardRef<HTMLDivElement, SearchProps>(
-  ({ className, ...rest }, ref) => {
-    return <div ref={ref} className={cl('ds-search', className)} {...rest} />;
-  },
-);
+export const Search = forwardRef<HTMLDivElement, SearchProps>(function Search(
+  { className, ...rest },
+  ref,
+) {
+  return <div ref={ref} className={cl('ds-search', className)} {...rest} />;
+});
 
 Search.displayName = 'Search';
diff --git a/packages/react/src/components/form/Search/SearchButton.tsx b/packages/react/src/components/form/Search/SearchButton.tsx
index 5836dc367a..1a6293bf68 100644
--- a/packages/react/src/components/form/Search/SearchButton.tsx
+++ b/packages/react/src/components/form/Search/SearchButton.tsx
@@ -7,9 +7,7 @@ export type SearchButtonProps = {
 } & Omit<ButtonProps, 'variant'>;
 
 export const SearchButton = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { children = 'Søk', ...rest } = props;
-
+  function SearchButton({ children = 'Søk', ...rest }, ref) {
     return (
       <Button ref={ref} type='submit' {...rest}>
         {children}
diff --git a/packages/react/src/components/form/Search/SearchClear.tsx b/packages/react/src/components/form/Search/SearchClear.tsx
index 1ac520a816..cc2b5e93e7 100644
--- a/packages/react/src/components/form/Search/SearchClear.tsx
+++ b/packages/react/src/components/form/Search/SearchClear.tsx
@@ -6,7 +6,7 @@ import { setReactInputValue } from '../Combobox/utilities';
 export type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'>;
 
 export const SearchClear = forwardRef<HTMLButtonElement, SearchClearProps>(
-  ({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) => {
+  function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
     const handleClear = (
       e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     ) => {
diff --git a/packages/react/src/components/form/Search/SearchInput.tsx b/packages/react/src/components/form/Search/SearchInput.tsx
index 17967248bc..e837ab14da 100644
--- a/packages/react/src/components/form/Search/SearchInput.tsx
+++ b/packages/react/src/components/form/Search/SearchInput.tsx
@@ -11,7 +11,7 @@ export type SearchInputProps = Omit<
   );
 
 export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ ...rest }, ref) => {
+  function SearchInput({ ...rest }, ref) {
     return (
       <Input
         ref={ref}
diff --git a/packages/react/src/components/form/Search/index.ts b/packages/react/src/components/form/Search/index.ts
index 4da1b2a2d8..6c5d2d933a 100644
--- a/packages/react/src/components/form/Search/index.ts
+++ b/packages/react/src/components/form/Search/index.ts
@@ -3,7 +3,19 @@ import { SearchButton } from './SearchButton';
 import { SearchClear } from './SearchClear';
 import { SearchInput } from './SearchInput';
 
-export const Search = Object.assign(SearchRoot, {
+/**
+ * Search field
+ *
+ * @example
+ * ```tsx
+ * <Search>
+ *  <Search.Input aria-label='Søk' />
+ *  <Search.Clear />
+ *  <Search.Button />
+ * </Search>
+ * ```
+ */
+const Search = Object.assign(SearchRoot, {
   Clear: SearchClear,
   Button: SearchButton,
   Input: SearchInput,
@@ -17,4 +29,4 @@ export type { SearchProps } from './Search';
 export type { SearchButtonProps } from './SearchButton';
 export type { SearchClearProps } from './SearchClear';
 export type { SearchInputProps } from './SearchInput';
-export { SearchClear, SearchButton, SearchInput };
+export { SearchClear, SearchButton, SearchInput, Search };

From 2a11f9bf2bc62bd865d2f5a09eded5fdd0e7e754 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 4 Nov 2024 12:24:57 +0100
Subject: [PATCH 26/32] target both submit and button

---
 packages/css/search.css                              | 12 +++++++-----
 packages/react/src/components/form/Search/Search.tsx |  2 --
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 1480db1184..35b9755d41 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -14,7 +14,7 @@
   position: relative;
 
   /* Add magnifier icon when no submit button is present */
-  &:not(:has(button[type='submit'])) {
+  &:not(:has(button[type='submit'], button[type='button'])) {
     & input {
       padding-inline-start: calc(var(--dsc-search-icon-size) + calc(var(--dsc-search-padding-inline) * 2));
     }
@@ -28,8 +28,9 @@
   }
 
   /* Render magnifier icon when no submit button, or submit button is empty */
-  &:not(:has(button[type='submit']))::before,
-  & button[type='submit']:empty::before {
+  &:not(:has(button[type='submit'], button[type='button']))::before,
+  & button[type='submit']:empty::before,
+  & button[type='button']:empty::before {
     background: currentcolor;
     content: '';
     height: var(--dsc-search-icon-size);
@@ -77,7 +78,8 @@
     }
   }
 
-  & button[type='submit'] {
+  & button[type='submit'],
+  & button[type='button'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
@@ -86,7 +88,7 @@
     }
   }
 
-  &:has(button[type='submit']) input {
+  &:has(button[type='submit'], button[type='button']) input {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 5cc3d64e6e..8d9687f349 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -11,5 +11,3 @@ export const Search = forwardRef<HTMLDivElement, SearchProps>(function Search(
 ) {
   return <div ref={ref} className={cl('ds-search', className)} {...rest} />;
 });
-
-Search.displayName = 'Search';

From 1634693965c5e6507379bfa6d5807d821b58b383 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 4 Nov 2024 12:29:46 +0100
Subject: [PATCH 27/32] jsdoc

---
 .../react/src/components/form/Search/SearchButton.tsx    | 9 +++++++--
 .../react/src/components/form/Search/SearchClear.tsx     | 8 +++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/form/Search/SearchButton.tsx b/packages/react/src/components/form/Search/SearchButton.tsx
index 1a6293bf68..cae600d044 100644
--- a/packages/react/src/components/form/Search/SearchButton.tsx
+++ b/packages/react/src/components/form/Search/SearchButton.tsx
@@ -2,9 +2,14 @@ import { forwardRef } from 'react';
 
 import { Button, type ButtonProps } from '../../Button';
 
-export type SearchButtonProps = {
+export type SearchButtonProps = Omit<ButtonProps, 'variant'> & {
   variant?: 'primary' | 'secondary';
-} & Omit<ButtonProps, 'variant'>;
+  /**
+   * Children of the button
+   * @default 'Søk'
+   */
+  children?: React.ReactNode;
+};
 
 export const SearchButton = forwardRef<HTMLButtonElement, ButtonProps>(
   function SearchButton({ children = 'Søk', ...rest }, ref) {
diff --git a/packages/react/src/components/form/Search/SearchClear.tsx b/packages/react/src/components/form/Search/SearchClear.tsx
index cc2b5e93e7..3e8facf63d 100644
--- a/packages/react/src/components/form/Search/SearchClear.tsx
+++ b/packages/react/src/components/form/Search/SearchClear.tsx
@@ -3,7 +3,13 @@ import { Button, type ButtonProps } from '../../Button';
 import { setReactInputValue } from '../Combobox/utilities';
 
 /* We omit children since we render the icon with css */
-export type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'>;
+export type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+};
 
 export const SearchClear = forwardRef<HTMLButtonElement, SearchClearProps>(
   function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {

From 10ace871c35785090781e001adfe644f63292a45 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 4 Nov 2024 13:47:12 +0100
Subject: [PATCH 28/32] dont require aria label, but till in docs

---
 packages/react/src/components/form/Search/Search.mdx        | 6 +++---
 .../react/src/components/form/Search/Search.stories.tsx     | 2 +-
 packages/react/src/components/form/Search/SearchInput.tsx   | 6 +-----
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/form/Search/Search.mdx b/packages/react/src/components/form/Search/Search.mdx
index f6f6b6e637..067f22dc1b 100644
--- a/packages/react/src/components/form/Search/Search.mdx
+++ b/packages/react/src/components/form/Search/Search.mdx
@@ -15,13 +15,13 @@ import * as SearchStories from './Search.stories';
 Du velger selv om du vil bruke `Search.Clear` og `Search.Button`. Vi anbefaler at du bruker `Search.Clear` for å gi brukeren mulighet til å fjerne søket.
 Dersom du ikke har `Search.Button` vil input feltet få et søkeikon.
 
-`ara-label` eller `aria-labelledby` er påkrevd på `Search.Input`.
+Du burde legge på `aria-label` eller `aria-labelledby` dersom du ikke kobler `Search.Input` med en `Label`.
 
 ```tsx
 import { Search } from '@digdir/designsystemet-react';
 
 <Search>
-  <Search.Input aria-label="Sæk" />
+  <Search.Input aria-label="Søk" />
   <Search.Clear />
   <Search.Button />
 </Search.Clear>
@@ -39,7 +39,7 @@ Du kan endre `variant` på `Button`, eller ta den bort for å få forskjellige v
 
 ## Med Label
 
-Dersom du vil ha label på søkefeltet, må du legge til en `Label` komponent som du kobler sammen med `aria-labelledby` på `Search`.
+Dersom du vil ha label på søkefeltet, må du legge til en `Label` komponent som du kobler sammen med `Search.Input`.
 I eksempelet har vi brukt `Field` for å få oppkobling mellom `Label` og `Search.Input`.
 
 <Canvas of={SearchStories.WithLabel} />
diff --git a/packages/react/src/components/form/Search/Search.stories.tsx b/packages/react/src/components/form/Search/Search.stories.tsx
index c7b71ee38d..793c2fb392 100644
--- a/packages/react/src/components/form/Search/Search.stories.tsx
+++ b/packages/react/src/components/form/Search/Search.stories.tsx
@@ -71,7 +71,7 @@ export const WithLabel: StoryFn<typeof Search> = () => (
   <Field>
     <Label>Søk etter katter</Label>
     <Search>
-      <Search.Input name='cat-search' aria-labelledby='' />
+      <Search.Input name='cat-search' id='cat-search' />
       <Search.Clear />
       <Search.Button />
     </Search>
diff --git a/packages/react/src/components/form/Search/SearchInput.tsx b/packages/react/src/components/form/Search/SearchInput.tsx
index e837ab14da..209414bf24 100644
--- a/packages/react/src/components/form/Search/SearchInput.tsx
+++ b/packages/react/src/components/form/Search/SearchInput.tsx
@@ -4,11 +4,7 @@ import { Input } from '../Input';
 export type SearchInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'readOnly' | 'type'
-> &
-  (
-    | { 'aria-label': string; 'aria-labelledby'?: never }
-    | { 'aria-label'?: never; 'aria-labelledby': string }
-  );
+>;
 
 export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
   function SearchInput({ ...rest }, ref) {

From 9c022f3da9ffaf78a990ba68ba2a1d05178523a0 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 4 Nov 2024 14:08:05 +0100
Subject: [PATCH 29/32] css

---
 packages/css/search.css | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index 35b9755d41..a041fef8c0 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -28,7 +28,7 @@
   }
 
   /* Render magnifier icon when no submit button, or submit button is empty */
-  &:not(:has(button[type='submit'], button[type='button']))::before,
+  &:not(:has(button:not([type='reset'])))::before,
   & button[type='submit']:empty::before,
   & button[type='button']:empty::before {
     background: currentcolor;
@@ -88,8 +88,14 @@
     }
   }
 
-  &:has(button[type='submit'], button[type='button']) input {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  &:has(button[type='submit'], button[type='button']) {
+    &::before {
+      display: none;
+    }
+
+    input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 }

From 2f144aab7188ddbe05fdc884a365bc0dea3b6704 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Mon, 4 Nov 2024 14:30:09 +0100
Subject: [PATCH 30/32] remove id

---
 packages/react/src/components/form/Search/Search.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/form/Search/Search.stories.tsx b/packages/react/src/components/form/Search/Search.stories.tsx
index 793c2fb392..7c44ed5ccb 100644
--- a/packages/react/src/components/form/Search/Search.stories.tsx
+++ b/packages/react/src/components/form/Search/Search.stories.tsx
@@ -71,7 +71,7 @@ export const WithLabel: StoryFn<typeof Search> = () => (
   <Field>
     <Label>Søk etter katter</Label>
     <Search>
-      <Search.Input name='cat-search' id='cat-search' />
+      <Search.Input name='cat-search' />
       <Search.Clear />
       <Search.Button />
     </Search>

From f16b7a57354310535eed61992b961c0cbc3bbdeb Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Tue, 5 Nov 2024 09:51:57 +0100
Subject: [PATCH 31/32] css

---
 packages/css/search.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index a041fef8c0..c7e530d841 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -14,7 +14,7 @@
   position: relative;
 
   /* Add magnifier icon when no submit button is present */
-  &:not(:has(button[type='submit'], button[type='button'])) {
+  &:not(:has(button[type='submit'], button[type='button'], button:not([type]))) {
     & input {
       padding-inline-start: calc(var(--dsc-search-icon-size) + calc(var(--dsc-search-padding-inline) * 2));
     }
@@ -28,7 +28,7 @@
   }
 
   /* Render magnifier icon when no submit button, or submit button is empty */
-  &:not(:has(button:not([type='reset'])))::before,
+  &:not(:has(button:not([type='reset']), button:not([type])))::before,
   & button[type='submit']:empty::before,
   & button[type='button']:empty::before {
     background: currentcolor;

From ce2587cc323b4531fed7224ea5438cc299a6db47 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Tue, 5 Nov 2024 10:22:08 +0100
Subject: [PATCH 32/32] selectors, again

---
 packages/css/search.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/css/search.css b/packages/css/search.css
index c7e530d841..88d9f2e86e 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -14,7 +14,7 @@
   position: relative;
 
   /* Add magnifier icon when no submit button is present */
-  &:not(:has(button[type='submit'], button[type='button'], button:not([type]))) {
+  &:not(:has(button:not([type='reset']))) {
     & input {
       padding-inline-start: calc(var(--dsc-search-icon-size) + calc(var(--dsc-search-padding-inline) * 2));
     }
@@ -28,7 +28,7 @@
   }
 
   /* Render magnifier icon when no submit button, or submit button is empty */
-  &:not(:has(button:not([type='reset']), button:not([type])))::before,
+  &:not(:has(button:not([type='reset'])))::before,
   & button[type='submit']:empty::before,
   & button[type='button']:empty::before {
     background: currentcolor;