fix(ui): properly adds readOnly styles to disabled radio fields (#…

…6240)
payloadcms · May 13, 2024 · c7635b2 · c7635b2
1 parent 47cd5f4
commit c7635b2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 29 deletions.
diff --git a/packages/ui/src/fields/RadioGroup/Radio/index.scss b/packages/ui/src/fields/RadioGroup/Radio/index.scss
@@ -70,31 +70,3 @@
     }
   }
 }
-
-.radio-group--read-only {
-  .radio-input {
-    cursor: default;
-
-    &__label {
-      color: var(--theme-elevation-800);
-    }
-
-    &--is-selected {
-      .radio-input__styled-radio {
-        &:before {
-          background-color: var(--theme-elevation-800);
-        }
-      }
-    }
-
-    &:not(.radio-input--is-selected) {
-      &:hover {
-        .radio-input__styled-radio {
-          &:before {
-            opacity: 0;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/packages/ui/src/fields/RadioGroup/Radio/index.tsx b/packages/ui/src/fields/RadioGroup/Radio/index.tsx
@@ -18,9 +18,10 @@ export const Radio: React.FC<{
   onChange: OnChange
   option: OptionObject
   path: string
+  readOnly?: boolean
   uuid?: string
 }> = (props) => {
-  const { isSelected, onChange, option, path, uuid } = props
+  const { isSelected, onChange, option, path, readOnly, uuid } = props
   const { i18n } = useTranslation()
 
   const editDepth = useEditDepth()
@@ -34,6 +35,7 @@ export const Radio: React.FC<{
       >
         <input
           checked={isSelected}
+          disabled={readOnly}
           id={id}
           onChange={() => (typeof onChange === 'function' ? onChange(option.value) : null)}
           type="radio"

diff --git a/packages/ui/src/fields/RadioGroup/index.scss b/packages/ui/src/fields/RadioGroup/index.scss
@@ -29,6 +29,34 @@
   }
 }
 
+.radio-group--read-only {
+  .radio-input {
+    cursor: default;
+
+    &__label {
+      color: var(--theme-elevation-400);
+    }
+
+    &--is-selected {
+      .radio-input__styled-radio {
+        &:before {
+          background-color: var(--theme-elevation-100);
+        }
+      }
+    }
+
+    &:not(.radio-input--is-selected) {
+      &:hover {
+        .radio-input__styled-radio {
+          &:before {
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
 html[data-theme='light'] {
   .radio-group {
     &.error {

diff --git a/packages/ui/src/fields/RadioGroup/index.tsx b/packages/ui/src/fields/RadioGroup/index.tsx
@@ -138,6 +138,7 @@ const RadioGroupField: React.FC<RadioFieldProps> = (props) => {
                 }}
                 option={optionIsObject(option) ? option : { label: option, value: option }}
                 path={path}
+                readOnly={readOnly}
                 uuid={uuid}
               />
             </li>