Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove need for custom form-control CSS #572

Merged
merged 8 commits into from
Oct 26, 2023
Merged

Remove need for custom form-control CSS #572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2c488ea
:white_check_mark: [#571] Set up interaction test for validation styling
sergei-maertens Oct 20, 2023
01e0a21
:white_check_mark: [#571] Update stories
sergei-maertens Oct 20, 2023
8908faa
:recycle: [#571] Refactor formio content component styling
sergei-maertens Oct 20, 2023
1a0b69b
:recycle: [#571] Refactor away openforms-form-control
sergei-maertens Oct 20, 2023
333d0af
:recycle: [#571] Fix styles broken via form-control removal
sergei-maertens Oct 20, 2023
f1175f3
:recycle: [#571] Use class/CSS approach for required field asterisk
sergei-maertens Oct 23, 2023
7ac058d
:green_heart: [#571] Fix visual regressions
sergei-maertens Oct 23, 2023
678a20a
:coffin: [#571] Delete obsolete CSS
sergei-maertens Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 29 additions & 27 deletions src/components/appointments/cancel/CancelAppointment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,35 +92,37 @@ const CancelAppointment = () => {
</ErrorMessage>
)}

<Body modifiers={['big']}>
<FormattedMessage
description="Appointment cancellation body text"
defaultMessage={`You're about to cancel your appointment on <b>{date}</b> at <b>{time}</b>. Please fill
out your email address for verification purposes.`}
values={{
date: <FormattedDate value={time} day="numeric" month="long" />,
time: <FormattedDate value={time} hour="numeric" minute="numeric" />,
b: chunks => <strong>{chunks}</strong>,
}}
/>
</Body>

<EmailField
name="email"
isRequired
label={
<div className="openforms-form-field-container">
<Body modifiers={['big']}>
<FormattedMessage
description="Appointment cancellation email field label"
defaultMessage="Your email address"
/>
}
description={
<FormattedMessage
description="Cancel appointment email field help text"
defaultMessage="The email address where you received the appointment confirmation email."
description="Appointment cancellation body text"
defaultMessage={`You're about to cancel your appointment on <b>{date}</b> at <b>{time}</b>. Please fill
out your email address for verification purposes.`}
values={{
date: <FormattedDate value={time} day="numeric" month="long" />,
time: <FormattedDate value={time} hour="numeric" minute="numeric" />,
b: chunks => <strong>{chunks}</strong>,
}}
/>
}
/>
</Body>

<EmailField
name="email"
isRequired
label={
<FormattedMessage
description="Appointment cancellation email field label"
defaultMessage="Your email address"
/>
}
description={
<FormattedMessage
description="Cancel appointment email field help text"
defaultMessage="The email address where you received the appointment confirmation email."
/>
}
/>
</div>

<Toolbar modifiers={['bottom', 'reverse']}>
<ToolbarList>
Expand Down
9 changes: 9 additions & 0 deletions src/components/appointments/cancel/CancelAppointment.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import {expect} from '@storybook/jest';
import {userEvent, within} from '@storybook/testing-library';
import {withRouter} from 'storybook-addon-react-router-v6';

import Card from 'components/Card';
Expand Down Expand Up @@ -64,4 +66,11 @@ export const WithBackendValidationErrors = {
handlers: [mockAppointmentCancelErrorPost],
},
},

play: async ({canvasElement}) => {
const canvas = within(canvasElement);

await userEvent.click(canvas.getByRole('button'));
expect(await canvas.findByText('Invalid e-mail for the submission.')).toBeVisible();
},
};
14 changes: 6 additions & 8 deletions src/components/appointments/fields/DateSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,12 @@ const DateSelect = ({products, onChange}) => {
if (!loading && location && availableDates && !availableDates.length) {
// TODO: add label? make this a polite warning/error/alert?
return (
<div className="openforms-form-control">
<Paragraph>
<FormattedMessage
description="Appoinments: message shown for no available dates at all"
defaultMessage="Sorry, there are no available dates for your appointment. Please try again later."
/>
</Paragraph>
</div>
<Paragraph>
<FormattedMessage
description="Appoinments: message shown for no available dates at all"
defaultMessage="Sorry, there are no available dates for your appointment. Please try again later."
/>
</Paragraph>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/appointments/fields/Product.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Product = ({namePrefix, index, selectedProducts}) => {
const intl = useIntl();
const {supportsMultipleProducts} = useContext(AppointmentConfigContext);
return (
<div>
<div className="openforms-form-field-container">
<ProductSelect
name={`${namePrefix}[${index}].productId`}
selectedProducts={selectedProducts}
Expand Down
8 changes: 5 additions & 3 deletions src/components/appointments/steps/ContactDetailsStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,11 @@ const ContactDetailsStep = ({navigateTo = null}) => {
{({isValid, dirty}) => (
// TODO: don't do inline style
<Form style={{width: '100%'}}>
{components.map(component => (
<FormioComponent key={component.key} component={component} />
))}
<div className="openforms-form-field-container">
{components.map(component => (
<FormioComponent key={component.key} component={component} />
))}
</div>

<SubmitRow
canSubmit={Boolean(!loading && validationSchema)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/appointments/steps/LocationAndTimeStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const LocationAndTimeStepFields = () => {
return (
// TODO: don't do inline style
<Form style={{width: '100%'}}>
<div>
<div className="openforms-form-field-container">
<LocationSelect products={products} onChange={onFieldChange} />
<DateSelect products={products} onChange={onFieldChange} />
<TimeSelect products={products} />
Expand Down
46 changes: 22 additions & 24 deletions src/components/forms/Checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Field, useFormikContext} from 'formik';
import PropTypes from 'prop-types';
import React, {useId} from 'react';

import {HelpText, ValidationErrors, Wrapper} from 'components/forms';
import {HelpText, ValidationErrors} from 'components/forms';

import {LabelContent} from '../Label';

Expand All @@ -24,29 +24,27 @@ const Checkbox = ({
const invalid = touched && !!error;

return (
<Wrapper>
<FormField type="checkbox" invalid={invalid} className="utrecht-form-field--openforms">
<Field
name={name}
as={UtrechtCheckbox}
type="checkbox"
id={id}
className="utrecht-form-field__input utrecht-custom-checkbox utrecht-custom-checkbox--html-input utrecht-custom-checkbox--openforms"
disabled={disabled}
invalid={invalid}
required={isRequired}
appearance="custom"
{...inputProps}
/>
<div className="utrecht-form-field__label utrecht-form-field__label--checkbox">
<LabelContent id={id} isRequired={isRequired} disabled={disabled} type="checkbox">
{label}
</LabelContent>
</div>
<HelpText>{description}</HelpText>
{touched && <ValidationErrors error={error} />}
</FormField>
</Wrapper>
<FormField type="checkbox" invalid={invalid} className="utrecht-form-field--openforms">
<Field
name={name}
as={UtrechtCheckbox}
type="checkbox"
id={id}
className="utrecht-form-field__input utrecht-custom-checkbox utrecht-custom-checkbox--html-input utrecht-custom-checkbox--openforms"
disabled={disabled}
invalid={invalid}
required={isRequired}
appearance="custom"
{...inputProps}
/>
<div className="utrecht-form-field__label utrecht-form-field__label--checkbox">
<LabelContent id={id} isRequired={isRequired} disabled={disabled} type="checkbox">
{label}
</LabelContent>
</div>
<HelpText>{description}</HelpText>
{touched && <ValidationErrors error={error} />}
</FormField>
);
};

Expand Down
36 changes: 17 additions & 19 deletions src/components/forms/DateField/DateField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Field, useFormikContext} from 'formik';
import PropTypes from 'prop-types';
import React from 'react';

import {HelpText, ValidationErrors, Wrapper} from 'components/forms';
import {HelpText, ValidationErrors} from 'components/forms';

import DateInputGroup from './DateInputGroup';
import DatePicker from './DatePicker';
Expand Down Expand Up @@ -66,24 +66,22 @@ const DateField = ({
}

return (
<Wrapper>
<FormField type="text" invalid={invalid} className="utrecht-form-field--openforms">
<Field
as={Widget}
name={name}
label={label}
isRequired={isRequired}
id={id}
disabled={disabled}
invalid={invalid}
extraOnChange={onChange}
{...fieldProps}
{...props}
/>
<HelpText>{description}</HelpText>
{touched && <ValidationErrors error={error} />}
</FormField>
</Wrapper>
<FormField type="text" invalid={invalid} className="utrecht-form-field--openforms">
<Field
as={Widget}
name={name}
label={label}
isRequired={isRequired}
id={id}
disabled={disabled}
invalid={invalid}
extraOnChange={onChange}
{...fieldProps}
{...props}
/>
<HelpText>{description}</HelpText>
{touched && <ValidationErrors error={error} />}
</FormField>
);
};

Expand Down
4 changes: 2 additions & 2 deletions src/components/forms/InputGroup/InputGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ example:
The input group is a low level component, intended to replace a regular `Textbox` or `Select`
component.

It should be composed with the `Wrapper`, `FormField`, `FormLabel`, `HelpText` and
`ValidationErrors` components.
It should be composed with the `FormField`, `FormLabel`, `HelpText` and `ValidationErrors`
components.

## Props

Expand Down
40 changes: 19 additions & 21 deletions src/components/forms/InputGroup/InputGroup.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {FormField, FormLabel, Textbox} from '@utrecht/component-library-react';
import {Field} from 'formik';

import {SelectField, TextField, Wrapper} from 'components/forms';
import {SelectField, TextField} from 'components/forms';
import {FormikDecorator} from 'story-utils/decorators';

import {InputGroup, InputGroupItem} from './InputGroup';
Expand Down Expand Up @@ -42,27 +42,25 @@ export const Basic = {

export const InLargerForm = {
render: args => (
<>
<div className="openforms-form-field-container">
<TextField name="before" label="First field" />

<Wrapper>
<FormField type="text" className="utrecht-form-field--openforms">
<InputGroup {...args}>
<InputGroupItem>
<FormLabel htmlFor="sub1" className="openforms-input-group__label">
Sub 1
</FormLabel>
<Field as={Textbox} name="inputGroup[0]" id="sub1" />
</InputGroupItem>
<InputGroupItem>
<FormLabel htmlFor="sub2" className="openforms-input-group__label">
Sub 2
</FormLabel>
<Field as={Textbox} name="inputGroup[1]" id="sub2" />
</InputGroupItem>
</InputGroup>
</FormField>
</Wrapper>
<FormField type="text" className="utrecht-form-field--openforms">
<InputGroup {...args}>
<InputGroupItem>
<FormLabel htmlFor="sub1" className="openforms-input-group__label">
Sub 1
</FormLabel>
<Field as={Textbox} name="inputGroup[0]" id="sub1" />
</InputGroupItem>
<InputGroupItem>
<FormLabel htmlFor="sub2" className="openforms-input-group__label">
Sub 2
</FormLabel>
<Field as={Textbox} name="inputGroup[1]" id="sub2" />
</InputGroupItem>
</InputGroup>
</FormField>

<SelectField
name="after"
Expand All @@ -72,7 +70,7 @@ export const InLargerForm = {
]}
label="Last field"
/>
</>
</div>
),
args: {
label: 'Group related inputs',
Expand Down
2 changes: 1 addition & 1 deletion src/components/forms/Label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const LabelContent = ({id, disabled = false, isRequired = false, type, ch
htmlFor={id}
disabled={disabled}
className={classNames({
'utrecht-form-label--openforms-required': isRequired,
'utrecht-form-label--openforms-required': isRequired && requiredFieldsWithAsterisk,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I expected this fix to trigger a diff in chromatic.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we didn't really have any stories with validate.required or the explicit config to not use asterisks for required fields, so it makes sense there's no diff.

Or do you mean markup diffs?

[`utrecht-form-label--${type}`]: type,
})}
>
Expand Down
52 changes: 25 additions & 27 deletions src/components/forms/NumberField/NumberField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React from 'react';
import {useIntl} from 'react-intl';
import {NumericFormat} from 'react-number-format';

import {HelpText, Label, ValidationErrors, Wrapper} from 'components/forms';
import {HelpText, Label, ValidationErrors} from 'components/forms';

const getSeparators = locale => {
const numberFormat = new Intl.NumberFormat(locale);
Expand Down Expand Up @@ -48,32 +48,30 @@ const NumberField = ({
};

return (
<Wrapper>
<UtrechtFormField type="text" invalid={invalid} className="utrecht-form-field--openforms">
<Label id={id} isRequired={isRequired} disabled={disabled}>
{label}
</Label>
<Paragraph>
<NumericFormat
// Note: the onChange handler does not handle any input sanitation
{...fieldProps}
value={value}
id={id}
className="utrecht-textbox--openforms"
disabled={disabled}
invalid={invalid}
min={min}
step={step}
type={useNumberType ? 'number' : 'text'}
customInput={Textbox}
readOnly={readOnly}
{...separatorProps}
/>
</Paragraph>
<HelpText>{description}</HelpText>
{touched && <ValidationErrors error={error} />}
</UtrechtFormField>
</Wrapper>
<UtrechtFormField type="text" invalid={invalid} className="utrecht-form-field--openforms">
<Label id={id} isRequired={isRequired} disabled={disabled}>
{label}
</Label>
<Paragraph>
<NumericFormat
// Note: the onChange handler does not handle any input sanitation
{...fieldProps}
value={value}
id={id}
className="utrecht-textbox--openforms"
disabled={disabled}
invalid={invalid}
min={min}
step={step}
type={useNumberType ? 'number' : 'text'}
customInput={Textbox}
readOnly={readOnly}
{...separatorProps}
/>
</Paragraph>
<HelpText>{description}</HelpText>
{touched && <ValidationErrors error={error} />}
</UtrechtFormField>
);
};

Expand Down
Loading