fix: properly adds readonly styles to disabled radio fields (#6176)

payloadcms · May 3, 2024 · 9b7e62d · 9b7e62d
1 parent 6e38cc2
commit 9b7e62d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 29 deletions.
diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx b/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx
@@ -98,6 +98,7 @@ const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
                 onChange={readOnly ? undefined : onChange}
                 option={optionIsObject(option) ? option : { label: option, value: option }}
                 path={path}
+                readOnly={readOnly}
               />
             </li>
           )

diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.scss b/packages/payload/src/admin/components/forms/field-types/RadioGroup/RadioInput/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/payload/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx b/packages/payload/src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx
@@ -9,7 +9,7 @@ import './index.scss'
 const baseClass = 'radio-input'
 
 const RadioInput: React.FC<Props> = (props) => {
-  const { isSelected, onChange, option, path } = props
+  const { isSelected, onChange, option, path, readOnly } = props
   const { i18n } = useTranslation()
 
   const classes = [baseClass, isSelected && `${baseClass}--is-selected`].filter(Boolean).join(' ')
@@ -21,6 +21,7 @@ const RadioInput: React.FC<Props> = (props) => {
       <div className={classes}>
         <input
           checked={isSelected}
+          disabled={readOnly}
           id={id}
           onChange={() => (typeof onChange === 'function' ? onChange(option.value) : null)}
           type="radio"

diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/RadioInput/types.ts b/packages/payload/src/admin/components/forms/field-types/RadioGroup/RadioInput/types.ts
@@ -8,4 +8,5 @@ export type Props = {
     value: string
   }
   path: string
+  readOnly?: boolean
 }
diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.scss b/packages/payload/src/admin/components/forms/field-types/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/payload/src/admin/components/forms/field-types/RadioGroup/index.tsx b/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.tsx
@@ -55,6 +55,7 @@ const RadioGroup: React.FC<Props> = (props) => {
       onChange={readOnly ? undefined : setValue}
       options={options}
       path={path}
+      readOnly={readOnly}
       required={required}
       showError={showError}
       style={style}