Docs password field (#1860)

* update password field

* add setters

* break out password field props

* update passwordfield docs page

* updates to passwordfield docs

* add links.ts body

* updates to passwordfield docs

* add passwordfield themeing section to docs

Co-authored-by: Jacob Logan <[email protected]>

Author: jacoblogan

docs/src/components/ComponentVariableTable.tsx

@@ -46,6 +46,8 @@ export const ComponentVariableTable = ({ componentName }) => {
           </TableRow>
         );
       }
+    } else {
+      return 'No variables available for this component';
     }
     return tableRows;
   }, [componentName]);

docs/src/data/links.ts

@@ -156,7 +156,7 @@ export const inputComponents = [
   {
     href: '/components/passwordfield',
     label: 'Password Field',
-    body: ``,
+    body: `PasswordField allows users to input passwords, featuring full password manager support and an optional show/hide password button for user convenience - Amplify UI`,
     platforms: ['react'],
   },
   {

docs/src/pages/[platform]/components/passwordfield/demo.tsx

@@ -1,134 +1,87 @@
+import { PasswordField, PasswordFieldProps } from '@aws-amplify/ui-react';
 import * as React from 'react';
 
+import { Demo } from '@/components/Demo';
 import {
-  Flex,
-  FlexContainerStyleProps,
-  PasswordField,
-  PasswordFieldProps,
-  TextFieldProps,
-  View,
-} from '@aws-amplify/ui-react';
-
-import { Example } from '@/components/Example';
-import { GetFieldControls } from '../shared/GetFieldControls';
-import { useFlexContainerStyleProps } from '../shared/useFlexContainerStyleProps';
+  filterDemoProps,
+  getDemoProps,
+  objectEntriesToPropString,
+} from '../utils/demoProps';
+import { PasswordFieldPropControls } from './passwordFieldPropControls';
 import { usePasswordFieldProps } from './usePasswordFieldProps';
+import { demoState } from '@/utils/demoState';
+
+export const propsToCode = (props) => {
+  const filteredProps = filterDemoProps(props);
+  return `
+<PasswordField
+${objectEntriesToPropString(Object.entries(filteredProps))}
+/>`;
+};
 
 export const PasswordFieldDemo = () => {
-  const flexStyleProps = useFlexContainerStyleProps({
-    alignItems: '',
-    alignContent: '',
-    direction: 'column',
-    gap: '',
-    justifyContent: '',
-    wrap: 'nowrap',
-  });
-  const textFieldProps = usePasswordFieldProps({
-    autoComplete: 'new-password',
-    defaultValue: '',
-    descriptiveText: 'Please enter password with at least 8 characters',
-    errorMessage: '',
-    hasError: false,
-    inputMode: 'text',
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    label: 'Password',
-    labelHidden: false,
-    name: 'password',
-    placeholder: '',
-    size: '',
-    type: null,
-    value: undefined,
-    variation: '',
-    hideShowPassword: false,
-  });
-  const FlexPropControls = GetFieldControls({
-    typeName: 'Flex',
-    fields: flexStyleProps,
-  });
-  const TextFieldPropControls = GetFieldControls({
-    typeName: 'PasswordField',
-    fields: textFieldProps,
-  });
-  const [
-    [alignItems],
-    [alignContent],
-    [direction],
-    [gap],
-    [justifyContent],
-    [wrap],
-  ] = flexStyleProps;
-  const [
-    [autoComplete],
-    [defaultValue],
-    [descriptiveText],
-    [errorMessage],
-    [hasError],
-    [inputMode],
-    [isDisabled],
-    [isReadOnly],
-    [isRequired],
-    [label],
-    [labelHidden],
-    [name],
-    [placeholder],
-    [size],
-    [type],
-    [value],
-    [variation],
-    [hideShowPassword],
-  ] = textFieldProps;
+  const passwordFieldProps = usePasswordFieldProps(
+    (demoState.get(PasswordField.displayName) as PasswordFieldProps) || {
+      autoComplete: 'new-password',
+      defaultValue: '',
+      descriptiveText: 'Please enter password',
+      errorMessage: '',
+      hasError: false,
+      hideShowPassword: false,
+      isDisabled: false,
+      isReadOnly: false,
+      isRequired: false,
+      label: 'Password',
+      labelHidden: false,
+      name: 'password',
+      placeholder: '',
+      size: 'small',
+      value: '',
+      variation: null,
+    }
+  );
+  const demoProps = [
+    'autoComplete',
+    'defaultValue',
+    'descriptiveText',
+    'errorMessage',
+    'hasError',
+    'hideShowPassword',
+    'isDisabled',
+    'isReadOnly',
+    'isRequired',
+    'label',
+    'labelHidden',
+    'name',
+    'placeholder',
+    'size',
+    'value',
+    'variation',
+  ];
+  const passwordFieldDemoProps = getDemoProps(passwordFieldProps, demoProps);
   return (
-    <View width="100%">
-      {TextFieldPropControls}
-      {FlexPropControls}
-      <Example>
-        <View maxWidth="500px" padding="2rem">
-          <Flex gap="2rem" direction="column">
-            <form>
-              <input
-                autoComplete="username"
-                name="username"
-                defaultValue="[email protected]"
-                type="hidden"
-              />
-              <PasswordField
-                alignContent={
-                  alignContent as FlexContainerStyleProps['alignContent']
-                }
-                alignItems={alignItems as FlexContainerStyleProps['alignItems']}
-                autoComplete={autoComplete as TextFieldProps['autoComplete']}
-                descriptiveText={
-                  descriptiveText as TextFieldProps['descriptiveText']
-                }
-                defaultValue={defaultValue as TextFieldProps['defaultValue']}
-                direction={direction as FlexContainerStyleProps['direction']}
-                errorMessage={errorMessage as TextFieldProps['errorMessage']}
-                gap={gap as FlexContainerStyleProps['gap']}
-                hasError={hasError as unknown as boolean}
-                inputMode={inputMode as TextFieldProps['inputMode']}
-                isDisabled={isDisabled as unknown as boolean}
-                isReadOnly={isReadOnly as unknown as boolean}
-                isRequired={isRequired as unknown as boolean}
-                justifyContent={
-                  justifyContent as FlexContainerStyleProps['justifyContent']
-                }
-                label={label as TextFieldProps['label']}
-                labelHidden={labelHidden as unknown as boolean}
-                name={name as TextFieldProps['name']}
-                placeholder={placeholder as TextFieldProps['placeholder']}
-                size={size as TextFieldProps['size']}
-                variation={variation as TextFieldProps['variation']}
-                wrap={wrap as FlexContainerStyleProps['wrap']}
-                hideShowPassword={
-                  hideShowPassword as unknown as PasswordFieldProps['hideShowPassword']
-                }
-              />
-            </form>
-          </Flex>
-        </View>
-      </Example>
-    </View>
+    <Demo
+      code={propsToCode(passwordFieldDemoProps)}
+      propControls={<PasswordFieldPropControls {...passwordFieldProps} />}
+    >
+      <PasswordField
+        autoComplete={passwordFieldProps.autoComplete}
+        descriptiveText={passwordFieldProps.descriptiveText}
+        defaultValue={passwordFieldProps.defaultValue}
+        errorMessage={passwordFieldProps.errorMessage}
+        hasError={passwordFieldProps.hasError}
+        hideShowPassword={passwordFieldProps.hideShowPassword}
+        isDisabled={passwordFieldProps.isDisabled}
+        isReadOnly={passwordFieldProps.isReadOnly}
+        isRequired={passwordFieldProps.isRequired}
+        label={passwordFieldProps.label}
+        labelHidden={passwordFieldProps.labelHidden}
+        name={passwordFieldProps.name}
+        placeholder={passwordFieldProps.placeholder}
+        size={passwordFieldProps.size}
+        value={passwordFieldProps.value || null}
+        variation={passwordFieldProps.variation}
+      />
+    </Demo>
   );
 };