bs5 text align upgrades

4dn-dcic · Sep 5, 2024 · e2330bd · e2330bd
1 parent 1289fa4
commit e2330bd
Show file tree

Hide file tree

Showing 42 changed files with 158 additions and 142 deletions.
diff --git a/es/components/browse/components/CustomColumnController.js b/es/components/browse/components/CustomColumnController.js
@@ -257,9 +257,9 @@ var ColumnOption = /*#__PURE__*/React.memo(function (props) {
   var showDescription = description;
   if (sameTitleColExists) {
     if (!description) {
-      showDescription = '<i class="icon icon-fw fas icon-code mr-07"></i><span class="text-300 text-monospace">' + field + '</span>';
+      showDescription = '<i class="icon icon-fw fas icon-code me-07"></i><span class="text-300 font-monospace">' + field + '</span>';
     } else {
-      showDescription += '<br/><i class="icon icon-fw fas icon-code mr-07"></i><span class="text-300 text-monospace">' + field + '</span>';
+      showDescription += '<br/><i class="icon icon-fw fas icon-code me-07"></i><span class="text-300 font-monospace">' + field + '</span>';
     }
   }
   return /*#__PURE__*/React.createElement("div", {

diff --git a/es/components/browse/components/FacetList/FacetTermsList.js b/es/components/browse/components/FacetList/FacetTermsList.js
@@ -250,7 +250,7 @@ export var Term = /*#__PURE__*/function (_React$PureComponent) {
         return subTermComponents;
       }
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
-        className: "facet-list-element" + statusClassName + (groupingTermKey && !facetSearchActive ? " pl-3" : ""),
+        className: "facet-list-element" + statusClassName + (groupingTermKey && !facetSearchActive ? " ps-3" : ""),
         key: term.key,
         "data-key": term.key,
         "data-is-grouping": isGroupingTerm,
@@ -733,7 +733,7 @@ var ListOfTerms = /*#__PURE__*/React.memo(function (props) {
     var facetSearch = null;
     if (searchType === 'basic') {
       facetSearch = /*#__PURE__*/React.createElement("div", {
-        className: "text-small p-2"
+        className: "fs-6 p-2"
       }, /*#__PURE__*/React.createElement("input", {
         className: "form-control",
         autoComplete: "off",
@@ -750,7 +750,7 @@ var ListOfTerms = /*#__PURE__*/React.memo(function (props) {
       itemType = typeof itemType === 'string' && itemType.length > 0 ? itemType : 'Item';
       var baseHref = "/search/?type=" + itemType;
       facetSearch = /*#__PURE__*/React.createElement("div", {
-        className: "d-flex flex-wrap text-small p-2"
+        className: "d-flex flex-wrap fs-6 p-2"
       }, /*#__PURE__*/React.createElement(SearchAsYouTypeAjax, {
         baseHref: baseHref,
         showTips: true,

diff --git a/es/components/browse/components/FacetList/RangeFacet.js b/es/components/browse/components/FacetList/RangeFacet.js
@@ -473,7 +473,7 @@ export var RangeFacet = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/React.createElement("div", {
           className: "range-drop col-12 col-sm-6"
         }, /*#__PURE__*/React.createElement("label", {
-          className: "mb-0 small mr-07"
+          className: "mb-0 small me-07"
         }, "From:"), /*#__PURE__*/React.createElement(RangeDropdown, {
           title: fromTitle,
           value: fromVal,
@@ -490,7 +490,7 @@ export var RangeFacet = /*#__PURE__*/function (_React$PureComponent) {
         })), /*#__PURE__*/React.createElement("div", {
           className: "range-drop col-12 col-sm-6"
         }, /*#__PURE__*/React.createElement("label", {
-          className: "mb-0 small ml-05 mr-07"
+          className: "mb-0 small ms-05 me-07"
         }, "To:"), /*#__PURE__*/React.createElement(RangeDropdown, {
           title: toTitle,
           value: toVal,

diff --git a/es/components/browse/components/SelectedItemsController.js b/es/components/browse/components/SelectedItemsController.js
@@ -242,7 +242,7 @@ export var SelectionItemCheckbox = /*#__PURE__*/React.memo(function (props) {
     type: "checkbox",
     checked: isChecked,
     onChange: onChange,
-    className: "mr-2"
+    className: "me-2"
   });
 });
 
@@ -321,7 +321,7 @@ export var SelectStickyFooter = /*#__PURE__*/React.memo(function (props) {
     className: "icon icon-fw fas icon-check"
   }), "\xA0 Apply"), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-outline-warning ml-1",
+    className: "btn btn-outline-warning ms-1",
     onClick: onCancel,
     "data-tip": "Cancel selection and close window"
   }, /*#__PURE__*/React.createElement("i", {
@@ -347,7 +347,7 @@ export var BackNavigationStickyFooter = /*#__PURE__*/React.memo(function (props)
     className: "col-12 col-md-auto"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-outline-warning ml-1",
+    className: "btn btn-outline-warning ms-1",
     onClick: onBackButtonClick,
     "data-tip": tooltip || ''
   }, /*#__PURE__*/React.createElement("i", {

diff --git a/es/components/browse/components/SortController.js b/es/components/browse/components/SortController.js
@@ -352,7 +352,7 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) {
       title = foundSortDefinition.title;
     } else {
       title = /*#__PURE__*/React.createElement("span", {
-        className: "text-monospace small"
+        className: "font-monospace small"
       }, useCol);
     }
   }
@@ -377,7 +377,7 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) {
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     title: title,
     size: size,
-    variant: (variant ? variant + " " : "") + "btn-block text-left",
+    variant: (variant ? variant + " " : "") + "w-100 text-start",
     onSelect: handleSortColumnSelection
   }, allSortFields.map(function (col, idx) {
     var field = col.field,
@@ -391,10 +391,10 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) {
       disabled: !!noSort
     }, title) : null;
   }))), /*#__PURE__*/React.createElement("div", {
-    className: "col-3 pl-0"
+    className: "col-3 ps-0"
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     title: sortOrderTitle,
-    variant: (variant ? variant + " " : "") + "btn-block text-left",
+    variant: (variant ? variant + " " : "") + "w-100 text-start",
     size: size,
     onSelect: handleSortOrderSelection
   }, /*#__PURE__*/React.createElement(DropdownItem, {
@@ -404,20 +404,24 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) {
     key: "sort-direction-desc",
     eventKey: index + "|desc"
   }, "Descending"))), /*#__PURE__*/React.createElement("div", {
-    className: "col-lg-1 col-2 pl-0"
-  }, !(rowCount - 1 === index) ? /*#__PURE__*/React.createElement("button", {
+    className: "col-lg-1 col-2 ps-0"
+  }, !(rowCount - 1 === index) ? /*#__PURE__*/React.createElement("div", {
+    className: "d-grid gap-1"
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-".concat(variant, " btn-").concat(size, " btn-block"),
+    className: "btn btn-".concat(variant, " btn-").concat(size),
     onClick: onRemoveClick,
     "data-tip": "Remove sort column"
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw fas icon-minus w-100"
-  })) : /*#__PURE__*/React.createElement("button", {
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: "d-grid gap-1"
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-primary btn-".concat(size, " btn-block"),
+    className: "btn btn-primary btn-".concat(size),
     onClick: handleSettingsApply,
     "data-tip": "Re-sort columns"
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw fas icon-check w-100"
-  }))));
+  })))));
 });
diff --git a/es/components/browse/components/StackedBlockTable.js b/es/components/browse/components/StackedBlockTable.js
@@ -127,7 +127,7 @@ export var StackedBlockListViewMoreButton = /*#__PURE__*/function (_React$PureCo
         return /*#__PURE__*/React.createElement("div", {
           className: "view-more-button"
         }, /*#__PURE__*/React.createElement("i", {
-          className: "icon fas icon-plus mr-1 ml-02 small"
+          className: "icon fas icon-plus me-1 ms-02 small"
         }), collapsibleChildrenLen + " More" + (title ? ' ' + title : ''), showMoreExtTitle ? /*#__PURE__*/React.createElement("span", {
           className: "ext text-400"
         }, " ", showMoreExtTitle) : null);
@@ -138,7 +138,7 @@ export var StackedBlockListViewMoreButton = /*#__PURE__*/function (_React$PureCo
         className: cls,
         onClick: preventExpand ? null : handleCollapseToggle
       }, /*#__PURE__*/React.createElement("i", {
-        className: "mr-1 icon fas icon-" + (collapsed ? 'plus' : 'minus')
+        className: "me-1 icon fas icon-" + (collapsed ? 'plus' : 'minus')
       }), titleStr, showMoreExtTitle ? /*#__PURE__*/React.createElement("span", {
         className: "ext text-400"
       }, " ", showMoreExtTitle) : null);
@@ -293,7 +293,7 @@ export var StackedBlockList = /*#__PURE__*/function (_React$PureComponent3) {
           className: "view-more-button clickable",
           onClick: this.handleIncrementalExpandClick.bind(this, nextCount)
         }, /*#__PURE__*/React.createElement("i", {
-          className: "mr-1 icon fas icon-" + (nextCount >= incrementalExpandVisibleCount ? "plus" : "minus")
+          className: "me-1 icon fas icon-" + (nextCount >= incrementalExpandVisibleCount ? "plus" : "minus")
         }), /*#__PURE__*/React.createElement("span", null, " ", titleStr, " "));
       } else {
         viewMoreButton = /*#__PURE__*/React.createElement(StackedBlockListViewMoreButton, _extends({}, this.props, {
@@ -555,12 +555,12 @@ _defineProperty(StackedBlockTable, "propTypes", {
 _defineProperty(StackedBlockTable, "defaultProps", {
   'columnHeaders': [{
     columnClass: 'biosample',
-    className: 'text-left',
+    className: 'text-start',
     title: 'Biosample',
     initialWidth: 115
   }, {
     columnClass: 'experiment',
-    className: 'text-left',
+    className: 'text-start',
     title: 'Experiment',
     initialWidth: 145
   }, {

diff --git a/es/components/browse/components/above-table-controls/AboveSearchViewTableControls.js b/es/components/browse/components/above-table-controls/AboveSearchViewTableControls.js
@@ -34,11 +34,11 @@ export var AboveSearchViewTableControls = /*#__PURE__*/React.memo(function (prop
     });
     if (addAction && typeof addAction.href === 'string') {
       addButton = /*#__PURE__*/React.createElement("a", {
-        className: "btn btn-primary btn-xs" + (total ? " ml-1" : ""),
+        className: "btn btn-primary btn-xs" + (total ? " ms-1" : ""),
         href: addAction.href,
         "data-skiprequest": "true"
       }, /*#__PURE__*/React.createElement("i", {
-        className: "icon icon-fw icon-plus fas mr-03 fas"
+        className: "icon icon-fw icon-plus fas me-03 fas"
       }), "Create New \xA0");
     }
   }

diff --git a/es/components/browse/components/above-table-controls/RightButtonsSection.js b/es/components/browse/components/above-table-controls/RightButtonsSection.js
@@ -59,7 +59,7 @@ export var ConfigureVisibleColumnsButton = /*#__PURE__*/React.memo(function (_re
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw icon-table fas"
   }), /*#__PURE__*/React.createElement("i", {
-    className: "icon icon-fw icon-angle-down ml-03 fas"
+    className: "icon icon-fw icon-angle-down ms-03 fas"
   }));
 });
 export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) {
@@ -78,7 +78,7 @@ export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) {
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw icon-sort fas"
   }), /*#__PURE__*/React.createElement("i", {
-    className: "icon icon-fw icon-angle-down ml-03 fas"
+    className: "icon icon-fw icon-angle-down ms-03 fas"
   }));
 });
 
@@ -121,7 +121,7 @@ export var ToggleLayoutButton = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon icon-fw fas icon-" + (!isFullscreen ? 'arrows-alt-h icon-expand' : 'compress')
       }), /*#__PURE__*/React.createElement("span", {
-        className: "ml-05 d-none d-xl-inline"
+        className: "ms-05 d-none d-xl-inline"
       }, !isFullscreen ? "Full Screen" : "Collapse Table Width"));
     }
   }]);

diff --git a/es/components/browse/components/table-commons/HeadersRow.js b/es/components/browse/components/table-commons/HeadersRow.js
@@ -779,7 +779,7 @@ var SortOptionsMenu = /*#__PURE__*/React.memo(function (_ref16) {
       key: field,
       onClick: onClick
     }, title || field, !isActive ? null : /*#__PURE__*/React.createElement("i", {
-      className: "small icon fas ml-12 icon-arrow-".concat(descend ? "down" : "up")
+      className: "small icon fas ms-12 icon-arrow-".concat(descend ? "down" : "up")
     }));
   });
   return /*#__PURE__*/React.createElement("div", {

diff --git a/es/components/browse/components/table-commons/basicColumnExtensionMap.js b/es/components/browse/components/table-commons/basicColumnExtensionMap.js
@@ -72,7 +72,7 @@ export var basicColumnExtensionMap = {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "icon-container"
       }, /*#__PURE__*/React.createElement("i", {
-        className: "icon icon-fw fas icon-filter clickable mr-08",
+        className: "icon icon-fw fas icon-filter clickable me-08",
         onClick: function onClick(e) {
           // Preserve search query, if any, but remove filters (which are usually per-type).
           if (!href || href.indexOf('/search/') === -1) return;
@@ -107,7 +107,7 @@ export var basicColumnExtensionMap = {
         date_created = _result$date_created === void 0 ? null : _result$date_created;
       if (!date_created) return null;
       return /*#__PURE__*/React.createElement("span", {
-        className: "value text-right"
+        className: "value text-end"
       }, /*#__PURE__*/React.createElement(LocalizedTime, {
         timestamp: date_created,
         formatType: "date-sm"
@@ -130,7 +130,7 @@ export var basicColumnExtensionMap = {
         date_modified = _result$last_modified3 === void 0 ? null : _result$last_modified3;
       if (!date_modified) return null;
       return /*#__PURE__*/React.createElement("span", {
-        className: "value text-right"
+        className: "value text-end"
       }, /*#__PURE__*/React.createElement(LocalizedTime, {
         timestamp: date_modified,
         formatType: "date-sm"
@@ -203,12 +203,13 @@ export var DisplayTitleColumnDefault = /*#__PURE__*/React.memo(function (props)
       link = "".concat(propLink, "#").concat(targetTabKey);
     }
     title = /*#__PURE__*/React.createElement("a", {
+      className: "link-underline link-underline-opacity-0 link-underline-opacity-100-hover",
       key: "title",
       href: link || '#',
       onClick: onClick
     }, title);
   }
-  var cls = "title-block text-truncate" + (shouldMonospace ? " text-monospace text-small" : "") + (className ? " " + className : "");
+  var cls = "title-block text-truncate" + (shouldMonospace ? " font-monospace fs-6" : "") + (className ? " " + className : "");
   return /*#__PURE__*/React.createElement("div", {
     key: "title-container",
     className: cls,

diff --git a/es/components/forms/SubmissionView.js b/es/components/forms/SubmissionView.js
@@ -1936,7 +1936,7 @@ var WarningBanner = /*#__PURE__*/React.memo(function (props) {
   }, "Please note: your work will be lost if you navigate away from, refresh or close this page while submitting. The submission process is under active development and features may change."), /*#__PURE__*/React.createElement("div", {
     className: "col-md-auto"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "action-buttons-container text-right"
+    className: "action-buttons-container text-end"
   }, children))));
 });
 var DetailTitleBanner = /*#__PURE__*/function (_React$PureComponent2) {
@@ -2237,7 +2237,7 @@ var AliasSelectModal = /*#__PURE__*/function (_TypeSelectModal) {
           'fontSize': '1.2em'
         }
       }, creatingAliasMessage) : null, /*#__PURE__*/React.createElement("div", {
-        className: "text-right"
+        className: "text-end"
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
         className: "btn btn-primary",

diff --git a/es/components/forms/components/Checkbox.js b/es/components/forms/components/Checkbox.js
@@ -13,7 +13,7 @@ export var Checkbox = /*#__PURE__*/React.memo(function (props) {
     labelClassName = _props$labelClassName === void 0 ? "mb-0" : _props$labelClassName,
     title = props.title,
     _props$inputClassName = props.inputClassName,
-    inputClassName = _props$inputClassName === void 0 ? "mr-08 align-middle" : _props$inputClassName,
+    inputClassName = _props$inputClassName === void 0 ? "me-08 align-middle" : _props$inputClassName,
     _props$indeterminate = props.indeterminate,
     indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
     passProps = _objectWithoutProperties(props, _excluded);

diff --git a/es/components/forms/components/DragAndDropUpload.js b/es/components/forms/components/DragAndDropUpload.js
@@ -669,7 +669,7 @@ function RequestVerification(props) {
     checked: isVerified,
     onChange: toggleVerification
   }), /*#__PURE__*/React.createElement("label", {
-    className: "d-inline ml-05",
+    className: "d-inline ms-05",
     htmlFor: "file-verification"
   }, requestVerificationMsg, " "));
 }
@@ -797,7 +797,7 @@ export var DragAndDropZone = /*#__PURE__*/function (_React$Component5) {
           alignSelf: "center"
         }
       }, files.length === 0 ? "Click or drag a file here to upload" : null), /*#__PURE__*/React.createElement("ul", {
-        className: "d-flex flex-wrap m-0 pt-1 pl-0 justify-content-center"
+        className: "d-flex flex-wrap m-0 pt-1 ps-0 justify-content-center"
       }, files.map(function (file) {
         return /*#__PURE__*/React.createElement("li", {
           key: file.download,

diff --git a/es/components/forms/components/EditableField.js b/es/components/forms/components/EditableField.js
@@ -630,7 +630,7 @@ export var EditableField = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement("div", {
           className: "row editable-field-entry " + labelID
         }, /*#__PURE__*/React.createElement("div", {
-          className: "col col-md-3 text-left text-md-right"
+          className: "col col-md-3 text-start text-md-end"
         }, /*#__PURE__*/React.createElement("label", {
           htmlFor: labelID
         }, label)), this.renderSavedValue());
@@ -650,7 +650,7 @@ export var EditableField = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement("div", {
           className: "row editable-field-entry " + labelID
         }, /*#__PURE__*/React.createElement("div", {
-          className: "col col-md-2 text-left text-md-right"
+          className: "col col-md-2 text-start text-md-end"
         }, /*#__PURE__*/React.createElement("label", {
           htmlFor: labelID
         }, label)), this.renderSavedValue());
@@ -751,7 +751,7 @@ export var EditableField = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement("div", {
           className: outerBaseClass + labelID + ' row'
         }, /*#__PURE__*/React.createElement("div", {
-          className: "col col-md-3 text-left text-md-right"
+          className: "col col-md-3 text-start text-md-end"
         }, /*#__PURE__*/React.createElement("label", {
           htmlFor: labelID
         }, label)), /*#__PURE__*/React.createElement("div", {

diff --git a/es/components/forms/components/LinkToDropdown.js b/es/components/forms/components/LinkToDropdown.js
@@ -197,9 +197,9 @@ export var LinkToDropdown = /*#__PURE__*/function (_React$PureComponent) {
             }, display_title)), /*#__PURE__*/React.createElement("div", {
               className: "col-auto d-none d-md-inline-block"
             }, /*#__PURE__*/React.createElement("i", {
-              className: "icon icon-fw icon-link fas small mr-05"
+              className: "icon icon-fw icon-link fas small me-05"
             }), /*#__PURE__*/React.createElement("span", {
-              className: "text-monospace small"
+              className: "font-monospace small"
             }, itemID))));
           });
         }

diff --git a/es/components/forms/components/SearchAsYouTypeAjax.js b/es/components/forms/components/SearchAsYouTypeAjax.js
@@ -735,7 +735,7 @@ export var LinkedObj = /*#__PURE__*/function (_React$PureComponent2) {
               target: "_blank",
               rel: "noopener noreferrer"
             }, thisDisplay), /*#__PURE__*/React.createElement("i", {
-              className: "icon icon-fw icon-external-link-alt ml-05 fas"
+              className: "icon icon-fw icon-external-link-alt ms-05 fas"
             }));
           } else {
             return /*#__PURE__*/React.createElement("div", {