Merge pull request #2650 from contentful/feat/high-density-form-control

feat(formControl): adds density support for Form control elements

.changeset/big-grapes-poke.md

@@ -0,0 +1,5 @@
+---
+'@contentful/f36-forms': patch
+---
+
+Add high-density support to FormControl components (FormLabel, HelpText and ValidationMessage).

packages/components/forms/package.json

@@ -7,7 +7,6 @@
   },
   "dependencies": {
     "@contentful/f36-core": "^4.58.0",
-    "@contentful/f36-density-container": "^4.0.0-alpha.3",
     "@contentful/f36-icons": "^4.27.0",
     "@contentful/f36-tokens": "^4.0.3",
     "@contentful/f36-typography": "^4.58.0",

packages/components/forms/src/FormControl/README.mdx

@@ -90,3 +90,7 @@ To uphold a consistent look and experience for your application, we recommend fo
 ### ValidationMessage
 
 <PropsTable of="ValidationMessage" />
+
+## Density support
+
+This component supports multiple densities thanks to the [useDensity](/hooks/use-density) hook and automatically adjusts its styling for each density when wrapped with the [Density Container](/components/density-container).

packages/components/forms/src/FormLabel/FormLabel.tsx

@@ -10,6 +10,7 @@ import type {
   ExpandProps,
 } from '@contentful/f36-core';
 import { Text } from '@contentful/f36-typography';
+import { useDensity } from '@contentful/f36-utils';
 
 export interface FormLabelInternalProps extends CommonProps, MarginProps {
   /**
@@ -56,6 +57,7 @@ function _FormLabel<
   }: FormLabelProps<E>,
   forwardedRef: React.Ref<HTMLLabelElement>,
 ) {
+  const density = useDensity();
   const styles = getFormLabelStyles();
   const formControlProps = useFormControl({ isRequired });
 
@@ -81,6 +83,8 @@ function _FormLabel<
       className={cx(styles.root, className)}
       ref={forwardedRef}
       testId={testId}
+      fontSize={density === 'high' ? 'fontSizeS' : 'fontSizeM'}
+      lineHeight={density === 'high' ? 'lineHeightS' : 'lineHeightM'}
     >
       {children}
       {formControlProps.isRequired && (

packages/components/forms/src/HelpText/HelpText.tsx

@@ -7,6 +7,7 @@ import type {
 } from '@contentful/f36-core';
 import { Text } from '@contentful/f36-typography';
 import { useFormControl } from '../FormControl/FormControlContext';
+import { useDensity } from '@contentful/f36-utils';
 
 export interface HelpTextInternalProps extends CommonProps, MarginProps {
   children: React.ReactNode;
@@ -23,11 +24,13 @@ export const HelpText = React.forwardRef<
   ExpandProps<HelpTextProps>
 >(({ testId = 'cf-ui-help-text', ...otherProps }, ref) => {
   const { id } = useFormControl({});
+  const density = useDensity();
   return (
     <Text
       as="p"
       fontColor="gray500"
-      fontSize="fontSizeM"
+      fontSize={density === 'high' ? 'fontSizeS' : 'fontSizeM'}
+      lineHeight={density === 'high' ? 'lineHeightS' : 'lineHeightM'}
       testId={testId}
       id={`${id}-helptext`}
       marginTop="spacingXs"

packages/components/forms/src/ValidationMessage/ValidationMessage.tsx

@@ -9,6 +9,7 @@ import {
 import { ErrorCircleOutlineIcon } from '@contentful/f36-icons';
 import { Text } from '@contentful/f36-typography';
 import { useFormControl } from '../FormControl/FormControlContext';
+import { useDensity } from '@contentful/f36-utils';
 
 export interface ValidationMessageInternalProps
   extends CommonProps,
@@ -26,6 +27,8 @@ export const ValidationMessage = forwardRef<
   ExpandProps<ValidationMessageProps>
 >(({ children, testId = 'cf-ui-validation-message', ...otherProps }, ref) => {
   const { id } = useFormControl({});
+  const density = useDensity();
+
   return (
     <Flex
       marginTop="spacing2Xs"
@@ -36,14 +39,19 @@ export const ValidationMessage = forwardRef<
       id={id ? `${id}-validation` : undefined}
       aria-live="assertive"
     >
-      <Flex marginRight="spacing2Xs">
+      <Flex marginRight={density === 'high' ? 'spacing2Xs' : 'spacingXs'}>
         <ErrorCircleOutlineIcon
-          size="small"
+          size={density === 'high' ? 'tiny' : 'small'}
           variant="negative"
           aria-hidden="true"
         />
       </Flex>
-      <Text as="p" fontColor="red600">
+      <Text
+        as="p"
+        fontColor="red600"
+        fontSize={density === 'high' ? 'fontSizeS' : 'fontSizeM'}
+        lineHeight={density === 'high' ? 'lineHeightS' : 'lineHeightM'}
+      >
         {children}
       </Text>
     </Flex>

packages/components/forms/stories/Checkbox.stories.tsx

@@ -3,7 +3,7 @@ import { SectionHeading } from '@contentful/f36-typography';
 import { Flex } from '@contentful/f36-core';
 import { Checkbox, CheckboxProps } from '../src';
 import { type Density } from '@contentful/f36-utils';
-import { DensityContainer } from '@contentful/f36-density-container';
+import { DensityContainer } from '../../density-container';
 
 export default {
   title: 'Form Elements/Checkbox',

packages/components/forms/stories/FormControl.stories.tsx

@@ -13,6 +13,8 @@ import { Flex, Box } from '@contentful/f36-core';
 import { TextLink } from '@contentful/f36-text-link';
 import { LockIcon } from '@contentful/f36-icons';
 import { Paragraph } from '@contentful/f36-typography';
+import { type Density } from '@contentful/f36-utils';
+import { DensityContainer } from '../../density-container';
 
 export default {
   title: 'Form Elements/FormControl',
@@ -211,3 +213,42 @@ export const WithCustomLogic = (args: FormControlInternalProps) => {
     </FormControl>
   );
 };
+
+export const WithDensitySupport = () => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <>
+      <Flex gap="spacingS">
+        {Densities.map((density) => {
+          return (
+            <DensityContainer
+              key={density.name}
+              density={density.density as Density}
+            >
+              <FormControl isInvalid isRequired>
+                <FormControl.Label>Select Value</FormControl.Label>
+                <Checkbox value="ketchup">Ketchup</Checkbox>
+                <FormControl.HelpText>
+                  Please Select a value
+                </FormControl.HelpText>
+                <FormControl.ValidationMessage>
+                  Error
+                </FormControl.ValidationMessage>
+              </FormControl>
+            </DensityContainer>
+          );
+        })}
+      </Flex>
+    </>
+  );
+};

packages/components/forms/stories/Radio.stories.tsx

@@ -3,7 +3,7 @@ import { SectionHeading } from '@contentful/f36-typography';
 import { Radio, RadioProps } from '../src';
 import { Flex, Box } from '@contentful/f36-core';
 import { type Density } from '@contentful/f36-utils';
-import { DensityContainer } from '@contentful/f36-density-container';
+import { DensityContainer } from '../../density-container';
 
 export default {
   title: 'Form Elements/Radio',

packages/components/forms/stories/ValidationMessage.stories.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { Meta, Story } from '@storybook/react/types-6-0';
+import { type Density } from '@contentful/f36-utils';
+import { DensityContainer } from '../../density-container';
 
 import { ValidationMessage } from '../src';
 import type { ValidationMessageInternalProps } from '../src/ValidationMessage/ValidationMessage';
@@ -26,3 +28,31 @@ export const Default: Story<ValidationMessageInternalProps> = (args) => (
 Default.args = {
   children: 'Validation message',
 };
+
+export const WithDensitySupport = () => {
+  const Densities = [
+    {
+      name: 'Low density',
+      density: 'low',
+    },
+    {
+      name: 'High density',
+      density: 'high',
+    },
+  ];
+
+  return (
+    <>
+      {Densities.map((density) => {
+        return (
+          <DensityContainer
+            key={density.name}
+            density={density.density as Density}
+          >
+            <ValidationMessage>{density.name}</ValidationMessage>
+          </DensityContainer>
+        );
+      })}
+    </>
+  );
+};