Fullscreen Button Takes Applied Color (#574)

Author: ebrillhart

src/components/__snapshots__/fullscreen.test.js.snap

@@ -4,27 +4,26 @@ exports[`<Fullscreen /> should render correctly. 1`] = `
 <Fullscreen>
   <Styled(FullscreenButton)
     onClick={[Function]}
-    style={undefined}
+    styles={undefined}
     viewBox="0 0 512 512"
   >
     <FullscreenButton
       className="css-12n5ud e4v3eea0"
       onClick={[Function]}
-      style={undefined}
+      styles={undefined}
       viewBox="0 0 512 512"
     >
       <Styled(button)
         aria-label="Toggle full screen"
         className="css-12n5ud e4v3eea0"
         onClick={[Function]}
-        style={undefined}
+        styles={undefined}
         viewBox="0 0 512 512"
       >
         <button
           aria-label="Toggle full screen"
           className="e4v3eea0 css-1hv29sw ev51h780"
           onClick={[Function]}
-          style={undefined}
           viewBox="0 0 512 512"
         >
           <svg

src/components/__snapshots__/manager.test.js.snap

@@ -335,27 +335,26 @@ exports[`<Manager /> should render correctly. 1`] = `
         <Fullscreen>
           <Styled(FullscreenButton)
             onClick={[Function]}
-            style={undefined}
+            styles={undefined}
             viewBox="0 0 512 512"
           >
             <FullscreenButton
               className="css-12n5ud e4v3eea0"
               onClick={[Function]}
-              style={undefined}
+              styles={undefined}
               viewBox="0 0 512 512"
             >
               <Styled(button)
                 aria-label="Toggle full screen"
                 className="css-12n5ud e4v3eea0"
                 onClick={[Function]}
-                style={undefined}
+                styles={undefined}
                 viewBox="0 0 512 512"
               >
                 <button
                   aria-label="Toggle full screen"
                   className="e4v3eea0 css-1hv29sw ev51h780"
                   onClick={[Function]}
-                  style={undefined}
                   viewBox="0 0 512 512"
                 >
                   <svg
@@ -669,27 +668,26 @@ exports[`<Manager /> should render the overview configuration when specified. 1`
         <Fullscreen>
           <Styled(FullscreenButton)
             onClick={[Function]}
-            style={undefined}
+            styles={undefined}
             viewBox="0 0 512 512"
           >
             <FullscreenButton
               className="css-12n5ud e4v3eea0"
               onClick={[Function]}
-              style={undefined}
+              styles={undefined}
               viewBox="0 0 512 512"
             >
               <Styled(button)
                 aria-label="Toggle full screen"
                 className="css-12n5ud e4v3eea0"
                 onClick={[Function]}
-                style={undefined}
+                styles={undefined}
                 viewBox="0 0 512 512"
               >
                 <button
                   aria-label="Toggle full screen"
                   className="e4v3eea0 css-1hv29sw ev51h780"
                   onClick={[Function]}
-                  style={undefined}
                   viewBox="0 0 512 512"
                 >
                   <svg
@@ -1093,27 +1091,26 @@ exports[`<Manager /> should render with slideset slides 1`] = `
         <Fullscreen>
           <Styled(FullscreenButton)
             onClick={[Function]}
-            style={undefined}
+            styles={undefined}
             viewBox="0 0 512 512"
           >
             <FullscreenButton
               className="css-12n5ud e4v3eea0"
               onClick={[Function]}
-              style={undefined}
+              styles={undefined}
               viewBox="0 0 512 512"
             >
               <Styled(button)
                 aria-label="Toggle full screen"
                 className="css-12n5ud e4v3eea0"
                 onClick={[Function]}
-                style={undefined}
+                styles={undefined}
                 viewBox="0 0 512 512"
               >
                 <button
                   aria-label="Toggle full screen"
                   className="e4v3eea0 css-1hv29sw ev51h780"
                   onClick={[Function]}
-                  style={undefined}
                   viewBox="0 0 512 512"
                 >
                   <svg

src/components/fullscreen-button.js

@@ -23,7 +23,9 @@ const FullscreenButton = props => (
       <path d="M0 0h24v24H0z" fill="none" />
       <path
         d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
-        fill="currentColor"
+        fill={
+          props.styles && props.styles.fill ? props.styles.fill : 'currentColor'
+        }
       />
     </svg>
   </Button>

src/components/fullscreen.js

@@ -37,7 +37,7 @@ export class Fullscreen extends Component {
     return (
       <StyledFullscreen
         onClick={() => this.toggleFullscreen()}
-        style={this.context.styles.fullscreen}
+        styles={this.context.styles.fullscreen}
         viewBox="0 0 512 512"
       />
     );