fix: fix styles for disable Radio button (#842)

contentful · Feb 19, 2021 · 2c200ac · 2c200ac
1 parent 3e394e2
commit 2c200ac
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/forma-36-react-components/src/components/ControlledInput/ControlledInput.css b/packages/forma-36-react-components/src/components/ControlledInput/ControlledInput.css
@@ -54,23 +54,23 @@
 
       &:disabled {
         & + .RadioButton__ghost {
-          border-color: var(--color-element-dark);
           background: var(--color-element-dark);
         }
 
         & + .RadioButton__ghost::before {
-          background: var(--color-element-darkest);
+          background: var(--color-text-lightest);
         }
       }
     }
 
     &:disabled {
       & + .RadioButton__ghost {
+        border-color: var(--color-element-dark);
         background: var(--color-element-dark);
       }
 
       & + .RadioButton__ghost::before {
-        background: var(--color-text-lightest);
+        background: var(--color-element-darkest);
       }
     }
   }

diff --git a/...es/forma-36-react-components/src/components/RadioButtonField/RadioButtonField.stories.tsx b/...es/forma-36-react-components/src/components/RadioButtonField/RadioButtonField.stories.tsx
@@ -93,6 +93,22 @@ export const overview = () => (
         id="radioButton3"
       />
     </Flex>
+    <Flex marginBottom="spacingS">
+      <SectionHeading element="h3">
+        Radio button disabled checked
+      </SectionHeading>
+    </Flex>
+    <Flex marginBottom="spacingS">
+      <RadioButtonField
+        labelText="Label text"
+        helpText="This is a helptext"
+        disabled
+        checked
+        name="someOption"
+        value="no"
+        id="radioButton3"
+      />
+    </Flex>
     <Flex marginBottom="spacingS">
       <SectionHeading element="h3">
         Radio button with light label