add page to docs-ui, fix aria labels, compatibility with one password icons, create custom button

Signed-off-by: Hermione Bird <hermioneb@spotify.com>

docs-ui/src/app/page.mdx

@@ -85,6 +85,11 @@ building it incrementally with not conflict with the existing theming system.
     description="A search field component to help you search for items."
     href="/components/search-field"
   />
+  <ComponentCard
+    title="PasswordField"
+    description="A password field component to help you input passwords."
+    href="/components/password-field"
+  />
   <ComponentCard
     title="Select"
     description="A select component to help you select items."

docs-ui/src/content/components/password-field.mdx

@@ -0,0 +1,64 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { PasswordFieldSnippet } from '@/snippets/stories-snippets';
+import {
+  inputPropDefs,
+  passwordFieldUsageSnippet,
+  passwordFieldDefaultSnippet,
+  passwordFieldSizesSnippet,
+  passwordFieldDescriptionSnippet,
+} from './password-field.props';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
+
+<PageTitle
+  title="PasswordField"
+  description="A password field component for your forms."
+/>
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<PasswordFieldSnippet story="WithLabel" />}
+  code={passwordFieldDefaultSnippet}
+/>
+
+## Usage
+
+<CodeBlock code={passwordFieldUsageSnippet} />
+
+## API reference
+
+<PropsTable data={inputPropDefs} />
+
+## Examples
+
+### Sizes
+
+We support two different sizes: `small`, `medium`.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<PasswordFieldSnippet story="Sizes" />}
+  code={passwordFieldSizesSnippet}
+/>
+
+### With description
+
+Here's a simple PasswordField with a description.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<PasswordFieldSnippet story="WithDescription" />}
+  code={passwordFieldDescriptionSnippet}
+/>
+
+<Theming component="PasswordField" />
+
+<ChangelogComponent component="password-field" />

docs-ui/src/content/components/password-field.props.ts

@@ -0,0 +1,43 @@
+import {
+  classNamePropDefs,
+  stylePropDefs,
+  type PropDef,
+} from '@/utils/propDefs';
+
+export const inputPropDefs: Record<string, PropDef> = {
+  size: {
+    type: 'enum',
+    values: ['small', 'medium'],
+    default: 'small',
+    responsive: true,
+  },
+  label: {
+    type: 'string',
+  },
+  icon: {
+    type: 'enum',
+    values: ['ReactNode'],
+  },
+  description: {
+    type: 'string',
+  },
+  name: {
+    type: 'string',
+    required: true,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const passwordFieldUsageSnippet = `import { PasswordField } from '@backstage/ui';
+
+<PasswordField />`;
+
+export const passwordFieldDefaultSnippet = `<PasswordField label="Label" placeholder="Enter a secret" />`;
+
+export const passwordFieldSizesSnippet = `<Flex direction="row" gap="4">
+  <PasswordField size="small" placeholder="Small" icon={<Icon name="sparkling" />} />
+  <PasswordField size="medium" placeholder="Medium" icon={<Icon name="sparkling" />} />
+</Flex>`;
+
+export const passwordFieldDescriptionSnippet = `<PasswordField label="Label" description="Description" placeholder="Enter a secret" />`;

docs-ui/src/snippets/stories-snippets.tsx

@@ -28,6 +28,7 @@ import * as HeaderStories from '../../../packages/ui/src/components/Header/Heade
 import * as HeaderPageStories from '../../../packages/ui/src/components/HeaderPage/HeaderPage.stories';
 import * as TableStories from '../../../packages/ui/src/components/Table/Table.stories';
 import * as TagGroupStories from '../../../packages/ui/src/components/TagGroup/TagGroup.stories';
+import * as PasswordFieldStories from '../../../packages/ui/src/components/PasswordField/PasswordField.stories';
 
 // Helper function to create snippet components
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,6 +54,8 @@ export const ContainerSnippet = createSnippetComponent(ContainerStories);
 export const GridSnippet = createSnippetComponent(GridStories);
 export const IconSnippet = createSnippetComponent(IconStories);
 export const TextFieldSnippet = createSnippetComponent(TextFieldStories);
+export const PasswordFieldSnippet =
+  createSnippetComponent(PasswordFieldStories);
 export const TextSnippet = createSnippetComponent(TextStories);
 export const FlexSnippet = createSnippetComponent(FlexStories);
 export const SelectSnippet = createSnippetComponent(SelectStories);

docs-ui/src/utils/changelog.ts

@@ -25,7 +25,8 @@ export type Component =
   | 'radio-group'
   | 'card'
   | 'skeleton'
-  | 'header';
+  | 'header'
+  | 'passwordfield';
 
 export type Version = `${number}.${number}.${number}`;
 

docs-ui/src/utils/data.ts

@@ -126,6 +126,11 @@ export const components: Page[] = [
     slug: 'menu',
     status: 'alpha',
   },
+  {
+    title: 'PasswordField',
+    slug: 'password-field',
+    status: 'alpha',
+  },
   {
     title: 'RadioGroup',
     slug: 'radio-group',