From 667b9514666bbbf0d4a0253f16ed94ef07ce6506 Mon Sep 17 00:00:00 2001
From: James Brooks <52410024+jabrks@users.noreply.github.com>
Date: Mon, 23 Jun 2025 14:37:16 +0100
Subject: [PATCH] Canon - Placeholder support for TextField (#30342)

* Canon - Placeholder support for TextField

Signed-off-by: James Brooks <jamesbrooks@spotify.com>

* Update some stories

Signed-off-by: James Brooks <jamesbrooks@spotify.com>

---------

Signed-off-by: James Brooks <jamesbrooks@spotify.com>
---
 .changeset/silent-vans-tie.md                                | 5 +++++
 packages/canon/report.api.md                                 | 1 +
 .../canon/src/components/TextField/TextField.stories.tsx     | 4 ++--
 packages/canon/src/components/TextField/TextField.tsx        | 2 ++
 packages/canon/src/components/TextField/types.ts             | 5 +++++
 5 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/silent-vans-tie.md

diff --git a/.changeset/silent-vans-tie.md b/.changeset/silent-vans-tie.md
new file mode 100644
index 0000000000..b81564be7e
--- /dev/null
+++ b/.changeset/silent-vans-tie.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Added placeholder prop to TextField component.
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index abe30ea93b..bdab503f61 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -1299,6 +1299,7 @@ export interface TextFieldProps
   extends TextFieldProps_2,
     Omit<FieldLabelProps, 'htmlFor' | 'id'> {
   icon?: ReactNode;
+  placeholder?: string;
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
 }
 
diff --git a/packages/canon/src/components/TextField/TextField.stories.tsx b/packages/canon/src/components/TextField/TextField.stories.tsx
index e07aa6ea05..157590ae11 100644
--- a/packages/canon/src/components/TextField/TextField.stories.tsx
+++ b/packages/canon/src/components/TextField/TextField.stories.tsx
@@ -40,7 +40,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     name: 'url',
-    defaultValue: 'Enter a URL',
+    placeholder: 'Enter a URL',
     style: {
       maxWidth: '300px',
     },
@@ -97,7 +97,7 @@ export const Disabled: Story = {
 export const WithIcon: Story = {
   args: {
     ...Default.args,
-    defaultValue: 'Search...',
+    placeholder: 'Search...',
     icon: <Icon name="search" />,
   },
 };
diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx
index 444e76e983..edb3b1dc29 100644
--- a/packages/canon/src/components/TextField/TextField.tsx
+++ b/packages/canon/src/components/TextField/TextField.tsx
@@ -39,6 +39,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
       isRequired,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      placeholder,
       ...rest
     } = props;
 
@@ -84,6 +85,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
           <Input
             className="canon-TextFieldInput"
             {...(icon && { 'data-icon': true })}
+            placeholder={placeholder}
           />
         </div>
         <FieldError className="canon-TextFieldError" />
diff --git a/packages/canon/src/components/TextField/types.ts b/packages/canon/src/components/TextField/types.ts
index 92fa077389..75a5c68aaa 100644
--- a/packages/canon/src/components/TextField/types.ts
+++ b/packages/canon/src/components/TextField/types.ts
@@ -33,4 +33,9 @@ export interface TextFieldProps
    * @defaultValue 'medium'
    */
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+
+  /**
+   * Text to display in the input when it has no value
+   */
+  placeholder?: string;
 }