@dxos/react-ui-form 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.5ea62a8",
+  "version": "0.8.4-main.66e292d",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,52 +28,55 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@fluentui/react-tabster": "^9.24.2",
     "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-react": "^3.2.0",
     "@radix-ui/react-context": "1.1.1",
     "date-fns": "^3.3.1",
     "jsonpath": "^1.1.1",
-    "@dxos/async": "0.8.4-main.5ea62a8",
-    "@dxos/echo": "0.8.4-main.5ea62a8",
-    "@dxos/debug": "0.8.4-main.5ea62a8",
-    "@dxos/echo-db": "0.8.4-main.5ea62a8",
-    "@dxos/echo-schema": "0.8.4-main.5ea62a8",
-    "@dxos/effect": "0.8.4-main.5ea62a8",
-    "@dxos/invariant": "0.8.4-main.5ea62a8",
-    "@dxos/lit-ui": "0.8.4-main.5ea62a8",
-    "@dxos/live-object": "0.8.4-main.5ea62a8",
-    "@dxos/keys": "0.8.4-main.5ea62a8",
-    "@dxos/log": "0.8.4-main.5ea62a8",
-    "@dxos/react-client": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-list": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-pickers": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-tag-picker": "0.8.4-main.5ea62a8",
-    "@dxos/schema": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-types": "0.8.4-main.5ea62a8",
-    "@dxos/util": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-stack": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-searchlist": "0.8.4-main.5ea62a8"
+    "@dxos/async": "0.8.4-main.66e292d",
+    "@dxos/debug": "0.8.4-main.66e292d",
+    "@dxos/echo": "0.8.4-main.66e292d",
+    "@dxos/echo-db": "0.8.4-main.66e292d",
+    "@dxos/echo-query": "0.8.4-main.66e292d",
+    "@dxos/effect": "0.8.4-main.66e292d",
+    "@dxos/invariant": "0.8.4-main.66e292d",
+    "@dxos/keys": "0.8.4-main.66e292d",
+    "@dxos/lit-ui": "0.8.4-main.66e292d",
+    "@dxos/log": "0.8.4-main.66e292d",
+    "@dxos/live-object": "0.8.4-main.66e292d",
+    "@dxos/react-client": "0.8.4-main.66e292d",
+    "@dxos/react-ui-components": "0.8.4-main.66e292d",
+    "@dxos/react-ui-editor": "0.8.4-main.66e292d",
+    "@dxos/react-ui-list": "0.8.4-main.66e292d",
+    "@dxos/react-ui-pickers": "0.8.4-main.66e292d",
+    "@dxos/react-ui-searchlist": "0.8.4-main.66e292d",
+    "@dxos/react-ui-stack": "0.8.4-main.66e292d",
+    "@dxos/react-ui-types": "0.8.4-main.66e292d",
+    "@dxos/schema": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d",
+    "@dxos/types": "0.8.4-main.66e292d"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.7",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
     "fast-check": "^3.19.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/echo-signals": "0.8.4-main.5ea62a8",
-    "@dxos/random": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
-    "@dxos/storybook-utils": "0.8.4-main.5ea62a8"
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo-signals": "0.8.4-main.66e292d",
+    "@dxos/random": "0.8.4-main.66e292d",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.66e292d",
+    "@dxos/storybook-utils": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/react-ui": "0.8.4-main.66e292d"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -2,12 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 
@@ -17,12 +15,13 @@ const meta = {
   title: 'ui/react-ui-form/ControlSection',
   component: ControlSection,
   render: (args) => (
-    <ControlPage classNames='w-[40rem]'>
+    <ControlPage classNames='is-[40rem]'>
       <ControlSection {...args} />
     </ControlPage>
   ),
-  decorators: [withLayout({ fullscreen: true, classNames: 'justify-center' }), withTheme],
+  decorators: [withTheme],
   parameters: {
+    layout: 'centered',
     translations,
   },
 } satisfies Meta<typeof ControlSection>;

package/src/components/ControlSection/ControlSection.tsx

@@ -22,7 +22,7 @@ export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
 export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
   return (
-    <StackItem.Content classNames='block overflow-y-auto [--control-spacing:var(--dx-trimMd)]'>
+    <StackItem.Content scrollable classNames='[--control-spacing:var(--dx-trimMd)]'>
       <div role='none' className={mx('pli-cardSpacingInline pbe-trimLg', classNames)} {...props}>
         {children}
       </div>

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -2,16 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo } from 'react';
 
-import { createEchoSchema } from '@dxos/live-object/testing';
+import { createEchoSchema } from '@dxos/echo/testing';
 import { log } from '@dxos/log';
+import { withTheme } from '@dxos/react-ui/testing';
 import { ProjectionModel } from '@dxos/schema';
-import { TestSchema, testView } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { Example, testView } from '@dxos/schema/testing';
 
 import { translations } from '../../translations';
 import { FIELD_EDITOR_DEBUG_SYMBOL, TestLayout, TestPanel } from '../testing';
@@ -31,6 +29,8 @@ const DefaultStory = (props: FieldEditorProps) => {
 
   // Expose objects on window for test access.
   useEffect(() => {
+    props.projection.normalizeView();
+
     if (typeof window !== 'undefined') {
       (window as any)[FIELD_EDITOR_DEBUG_SYMBOL] = {
         props,
@@ -58,8 +58,9 @@ const meta = {
   title: 'ui/react-ui-form/FieldEditor',
   component: FieldEditor as any,
   render: DefaultStory,
-  decorators: [withLayout({ fullscreen: true }), withTheme],
+  decorators: [withTheme],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;
@@ -70,7 +71,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    projection: new ProjectionModel(createEchoSchema(TestSchema).jsonSchema, testView.projection),
+    projection: new ProjectionModel(createEchoSchema(Example).jsonSchema, testView.projection),
     field: testView.projection.fields[0],
   },
   parameters: { controls: { disabled: true } },

package/src/components/FieldEditor/FieldEditor.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { type EchoSchema, Format, FormatEnums, formatToType } from '@dxos/echo/internal';
 import { type SchemaRegistry } from '@dxos/echo-db';
-import { type EchoSchema, FormatEnum, FormatEnums, formatToType } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { useAsyncEffect, useTranslation } from '@dxos/react-ui';
 import {
@@ -13,6 +13,7 @@ import {
   type ProjectionModel,
   type PropertyType,
   type SchemaProperty,
+  formatToAdditionalPropertyAttributes,
   getFormatSchema,
   getSchemaProperties,
   sortProperties,
@@ -94,8 +95,10 @@ export const FieldEditor = ({
 
       setProps((props) => {
         const type = formatToType[_props.format as keyof typeof formatToType];
+        const additionalProps =
+          formatToAdditionalPropertyAttributes[_props.format as keyof typeof formatToAdditionalPropertyAttributes];
         if (props.type !== type) {
-          return { ...props, ..._props, type };
+          return { ...props, ..._props, ...additionalProps, type } as PropertyType;
         }
 
         return _props as PropertyType;
@@ -137,7 +140,7 @@ export const FieldEditor = ({
       ['format' satisfies keyof PropertyType]: (props) => (
         <SelectInput
           {...props}
-          options={FormatEnums.filter((value) => value !== FormatEnum.None).map((value) => ({
+          options={FormatEnums.filter((value) => value !== Format.TypeFormat.None).map((value) => ({
             value,
             label: t(`format ${value}`),
           }))}
@@ -156,7 +159,7 @@ export const FieldEditor = ({
           {...props}
           options={
             referenceSchema
-              ? getSchemaProperties(referenceSchema.ast)
+              ? getSchemaProperties(referenceSchema.ast, {}, { form: true })
                   .sort(sortProperties)
                   .map((p) => ({ value: p.name }))
               : []

package/src/components/Form/ArrayField.tsx

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
+import * as Function from 'effect/Function';
+import * as SchemaAST from 'effect/SchemaAST';
+import * as String from 'effect/String';
 import React, { Fragment, useCallback } from 'react';
 
 import { SimpleType, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
@@ -34,7 +35,7 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
   //  It doesn't become live until another field is touched, but that's better than the whole form crashing.
   const values = (useFormValues(path ?? []) ?? []) as any[];
   invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
-  const label = title ?? pipe(name, capitalize);
+  const label = title ?? Function.pipe(name, String.capitalize);
 
   const elementType = findArrayElementType(ast);
 
@@ -45,7 +46,9 @@ export const ArrayField = ({ property, readonly, path, inputProps, Custom, looku
       return {};
     }
 
-    return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [prop.name, prop.defaultValue]));
+    return Object.fromEntries(
+      getSchemaProperties(typeLiteral, {}, { form: true }).map((prop) => [prop.name, prop.defaultValue]),
+    );
   };
 
   const getDefaultValue = () =>

package/src/components/Form/Defaults.tsx

@@ -192,7 +192,7 @@ export const MarkdownInput = ({
           disabled={!!readonly}
           placeholder={placeholder}
           value={getValue() ?? ''}
-          classNames={'min-bs-auto max-h-40 overflow-auto'}
+          classNames={'min-bs-auto max-bs-40 overflow-auto'}
           onChange={(event) => onValueChange(type, event.target.value)}
           onBlur={onBlur}
           style={{ resize: 'none' }}

package/src/components/Form/Form.stories.tsx

@@ -2,19 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback, useState } from 'react';
 
-import { ContactType } from '@dxos/client/testing';
-import { type Type } from '@dxos/echo';
-import { type BaseObject, Expando, Format, Ref, type TypeAnnotation, getObjectDXN } from '@dxos/echo-schema';
-import { live } from '@dxos/live-object';
-import { withSurfaceVariantsLayout } from '@dxos/react-ui/testing';
-import { Testing } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { Format, Obj, Ref, Type } from '@dxos/echo';
+import { type AnyProperties, type TypeAnnotation } from '@dxos/echo/internal';
+import { Tooltip } from '@dxos/react-ui';
+import { withLayoutVariants, withTheme } from '@dxos/react-ui/testing';
+import { TestSchema } from '@dxos/schema/testing';
 
 import { translations } from '../../translations';
 import { TestLayout, TestPanel } from '../testing';
@@ -22,12 +18,12 @@ import { TestLayout, TestPanel } from '../testing';
 import { SelectInput } from './Defaults';
 import { Form, type FormProps } from './Form';
 
-type StoryProps<T extends BaseObject> = {
+type StoryProps<T extends AnyProperties> = {
   debug?: boolean;
-  schema: Type.Obj.Any;
+  schema: Schema.Schema.AnyNoContext;
 } & FormProps<T>;
 
-const DefaultStory = <T extends BaseObject = any>({
+const DefaultStory = <T extends AnyProperties = any>({
   debug,
   schema,
   values: initialValues,
@@ -40,24 +36,26 @@ const DefaultStory = <T extends BaseObject = any>({
 
   if (debug) {
     return (
-      <TestLayout json={{ values, schema: schema.ast }}>
-        <TestPanel>
-          <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />
-        </TestPanel>
-      </TestLayout>
+      <Tooltip.Provider>
+        <TestLayout json={{ values, schema: schema.ast }}>
+          <TestPanel>
+            <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />
+          </TestPanel>
+        </TestLayout>
+      </Tooltip.Provider>
     );
   }
 
   return <Form<T> schema={schema} values={values} onSave={handleSave} {...props} />;
 };
 
-const RefStory = <T extends BaseObject = any>(props: StoryProps<T>) => {
+const RefStory = <T extends AnyProperties = any>(props: StoryProps<T>) => {
   const onQueryRefOptions = useCallback((typeInfo: TypeAnnotation) => {
     switch (typeInfo.typename) {
-      case ContactType.typename:
+      case TestSchema.Person.typename:
         return [
-          { dxn: getObjectDXN(contact1)!, label: 'John Coltraine' },
-          { dxn: getObjectDXN(contact2)!, label: 'Erykah Badu' },
+          { dxn: Obj.getDXN(contact1), label: 'Alice' },
+          { dxn: Obj.getDXN(contact2), label: 'Bob' },
         ];
       default:
         return [];
@@ -67,24 +65,6 @@ const RefStory = <T extends BaseObject = any>(props: StoryProps<T>) => {
   return <DefaultStory<T> onQueryRefOptions={onQueryRefOptions} {...props} />;
 };
 
-const meta = {
-  title: 'ui/react-ui-form/Form',
-  component: Form as any,
-  render: DefaultStory,
-  decorators: [withLayout({ fullscreen: true }), withTheme],
-  parameters: {
-    translations,
-  },
-  argTypes: {
-    readonly: {
-      control: 'boolean',
-      description: 'Readonly',
-    },
-  },
-} satisfies Meta<StoryProps<any>>;
-
-export default meta;
-
 const AddressSchema = Schema.Struct({
   street: Schema.optional(Schema.String.annotations({ title: 'Street' })),
   city: Schema.optional(Schema.String.annotations({ title: 'City' })),
@@ -102,10 +82,28 @@ const ContactSchema = Schema.Struct({
 
 type ContactSchema = Schema.Schema.Type<typeof ContactSchema>;
 
-type Story = StoryObj<StoryProps<any>>;
+const meta = {
+  title: 'ui/react-ui-form/Form',
+  component: Form as any,
+  render: DefaultStory,
+  decorators: [withTheme, withLayoutVariants()],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+  argTypes: {
+    readonly: {
+      control: 'boolean',
+      description: 'Readonly',
+    },
+  },
+} satisfies Meta<StoryProps<any>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  decorators: [withSurfaceVariantsLayout(), withTheme],
   args: {
     schema: ContactSchema,
     values: {
@@ -122,7 +120,7 @@ export const Default: Story = {
 export const Organization: Story = {
   args: {
     debug: true,
-    schema: Testing.OrganizationSchema,
+    schema: TestSchema.OrganizationSchema,
     values: {
       name: 'DXOS',
       website: 'https://dxos.org',
@@ -134,7 +132,7 @@ export const Organization: Story = {
 export const OrganizationAutoSave: Story = {
   args: {
     debug: true,
-    schema: Testing.OrganizationSchema,
+    schema: TestSchema.OrganizationSchema,
     values: {
       name: 'DXOS',
       website: 'https://dxos.org',
@@ -147,10 +145,10 @@ export const OrganizationAutoSave: Story = {
 // TODO(burdon): Type issue with employer reference.
 // TODO(burdon): Test table/form with compound values (e.g., address).
 // Property name is missing in type EncodedReference but required in type
-export const Contact: Story = {
+export const Person: Story = {
   args: {
     debug: true,
-    schema: Testing.ContactSchema,
+    schema: TestSchema.Person,
     values: {
       name: 'Bot',
     },
@@ -278,16 +276,18 @@ export const Enum: StoryObj<StoryProps<ColorType>> = {
 //
 
 const RefSchema = Schema.Struct({
-  contact: Ref(ContactType).annotations({ title: 'Contact Reference' }),
-  optionalContact: Schema.optional(Ref(ContactType).annotations({ title: 'Optional Contact Reference' })),
-  refArray: Schema.optional(Schema.Array(Ref(ContactType))),
-  unknownExpando: Schema.optional(Ref(Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' })),
+  contact: Type.Ref(TestSchema.Person).annotations({ title: 'Contact Reference' }),
+  optionalContact: Schema.optional(Type.Ref(TestSchema.Person).annotations({ title: 'Optional Contact Reference' })),
+  refArray: Schema.optional(Schema.Array(Type.Ref(TestSchema.Person))),
+  unknownExpando: Schema.optional(
+    Type.Ref(Type.Expando).annotations({ title: 'Optional Ref to an Expando (DXN Input)' }),
+  ),
 });
 
 type RefSchema = Schema.Schema.Type<typeof RefSchema>;
 
-const contact1 = live(ContactType, { identifiers: [] });
-const contact2 = live(ContactType, { identifiers: [] });
+const contact1 = Obj.make(TestSchema.Person, { name: 'Alice' });
+const contact2 = Obj.make(TestSchema.Person, { name: 'Bob' });
 
 export const Refs: StoryObj<StoryProps<RefSchema>> = {
   render: RefStory,

package/src/components/Form/Form.tsx

@@ -3,22 +3,22 @@
 //
 
 import { useFocusFinders } from '@fluentui/react-tabster';
-import { type Schema } from 'effect';
-import React, { type ReactElement, useEffect, useMemo, useRef } from 'react';
+import type * as Schema from 'effect/Schema';
+import React, { type ReactElement, useCallback, useEffect, useRef } from 'react';
 
-import { type BaseObject, type PropertyKey } from '@dxos/echo-schema';
+import { type AnyProperties, type PropertyKey } from '@dxos/echo/internal';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { cardDialogOverflow, cardSpacing } from '@dxos/react-ui-stack';
 import { type ProjectionModel, type SchemaProperty } from '@dxos/schema';
 
-import { type FormOptions } from '../../hooks';
+import { type FormHandler, type FormOptions } from '../../hooks';
 
 import { FormActions, type FormOuterSpacing } from './FormActions';
 import { FormFields, type FormFieldsProps } from './FormContent';
 import { FormProvider } from './FormContext';
 import { type InputComponent, type InputProps } from './Input';
 
-export type PropsFilter<T extends BaseObject> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
+export type PropsFilter<T extends AnyProperties> = (props: SchemaProperty<T>[]) => SchemaProperty<T>[];
 
 export type ComponentLookup = (args: {
   prop: string;
@@ -28,7 +28,8 @@ export type ComponentLookup = (args: {
 
 export type CustomInputMap = Partial<Record<string, InputComponent>>;
 
-export type FormProps<T extends BaseObject> = ThemedClassName<{
+export type FormProps<T extends AnyProperties> = ThemedClassName<{
+  id?: string;
   values: Partial<T>;
   // TODO(burdon): Autofocus first input.
   autoFocus?: boolean;
@@ -41,10 +42,12 @@ export type FormProps<T extends BaseObject> = ThemedClassName<{
   onCancel?: () => void;
 }> &
   Pick<FormOptions<T>, 'schema' | 'onValuesChanged' | 'onValidate' | 'onSave'> &
+  // TODO(wittjosiah): This needs to support different ref field options per field.
   FormFieldsProps;
 
-export const Form = <T extends BaseObject>({
+export const Form = <T extends AnyProperties>({
   classNames,
+  id,
   testId,
   values: initialValues,
   autoFocus,
@@ -72,7 +75,14 @@ export const Form = <T extends BaseObject>({
   }, [autoFocus]);
 
   // TODO(burdon): Name?
-  const handleValid = useMemo(() => (autoSave ? onSave : undefined), [autoSave, onSave]);
+  const handleValid = useCallback(
+    async (values: any, meta: { changed: FormHandler<T>['changed'] }) => {
+      if (autoSave) {
+        await onSave?.(values, meta);
+      }
+    },
+    [autoSave, onSave],
+  );
 
   return (
     <FormProvider
@@ -85,7 +95,7 @@ export const Form = <T extends BaseObject>({
       onValid={handleValid}
       onSave={onSave}
     >
-      <div role='none' className='contents' data-testid={testId}>
+      <div role='none' className='contents' {...(id && { 'data-object-id': id })} data-testid={testId}>
         <FormFields
           {...props}
           ref={formRef}

package/src/components/Form/FormActions.tsx

@@ -37,7 +37,12 @@ export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormAct
       )}
     >
       {onCancel && !readonly && (
-        <IconButton data-testid='cancel-button' icon='ph--x--regular' label={t('button cancel')} onClick={onCancel} />
+        <IconButton
+          data-testid='cancel-button'
+          icon='ph--x--regular'
+          label={t('cancel button label')}
+          onClick={onCancel}
+        />
       )}
       {handleSave && (
         <IconButton
@@ -45,7 +50,7 @@ export const FormActions = ({ readonly, onCancel, outerSpacing = true }: FormAct
           data-testid='save-button'
           disabled={!canSave}
           icon='ph--check--regular'
-          label={t('button save')}
+          label={t('save button label')}
           onClick={handleSave}
         />
       )}