Fix read-only checked radio buttons having the incorrect icon color (#…

…3951)

.changeset/heavy-pears-walk.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed read-only checked radio buttons having the incorrect icon color.

packages/core/src/radio-button/RadioButtonIcon.tsx

@@ -72,10 +72,7 @@ export const RadioButtonIcon = ({
           fill="currentColor"
           viewBox="0 0 12 12"
         >
-          <path
-            fill="#161616"
-            d="M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-          />
+          <path d="M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" />
         </svg>
       )}
     </div>

packages/core/stories/radio-button/radio-button.qa.stories.tsx

@@ -45,6 +45,31 @@ const RadioButtonGroupExample = ({
   );
 };
 
+const RadioButtonCheckedReadonlyGroupExample = () => {
+  return (
+    <RadioButtonGroup defaultValue="option4">
+      <RadioButton key="option1" label="Radio Option 1" value="option1" />
+      <RadioButton key="option2" label="Radio Option 2" value="option2" />
+      <RadioButton
+        disabled
+        key="option3"
+        label="Radio Option 3 (disabled)"
+        value="option3"
+      />
+      <RadioButton
+        readOnly
+        key="option4"
+        label="Radio Option 4 (read-only)"
+        value="option4"
+      />
+      <RadioButton
+        label="Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side."
+        value="option5"
+      />
+    </RadioButtonGroup>
+  );
+};
+
 const RadioButtonInFormFieldExample = () => {
   return (
     <FormField labelPlacement="left">
@@ -65,6 +90,7 @@ export const AllExamplesGrid: StoryFn<QAContainerProps> = (props) => {
     <QAContainer cols={1} itemPadding={8} {...props}>
       <RadioButtonGroupExample direction="vertical" />
       <RadioButtonGroupExample direction="horizontal" />
+      <RadioButtonCheckedReadonlyGroupExample />
       <RadioButtonInFormFieldExample />
     </QAContainer>
   );
@@ -80,6 +106,8 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
   <QAContainerNoStyleInjection cols={1} itemPadding={8} {...props}>
     <RadioButtonGroupExample direction="vertical" />
     <RadioButtonGroupExample direction="horizontal" />
+    <RadioButtonCheckedReadonlyGroupExample />
+    <RadioButtonInFormFieldExample />
   </QAContainerNoStyleInjection>
 );