fix(project): remove optional label for non editing text field

jwplayer · Aug 2, 2021 · 2facbf9 · 2facbf9
1 parent a6d7d67
commit 2facbf9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 15 deletions.
diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -22,9 +22,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
             for="text-field_1235_email"
           >
             account.email
-            <span>
-              optional
-            </span>
           </label>
           <p>
             email@domain.com
@@ -85,9 +82,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
               for="text-field_1235_firstName"
             >
               account.firstname
-              <span>
-                optional
-              </span>
             </label>
             <p>
               John
@@ -101,9 +95,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
               for="text-field_1235_lastName"
             >
               account.lastname
-              <span>
-                optional
-              </span>
             </label>
             <p>
               Doe

diff --git a/src/components/DateField/DateField.tsx b/src/components/DateField/DateField.tsx
@@ -12,7 +12,7 @@ type Props = {
   placeholder?: string;
   name?: string;
   value: string;
-  format?: string,
+  format?: string;
   onChange?: (dateString: string) => void;
   onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;
@@ -70,10 +70,10 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
 
-    setDate(current => {
-      const date = name === 'date' ?  getNewValue(value, 1, 31) : current.date;
-      const month = name === 'month' ?  getNewValue(value, 1, 12) : current.month;
-      const year = name === 'year' ?  getNewValue(value).slice(0, 4) : current.year;
+    setDate((current) => {
+      const date = name === 'date' ? getNewValue(value, 1, 31) : current.date;
+      const month = name === 'month' ? getNewValue(value, 1, 12) : current.month;
+      const year = name === 'year' ? getNewValue(value).slice(0, 4) : current.year;
 
       if (onChange) {
         onChange(date && month && year ? format.replace('YYYY', year).replace('MM', month).replace('DD', date) : '');

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -70,7 +70,7 @@ const TextField: React.FC<Props> = ({
     <div className={textFieldClassName}>
       <label htmlFor={id} className={styles.label}>
         {label}
-        {!rest.required ? <span>{t('optional')}</span> : null}
+        {!rest.required && editing ? <span>{t('optional')}</span> : null}
       </label>
       {editing ? (
         <div className={styles.container}>