Uxpt 3816 radio button improvements (#1421)

* (UXPT-3816):made updates to radio button and story * (UXPT-3816):update snapshots * (UXPT-3816):changelog update * (UXPT-3816):get color using getpalettecolor instead of theme.colors * (UXPT-3816):added renaming and helper functions * (UXPT-3816):small refactors as per design
priceline · Nov 21, 2023 · 056b7eb · 056b7eb
1 parent af958cd
commit 056b7eb
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 17 deletions.
diff --git a/common/changes/pcln-design-system/UXPT-3816-radioButtonImprovements_2023-11-21-16-05.json b/common/changes/pcln-design-system/UXPT-3816-radioButtonImprovements_2023-11-21-16-05.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "added changes for cursor, color of radio button and also updated the story",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Radio/Radio.stories.tsx b/packages/core/src/Radio/Radio.stories.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { Radio, Label, Button } from '..'
 import ForwardRefDemo from '../storybook/utils/ForwardRefsDemo'
+import { getPaletteColor } from '../utils'
 
 const bold = (props) => (props.bold ? { fontWeight: props.theme.fontWeights.bold } : null)
 const medium = (props) => (props.medium ? { fontWeight: props.theme.fontWeights.medium } : null)
@@ -14,6 +15,25 @@ const LabelText = styled.span`
   ${bold}
   ${medium}
 `
+const RadioLabelDisabled = styled(Label)`
+  cursor: not-allowed;
+  color: ${getPaletteColor('border.base')};
+`
+const RadioLabel = styled(Label)`
+  cursor: pointer;
+  color: ${getPaletteColor('text.light')};
+
+  &:hover {
+    div[data-name='unchecked'] {
+      color: ${getPaletteColor('primary.base')};
+    }
+    div[data-name='checked'] {
+      > svg {
+        color: ${getPaletteColor('primary.dark')};
+      }
+    }
+  }
+`
 
 // @ts-ignore
 class MockForm extends React.Component {
@@ -68,18 +88,18 @@ export default {
 
 export const _3States = () => (
   <div onChange={action('changed')}>
-    <Label fontSize='14px'>
+    <RadioLabel fontSize='14px'>
       <Radio checked />
       <LabelText>selected</LabelText>
-    </Label>
-    <Label fontSize='14px'>
+    </RadioLabel>
+    <RadioLabel fontSize='14px'>
       <Radio />
       <LabelText>not selected</LabelText>
-    </Label>
-    <Label fontSize='14px'>
+    </RadioLabel>
+    <RadioLabelDisabled fontSize='14px'>
       <Radio disabled />
       <LabelText>disabled</LabelText>
-    </Label>
+    </RadioLabelDisabled>
   </div>
 )
 
@@ -93,10 +113,10 @@ export function ForwardRefs() {
     }
     return (
       <>
-        <Label fontSize='14px'>
+        <RadioLabel fontSize='14px'>
           <Radio checked />
           <LabelText>selected</LabelText>
-        </Label>
+        </RadioLabel>
         <Button onClick={onClick} mt={4}>
           Click to focus radio via ref
         </Button>
@@ -108,13 +128,13 @@ export function ForwardRefs() {
 
 export const FontWeight = () => (
   <div onChange={action('changed')}>
-    <Label fontSize='14px'>
+    <RadioLabel fontSize='14px'>
       <Radio checked />
       <LabelText bold>font weight - bold</LabelText>
-    </Label>
-    <Label fontSize='14px'>
+    </RadioLabel>
+    <RadioLabel fontSize='14px'>
       <Radio checked />
       <LabelText medium>font weight - medium</LabelText>
-    </Label>
+    </RadioLabel>
   </div>
 )
diff --git a/packages/core/src/Radio/Radio.tsx b/packages/core/src/Radio/Radio.tsx
@@ -6,7 +6,8 @@ import { applyVariations, deprecatedColorValue, getPaletteColor } from '../utils
 
 const RadioWrap = styled.div`
   display: inline-block;
-  color: ${getPaletteColor('border.base')};
+  color: ${getPaletteColor('text.light')};
+  cursor: ${(props) => (props.disabled ? `not-allowed` : `pointer`)};
   &:hover > svg {
     ${(props) => {
       if (props.checked && !props.disabled) {
@@ -43,6 +44,7 @@ const RadioInput = styled.input`
   }
   &:disabled ~ svg {
     color: ${getPaletteColor('border.base')};
+    cursor: not-allowed;
   }
 `
 
@@ -77,8 +79,23 @@ const Radio: React.FC<IRadioProps> = React.forwardRef((props, ref) => {
 
   const borderAdjustedSize = size + 4
 
+  const dataNameHelper = (checked, disabled) => {
+    if ((checked && disabled) || (!checked && disabled)) {
+      return 'disabled'
+    }
+    if (checked && !disabled) {
+      return 'checked'
+    }
+    return 'unchecked'
+  }
+
   return (
-    <RadioWrap color={props.color} checked={checked} disabled={disabled}>
+    <RadioWrap
+      color={props.color}
+      checked={checked}
+      disabled={disabled}
+      data-name={dataNameHelper(checked, disabled)}
+    >
       <RadioInput type='radio' {...props} ref={ref} />
       <RadioIcon checked={checked} size={borderAdjustedSize} />
     </RadioWrap>

diff --git a/packages/core/src/Radio/__snapshots__/Radio.spec.tsx.snap b/packages/core/src/Radio/__snapshots__/Radio.spec.tsx.snap
@@ -15,7 +15,8 @@ exports[`Radio Disabled, rendering 1`] = `
 
 .c0 {
   display: inline-block;
-  color: #c0cad5;
+  color: #4f6f8f;
+  cursor: not-allowed;
 }
 
 .c1 {
@@ -48,6 +49,7 @@ exports[`Radio Disabled, rendering 1`] = `
 
 .c1:disabled ~ svg {
   color: #c0cad5;
+  cursor: not-allowed;
 }
 
 .c4 {
@@ -57,6 +59,7 @@ exports[`Radio Disabled, rendering 1`] = `
 <div
   className="c0"
   color="primary"
+  data-name="disabled"
   disabled={true}
 >
   <input
@@ -100,7 +103,8 @@ exports[`Radio Not Selected, rendering 1`] = `
 
 .c0 {
   display: inline-block;
-  color: #c0cad5;
+  color: #4f6f8f;
+  cursor: pointer;
 }
 
 .c0:hover > svg {
@@ -137,6 +141,7 @@ exports[`Radio Not Selected, rendering 1`] = `
 
 .c1:disabled ~ svg {
   color: #c0cad5;
+  cursor: not-allowed;
 }
 
 .c4 {
@@ -146,6 +151,7 @@ exports[`Radio Not Selected, rendering 1`] = `
 <div
   className="c0"
   color="primary"
+  data-name="unchecked"
 >
   <input
     className="c1"
@@ -187,7 +193,8 @@ exports[`Radio Selected, rendering 1`] = `
 
 .c0 {
   display: inline-block;
-  color: #c0cad5;
+  color: #4f6f8f;
+  cursor: pointer;
 }
 
 .c0:hover > svg {
@@ -224,6 +231,7 @@ exports[`Radio Selected, rendering 1`] = `
 
 .c1:disabled ~ svg {
   color: #c0cad5;
+  cursor: not-allowed;
 }
 
 .c4 {
@@ -234,6 +242,7 @@ exports[`Radio Selected, rendering 1`] = `
   checked={true}
   className="c0"
   color="primary"
+  data-name="checked"
 >
   <input
     checked={true}