GlEmoji: Remove forceFallback option

The forceFallback option is not utilized in our code base, so we are
remvoing support for it.

app/assets/javascripts/behaviors/gl_emoji.js

@@ -10,7 +10,7 @@ class GlEmoji extends HTMLElement {
   }
   initialize(enforceUnicodeRedering) {
     let emojiUnicode = this.textContent.trim();
-    const { fallbackSpriteClass, fallbackSrc, forceFallback } = this.dataset;
+    const { fallbackSpriteClass, fallbackSrc } = this.dataset;
     let { name, unicodeVersion } = this.dataset;
 
     return initEmojiMap()
@@ -26,12 +26,8 @@ class GlEmoji extends HTMLElement {
             unicodeVersion = emojiInfo.u;
             this.dataset.uni = unicodeVersion;
 
-            if (forceFallback === 'true' && !fallbackSpriteClass) {
-              this.innerHTML = emojiImageTag(name, emojiFallbackImageSrc(name));
-            } else {
-              emojiUnicode = emojiInfo.e;
-              this.innerHTML = emojiInfo.e;
-            }
+            emojiUnicode = emojiInfo.e;
+            this.innerHTML = emojiInfo.e;
 
             this.title = emojiInfo.d;
           }

app/assets/javascripts/emoji/index.js

@@ -108,26 +108,17 @@ export function emojiImageTag(name, src) {
 }
 
 export function glEmojiTag(inputName, options) {
-  const opts = { sprite: false, forceFallback: false, ...options };
+  const opts = { sprite: false, ...options };
   const name = normalizeEmojiName(inputName);
   const fallbackSpriteClass = `emoji-${name}`;
 
-  const classList = [];
-  if (opts.forceFallback && opts.sprite) {
-    classList.push('emoji-icon');
-    classList.push(fallbackSpriteClass);
-  }
-  const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
   const fallbackSpriteAttribute = opts.sprite
     ? `data-fallback-sprite-class="${fallbackSpriteClass}"`
     : '';
-  const forceFallbackAttribute = opts.forceFallback ? 'data-force-fallback="true"' : '';
 
   return `
     <gl-emoji
-      ${classAttribute}
       ${fallbackSpriteAttribute}
-      ${forceFallbackAttribute}
       data-name="${name}"></gl-emoji>
   `;
 }

spec/frontend/behaviors/gl_emoji_spec.js

@@ -39,7 +39,6 @@ describe('gl_emoji', () => {
   }
 
   const defaults = {
-    forceFallback: false,
     sprite: false,
   };
 
@@ -54,17 +53,7 @@ describe('gl_emoji', () => {
       expect(element.dataset.fallbackSpriteClass).toBe(fallbackSpriteClass);
     }
 
-    if (opts.forceFallback && opts.sprite) {
-      expect(element.getAttribute('class')).toBe(`emoji-icon ${fallbackSpriteClass}`);
-    }
-
-    if (opts.forceFallback && !opts.sprite) {
-      // Check for image fallback
-      testGlEmojiImageFallback(element.firstElementChild, name);
-    } else {
-      // Otherwise make sure things are still unicode text
-      expect(element.textContent.trim()).toBe(unicodeMoji);
-    }
+    expect(element.textContent.trim()).toBe(unicodeMoji);
   }
 
   beforeEach(() => {
@@ -92,23 +81,6 @@ describe('gl_emoji', () => {
     );
   });
 
-  it('bomb emoji with image fallback', async () => {
-    const markup = glEmojiTag(emojiFixtureBomb.name, {
-      forceFallback: true,
-    });
-
-    const glEmojiElement = await markupToDomElement(markup);
-    testGlEmojiElement(
-      glEmojiElement,
-      emojiFixtureBomb.name,
-      emojiFixtureBomb.unicodeVersion,
-      emojiFixtureBomb.moji,
-      {
-        forceFallback: true,
-      },
-    );
-  });
-
   it('bomb emoji with sprite fallback readiness', async () => {
     const markup = glEmojiTag(emojiFixtureBomb.name, {
       sprite: true,
@@ -126,25 +98,6 @@ describe('gl_emoji', () => {
     );
   });
 
-  it('bomb emoji with sprite fallback', async () => {
-    const markup = glEmojiTag(emojiFixtureBomb.name, {
-      forceFallback: true,
-      sprite: true,
-    });
-
-    const glEmojiElement = await markupToDomElement(markup);
-    testGlEmojiElement(
-      glEmojiElement,
-      emojiFixtureBomb.name,
-      emojiFixtureBomb.unicodeVersion,
-      emojiFixtureBomb.moji,
-      {
-        forceFallback: true,
-        sprite: true,
-      },
-    );
-  });
-
   it('question mark when invalid emoji name given', async () => {
     const name = 'invalid_emoji';
     const markup = glEmojiTag(name);
@@ -157,22 +110,4 @@ describe('gl_emoji', () => {
       emojiFixtureGreyQuestion.moji,
     );
   });
-
-  it('question mark with image fallback when invalid emoji name given', async () => {
-    const name = 'invalid_emoji';
-    const markup = glEmojiTag(name, {
-      forceFallback: true,
-    });
-
-    const glEmojiElement = await markupToDomElement(markup);
-    testGlEmojiElement(
-      glEmojiElement,
-      emojiFixtureGreyQuestion.name,
-      emojiFixtureGreyQuestion.unicodeVersion,
-      emojiFixtureGreyQuestion.moji,
-      {
-        forceFallback: true,
-      },
-    );
-  });
 });

spec/frontend/emoji/emoji_spec.js

@@ -78,17 +78,6 @@ describe('gl_emoji', () => {
       );
     });
 
-    it('bomb emoji with image fallback', () => {
-      const emojiKey = 'bomb';
-      const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, {
-        forceFallback: true,
-      });
-
-      expect(trimText(markup)).toMatchInlineSnapshot(
-        `"<gl-emoji data-force-fallback=\\"true\\" data-name=\\"bomb\\"></gl-emoji>"`,
-      );
-    });
-
     it('bomb emoji with sprite fallback readiness', () => {
       const emojiKey = 'bomb';
       const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, {
@@ -98,17 +87,6 @@ describe('gl_emoji', () => {
         `"<gl-emoji data-fallback-sprite-class=\\"emoji-bomb\\" data-name=\\"bomb\\"></gl-emoji>"`,
       );
     });
-
-    it('bomb emoji with sprite fallback', () => {
-      const emojiKey = 'bomb';
-      const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, {
-        forceFallback: true,
-        sprite: true,
-      });
-      expect(trimText(markup)).toMatchInlineSnapshot(
-        `"<gl-emoji class=\\"emoji-icon emoji-bomb\\" data-fallback-sprite-class=\\"emoji-bomb\\" data-force-fallback=\\"true\\" data-name=\\"bomb\\"></gl-emoji>"`,
-      );
-    });
   });
 
   describe('isFlagEmoji', () => {