[#65] Feedback

src/components/ComponentConfiguration.stories.tsx

@@ -1706,6 +1706,13 @@ export const Address: Story = {
         required: false,
       },
     },
+    builderInfo: {
+      title: 'Address Field',
+      icon: 'gome',
+      group: 'basic',
+      weight: 10,
+      schema: {},
+    },
   },
 
   play: async ({canvasElement, args}) => {
@@ -1729,16 +1736,14 @@ export const Address: Story = {
     expect(await preview.findByText('Updated preview label'));
 
     const previewInput = preview.getByText('Updated preview label');
-    await expect(previewInput).toHaveDisplayValue('');
+    await expect(previewInput).toBeVisible();
 
     // Ensure that the manually entered key is kept instead of derived from the label,
     // even when key/label components are not mounted.
     const keyInput = canvas.getByLabelText('Property Name');
     // fireEvent is deliberate, as userEvent.clear + userEvent.type briefly makes the field
     // not have any value, which triggers the generate-key-from-label behaviour.
     fireEvent.change(keyInput, {target: {value: 'customKey'}});
-    await userEvent.click(canvas.getByRole('tab', {name: 'Location'}));
-    await userEvent.click(canvas.getByRole('tab', {name: 'Basic'}));
     await userEvent.clear(canvas.getByLabelText('Label'));
     await userEvent.type(canvas.getByLabelText('Label'), 'Other label', {delay: 50});
     await expect(canvas.getByLabelText('Property Name')).toHaveDisplayValue('customKey');

src/components/formio/fieldset.stories.tsx

@@ -0,0 +1,69 @@
+import {expect} from '@storybook/jest';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import {within} from '@storybook/testing-library';
+
+import {withFormik} from '@/sb-decorators';
+
+import Fieldset from './fieldset';
+
+export default {
+  title: 'Formio/Containers/Fieldset',
+  component: Fieldset,
+  decorators: [withFormik],
+  parameters: {
+    modal: {noModal: true},
+    // https://github.com/bbbtech/storybook-formik/issues/51#issuecomment-1136668271
+    docs: {
+      inlineStories: false,
+      iframeHeight: 150,
+    },
+  },
+  args: {
+    type: 'textfield',
+  },
+} as Meta<typeof Fieldset>;
+
+type Story = StoryObj<typeof Fieldset>;
+
+const Template: StoryFn<typeof Fieldset> = args => (
+  <Fieldset {...args}>
+    <div>{args.children || '<any children />'}</div>
+  </Fieldset>
+);
+
+export const WithoutLabel: Story = {
+  render: Template,
+
+  args: {
+    label: '',
+  },
+};
+
+export const WithToolTip: Story = {
+  render: Template,
+
+  args: {
+    label: 'With tooltip',
+    tooltip: 'Hiya!',
+  },
+};
+
+export const WithErrors: Story = Template.bind([]);
+WithErrors.parameters = {
+  formik: {
+    initialValues: {someField: ''},
+    initialErrors: {someField: 'Some error'},
+  },
+};
+WithErrors.args = {
+  label: 'Errors must be displayed',
+  children: <input type="text" />,
+  field: 'someField',
+};
+WithErrors.argTypes = {
+  children: {table: {disable: true}},
+};
+WithErrors.play = async ({canvasElement}) => {
+  const canvas = within(canvasElement);
+  await expect(canvas.queryByText('Some error')).toBeInTheDocument();
+};

src/components/formio/fieldset.tsx

@@ -1,48 +1,21 @@
-import {css} from '@emotion/css';
 import clsx from 'clsx';
 import React from 'react';
 
-import {AnyComponentSchema} from '@/types';
 import {useValidationErrors} from '@/utils/errors';
 import {ErrorList} from '@/utils/errors';
 
 import Tooltip from './tooltip';
 
 export interface FieldsetProps {
-  // XXX: eventually (most) of these literals will be included in AnyComponentType
-  type: AnyComponentSchema['type'] | 'datagrid' | 'datamap' | 'select' | 'columns' | 'textarea';
   field?: string;
-  required?: boolean;
   label?: React.ReactNode;
   tooltip?: string;
-  htmlId?: string;
   children: React.ReactNode;
 }
 
-// Fix the overlapping icons/text when the error icon is shown.
-// XXX: once we've moved away from bootstrap/formio 'component library', this fix and
-// @emotion/css can be removed again.
-const PAD_ERROR_ICON = css`
-  .form-control.is-invalid {
-    padding-inline-end: calc(1.5em + 0.75rem);
-  }
-`;
-
-const Fieldset: React.FC<FieldsetProps> = ({
-  type,
-  field = '',
-  required = false,
-  label,
-  tooltip = '',
-  children,
-}) => {
+const Fieldset: React.FC<FieldsetProps> = ({field = '', label, tooltip = '', children}) => {
   const {errors} = useValidationErrors(field);
-  const className = clsx('form-group', 'has-feedback', 'formio-component', PAD_ERROR_ICON, {
-    [`formio-component-${type}`]: type,
-    'has-error': field && errors.length > 0,
-    required: required,
-  });
-  // const labelClassName = clsx('col-form-label', {'field-required': required});
+  const className = clsx('field-group');
 
   return (
     <div className={className}>

src/registry/address/edit.tsx

@@ -53,14 +53,12 @@ const EditForm: EditFormDefinition<AddressComponentSchema> = () => {
             'key',
             'description',
             'tooltip',
-            'showInSummary',
-            'showInEmail',
-            'showInPDF',
-            'multiple',
             'hidden',
             'clearOnHide',
             'isSensitiveData',
-            'defaultValue'
+            'showInSummary',
+            'showInEmail',
+            'showInPDF'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />

src/registry/address/index.ts

@@ -6,5 +6,10 @@ export default {
   edit: EditForm,
   editSchema: validationSchema,
   preview: Preview,
-  defaultValue: '',
+  defaultValue: {
+    postcode: '',
+    houseNumber: '',
+    houseLetter: '',
+    houseNumberAddition: '',
+  },
 };

src/registry/address/preview.tsx

@@ -17,14 +17,7 @@ const Preview: React.FC<ComponentPreviewProps<AddressComponentSchema>> = ({compo
 
   const {required = false} = validate;
   return (
-    <FieldSet
-      type="address"
-      field={key}
-      required={required}
-      htmlId={`editform-${key}`}
-      label={label}
-      tooltip={tooltip}
-    >
+    <FieldSet field={key} label={label} tooltip={tooltip}>
       {description && <Description text={description} />}
       <TextField
         name={`${key}.postcode`}