replaced almost all mdl-buttons (including @extend) with Button compo…

…nent
kobotoolbox · Jun 20, 2024 · 86e14e1 · 86e14e1
1 parent 3e92521
commit 86e14e1
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 361 deletions.
diff --git a/jsapp/js/bemComponents.ts b/jsapp/js/bemComponents.ts
@@ -46,8 +46,6 @@ bem.FormBuilderHeader = makeBem(null, 'form-builder-header');
 bem.FormBuilderHeader__row = makeBem(bem.FormBuilderHeader, 'row');
 bem.FormBuilderHeader__cell = makeBem(bem.FormBuilderHeader, 'cell');
 bem.FormBuilderHeader__item = makeBem(bem.FormBuilderHeader, 'item', 'span');
-bem.FormBuilderHeader__button = makeBem(bem.FormBuilderHeader, 'button', 'button');
-bem.FormBuilderHeader__close = makeBem(bem.FormBuilderHeader, 'close', 'button');
 
 bem.FormMedia = makeBem(null, 'form-media');
 bem.FormMedia__title = makeBem(bem.FormMedia, 'title');

diff --git a/jsapp/js/components/assetsTable/assetsTable.scss b/jsapp/js/components/assetsTable/assetsTable.scss
@@ -70,22 +70,6 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
   color: colors.$kobo-gray-40;
   background-color: colors.$kobo-gray-96;
   height: 40px;
-
-  .mdl-button {
-    margin-left: 0;
-    margin-right: 0;
-    padding-right: 0;
-    padding-left: 12px;
-    line-height: 32px;
-    height: 32px;
-    min-height: 32px;
-
-    .k-icon {
-      font-size: 24px;
-      margin: 0 3px;
-      float: right;
-    }
-  }
 }
 
 .assets-table--MY_LIBRARY,

diff --git a/jsapp/js/components/common/modal.scss b/jsapp/js/components/common/modal.scss
@@ -684,6 +684,45 @@ $modal-custom-header-height: sizes.$x60;
   gap: 5px;
 }
 
+// Tab button - styles were copied from the deprecated `mdl-button`
+.legacy-modal-tab-button {
+  text-decoration: none;
+  text-align: center;
+  font-weight: normal;
+  font-size: variables.$base-font-size;
+  letter-spacing: 0;
+  margin: 0;
+  border: none;
+  vertical-align: middle;
+  background: transparent;
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  cursor: pointer;
+  color: colors.$kobo-white;
+  opacity: 0.7;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  text-transform: uppercase;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 32px;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:hover {
+    opacity: 1;
+    color: colors.$kobo-white;
+  }
+
+  &.legacy-modal-tab-button--active {
+    opacity: 1;
+    border-bottom: 2px solid white;
+  }
+}
+
 // TODO: rework all these media queries to mobile first
 @media screen and (width < 480px) {
   .table-media-preview-header {

diff --git a/jsapp/js/components/map.scss b/jsapp/js/components/map.scss
@@ -472,45 +472,6 @@ body .leaflet-control-layers,
   line-height: 20px;
 }
 
-// Tab button - styles were copied from the deprecated `mdl-button`
-.map-modal-tab-button {
-  text-decoration: none;
-  text-align: center;
-  font-weight: normal;
-  font-size: variables.$base-font-size;
-  letter-spacing: 0;
-  margin: 0;
-  border: none;
-  vertical-align: middle;
-  background: transparent;
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  cursor: pointer;
-  color: colors.$kobo-white;
-  opacity: 0.7;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
-  text-transform: uppercase;
-  height: 50px;
-  line-height: 50px;
-  padding: 0 32px;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &:hover {
-    opacity: 1;
-    color: colors.$kobo-white;
-  }
-
-  &.active {
-    opacity: 1;
-    border-bottom: 2px solid white;
-  }
-}
-
 @include breakpoints.breakpoint(mediumAndUp) {
   .popover-menu--viewby-menu .popover-menu__toggle {
     max-width: 340px;

diff --git a/jsapp/js/components/mapSettings.es6 b/jsapp/js/components/mapSettings.es6
@@ -15,6 +15,7 @@ import {
 import { dataInterface } from '../dataInterface';
 import {userCan} from 'js/components/permissions/utils';
 import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 // see kobo.map.marker-colors.scss for styling details of each set
 const COLOR_SETS = ['a', 'b', 'c', 'd', 'e'];
@@ -273,9 +274,10 @@ class MapSettings extends React.Component {
     var modalTabs = tabs.map(function(tabId, i) {
       return (
         <button
-          className={`map-modal-tab-button ${
-            this.state.activeModalTab === tabId ? 'active' : ''
-          }`}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === tabId,
+          })}
           onClick={this.switchTab}
           data-tabid={tabId}
           key={i}

diff --git a/jsapp/js/components/permissions/sharingForm.scss b/jsapp/js/components/permissions/sharingForm.scss
@@ -89,10 +89,6 @@ $s-gray-row-spacing: 10px;
     flex-direction: row;
     align-items: center;
     min-height: 50px;
-
-    > .mdl-button {
-      min-width: 32px;
-    }
   }
 
   .user-row__avatar {

diff --git a/jsapp/js/components/reports/questionGraphSettings.es6 b/jsapp/js/components/reports/questionGraphSettings.es6
@@ -6,6 +6,7 @@ import Modal from 'js/components/common/modal';
 import ChartTypePicker from './chartTypePicker.component';
 import ChartColorsPicker from './chartColorsPicker';
 import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 export default class QuestionGraphSettings extends React.Component {
   constructor(props) {
@@ -92,18 +93,13 @@ export default class QuestionGraphSettings extends React.Component {
 
     var tabs = [t('Chart Type'), t('Colors')];
     var modalTabs = tabs.map(function (tab, i) {
-      let tabClassNames = [
-        'mdl-button',
-        'mdl-button--tab',
-      ];
-      if (this.state.activeModalTab === i) {
-        tabClassNames.push('active');
-      }
-
       return (
         <button
-          className={tabClassNames.join(' ')}
-          onClick={this.toggleTab}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === i,
+          })}
+          onClick={this.toggleTab.bind(this)}
           data-index={i}
           key={i}
         >

diff --git a/jsapp/js/components/reports/reportStyleSettings.es6 b/jsapp/js/components/reports/reportStyleSettings.es6
@@ -7,6 +7,7 @@ import Modal from 'js/components/common/modal';
 import ChartTypePicker from './chartTypePicker.component';
 import ChartColorsPicker from './chartColorsPicker';
 import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 export default class ReportStyleSettings extends React.Component {
   constructor(props) {
@@ -123,17 +124,13 @@ export default class ReportStyleSettings extends React.Component {
     }
 
     var modalTabs = tabs.map(function (tab, i) {
-      let tabClassNames = [
-        'mdl-button',
-        'mdl-button--tab',
-      ];
-      if (this.state.activeModalTab === i) {
-        tabClassNames.push('active');
-      }
       return (
         <button
-          className={tabClassNames.join(' ')}
-          onClick={this.toggleTab}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === i,
+          })}
+          onClick={this.toggleTab.bind(this)}
           data-index={i}
           key={i}
         >

diff --git a/jsapp/js/components/reports/reports.scss b/jsapp/js/components/reports/reports.scss
@@ -117,6 +117,7 @@
 
 .form-view__report-buttons-left {
   @include mixins.centerRowFlex;
+  gap: 5px;
   flex: 1;
 }
 

diff --git a/jsapp/js/editorMixins/cascadeMixin.es6 b/jsapp/js/editorMixins/cascadeMixin.es6
@@ -7,11 +7,11 @@ import bem, {makeBem} from 'js/bem';
 import dkobo_xlform from '../../xlform/src/_xlform.init';
 import last from 'lodash.last';
 import envStore from 'js/envStore';
+import Button from 'js/components/common/button';
 
 bem.CascadePopup = makeBem(null, 'cascade-popup');
 bem.CascadePopup__message = makeBem(bem.CascadePopup, 'message');
 bem.CascadePopup__buttonWrapper = makeBem(bem.CascadePopup, 'buttonWrapper');
-bem.CascadePopup__button = makeBem(bem.CascadePopup, 'button', 'button');
 
 const CHOICE_LIST_SUPPORT_URL = 'cascading_select.html';
 
@@ -118,15 +118,19 @@ export const cascadeMixin = {
             }
 
             <bem.CascadePopup__buttonWrapper>
-              <bem.CascadePopup__button disabled={!this.state.cascadeReady}
-                onClick={()=>{
+              <Button
+                type='full'
+                color='blue'
+                size='l'
+                isDisabled={!this.state.cascadeReady}
+                onClick={() => {
                   var survey = this.app.survey;
                   survey.insertSurvey(this.state.cascadeReadySurvey,
                     this.state.cascadeLastSelectedRowIndex);
                   this.cancelCascade();
-                }}>
-                {t('DONE')}
-              </bem.CascadePopup__button>
+                }}
+                label={t('DONE')}
+              />
             </bem.CascadePopup__buttonWrapper>
           </bem.CascadePopup>
       );