[pull] main from tinacms:main

.changeset/thirty-bottles-eat.md

@@ -0,0 +1,6 @@
+---
+"@tinacms/schema-tools": minor
+"tinacms": minor
+---
+
+✨ Half-width property for text fields in TinaCMS Editor

packages/@tinacms/schema-tools/src/types/index.ts

@@ -224,6 +224,7 @@ export type StringField = (
     isTitle?: boolean;
     isBody?: boolean;
     options?: Option[];
+    width?: 'full' | 'half';
   };
 
 export type NumberField = (

packages/tinacms/src/toolkit/fields/components/select.tsx

@@ -44,7 +44,7 @@ export const Select: React.FC<SelectProps> = ({
   }, [field?.focusIntent, ref]);
 
   return (
-    <div className='relative group w-full h-full md:w-auto'>
+    <div className='relative group w-full h-fit md:w-auto'>
       <select
         id={input.name}
         ref={ref}

packages/tinacms/src/toolkit/fields/plugins/wrap-field-with-meta.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FieldProps } from './field-props';
 import { useEvent } from '@toolkit/react-core/use-cms-event';
 import { FieldHoverEvent, FieldFocusEvent } from '@toolkit/fields/field-events';
-import { Form } from '@toolkit/forms';
+import { Form, Field } from '@toolkit/forms';
 import { useCMS } from '@toolkit/react-core';
 
 export type InputFieldType<ExtraFieldProps, InputProps> =
@@ -24,6 +24,7 @@ export function wrapFieldsWithMeta<ExtraFieldProps = {}, InputProps = {}>(
         error={props.meta.error}
         index={props.index}
         tinaForm={props.tinaForm}
+        field={props.field}
         focusIntent={props.field.focusIntent}
         hoverIntent={props.field.hoverIntent}
       >
@@ -95,6 +96,7 @@ interface FieldMetaProps extends React.HTMLAttributes<HTMLElement> {
   margin?: boolean;
   index?: number;
   tinaForm: Form;
+  field?: Field;
   focusIntent?: boolean;
   hoverIntent?: boolean;
 }
@@ -108,6 +110,7 @@ export const FieldMeta = ({
   children,
   index,
   tinaForm,
+  field,
   focusIntent,
   hoverIntent,
   ...props
@@ -143,6 +146,7 @@ export const FieldMeta = ({
   return (
     <FieldWrapper
       margin={margin}
+      field={field}
       onMouseOver={() => setHoveredField({ id: tinaForm.id, fieldName: name })}
       onMouseOut={() => setHoveredField({ id: null, fieldName: null })}
       onClick={handleClick}
@@ -171,12 +175,14 @@ export const FieldMeta = ({
 export const FieldWrapper = ({
   margin,
   children,
+  field,
   'data-tina-field-active': dataActive,
   'data-tina-field-hovering': dataHovering,
-  ...restProps
+  ...props
 }: {
   margin: boolean;
   children: React.ReactNode;
+  field?: Field;
   'data-tina-field-active'?: string;
   'data-tina-field-hovering'?: string;
 } & Partial<React.ComponentPropsWithoutRef<'div'>>) => {
@@ -208,10 +214,10 @@ export const FieldWrapper = ({
 
   return (
     <div
-      className={`relative ${margin ? `mb-5 last:mb-0` : ``} ${getFieldStateClasses()}`}
+      className={`relative w-full px-2 ${margin ? 'mb-5 last:mb-0' : ''} ${field?.width === 'half' ? '@sm:w-1/2' : ''} ${getFieldStateClasses()}`}
       data-tina-field-active={dataActive}
       data-tina-field-hovering={dataHovering}
-      {...restProps}
+      {...props}
     >
       {children}
     </div>

packages/tinacms/src/toolkit/form-builder/fields-builder.tsx

@@ -31,7 +31,7 @@ export function FieldsBuilder({
   useEventSubscription('plugin:add:field', () => updateFieldPlugins(), []);
 
   return (
-    <FieldsGroup padding={padding}>
+    <FieldsGroup>
       {fields.map((field: Field, index) => {
         return (
           <InnerField
@@ -122,6 +122,7 @@ const InnerField = ({
     <FinalField
       name={field.name}
       key={field.name}
+      className='w-full'
       isEqual={(a, b) => isEqual(field, a, b)}
       type={type}
       parse={
@@ -182,17 +183,13 @@ const InnerField = ({
 };
 
 export const FieldsGroup = ({
-  padding,
   children,
 }: {
-  padding?: boolean;
   children?: any | any[];
 }) => {
   return (
     <div
-      className={`relative block w-full h-full whitespace-nowrap overflow-x-visible ${
-        padding ? `pb-5` : ``
-      }`}
+      className={`relative flex flex-wrap w-full h-full whitespace-nowrap overflow-x-visible`}
     >
       {children}
     </div>

packages/tinacms/src/toolkit/form-builder/form-builder.tsx

@@ -275,9 +275,9 @@ export const FormWrapper = ({
   return (
     <div
       data-test={`form:${id?.replace(/\\/g, '/')}`}
-      className='h-full overflow-y-auto max-h-full bg-gray-50'
+      className='h-full overflow-y-auto max-h-full bg-gray-50 @container'
     >
-      <div className='py-5 px-6'>{children}</div>
+      <div className='py-5 px-4'>{children}</div>
     </div>
   );
 };

packages/tinacms/src/toolkit/forms/field.ts

@@ -20,6 +20,7 @@ export interface Field<F extends Field = AnyField> {
   defaultValue?: any;
   namespace?: string[];
   fields?: F[];
+  width?: 'full' | 'half';
   /**
    * Focus events can come from outside of the component, this is not
    * a guarantee that the given field will receive focus since that functionality