internal: add Field primitive (#3663)

aws-amplify · Apr 5, 2023 · 7475161 · 7475161
1 parent 579ace5
commit 7475161
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 13 deletions.
diff --git a/.changeset/small-buses-dance.md b/.changeset/small-buses-dance.md
@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+Adding an internal Field primitive
diff --git a/docs/tests/__snapshots__/cssvars-table.test.ts.snap b/docs/tests/__snapshots__/cssvars-table.test.ts.snap
@@ -1878,6 +1878,10 @@ exports[`CSS Variables Table 1`] = `
         \\"variable\\": \\"--amplify-components-expander-width\\",
         \\"value\\": \\"100%\\"
     },
+    {
+        \\"variable\\": \\"--amplify-components-field-flex-direction\\",
+        \\"value\\": \\"column\\"
+    },
     {
         \\"variable\\": \\"--amplify-components-field-font-size\\",
         \\"value\\": \\"var(--amplify-font-sizes-medium)\\"

diff --git a/examples/next/pages/ui/components/storage/storage-manager/index.page.tsx b/examples/next/pages/ui/components/storage/storage-manager/index.page.tsx
@@ -1,19 +1,28 @@
 import { Amplify } from 'aws-amplify';
 import { withAuthenticator } from '@aws-amplify/ui-react';
+import { Field } from '@aws-amplify/ui-react/internal';
 import { StorageManager } from '@aws-amplify/ui-react-storage';
 import '@aws-amplify/ui-react/styles.css';
 import awsExports from './aws-exports';
 Amplify.configure(awsExports);
 
 export function StorageManagerExample() {
   return (
-    <StorageManager
-      acceptedFileTypes={['image/*']}
-      accessLevel="private"
-      maxFileCount={3}
-      isResumable
-      showThumbnails={true}
-    />
+    <Field
+      label="Images"
+      isReadOnly={false}
+      isRequired={false}
+      errorMessage={'error'}
+      hasError={false}
+    >
+      <StorageManager
+        acceptedFileTypes={['image/*']}
+        accessLevel="private"
+        maxFileCount={3}
+        isResumable
+        showThumbnails={true}
+      />
+    </Field>
   );
 }
 export default withAuthenticator(StorageManagerExample);
diff --git a/packages/react/__tests__/__snapshots__/exports.ts.snap b/packages/react/__tests__/__snapshots__/exports.ts.snap
@@ -87,6 +87,7 @@ Array [
 
 exports[`@aws-amplify/ui-react/internal exports should match snapshot 1`] = `
 Array [
+  "Field",
   "IconAdd",
   "IconCheck",
   "IconCheckCircle",

diff --git a/packages/react/src/internal.ts b/packages/react/src/internal.ts
@@ -29,4 +29,6 @@ export {
   mergeVariantsAndOverrides,
 } from './studio';
 
+export { Field } from './primitives/Field';
+
 export { PrimitiveCatalog } from './PrimitiveCatalog';
diff --git a/packages/react/src/primitives/Field/Field.tsx b/packages/react/src/primitives/Field/Field.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {
+  Primitive,
+  FlexContainerStyleProps,
+  ViewProps,
+  InputProps,
+  FieldProps,
+} from '../types';
+import { classNameModifier } from '../shared/utils';
+import { ComponentClassNames } from '../shared/constants';
+import { Flex } from '../Flex';
+import { FieldDescription } from './FieldDescription';
+import { FieldErrorMessage } from './FieldErrorMessage';
+import { Label } from '../Label';
+
+interface FieldPrimitiveProps
+  extends FieldProps,
+    InputProps,
+    FlexContainerStyleProps,
+    ViewProps {}
+
+const FieldPrimitive: Primitive<FieldPrimitiveProps, typeof Flex> = (
+  props,
+  ref
+) => {
+  const {
+    className,
+    size,
+    testId,
+    children,
+    label,
+    labelHidden,
+    errorMessage,
+    hasError,
+    descriptiveText,
+    ...rest
+  } = props;
+
+  return (
+    <Flex
+      className={classNames(
+        ComponentClassNames.Field,
+        classNameModifier(ComponentClassNames.Field, size),
+        className
+      )}
+      data-size={size}
+      testId={testId}
+      ref={ref}
+      {...rest}
+    >
+      {label ? <Label visuallyHidden={labelHidden}>{label}</Label> : null}
+      {descriptiveText ? (
+        <FieldDescription labelHidden={labelHidden}>
+          {descriptiveText}
+        </FieldDescription>
+      ) : null}
+      {children}
+      {errorMessage ? (
+        <FieldErrorMessage hasError={hasError} errorMessage={errorMessage} />
+      ) : null}
+    </Flex>
+  );
+};
+
+export const Field = React.forwardRef(FieldPrimitive);
+
+Field.displayName = 'Field';
diff --git a/packages/react/src/primitives/Field/index.ts b/packages/react/src/primitives/Field/index.ts
@@ -1,3 +1,4 @@
 export { FieldClearButton } from './FieldClearButton';
 export { FieldDescription } from './FieldDescription';
 export { FieldErrorMessage } from './FieldErrorMessage';
+export { Field } from './Field';
diff --git a/packages/ui/src/theme/__tests__/defaultTheme.test.ts b/packages/ui/src/theme/__tests__/defaultTheme.test.ts
@@ -368,6 +368,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-expander-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
         --amplify-components-field-gap: var(--amplify-space-xs);
         --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
+        --amplify-components-field-flex-direction: column;
         --amplify-components-field-small-gap: var(--amplify-space-xxxs);
         --amplify-components-field-small-font-size: var(--amplify-font-sizes-small);
         --amplify-components-field-large-gap: var(--amplify-space-small);

diff --git a/packages/ui/src/theme/__tests__/overrides.test.ts b/packages/ui/src/theme/__tests__/overrides.test.ts
@@ -402,6 +402,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-expander-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
         --amplify-components-field-gap: var(--amplify-space-xs);
         --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
+        --amplify-components-field-flex-direction: column;
         --amplify-components-field-small-gap: var(--amplify-space-xxxs);
         --amplify-components-field-small-font-size: var(--amplify-font-sizes-small);
         --amplify-components-field-large-gap: var(--amplify-space-small);

diff --git a/packages/ui/src/theme/css/component/field.scss b/packages/ui/src/theme/css/component/field.scss
@@ -1,6 +1,8 @@
 .amplify-field {
   font-size: var(--amplify-components-field-font-size);
   gap: var(--amplify-components-field-gap);
+  flex-direction: var(--amplify-components-field-flex-direction);
+
   &--small {
     font-size: var(--amplify-components-field-small-font-size);
     gap: var(--amplify-components-field-small-gap);

diff --git a/packages/ui/src/theme/css/component/textField.scss b/packages/ui/src/theme/css/component/textField.scss
@@ -1,5 +1,4 @@
 .amplify-textfield {
-  flex-direction: column;
   --amplify-components-fieldcontrol-color: var(
     --amplify-components-textfield-color
   );

diff --git a/packages/ui/src/theme/tokens/components/field.ts b/packages/ui/src/theme/tokens/components/field.ts
@@ -6,16 +6,18 @@ type FieldSizeTokens<Output> = DesignTokenProperties<
 >;
 
 export type FieldTokens<Output extends OutputVariantKey> =
-  FieldSizeTokens<Output> & {
-    small?: FieldSizeTokens<Output>;
-    large?: FieldSizeTokens<Output>;
-    label?: DesignTokenProperties<'color', Output>;
-  };
+  FieldSizeTokens<Output> &
+    DesignTokenProperties<'flexDirection', Output> & {
+      small?: FieldSizeTokens<Output>;
+      large?: FieldSizeTokens<Output>;
+      label?: DesignTokenProperties<'color', Output>;
+    };
 
 export const field: Required<FieldTokens<'default'>> = {
   // default styles
   gap: { value: '{space.xs.value}' },
   fontSize: { value: '{fontSizes.medium.value}' },
+  flexDirection: { value: 'column' },
 
   // Adjust base fontSize and gap for small and large sizes
   small: {