Skip to content

fix: missing asterisk #6617

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.

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

Merged
merged 2 commits into from
Aug 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ export default class Work extends ConsentComponent {
</div>
<div styleName="form-body">
<form styleName="workplace-form" noValidate autoComplete="off">
<FormField label="Company *" style={{ flex: '0 0 100%' }}>
<FormField label="Company" style={{ flex: '0 0 100%' }} required>
<FormInputText
id="company"
name="company"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@ export default class Languages extends ConsentComponent {
</div>
<div styleName="form-body">
<form styleName="language-form" noValidate autoComplete="off">
<FormField label="Language *" style={{ flex: '0 0 100%' }}>
<FormField label="Language" style={{ flex: '0 0 100%' }} required>
<FormInputSelect
name="language"
options={dropdowns.language}
Expand Down
6 changes: 5 additions & 1 deletion src/shared/components/Settings/FormField/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ import cn from 'classnames';
import './styles.scss';

const FormField = ({
children, label = '', disabled, style, required,
children, label = '', disabled, style, isTextarea,
}) => (
<div styleName="form-field-wrapper" style={style}>
<div styleName="form-field">
<div styleName={cn('label', { disabled, isTextarea })} role="presentation">
<div styleName={cn('label', disabled ? 'disabled' : null, isTextarea)} role="presentation">
{label}
{ required && <span styleName="required">*</span> }
</div>
{children}
</div>
Expand All @@ -26,6 +28,7 @@ FormField.defaultProps = {
children: null,
disabled: false,
style: {},
required: false,
isTextarea: false,
};

Expand All @@ -34,6 +37,7 @@ FormField.propTypes = {
children: PT.node,
disabled: PT.bool,
style: PT.object,
required: PT.bool,
isTextarea: PT.bool,
};

Expand Down
5 changes: 5 additions & 0 deletions src/shared/components/Settings/FormField/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@
color: $color-black-60;
}

.required {
color: $member-red;
margin-left: 5px;
}

&.isTextarea {
top: 10px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const Hobbies = (props) => {
<div styleName="form-container-default">
<form name="device-form" noValidate autoComplete="off">
{/* Hobby */}
<FormField label="Hobby">
<FormField label="Hobby" required>
<FormInputText
id="hobby"
name="hobby"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const Learning = (props) => {
<div styleName="form-container-default">
<form name="device-form" noValidate autoComplete="off">
{/* Name of College or University */}
<FormField label="Name of College or University">
<FormField label="Name of College or University" required>
<FormInputText
id="schoolCollegeName"
name="schoolCollegeName"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const PersonalDetails = (props) => {
<form name="basic-info-form" noValidate autoComplete="off">

{/* First Name */}
<FormField label="First Name">
<FormField label="First Name" required>
<FormInputText
disabled={!canModifyTrait}
id="firstName"
Expand All @@ -57,7 +57,7 @@ const PersonalDetails = (props) => {
</FormField>

{/* Last Name */}
<FormField label="Last Name">
<FormField label="Last Name" required>
<FormInputText
disabled={!canModifyTrait}
id="lastName"
Expand Down Expand Up @@ -192,7 +192,7 @@ const PersonalDetails = (props) => {
</FormField>

{/* Country */}
<FormField label="Country">
<FormField label="Country" required>
<Select
name="country"
options={countries}
Expand Down
2 changes: 1 addition & 1 deletion src/shared/components/Settings/Tools/Devices/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -497,7 +497,7 @@ export default class Devices extends ConsentComponent {
</div>
<div styleName="form-body">
<form styleName="device-form" noValidate autoComplete="off">
<FormField label="Device Type *" style={{ flex: '0 0 100%' }}>
<FormField label="Device Type" style={{ flex: '0 0 100%' }} required>
<FormInputSelect
name="Device Type"
options={types}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ export default class ServiceProviders extends ConsentComponent {
</div>
<div styleName="form-body">
<form styleName="service-provider-form" noValidate autoComplete="off">
<FormField label="Service Provider Type *" style={{ flex: '0 0 100%' }}>
<FormField label="Service Provider Type" style={{ flex: '0 0 100%' }} required>
<FormInputSelect
name="serviceProviderType"
options={dropdowns.serviceProviderType}
Expand All @@ -355,7 +355,7 @@ export default class ServiceProviders extends ConsentComponent {
}
</FormField>

<FormField label="Service Provider Name *" style={{ flex: '0 0 100%' }}>
<FormField label="Service Provider Name" style={{ flex: '0 0 100%' }} required>
<FormInputText
disabled={!canModifyTrait}
id="name"
Expand Down
4 changes: 2 additions & 2 deletions src/shared/components/Settings/Tools/Software/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ export default class Software extends ConsentComponent {
</div>
<div styleName="form-body">
<form styleName="software-form" noValidate autoComplete="off">
<FormField label="Software Type *" style={{ flex: '0 0 100%' }}>
<FormField label="Software Type" style={{ flex: '0 0 100%' }} required>
<FormInputSelect
name="softwareType"
options={dropdowns.type}
Expand All @@ -361,7 +361,7 @@ export default class Software extends ConsentComponent {
}
</FormField>

<FormField label="Software Name *" style={{ flex: '0 0 100%' }}>
<FormField label="Software Name" style={{ flex: '0 0 100%' }} required>
<FormInputText
disabled={!canModifyTrait}
id="name"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,7 @@ export default class Subscription extends ConsentComponent {
</div>
<div styleName="form-body">
<form styleName="subscription-form" noValidate autoComplete="off">
<FormField label="Subscription Name" style={{ flex: '0 0 100%' }}>
<FormField label="Subscription Name" style={{ flex: '0 0 100%' }} required>
<FormInputText
disabled={!canModifyTrait}
id="name"
Expand Down