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 { icon?: ReactNode; + placeholder?: string; size?: 'small' | 'medium' | Partial>; } 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; 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: , }, }; 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( isRequired, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, + placeholder, ...rest } = props; @@ -84,6 +85,7 @@ export const TextField = forwardRef( 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>; + + /** + * Text to display in the input when it has no value + */ + placeholder?: string; }