Admin Generator (Future): Add support for startAdornments and endAdornments for form fields

[andrearutrecht]

Description

Added support for startAdornments and endAdornments for generated form fields.

Adornments started being added in #2612 and are now implemented for all fields where deemed useful.

As of right now, the following field types support adornments: text, number, numberRange, date

select and asyncSelect will be done in a follow-up PR: #2645

DatePicker changes: All DatePicker uses have been checked and do not lead to issues or errors.

Example

There are three ways to define an adornment: as just a string, an object with an icon name string or as an object with options.

Example with just a string:

{
    type: "number",
    name: "price",
    startAdornment: "€",
}

Example with an icon name:

{
    type: "date",
    name: "availableSince",
    startAdornment: { icon: "CalendarToday" },
}

Example with an object:

{
    type: "date",
    name: "availableSince",
    startAdornment: { icon: { name: "CalendarToday", color: "warning" }},
}

These lead to generated fields in the form like this:

{...}

<Field
    variant="horizontal"
    fullWidth
    name="priceRange"
    component={FinalFormRangeInput}
    label={<FormattedMessage id="product.priceRange" defaultMessage="Price Range" />}
    min={25}
    max={500}
    disableSlider
    startAdornment={
        <InputAdornment position="start">
            // <FormattedMessage id="priceRange.startAdornment" defaultMessage="€" /> // is not translatable anymore
           €
        </InputAdornment>
    }
/>

{...}

<Field
    variant="horizontal"
    fullWidth
    name="availableSince"
    component={FinalFormDatePicker}
    label={<FormattedMessage id="product.availableSince" defaultMessage="Available Since" />}
    startAdornment={
        <InputAdornment position="start">
            <CalendarTodayIcon />
        </InputAdornment>
    }
/>

{...}

<Field
    variant="horizontal"
    fullWidth
    name="availableSince"
    component={FinalFormDatePicker}
    label={<FormattedMessage id="product.availableSince" defaultMessage="Available Since" />}
    startAdornment={
        <InputAdornment position="start">
            <CalendarTodayIcon color="warning" />
        </InputAdornment>
    }
/>

{...}

• I have verified if my change requires an example

Screenshots/screencasts

The Two examples from above are marked in the screenshot

Changeset

• I have verified if my change requires a changeset

Related tasks and documents

https://vivid-planet.atlassian.net/browse/COM-1170

Open TODOs/questions

[johnnyomair]

Thanks for the changeset! However, we decided that we don't add changesets for the Admin Generator. So please remove/adapt it.

[johnnyomair]

This should be added do the changeset I suppose. Also, aren't these props part of InputWithPopperProps?

[andrearutrecht]

Yes, they are. I need to pay more attention to the existing props... Changeset will be updated.