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

Jump to bottom

[R2] Form #163

Open
wants to merge 28 commits into
base: develop
Choose a base branch
from
Open

[R2] Form #163

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
53e4cbe
refactor(checkobox): remove unnecessary export
tarantilis May 12, 2022
e3ef41f
refactor(input): remove unnecessary export
tarantilis May 12, 2022
21593a2
refactor(toggle): remove unnecessary export
tarantilis May 12, 2022
e9ced4c
refactor(dropdown): update styles and stories to match the other form…
tarantilis May 12, 2022
0668df0
Merge branch 'develop' into refactor-form
tarantilis May 16, 2022
10adb04
Merge branch 'develop' into refactor-form
g-stamatis May 17, 2022
deca897
refactor(dropdown): hover color fix for error dropdown
tarantilis May 17, 2022
4b35133
Merge branch 'develop' into refactor-form
tarantilis May 17, 2022
1970062
Merge branch 'refactor-form' of https://bitbucket.org/itmlgr/volto-ee…
g-stamatis May 17, 2022
1dddb5c
fix(dropdown): update border color for error dropdown
tarantilis Jun 21, 2022
19823ad
refactor(input) add aria-invalid attribute
tarantilis Jun 21, 2022
f185ffd
Merge branch 'develop' into refactor-form
tarantilis Jun 22, 2022
dfd6da7
refactor(fieldWrapper): move error message above input
tarantilis Jun 22, 2022
7b7369d
fix(input): add aria-describedby to input and its id to label
tarantilis Jun 23, 2022
eb930bd
Merge branch 'refactor-form' of https://bitbucket.org/itmlgr/volto-ee…
g-stamatis Jun 23, 2022
61ca885
Merge branch 'develop' into refactor-form
tarantilis Jul 28, 2022
a14c30b
fix(form): update placeholder color for accessibility
tarantilis Jul 28, 2022
72e6f14
fix(header): remove console logs
tarantilis Jul 28, 2022
932f5b3
fix(form): update error placeholder color for readability
tarantilis Jul 28, 2022
c8ff6ab
fix(input): link input with its label using area-labelledby and remov…
tarantilis Jul 28, 2022
fd19078
refactor(form): remove all exports without label
tarantilis Jul 28, 2022
3e5da88
fix(form): fix accessibility warning by removing second labels and ad…
tarantilis Jul 28, 2022
eb5afa5
Merge branch 'refactor-form' of https://github.com/eea/volto-eea-desi…
tarantilis Aug 1, 2022
d7f33e0
Merge branch 'develop' into refactor-form
tarantilis Aug 2, 2022
0ac3e2f
Merge branch 'develop' into refactor-form
g-stamatis Aug 29, 2022
fab99d0
Merge branch 'develop' into refactor-form
tarantilis Sep 20, 2022
ad81896
Merge branch 'refactor-form' of https://github.com/eea/volto-eea-desi…
tarantilis Sep 20, 2022
083357f
Merge branch 'develop' into refactor-form
tarantilis Sep 20, 2022
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
27 changes: 4 additions & 23 deletions src/ui/Form/Checkbox.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,15 @@ function CheckboxForm({
) : null}
<Form.Field error={invalid}>
<Checkbox label="Option 1" defaultChecked id="field1"></Checkbox>
<label htmlFor="field1">Helper text for option 1</label>
<p class="description">Helper text for option 1</p>
Copy link
Member

Choose a reason for hiding this comment

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

@g-stamatis Hmm. I'm not sure about this change.

checkboxes, radio, text inputs should have the label with the for attribute present.

Copy link
Collaborator

Choose a reason for hiding this comment

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

@avoinea The semantic uses the label prop inside the Checkbox component (line 91) so we had accesibility warnings for adding another label for the helper text. I don't clearly remember but I think we talked in a daily meeting and decided to just put a description p.

</Form.Field>
<Form.Field error={invalid}>
<Checkbox label="Option 2" id="field2"></Checkbox>
<label htmlFor="field2">Helper text for option 2</label>
<p class="description">Helper text for option 2</p>
</Form.Field>
<Form.Field error={invalid}>
<Checkbox label="Option 3 (disabled)" disabled id="field3"></Checkbox>
<label htmlFor="field3">Helper text for option 3</label>
<p class="description">Helper text for option 3</p>
</Form.Field>
</Form>
</Container>
Expand Down Expand Up @@ -128,7 +128,7 @@ function SingleCheckboxForm({

<Form.Field error={invalid}>
<Checkbox label="Option 1" defaultChecked id="field4"></Checkbox>
<label htmlFor="field4">Helper text for option 1</label>
<p class="description">Helper text for option 1</p>
</Form.Field>
{invalid ? (
<Message header="Error Message" content={errorMessage} negative />
Expand Down Expand Up @@ -170,25 +170,6 @@ invalid.argTypes = {
},
};

export const optional = Template.bind({});
optional.args = {
label: 'Select your preferred options',
helperText: 'Helper text for the group',
errorMessage: 'Error message for the group',
optionalText: ' (optional)',
requiredText: '*',
invalid: false,
required: false,
};

optional.argTypes = {
required: {
table: {
defaultValue: { summary: false },
},
},
};

export const single = (args) => (
<SingleCheckboxForm {...args}></SingleCheckboxForm>
);
Expand Down
69 changes: 43 additions & 26 deletions src/ui/Form/Dropdown.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,27 @@ export default {
defaultValue: { summary: ' "" ' },
},
},
fluid: {
description: 'takes the full width of its parent',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
required: {
description: 'a field can show that is mandatory',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
disabled: {
description: 'disable dropdown',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
},
};

Expand Down Expand Up @@ -75,52 +96,48 @@ export const Default = Template.bind({});
Default.args = {
placeholder: 'Select Option',
options: listOptions,
};
export const Playground = Template.bind({});
Playground.args = {
placeholder: 'Select Option',
options: listOptions,
label: 'Dropdown',
required: true,
required: false,
search: false,
disabled: false,
fluid: false,
};

Playground.argTypes = {
Default.argTypes = {
search: {
description: ' search through a large list of choice',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
disabled: {
description: 'disable dropdown',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
fluid: {
description: 'takes the full width of its parent',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
label: {
description: 'dropdown label',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
},
},
required: {
description: 'a field can show that is mandatory',
};

export const LoadingDropdown = Template.bind({});
LoadingDropdown.args = {
placeholder: 'Select Option',
options: listOptions,
label: 'Dropdown',
loading: true,
required: false,
search: false,
disabled: false,
fluid: false,
};

LoadingDropdown.argTypes = {
label: {
description: 'dropdown label',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
type: { summary: 'string' },
defaultValue: { summary: '' },
},
},
};
Expand All @@ -131,7 +148,7 @@ ErrorDropdown.args = {
options: listOptions,
label: 'Dropdown',
error: true,
required: true,
required: false,
search: false,
disabled: false,
fluid: false,
Expand Down
110 changes: 50 additions & 60 deletions src/ui/Form/Input.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
export default {
title: 'Components/Forms/Input',
component: Input,
parameters: { controls: { exclude: ['invalid'] } },
argTypes: {
type: {
control: {
Expand Down Expand Up @@ -50,6 +51,34 @@ export default {
defaultValue: { summary: false },
},
},
disabled: {
description: 'disabled',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true },
},
},
invalid: {
description: 'Aria attribute',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
describedby: {
description: 'Describes the element on which the attribute is set',
table: {
type: { summary: 'string' },
defaultValue: { summary: ' "" ' },
},
},
labelledby: {
description: 'Id of the label of the element',
table: {
type: { summary: 'string' },
defaultValue: { summary: ' "" ' },
},
},
},
};

Expand All @@ -60,32 +89,35 @@ const Template = ({ label, error, ...rest }) => (
error={error}
label={label}
required={rest.required}
describedby={rest.describedby}
labelledby={rest.labelledby}
columns={label ? 1 : 0}
>
<Input {...rest} id="temp-id" />
<Input
{...rest}
id="temp-id"
aria-invalid={rest.invalid}
aria-describedby={rest.describedby}
aria-labelledby={rest.labelledby}
/>
</FormFieldWrapper>
</Form>
</Container>
);

export const Default = Template.bind({});
Default.args = {
placeholder: 'Placeholder',
type: 'text',
fluid: false,
required: false,
};

export const StandardInput = Template.bind({});
StandardInput.args = {
label: 'Input label',
placeholder: 'Placeholder',
type: 'text',
fluid: false,
required: false,
disabled: false,
invalid: false,
labelledby: 'label_id',
};

StandardInput.argTypes = {
Default.argTypes = {
label: {
description: 'input label',
table: {
Expand All @@ -102,55 +134,6 @@ StandardInput.argTypes = {
},
};

export const DisabledInput = Template.bind({});
DisabledInput.args = {
label: 'Input label',
placeholder: 'Placeholder',
type: 'text',
disabled: true,
fluid: false,
required: false,
};
DisabledInput.argTypes = {
fluid: {
description: 'take on the size of its container',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
label: {
description: 'input label',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
},
},
required: {
description: 'a field can show that is mandatory',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
};
DisabledInput.argTypes = {
disabled: {
description: 'disabled',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true },
},
},
label: {
description: 'input label',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
},
},
};

export const LoadingInput = Template.bind({});
LoadingInput.args = {
label: 'Input label',
Expand All @@ -159,6 +142,9 @@ LoadingInput.args = {
loading: true,
fluid: false,
required: false,
disabled: false,
invalid: false,
labelledby: 'label_id',
};
LoadingInput.argTypes = {
loading: {
Expand Down Expand Up @@ -189,10 +175,14 @@ export const ErrorInput = Template.bind({});
ErrorInput.args = {
label: 'Input label',
placeholder: 'Placeholder',
type: 'text',
error: true,
type: 'text',
fluid: false,
required: false,
disabled: false,
invalid: true,
describedby: 'desc_id',
labelledby: 'label_id',
};
ErrorInput.argTypes = {
error: {
Expand Down
8 changes: 3 additions & 5 deletions src/ui/Form/Radio.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ function RadioForm({
onChange={handleChange}
id="field1"
></Radio>
<label htmlFor="field1">Helper text for option 1</label>
<p class="description">Helper text for option 1</p>
</Form.Field>
<Form.Field error={invalid}>
<Radio
Expand All @@ -116,7 +116,7 @@ function RadioForm({
onChange={handleChange}
id="field2"
></Radio>
<label htmlFor="field2">Helper text for option 2</label>
<p class="description">Helper text for option 2</p>
</Form.Field>
<Form.Field error={invalid}>
<Radio
Expand All @@ -128,7 +128,7 @@ function RadioForm({
onChange={handleChange}
id="field3"
></Radio>
<label htmlFor="field3">Helper text for option 3</label>
<p class="description">Helper text for option 3</p>
</Form.Field>
</Form>
</Container>
Expand Down Expand Up @@ -172,7 +172,6 @@ function Binary({
onChange={handleChange}
id="radio-yes"
></Radio>
<label htmlFor="radio-yes"> </label>
</Form.Field>
<Form.Field error={invalid}>
<Radio
Expand All @@ -183,7 +182,6 @@ function Binary({
onChange={handleChange}
id="radio-no"
></Radio>
<label htmlFor="radio-no"> </label>
</Form.Field>
</Form>
</Container>
Expand Down
Loading