Merge pull request #150 from kodiak-packages/radio-classname

fix(radio): fix className order
kodiak-packages · Dec 21, 2020 · c7be767 · c7be767
2 parents 67d4e2d + 35deca0
commit c7be767
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 20 deletions.
diff --git a/src/components/Radio/RadioItem/RadioItem.module.css b/src/components/Radio/RadioItem/RadioItem.module.css
@@ -5,7 +5,7 @@
   position: absolute;
 }
 
-.radioInput + .radioButtonContainer {
+.radioButtonContainer {
   cursor: pointer;
   display: flex;
   border-radius: var(--border-radius-small);
@@ -19,14 +19,14 @@
   width: auto;
 }
 
-.radioInput + .radioButtonContainer .header {
+.radioButtonContainer .header {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
 }
 
-.radioInput + .radioButtonContainer .header .checkBox {
+.radioButtonContainer .header .checkBox {
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -37,25 +37,25 @@
   margin-right: 14px;
 }
 
-.radioInput + .radioButtonContainer .header .checkBox .checkBoxFilling {
+.radioButtonContainer .header .checkBox .checkBoxFilling {
   width: 0px;
   height: 0px;
   border-radius: 50%;
   background-color: var(--font-color-sub);
 }
 
-.radioInput + .radioButtonContainer .header .title {
+.radioButtonContainer .header .title {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
 }
 
-.radioInput:disabled + .radioButtonContainer .header .title {
+.radioButtonContainer.isDisabled .header .title {
   color: var(--color-disabled-font);
 }
 
-.radioInput + .radioButtonContainer .description {
+.radioButtonContainer .description {
   color: var(--font-color-sub);
   font-size: 13px;
   margin: 6px 0px 0px 30px;
@@ -69,35 +69,35 @@
   outline: none;
 }
 
-.radioInput:focus + .radioButtonContainer {
+.radioButtonContainer.isFocused {
   box-shadow: 0 0 0 3px var(--color-focus);
 }
 
-.radioInput:disabled + .radioButtonContainer {
+.radioButtonContainer.isDisabled {
   cursor: default;
 }
 
-.radioInput:disabled:not(:checked) + .radioButtonContainer {
+.radioButtonContainer.isDisabled:not(.isChecked) {
   background-color: unset;
 }
 
-.radioInput:disabled + .radioButtonContainer .header .checkBox {
+.radioButtonContainer.isDisabled .header .checkBox {
   border-color: var(--color-disabled-font);
 }
 
-.radioInput:disabled + .radioButtonContainer .header .checkBox .checkBoxFilling  {
+.radioButtonContainer.isDisabled .header .checkBox .checkBoxFilling {
   background-color: var(--color-disabled-font);
 }
 
-.radioInput:disabled + .radioButtonContainer .description {
+.radioButtonContainer.isDisabled .description {
   color: var(--color-disabled-font);
 }
 
-.radioInput:checked + .radioButtonContainer {
+.radioButtonContainer.isChecked {
   background-color: var(--color-primary);
 }
 
-.radioInput:checked + .radioButtonContainer .header .checkBox .checkBoxFilling {
+.radioButtonContainer.isChecked .header .checkBox .checkBoxFilling {
   width: 8px;
   height: 8px;
 }
diff --git a/src/components/Radio/RadioItem/RadioItem.tsx b/src/components/Radio/RadioItem/RadioItem.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useContext } from 'react';
+import React, { ReactNode, useContext, useState } from 'react';
 import classNames from 'classnames';
 
 import { RadioContext } from '../RadioGroup/RadioGroup';
@@ -17,6 +17,7 @@ export interface Props {
 const RadioItem = React.forwardRef<HTMLInputElement, Props>(
   ({ value, label, description, className, isDisabled = false }: Props, ref) => {
     const groupContext = useContext(RadioContext);
+    const [isFocused, setIsFocused] = useState(false);
 
     if (groupContext === null) {
       // eslint-disable-next-line no-console
@@ -32,8 +33,9 @@ const RadioItem = React.forwardRef<HTMLInputElement, Props>(
       cssReset.ventura,
       styles.radioButtonContainer,
       {
-        [styles.radioButtonContainerChecked]: isChecked,
-        [styles.radioButtonContainerDisabled]: isDisabled,
+        [styles.isChecked]: isChecked,
+        [styles.isDisabled]: isDisabled,
+        [styles.isFocused]: isFocused,
       },
       className,
     );
@@ -51,6 +53,8 @@ const RadioItem = React.forwardRef<HTMLInputElement, Props>(
           disabled={isDisabled}
           data-testid={`radio-${groupContext.name}-${value}`}
           className={styles.radioInput}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
         />
         <label
           className={labelClassNames}

diff --git a/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Radio default snapshot 1`] = `
       value="test1"
     />
     <label
-      class="ventura radioButtonContainer radioButtonContainerChecked"
+      class="ventura radioButtonContainer isChecked"
       data-testid="default-test1-container"
       for="default-test1"
     >
@@ -115,7 +115,7 @@ exports[`Radio description snapshot 1`] = `
       value="test1"
     />
     <label
-      class="ventura radioButtonContainer radioButtonContainerChecked"
+      class="ventura radioButtonContainer isChecked"
       data-testid="default-test1-container"
       for="default-test1"
     >