Merge pull request #4579 from kobotoolbox/3914-update-textbox-component

Update TextBox component
kobotoolbox · Aug 30, 2023 · 5ac0c9c · 5ac0c9c
2 parents 25457fa + c7c9d00
commit 5ac0c9c
Show file tree

Hide file tree

Showing 49 changed files with 681 additions and 580 deletions.
diff --git a/jsapp/js/account/accountSettings.scss b/jsapp/js/account/accountSettings.scss
@@ -68,10 +68,6 @@
     }
   }
 
-  .account-settings-link {
-    font-size: 0.85em;
-  }
-
   .form-modal__item {
     &.form-modal__item--primary-sector {
       width: 46%;
@@ -97,28 +93,9 @@
       width: 46%;
       float: left;
     }
-
-    &.form-modal__item--social {
-      clear: both;
-
-      > label {
-        position: relative;
-
-        &:not(:first-child) {
-          margin-top: sizes.$x5;
-        }
-
-        > i {
-          position: absolute;
-          font-size: 24px;
-          top: 4px;
-          left: 4px;
-        }
-
-        .text-box .text-box__input {
-          padding-left: 40px;
-        }
-      }
-    }
   }
 }
+
+.account-settings-social-row:not(:first-child) {
+  margin-top: sizes.$x5;
+}
diff --git a/jsapp/js/account/accountSettingsRoute.tsx b/jsapp/js/account/accountSettingsRoute.tsx
@@ -282,7 +282,6 @@ const AccountSettings = observer(() => {
             {/* Full name */}
             {metadata.name && <bem.AccountSettings__item>
               <TextBox
-                customModifiers='on-white'
                 label={getLabel(fieldNames.name)}
                 onChange={onAnyFieldChange.bind(
                   onAnyFieldChange,
@@ -299,7 +298,6 @@ const AccountSettings = observer(() => {
             {/* Organization */}
             {metadata.organization && <bem.AccountSettings__item>
               <TextBox
-                customModifiers='on-white'
                 label={getLabel(fieldNames.organization)}
                 onChange={onAnyFieldChange.bind(
                   onAnyFieldChange,
@@ -313,7 +311,6 @@ const AccountSettings = observer(() => {
             {/* Organization Website */}
             {metadata.organization_website && <bem.AccountSettings__item>
               <TextBox
-                customModifiers='on-white'
                 label={getLabel(fieldNames.organization_website)}
                 value={form.fields.organization_website}
                 onChange={onAnyFieldChange.bind(
@@ -357,7 +354,6 @@ const AccountSettings = observer(() => {
             {/* Bio */}
             {metadata.bio && <bem.AccountSettings__item m='bio'>
               <TextBox
-                customModifiers='on-white'
                 label={getLabel(fieldNames.bio)}
                 value={form.fields.bio}
                 onChange={onAnyFieldChange.bind(
@@ -385,7 +381,6 @@ const AccountSettings = observer(() => {
             {/* City */}
             {metadata.city && <bem.AccountSettings__item m='city'>
               <TextBox
-                customModifiers='on-white'
                 label={getLabel(fieldNames.city)}
                 value={form.fields.city}
                 onChange={onAnyFieldChange.bind(
@@ -397,15 +392,13 @@ const AccountSettings = observer(() => {
             </bem.AccountSettings__item>}
 
             {/* Social */}
-            {(metadata.twitter || metadata.linkedin || metadata.instagram) && <bem.AccountSettings__item m='social'>
+            {(metadata.twitter || metadata.linkedin || metadata.instagram) && <bem.AccountSettings__item>
               <label>{t('Social')}</label>
 
               {/* Twitter */}
-              {metadata.twitter && <label>
-                <i className='k-icon k-icon-logo-twitter' />
-
+              {metadata.twitter && <div className='account-settings-social-row'>
                 <TextBox
-                  customModifiers='on-white'
+                  startIcon='logo-twitter'
                   placeholder={getLabel(fieldNames.twitter)}
                   value={form.fields.twitter}
                   onChange={onAnyFieldChange.bind(
@@ -414,14 +407,12 @@ const AccountSettings = observer(() => {
                   )}
                   errors={form.fieldsWithErrors.extra_details?.twitter}
                 />
-              </label>}
+              </div>}
 
               {/* LinkedIn */}
-              {metadata.linkedin && <label>
-                <i className='k-icon k-icon-logo-linkedin' />
-
+              {metadata.linkedin && <div className='account-settings-social-row'>
                 <TextBox
-                  customModifiers='on-white'
+                  startIcon='logo-linkedin'
                   placeholder={getLabel(fieldNames.linkedin)}
                   value={form.fields.linkedin}
                   onChange={onAnyFieldChange.bind(
@@ -430,14 +421,12 @@ const AccountSettings = observer(() => {
                   )}
                   errors={form.fieldsWithErrors.extra_details?.linkedin}
                 />
-              </label>}
+              </div>}
 
               {/* Instagram */}
-              {metadata.instagram && <label>
-                <i className='k-icon k-icon-logo-instagram' />
-
+              {metadata.instagram && <div className='account-settings-social-row'>
                 <TextBox
-                  customModifiers='on-white'
+                  startIcon='logo-instagram'
                   placeholder={getLabel(fieldNames.instagram)}
                   value={form.fields.instagram}
                   onChange={onAnyFieldChange.bind(
@@ -446,7 +435,7 @@ const AccountSettings = observer(() => {
                   )}
                   errors={form.fieldsWithErrors.extra_details?.instagram}
                 />
-              </label>}
+              </div>}
             </bem.AccountSettings__item>}
           </bem.AccountSettings__item>
         )}

diff --git a/jsapp/js/account/security/apiToken/apiTokenSection.component.tsx b/jsapp/js/account/security/apiToken/apiTokenSection.component.tsx
@@ -49,7 +49,6 @@ export default function ApiTokenDisplay() {
 
     <div className={styles.bodySection}>
       <TextBox
-        customModifiers='on-white'
         type={isVisible && !isFetching && token !== null ? 'text' : 'password'}
         value={token !== null ? token : HIDDEN_TOKEN_VALUE}
         readOnly

diff --git a/jsapp/js/account/security/email/emailSection.component.tsx b/jsapp/js/account/security/email/emailSection.component.tsx
@@ -167,7 +167,6 @@ export default function EmailSection() {
       >
         {/*TODO: Move TextBox into a modal--it messes up the flow of the row right now*/}
         <TextBox
-          customModifiers='on-white'
           value={email.newEmail}
           placeholder={t('Type new email address')}
           onChange={onTextFieldChange.bind(onTextFieldChange)}

diff --git a/jsapp/js/account/security/email/emailSection.module.scss b/jsapp/js/account/security/email/emailSection.module.scss
@@ -44,12 +44,6 @@
   flex-direction: column;
   row-gap: sizes.$x12;
   align-items: flex-end;
-
-  :global {
-    .text-box {
-      width: 100%;
-    }
-  }
 }
 
 .currentEmail {

diff --git a/jsapp/js/account/security/password/updatePasswordForm.component.tsx b/jsapp/js/account/security/password/updatePasswordForm.component.tsx
@@ -132,7 +132,6 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
 
       <div className={styles.row}>
         <TextBox
-          customModifiers='on-white'
           label={t('Current Password')}
           type='password'
           errors={currentPasswordError}
@@ -141,7 +140,7 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
         />
 
         <a
-          className='account-settings-link'
+          className={styles.forgotLink}
           href={`${ROOT_URL}/accounts/password/reset/`}
         >
           {t('Forgot Password?')}
@@ -150,7 +149,6 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
 
       <div className={styles.row}>
         <TextBox
-          customModifiers='on-white'
           label={t('New Password')}
           type='password'
           errors={newPasswordError}
@@ -165,7 +163,6 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
 
       <div className={styles.row}>
         <TextBox
-          customModifiers='on-white'
           label={t('Verify Password')}
           type='password'
           errors={verifyPasswordError}

diff --git a/jsapp/js/account/security/password/updatePasswordForm.module.scss b/jsapp/js/account/security/password/updatePasswordForm.module.scss
@@ -9,6 +9,10 @@
   margin-top: sizes.$x16;
 }
 
+.forgotLink {
+  font-size: sizes.$x12;
+}
+
 // Note: we allow all markdown-generated HTML inside this, so we might need to
 // add some more styles here.
 .guidanceText :global p {

diff --git a/jsapp/js/actions/dataShareActions.es6 b/jsapp/js/actions/dataShareActions.es6
@@ -31,7 +31,7 @@ dataShareActions.attachToSource.listen((assetUid, data) => {
 });
 dataShareActions.attachToSource.failed.listen((response) => {
   notify.error(
-    response?.responseJSON?.filename[0] ||
+    response?.responseJSON?.filename?.[0] ||
       response?.responseJSON ||
       t('Failed to attach to source')
   );

diff --git a/jsapp/js/bemComponents.ts b/jsapp/js/bemComponents.ts
@@ -50,11 +50,6 @@ bem.FormBuilderMessageBox = makeBem(null, 'form-builder-message-box');
 bem.FormBuilderMessageBox__toggle = makeBem(bem.FormBuilderMessageBox, 'toggle', 'button');
 bem.FormBuilderMessageBox__details = makeBem(bem.FormBuilderMessageBox, 'details', 'section');
 
-bem.FormBuilderMeta = makeBem(null, 'form-builder-meta');
-bem.FormBuilderMeta__columns = makeBem(bem.FormBuilderMeta, 'columns');
-bem.FormBuilderMeta__column = makeBem(bem.FormBuilderMeta, 'column');
-bem.FormBuilderMeta__row = makeBem(bem.FormBuilderMeta, 'row');
-
 bem.FormBuilderAside = makeBem(null, 'form-builder-aside');
 bem.FormBuilderAside__content = makeBem(bem.FormBuilderAside, 'content');
 bem.FormBuilderAside__header = makeBem(bem.FormBuilderAside, 'header', 'h2');
@@ -74,10 +69,6 @@ bem.FormMedia__list = makeBem(bem.FormMedia, 'list');
 bem.FormMedia__label = makeBem(bem.FormMedia, 'label', 'label');
 bem.FormMedia__listItem = makeBem(bem.FormMedia, 'list-item', 'li');
 
-bem.FormMediaUploadUrl = makeBem(null, 'form-media-upload-url');
-bem.FormMediaUploadUrl__label = makeBem(bem.FormMediaUploadUrl, 'label', 'label');
-bem.FormMediaUploadUrl__form = makeBem(bem.FormMediaUploadUrl, 'form');
-
 bem.SearchInput = makeBem(null, 'search-input', 'input');
 
 bem.Search = makeBem(null, 'search');
@@ -241,13 +232,6 @@ bem.SimpleTable__cell = makeBem(bem.SimpleTable, 'cell', 'td');
 bem.tagSelect = makeBem(null, 'tag-select');
 bem.collectionFilter = makeBem(null, 'collection-filter');
 
-bem.TextBox = makeBem(null, 'text-box', 'label');
-bem.TextBox__label = makeBem(bem.TextBox, 'label');
-bem.TextBox__labelLink = makeBem(bem.TextBox, 'label-link', 'a');
-bem.TextBox__input = makeBem(bem.TextBox, 'input', 'input');
-bem.TextBox__description = makeBem(bem.TextBox, 'description');
-bem.TextBox__error = makeBem(bem.TextBox, 'error');
-
 bem.ToggleSwitch = makeBem(null, 'toggle-switch');
 bem.ToggleSwitch__wrapper = makeBem(bem.ToggleSwitch, 'wrapper', 'label');
 bem.ToggleSwitch__input = makeBem(bem.ToggleSwitch, 'input', 'input');

diff --git a/jsapp/js/components/RESTServices/RESTServicesForm.es6 b/jsapp/js/components/RESTServices/RESTServicesForm.es6
@@ -423,7 +423,6 @@ export default class RESTServicesForm extends React.Component {
           <bem.FormModal__item m='wrapper'>
             <bem.FormModal__item>
               <TextBox
-                customModifiers='on-white'
                 label={t('Name')}
                 type='text'
                 placeholder={t('Service Name')}
@@ -435,7 +434,6 @@ export default class RESTServicesForm extends React.Component {
 
             <bem.FormModal__item>
               <TextBox
-                customModifiers='on-white'
                 label={t('Endpoint URL')}
                 type='text'
                 placeholder={t('https://')}
@@ -489,15 +487,13 @@ export default class RESTServicesForm extends React.Component {
             {this.state.authLevel && this.state.authLevel.value === AUTH_OPTIONS.basic_auth.value &&
               <bem.FormModal__item>
                 <TextBox
-                  customModifiers='on-white'
                   label={t('Username')}
                   type='text'
                   value={this.state.authUsername}
                   onChange={this.handleAuthUsernameChange.bind(this)}
                 />
 
                 <TextBox
-                  customModifiers='on-white'
                   label={t('Password')}
                   type='text'
                   value={this.state.authPassword}
@@ -513,7 +509,6 @@ export default class RESTServicesForm extends React.Component {
             {this.state.type === EXPORT_TYPES.json.value &&
               <bem.FormModal__item m='rest-custom-wrapper'>
                 <TextBox
-                  customModifiers='on-white'
                   label={t('Add custom wrapper around JSON submission (%SUBMISSION% will be replaced by JSON)').replace('%SUBMISSION%', submissionPlaceholder)}
                   type='text-multiline'
                   placeholder={t('Add Custom Wrapper')}

diff --git a/jsapp/js/components/bigModal/mfaModals.scss b/jsapp/js/components/bigModal/mfaModals.scss
@@ -22,17 +22,18 @@ $mfa-paragraph-spacing: sizes.$x18;
   display: flex;
   flex-direction: column;
 
-  .text-box__input {
-    text-align: center;
-    font-size: sizes.$x18 !important;
-    font-weight: 400 !important;
-  }
-
   p {
     margin: 0;
   }
 }
 
+// HACK override for TextBox component
+.mfa-modals-textbox input {
+  text-align: center;
+  font-size: sizes.$x18 !important;
+  font-weight: 400 !important;
+}
+
 .mfa-modal__body {
   flex: 1;
 }

diff --git a/jsapp/js/components/bigModal/mfaModals.tsx b/jsapp/js/components/bigModal/mfaModals.tsx
@@ -252,10 +252,10 @@ const MFAModals = class MFAModals extends React.Component<
 
           <bem.MFAModal__p>
             <TextBox
+              customClassNames={['mfa-modals-textbox']}
               errors={this.state.errorText}
               value={this.state.inputString}
               onChange={this.onInputChange.bind(this)}
-              customModifiers={'on-white'}
             />
           </bem.MFAModal__p>
 
@@ -375,10 +375,10 @@ const MFAModals = class MFAModals extends React.Component<
 
           <bem.MFAModal__p>
             <TextBox
+              customClassNames={['mfa-modals-textbox']}
               errors={this.state.errorText}
               value={this.state.inputString}
               onChange={this.onInputChange.bind(this)}
-              customModifiers={'on-white'}
             />
           </bem.MFAModal__p>
 
@@ -429,10 +429,10 @@ const MFAModals = class MFAModals extends React.Component<
 
           <bem.MFAModal__p>
             <TextBox
+              customClassNames={['mfa-modals-textbox']}
               errors={this.state.errorText}
               value={this.state.inputString}
               onChange={this.onInputChange.bind(this)}
-              customModifiers={'on-white'}
             />
           </bem.MFAModal__p>
 

diff --git a/jsapp/js/components/common/button.scss b/jsapp/js/components/common/button.scss
@@ -1,5 +1,6 @@
 @use '~kobo-common/src/styles/colors';
 @use 'scss/sizes';
+@use 'scss/mixins';
 @use 'js/components/common/icon';
 @use 'sass:color';
 
@@ -164,6 +165,14 @@ $button-border-radius: sizes.$x6;
   transform: translateY(sizes.$x1);
 }
 
+.k-button:focus {
+  outline: none;
+}
+
+.k-button:focus-visible {
+  @include mixins.default-ui-focus;
+}
+
 .k-button__label {
   cursor: inherit;
   line-height: 1;