chore: more styles

Author: YuJianghao

packages/carbon/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -11,6 +11,9 @@ import {
 } from '@rjsf/utils';
 import { LayerBackground } from '../components/Layer';
 import getCarbonOptions from '../utils';
+import { useNestDepth } from '../contexts';
+// @ts-expect-error miss types for `@carbon/layout`
+import { spacing } from '@carbon/layout';
 
 /** Implement `ArrayFieldTemplate`
  */
@@ -50,6 +53,7 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions
   );
+  const depth = useNestDepth();
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -71,6 +75,10 @@ export default function ArrayFieldTemplate<
         uiSchema={uiSchema}
         registry={registry}
       />
+      {/* If this object is the very top one, add margin after title section */}
+      {!depth && (uiOptions.title || title || uiOptions.description || schema.description) && (
+        <div style={{ height: `calc(${spacing[carbonOptions.gap - 1]} - 0.5rem)` }} />
+      )}
       <LayerBackground padding={carbonOptions.padding}>
         <Stack gap={carbonOptions.gap}>
           {items.length > 0 && (

packages/carbon/src/RangeWidget/RangeWidget.tsx

@@ -38,7 +38,7 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   } = props;
   const inputProps = getInputProps<T, S, F>(schema, type, options);
 
-  const _onChange = (value: string | number) => onChange(value);
+  const _onChange = ({ value }: { value: string | number }) => onChange(value);
   const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) => onBlur(id, value);
   const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement | any>) => onFocus(id, value);
 

packages/carbon/src/TitleField/TitleField.tsx

@@ -1,6 +1,7 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
 import { LabelValue } from '../components/LabelValue';
 import { FormGroup } from '@carbon/react';
+import { useNestDepth } from '../contexts';
 
 /** Implement `TitleFieldTemplate`
  */
@@ -9,11 +10,18 @@ export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSch
   title,
   required,
 }: TitleFieldProps<T, S, F>) {
+  const depth = useNestDepth();
+  const text = <LabelValue label={title} required={required} hide={false} />;
   return (
     <div className='title-field'>
-      <FormGroup legendId={id} legendText={<LabelValue label={title} required={required} hide={false} />}>
-        {null}
-      </FormGroup>
+      {/* show larger text if it's a form title */}
+      {depth ? (
+        <FormGroup legendId={id} legendText={text}>
+          {null}
+        </FormGroup>
+      ) : (
+        text
+      )}
     </div>
   );
 }

packages/carbon/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,5 +1,4 @@
-// @ts-expect-error missing types for `Stack`
-import { FormGroup, Stack, TextInput } from '@carbon/react';
+import { FormGroup, TextInput } from '@carbon/react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   FormContextType,
@@ -12,6 +11,8 @@ import {
 import { LayerBackground } from '../components/Layer';
 import { LabelValue } from '../components/LabelValue';
 import getCarbonOptions from '../utils';
+// @ts-expect-error miss types for `@carbon/layout`
+import { spacing } from '@carbon/layout';
 
 export default function WrapIfAdditionalTemplate<
   T = any,
@@ -55,16 +56,18 @@ export default function WrapIfAdditionalTemplate<
         <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center' }}>
           <div style={{ flex: 1 }}>
             <LayerBackground padding={carbonOptions.padding}>
-              <Stack gap={carbonOptions.gap}>
-                <TextInput
-                  labelText={keyLabel}
-                  type='text'
-                  id={`${id}-key`}
-                  onBlur={(event) => onKeyChange(event.target.value)}
-                  defaultValue={label}
-                />
-                {children}
-              </Stack>
+              <div style={{ display: 'flex' }}>
+                <div style={{ flex: 1, marginInlineEnd: spacing[carbonOptions.padding - 1] }}>
+                  <TextInput
+                    labelText={keyLabel}
+                    type='text'
+                    id={`${id}-key`}
+                    onBlur={(event) => onKeyChange(event.target.value)}
+                    defaultValue={label}
+                  />
+                </div>
+                <div style={{ flex: 1 }}>{children}</div>
+              </div>
             </LayerBackground>
           </div>
           <div

packages/carbon/src/utils.ts

@@ -22,7 +22,7 @@ export interface CarbonOptions {
  */
 const defaultCarbonOptions: CarbonOptions = {
   gap: 7,
-  padding: 3,
+  padding: 5,
 };
 
 /** Get carbon theme options from `formContext` and `ui:carbon` uiSchema options.