fix color of custom play icon

primer · Aug 29, 2024 · 9beb0d8 · 9beb0d8
1 parent ce7bd36
commit 9beb0d8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/packages/react/src/VideoPlayer/VideoPlayer.features.stories.tsx b/packages/react/src/VideoPlayer/VideoPlayer.features.stories.tsx
@@ -7,6 +7,7 @@ import {VideoPlayer} from '.'
 import {Stack} from '../Stack'
 import {Button} from '../Button'
 import {useVideo} from './hooks'
+import styles from './VideoPlayer.stories.module.css'
 
 export default {
   title: 'Components/VideoPlayer/Features',
@@ -98,7 +99,7 @@ export const ControlledProgrammatically = () => {
 }
 
 export const CustomPlayIcon = () => (
-  <VideoPlayer title="GitHub media player" playIcon={() => <PlayIcon size={96} />}>
+  <VideoPlayer title="GitHub media player" playIcon={() => <PlayIcon size={96} className={styles.customPlayIcon} />}>
     <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" type="video/mp4" />
     <VideoPlayer.Track src="https://primer.github.io/brand/assets/example.vtt" />
   </VideoPlayer>

diff --git a/packages/react/src/VideoPlayer/VideoPlayer.stories.module.css b/packages/react/src/VideoPlayer/VideoPlayer.stories.module.css
@@ -0,0 +1,3 @@
+.customPlayIcon {
+  color: white;
+}
diff --git a/packages/react/src/VideoPlayer/VideoPlayer.stories.module.css.d.ts b/packages/react/src/VideoPlayer/VideoPlayer.stories.module.css.d.ts
@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "customPlayIcon": string;
+};
+export = styles;
+