Merge pull request #139 from formio/FIO-10462

FIO-10462: updated circle-remove to circle-xmark for font-awesome icons

Author: lane-formio

Changelog.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased: 3.0.2-rc.6]
+### Changed
+ - Re-implement fallback
+
 ## 3.0.2-rc.5
 ### Changed
  - Revert fallback

src/templates/bootstrap3/datagrid/form.ejs

@@ -50,7 +50,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td class="col-md-1">
           <button type="button" class="btn btn-default formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow">
-            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+            <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
         {% } %}

src/templates/bootstrap3/iconClass.ts

@@ -13,7 +13,7 @@ export default (iconset, name, spinning) => {
       case 'question-sign':
         name = 'question-circle';
         break;
-      case 'circle-xmark':
+      case 'remove-circle':
         name = 'times-circle-o';
         break;
       case 'new-window':

src/templates/bootstrap3/multiValueRow/form.ejs

@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-default" ref="removeRow">
-      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+      <i class="{{ctx.iconClass('remove-circle')}}"></i>
     </button>
   </td>
   {% } %}

src/templates/bootstrap4/datagrid/form.ejs

@@ -51,7 +51,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td class="col-1">
           <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}">
-            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+            <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
         {% } %}

src/templates/bootstrap4/iconClass.ts

@@ -13,7 +13,7 @@ export default (iconset, name, spinning) => {
       case 'question-sign':
         name = 'question-circle';
         break;
-      case 'circle-xmark':
+      case 'remove-circle':
         name = 'times-circle-o';
         break;
       case 'new-window':

src/templates/bootstrap4/multiValueRow/form.ejs

@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-secondary" ref="removeRow">
-      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+      <i class="{{ctx.iconClass('remove-circle')}}"></i>
     </button>
   </td>
   {% } %}

src/templates/bootstrap5/datagrid/form.ejs

@@ -51,7 +51,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td class="col-1">
           <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}">
-            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+            <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
         {% } %}

src/templates/bootstrap5/iconClass.ts

@@ -1,4 +1,6 @@
-export default (iconset, name, spinning) => {
+type iconset = 'bi' | 'fa';
+
+export default (iconset: iconset, name: string, spinning: boolean) => {
     let biName = name;
     switch (name) {
         case 'cog':
@@ -107,7 +109,8 @@ export default (iconset, name, spinning) => {
             name = 'question-circle';
             biName = 'question-circle';
             break;
-        case 'circle-xmark':
+        case 'remove-circle':
+            name = 'circle-xmark';
             biName = 'x-circle';
             break;
         case 'new-window':
@@ -164,5 +167,23 @@ export default (iconset, name, spinning) => {
             biName = 'arrow-clockwise';
             break;
     }
-    return spinning ? 'spinner-border spinner-border-sm' : `${iconset} ${iconset}-${name}`;
+
+    function generateIconClass() {
+        if (spinning){
+            return 'spinner-border spinner-border-sm';
+        }
+        const iconName = iconset === 'bi' ? biName : name;
+        // Handles legacy icons names. For example, fa-remove-circle was changed to fa-circle-xmark in a major version
+        // update of font-awesome. To handle cases where customers are still on a very old version of font-awesome add
+        // a fallback if statement to handle such cases
+        function handleLegacyIconNames() {
+            if (iconset === 'fa' && name === 'circle-xmark'){
+                return `${iconset}-${name} ${iconset}-remove-circle`
+            }
+            return `${iconset}-${iconName}`;
+        }
+
+        return `${iconset} ${handleLegacyIconNames()}`
+    }
+    return generateIconClass();
 };

src/templates/bootstrap5/multiValueRow/form.ejs

@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-secondary" ref="removeRow">
-      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
+      <i class="{{ctx.iconClass('remove-circle')}}"></i>
     </button>
   </td>
   {% } %}