fix: pass action trigger glyph to beforeContent to ensure underline o…

…n hover only impacts text (#1349)
microsoft · Jan 31, 2019 · ead4468 · ead4468
1 parent 5fef862
commit ead4468
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/fast-components-react-msft/src/action-trigger/action-trigger.spec.tsx b/packages/fast-components-react-msft/src/action-trigger/action-trigger.spec.tsx
@@ -47,10 +47,10 @@ describe("action trigger", (): void => {
         }).not.toThrow();
     });
 
-    test("should throw if glyph prop is not provided", () => {
+    test("should not throw if glyph prop is not provided", () => {
         expect(() => {
             shallow(<MSFTActionTrigger glyph={null} />);
-        }).toThrow();
+        }).not.toThrow();
     });
 
     test("should create glyph element passed in", () => {

diff --git a/packages/fast-components-react-msft/src/action-trigger/action-trigger.tsx b/packages/fast-components-react-msft/src/action-trigger/action-trigger.tsx
@@ -38,8 +38,8 @@ class ActionTrigger extends Foundation<
                     ButtonAppearance[ActionTriggerAppearance[this.props.appearance]]
                 }
                 jssStyleSheet={actionTriggerButtonOverrides}
+                beforeContent={this.generateGlyph}
             >
-                {this.props.glyph(get(this.props, "managedClasses.actionTrigger_glyph"))}
                 {this.props.children}
             </Button>
         );
@@ -92,6 +92,10 @@ class ActionTrigger extends Foundation<
 
         return super.generateClassNames(classNames);
     }
+
+    private generateGlyph = (): React.ReactNode => {
+        return this.props.glyph(get(this.props, "managedClasses.actionTrigger_glyph"));
+    };
 }
 
 export default ActionTrigger;