feat: padding

Author: YuJianghao

packages/carbon/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -71,7 +71,7 @@ export default function ArrayFieldTemplate<
         uiSchema={uiSchema}
         registry={registry}
       />
-      <LayerBackground>
+      <LayerBackground padding={carbonOptions.padding}>
         <Stack gap={carbonOptions.gap}>
           {items.length > 0 && (
             <Stack gap={carbonOptions.gap} className='array-item-list'>

packages/carbon/src/MultiSchemaField/MultiSchemaField.tsx

@@ -18,6 +18,7 @@ import {
 import { LayerBackground } from '../components/Layer';
 import { FormGroup } from '@carbon/react';
 import { LabelValue } from '../components/LabelValue';
+import getCarbonOptions from '../utils';
 
 /** Type used for the state of the `AnyOfField` component */
 type AnyOfFieldState<S extends StrictRJSFSchema = RJSFSchema> = {
@@ -165,6 +166,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       title = schema.title,
       ...uiOptions
     } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+    const carbonOptions = getCarbonOptions<T, S, F>(formContext || ({} as F), uiOptions);
     const Widget = getWidget<T, S, F>({ type: 'number' }, widget, widgets);
     const rawErrors = get(errorSchema, ERRORS_KEY, []);
     const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
@@ -197,7 +199,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           </label>
         }
       >
-        <LayerBackground ignoreFirstLayer={false}>
+        <LayerBackground ignoreFirstLayer={false} padding={carbonOptions.padding}>
           <div className='panel panel-default panel-body'>
             <div className='form-group'>
               <Widget

packages/carbon/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -82,7 +82,7 @@ export default function ObjectFieldTemplate<
       {!depth && (title || description) && (
         <div style={{ height: `calc(${spacing[carbonOptions.gap - 1]} - 0.5rem)` }} />
       )}
-      <LayerBackground>
+      <LayerBackground padding={carbonOptions.padding}>
         <Stack gap={carbonOptions.gap}>
           {properties.length > 0 && <Stack gap={carbonOptions.gap}>{properties.map((item) => item.content)}</Stack>}
           {canExpand(schema, uiSchema, formData) && (

packages/carbon/src/TitleField/TitleField.tsx

@@ -1,5 +1,6 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
 import { LabelValue } from '../components/LabelValue';
+import { FormGroup } from '@carbon/react';
 
 /** Implement `TitleFieldTemplate`
  */
@@ -9,13 +10,10 @@ export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSch
   required,
 }: TitleFieldProps<T, S, F>) {
   return (
-    <div
-      id={id}
-      style={{
-        marginBlockEnd: '0.5rem',
-      }}
-    >
-      <LabelValue label={title} required={required} hide={false} />
+    <div className='title-field'>
+      <FormGroup legendId={id} legendText={<LabelValue label={title} required={required} hide={false} />}>
+        {null}
+      </FormGroup>
     </div>
   );
 }

packages/carbon/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -54,7 +54,7 @@ export default function WrapIfAdditionalTemplate<
       <FormGroup legendText={<LabelValue hide={false} label={label} required={required} />}>
         <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center' }}>
           <div style={{ flex: 1 }}>
-            <LayerBackground>
+            <LayerBackground padding={carbonOptions.padding}>
               <Stack gap={carbonOptions.gap}>
                 <TextInput
                   labelText={keyLabel}

packages/carbon/src/components/Layer.tsx

@@ -2,6 +2,8 @@
 import { Layer as CarbonLayer } from '@carbon/react';
 import { ReactNode } from 'react';
 import { NestDepth, useNestDepth } from '../contexts';
+// @ts-expect-error miss types for `@carbon/layout`
+import { spacing } from '@carbon/layout';
 
 /** The `LayerBackground` render a background for [a carbon layer](https://carbondesignsystem.com/guidelines/color/usage#layering-tokens)
  *
@@ -10,9 +12,11 @@ import { NestDepth, useNestDepth } from '../contexts';
 export function LayerBackground({
   children,
   ignoreFirstLayer = true,
+  padding,
 }: {
   children: ReactNode;
   ignoreFirstLayer?: boolean;
+  padding?: number;
 }) {
   const nestDepth = useNestDepth();
   const content = <NestDepth>{children}</NestDepth>;
@@ -25,26 +29,26 @@ export function LayerBackground({
       return (
         // To make the first layer be `gray`, we need to nest it in another layer
         <NestDepth>
-          <Background>{content}</Background>
+          <Background padding={padding}>{content}</Background>
         </NestDepth>
       );
     }
   }
 
   // oneOf and anyOf need to show the first layer
 
-  return <Background>{content}</Background>;
+  return <Background padding={padding}>{content}</Background>;
 }
 
 /** Draw layer background
  */
-function Background({ children }: { children: ReactNode }) {
+function Background({ children, padding = 3 }: { children: ReactNode; padding?: number }) {
   const nestDepth = useNestDepth();
   return (
     <CarbonLayer level={1 - (nestDepth % 2)}>
       <div
         style={{
-          padding: '1rem',
+          padding: spacing[padding - 1],
           backgroundColor: 'var(--cds-layer)',
         }}
       >

packages/carbon/src/utils.ts

@@ -7,6 +7,10 @@ export interface CarbonOptions {
    * @see https://carbondesignsystem.com/guidelines/spacing/overview/#spacing-scale
    */
   gap: number;
+  /**Padding in layer background, default to `3` (0.5rem)
+   * @see https://carbondesignsystem.com/guidelines/spacing/overview/#spacing-scale
+   */
+  padding: number;
   /** Size of form item.
    *
    * Note that some of the `@carbon/react` component doesn't support `xl` and will fallback to `lg`
@@ -18,6 +22,7 @@ export interface CarbonOptions {
  */
 const defaultCarbonOptions: CarbonOptions = {
   gap: 7,
+  padding: 3,
 };
 
 /** Get carbon theme options from `formContext` and `ui:carbon` uiSchema options.