From 747516159d504b551dab09cbe8f214fa7b4505df Mon Sep 17 00:00:00 2001 From: Danny Banks Date: Wed, 5 Apr 2023 10:27:05 -0700 Subject: [PATCH] internal: add Field primitive (#3663) --- .changeset/small-buses-dance.md | 6 ++ .../__snapshots__/cssvars-table.test.ts.snap | 4 ++ .../storage/storage-manager/index.page.tsx | 23 +++++-- .../__tests__/__snapshots__/exports.ts.snap | 1 + packages/react/src/internal.ts | 2 + packages/react/src/primitives/Field/Field.tsx | 68 +++++++++++++++++++ packages/react/src/primitives/Field/index.ts | 1 + .../src/theme/__tests__/defaultTheme.test.ts | 1 + .../ui/src/theme/__tests__/overrides.test.ts | 1 + .../ui/src/theme/css/component/field.scss | 2 + .../ui/src/theme/css/component/textField.scss | 1 - .../ui/src/theme/tokens/components/field.ts | 12 ++-- 12 files changed, 109 insertions(+), 13 deletions(-) create mode 100644 .changeset/small-buses-dance.md create mode 100644 packages/react/src/primitives/Field/Field.tsx diff --git a/.changeset/small-buses-dance.md b/.changeset/small-buses-dance.md new file mode 100644 index 00000000000..c2b4dd42744 --- /dev/null +++ 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 index cba862ef0e0..0cdf71965c2 100644 --- 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 index af66baf9909..92b6fa676d2 100644 --- 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,5 +1,6 @@ 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'; @@ -7,13 +8,21 @@ Amplify.configure(awsExports); export function StorageManagerExample() { return ( - + + + ); } export default withAuthenticator(StorageManagerExample); diff --git a/packages/react/__tests__/__snapshots__/exports.ts.snap b/packages/react/__tests__/__snapshots__/exports.ts.snap index 8b7c2f3975d..63a170eef08 100644 --- 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 index d461c155ad4..5b4c9233b3c 100644 --- 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 new file mode 100644 index 00000000000..89d85da3073 --- /dev/null +++ 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 = ( + props, + ref +) => { + const { + className, + size, + testId, + children, + label, + labelHidden, + errorMessage, + hasError, + descriptiveText, + ...rest + } = props; + + return ( + + {label ? : null} + {descriptiveText ? ( + + {descriptiveText} + + ) : null} + {children} + {errorMessage ? ( + + ) : null} + + ); +}; + +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 index 68437b94332..626f8905043 100644 --- 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 index 4af1a30f63e..ef6aab4e6eb 100644 --- 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 index b312e20b1a5..b7c5585842f 100644 --- 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 index 39207fd2786..b5f5f0bde02 100644 --- 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 index 20ad155de49..fad4b4afd34 100644 --- 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 index 77756907f09..bb1b4cb31d2 100644 --- a/packages/ui/src/theme/tokens/components/field.ts +++ b/packages/ui/src/theme/tokens/components/field.ts @@ -6,16 +6,18 @@ type FieldSizeTokens = DesignTokenProperties< >; export type FieldTokens = - FieldSizeTokens & { - small?: FieldSizeTokens; - large?: FieldSizeTokens; - label?: DesignTokenProperties<'color', Output>; - }; + FieldSizeTokens & + DesignTokenProperties<'flexDirection', Output> & { + small?: FieldSizeTokens; + large?: FieldSizeTokens; + label?: DesignTokenProperties<'color', Output>; + }; export const field: Required> = { // 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: {