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>
2025-06-23 14:37:16 +01:00
parent c70cafbf0a
commit 667b951466
5 changed files with 15 additions and 2 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Added placeholder prop to TextField component.
@@ -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'>>;
 }

@@ -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" />,
  },
 };
@@ -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" />
@@ -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;
 }