refactor(components): update RadioButton for desktop use

Opentrons · Sep 25, 2024 · f39a4fa · f39a4fa
1 parent 95159ed
commit f39a4fa
Showing 1 changed file with 23 additions and 5 deletions.
diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx
@@ -13,7 +13,6 @@ import {
   RESPONSIVENESS,
   SPACING,
   StyledText,
-  TYPOGRAPHY,
 } from '../..'
 import type { IconName } from '../..'
 import type { StyleProps } from '../../primitives'
@@ -83,7 +82,15 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   const DISABLED_BUTTON_STYLE = css`
     background-color: ${COLORS.grey35};
     color: ${COLORS.grey50};
-    cursor: ${CURSOR_NOT_ALLOWED};
+
+    &:hover,
+    &:active {
+      background-color: ${COLORS.grey35};
+    }
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      cursor: ${CURSOR_NOT_ALLOWED};
+    }
   `
 
   const SettingButtonLabel = styled.label`
@@ -113,6 +120,14 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     }
   `
 
+  const SubButtonLabelStyle = css`
+    color: ${disabled
+      ? COLORS.grey50
+      : isSelected
+      ? COLORS.white
+      : COLORS.grey60};
+  `
+
   return (
     <Flex
       css={css`
@@ -154,7 +169,9 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
           {typeof buttonLabel === 'string' ? (
             <StyledText
               oddStyle={isLarge ? 'level4HeaderSemiBold' : 'bodyTextRegular'}
-              desktopStyle="bodyDefaultRegular"
+              desktopStyle={
+                isLarge ? 'bodyDefaultSemiBold' : 'bodyDefaultRegular'
+              }
             >
               {buttonLabel}
             </StyledText>
@@ -164,8 +181,9 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         </Flex>
         {subButtonLabel != null ? (
           <StyledText
-            oddStyle="level4HeaderRegular"
-            fontWeight={TYPOGRAPHY.fontWeightRegular}
+            oddStyle={isLarge ? 'level4HeaderRegular' : 'bodyTextRegular'}
+            desktopStyle="bodyDefaultRegular"
+            css={SubButtonLabelStyle}
           >
             {subButtonLabel}
           </StyledText>