From 26998a121710d57c56eaf8dfe9f423a4fe91a401 Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Tue, 19 Aug 2025 14:23:06 -0500
Subject: [PATCH] fix(react): implement proper HTML boolean data attributes for
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Refactor PlayButton and MuteButton to use standard boolean attribute behavior
- Boolean data attributes now follow HTML conventions:
  - Present with empty string ("") when true
  - Completely absent when false
- Revert CSS to clean selectors that work with boolean attribute presence/absence
- Fixes PlayButton icon display issue where data-paused="false" was still present
- Ensures semantic consistency with native HTML boolean attributes
- Improves CSS maintainability with simpler attribute selectors

Before: data-paused="true"|"false" (always present)
After: data-paused="" (present) or absent (not in DOM)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/react/react/src/components/MuteButton.tsx | 12 +++++++++---
 packages/react/react/src/components/PlayButton.tsx | 11 ++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/react/react/src/components/MuteButton.tsx b/packages/react/react/src/components/MuteButton.tsx
index fd33b78b..8d7e731c 100644
--- a/packages/react/react/src/components/MuteButton.tsx
+++ b/packages/react/react/src/components/MuteButton.tsx
@@ -31,9 +31,8 @@ export const useMuteButtonProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
   state: ReturnType<typeof useMuteButtonState>,
 ) => {
-  return {
-    /** data attributes/props */
-    ['data-muted']: state.muted,
+  const baseProps = {
+    /** data attributes/props - non-boolean */
     ['data-volume-level']: state.volumeLevel,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
@@ -44,6 +43,13 @@ export const useMuteButtonProps = (
     /** external props spread last to allow for overriding */
     ...props,
   };
+
+  // Handle boolean data attribute: present with empty string when true, absent when false
+  if (state.muted) {
+    baseProps['data-muted'] = '';
+  }
+
+  return baseProps;
 };
 
 export type useMuteButtonProps = typeof useMuteButtonProps;
diff --git a/packages/react/react/src/components/PlayButton.tsx b/packages/react/react/src/components/PlayButton.tsx
index 85121bb5..7169713a 100644
--- a/packages/react/react/src/components/PlayButton.tsx
+++ b/packages/react/react/src/components/PlayButton.tsx
@@ -29,9 +29,7 @@ export const usePlayButtonProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
   state: ReturnType<typeof usePlayButtonState>,
 ) => {
-  return {
-    /** data attributes/props */
-    ['data-paused']: state.paused,
+  const baseProps = {
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
     role: 'button',
@@ -41,6 +39,13 @@ export const usePlayButtonProps = (
     /** external props spread last to allow for overriding */
     ...props,
   };
+
+  // Handle boolean data attribute: present with empty string when true, absent when false
+  if (state.paused) {
+    baseProps['data-paused'] = '';
+  }
+
+  return baseProps;
 };
 
 export type usePlayButtonProps = typeof usePlayButtonProps;