From 8154fb966a589fabd15280ab7a9be50d425998ea Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 23 Jun 2025 19:05:26 +0100
Subject: [PATCH] Add report + export

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/dark-cougars-go.md                     |  5 +++++
 packages/canon/report.api.md                      | 15 +++++++++++++++
 .../src/components/SearchField/SearchField.tsx    | 12 ------------
 packages/canon/src/index.ts                       |  1 +
 4 files changed, 21 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/dark-cougars-go.md

diff --git a/.changeset/dark-cougars-go.md b/.changeset/dark-cougars-go.md
new file mode 100644
index 0000000000..f835dd2658
--- /dev/null
+++ b/.changeset/dark-cougars-go.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add new SearchField component in Canon
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 1b1e465a61..7ec51de753 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -27,6 +27,7 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import type { RemixiconComponentType } from '@remixicon/react';
 import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area';
+import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components';
 import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
 import { Table as Table_2 } from '@tanstack/react-table';
 import { Tabs as Tabs_2 } from '@base-ui-components/react/tabs';
@@ -1101,6 +1102,20 @@ export const ScrollArea: {
   >;
 };
 
+// @public (undocumented)
+export const SearchField: ForwardRefExoticComponent<
+  SearchFieldProps & RefAttributes<HTMLDivElement>
+>;
+
+// @public (undocumented)
+export interface SearchFieldProps
+  extends SearchFieldProps_2,
+    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+  icon?: ReactNode | false;
+  placeholder?: string;
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+}
+
 // @public (undocumented)
 export const Select: ForwardRefExoticComponent<
   SelectProps & RefAttributes<HTMLDivElement>
diff --git a/packages/canon/src/components/SearchField/SearchField.tsx b/packages/canon/src/components/SearchField/SearchField.tsx
index c04c99571e..5b25b6fb99 100644
--- a/packages/canon/src/components/SearchField/SearchField.tsx
+++ b/packages/canon/src/components/SearchField/SearchField.tsx
@@ -20,8 +20,6 @@ import {
   SearchField as AriaSearchField,
   FieldError,
   Button,
-  Label,
-  Text,
 } from 'react-aria-components';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';
@@ -62,16 +60,6 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
     const secondaryLabelText =
       secondaryLabel || (isRequired ? 'Required' : null);
 
-    // return (
-    //   <AriaSearchField>
-    //     <Label />
-    //     <Input />
-    //     <Button />
-    //     <Text slot="description" />
-    //     <FieldError />
-    //   </AriaSearchField>
-    // );
-
     return (
       <AriaSearchField
         className={clsx('canon-TextField', 'canon-SearchField', className)}
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index cc540d1bb7..28525f7468 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -48,6 +48,7 @@ export * from './components/TextField';
 export * from './components/Tooltip';
 export * from './components/Menu';
 export * from './components/ScrollArea';
+export * from './components/SearchField';
 export * from './components/Link';
 export * from './components/Select';
 export * from './components/Switch';