feat(Radio): update component visually to match latest Figma

The task was to only update the 'selected' state (both in 'normal' and 'disabled' states), but I noticed additional inconsistencies between Figma and the current state. Resolves FEPLT-2012
kiwicom · Jun 6, 2024 · 4ff0c15 · 4ff0c15
1 parent 6e7c123
commit 4ff0c15
Show file tree

Hide file tree

Showing 33 changed files with 7 additions and 8 deletions.
diff --git a/...hoiceGroup.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Desktop-darwin.png b/...hoiceGroup.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Desktop-darwin.png
diff --git a/...roup.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Large-Desktop-darwin.png b/...roup.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Large-Desktop-darwin.png
diff --git a/...Group.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Large-Mobile-darwin.png b/...Group.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Large-Mobile-darwin.png
diff --git a/...roup.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Medium-Mobile-darwin.png b/...roup.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Medium-Mobile-darwin.png
diff --git a/...Group.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Small-Mobile-darwin.png b/...Group.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Small-Mobile-darwin.png
diff --git a/...ChoiceGroup.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Tablet-darwin.png b/...ChoiceGroup.ct.tsx-snapshots/visual-ChoiceGroup-ChoiceGroup-1-Tablet-darwin.png
diff --git a/...Radio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-1-Medium-Mobile-darwin.png b/...Radio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-1-Medium-Mobile-darwin.png
diff --git a/.../Radio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-1-Small-Mobile-darwin.png b/.../Radio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-1-Small-Mobile-darwin.png
diff --git a/...dio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Desktop-darwin.png b/...dio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Desktop-darwin.png
diff --git a/...dio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Large-Desktop-darwin.png b/...dio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Large-Desktop-darwin.png
diff --git a/...adio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Large-Mobile-darwin.png b/...adio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Large-Mobile-darwin.png
diff --git a/...dio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Medium-Mobile-darwin.png b/...dio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Medium-Mobile-darwin.png
diff --git a/...adio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Small-Mobile-darwin.png b/...adio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Small-Mobile-darwin.png
diff --git a/...adio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Tablet-darwin.png b/...adio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-checked-1-Tablet-darwin.png
diff --git a/...io/Radio.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Desktop-darwin.png b/...io/Radio.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Desktop-darwin.png
diff --git a/...io.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Large-Desktop-darwin.png b/...io.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Large-Desktop-darwin.png
diff --git a/...dio.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Large-Mobile-darwin.png b/...dio.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Large-Mobile-darwin.png
diff --git a/...io.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Medium-Mobile-darwin.png b/...io.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Medium-Mobile-darwin.png
diff --git a/...dio.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Small-Mobile-darwin.png b/...dio.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Small-Mobile-darwin.png
diff --git a/...dio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Tablet-darwin.png b/...dio/Radio.ct.tsx-snapshots/visual-Radio-screenshot-disabled-1-Tablet-darwin.png
diff --git a/...Radio.ct.tsx-snapshots/visual-Radio-screenshot-error-1-Medium-Mobile-darwin.png b/...Radio.ct.tsx-snapshots/visual-Radio-screenshot-error-1-Medium-Mobile-darwin.png
diff --git a/.../Radio.ct.tsx-snapshots/visual-Radio-screenshot-error-1-Small-Mobile-darwin.png b/.../Radio.ct.tsx-snapshots/visual-Radio-screenshot-error-1-Small-Mobile-darwin.png
diff --git a/...ct.tsx-snapshots/visual-Radio-screenshot-error-focus-1-Medium-Mobile-darwin.png b/...ct.tsx-snapshots/visual-Radio-screenshot-error-focus-1-Medium-Mobile-darwin.png
diff --git a/....ct.tsx-snapshots/visual-Radio-screenshot-error-focus-1-Small-Mobile-darwin.png b/....ct.tsx-snapshots/visual-Radio-screenshot-error-focus-1-Small-Mobile-darwin.png
diff --git a/...ct.tsx-snapshots/visual-Radio-screenshot-error-hover-1-Medium-Mobile-darwin.png b/...ct.tsx-snapshots/visual-Radio-screenshot-error-hover-1-Medium-Mobile-darwin.png
diff --git a/....ct.tsx-snapshots/visual-Radio-screenshot-error-hover-1-Small-Mobile-darwin.png b/....ct.tsx-snapshots/visual-Radio-screenshot-error-hover-1-Small-Mobile-darwin.png
diff --git a/...Radio.ct.tsx-snapshots/visual-Radio-screenshot-focus-1-Medium-Mobile-darwin.png b/...Radio.ct.tsx-snapshots/visual-Radio-screenshot-focus-1-Medium-Mobile-darwin.png
diff --git a/.../Radio.ct.tsx-snapshots/visual-Radio-screenshot-focus-1-Small-Mobile-darwin.png b/.../Radio.ct.tsx-snapshots/visual-Radio-screenshot-focus-1-Small-Mobile-darwin.png
diff --git a/...Radio.ct.tsx-snapshots/visual-Radio-screenshot-hover-1-Medium-Mobile-darwin.png b/...Radio.ct.tsx-snapshots/visual-Radio-screenshot-hover-1-Medium-Mobile-darwin.png
diff --git a/.../Radio.ct.tsx-snapshots/visual-Radio-screenshot-hover-1-Small-Mobile-darwin.png b/.../Radio.ct.tsx-snapshots/visual-Radio-screenshot-hover-1-Small-Mobile-darwin.png
diff --git a/.../Radio.ct.tsx-snapshots/visual-Radio-screenshot-info-1-Medium-Mobile-darwin.png b/.../Radio.ct.tsx-snapshots/visual-Radio-screenshot-info-1-Medium-Mobile-darwin.png
diff --git a/...o/Radio.ct.tsx-snapshots/visual-Radio-screenshot-info-1-Small-Mobile-darwin.png b/...o/Radio.ct.tsx-snapshots/visual-Radio-screenshot-info-1-Small-Mobile-darwin.png
diff --git a/packages/orbit-components/src/Radio/index.tsx b/packages/orbit-components/src/Radio/index.tsx
@@ -33,10 +33,10 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
         !disabled && [
           !checked &&
             (hasError
-              ? "[&>.orbit-radio-icon-container]:border-form-element-error [&>.orbit-radio-icon-container]:hover:border-form-element-error-hover [&>.orbit-radio-icon-container]:active:border-form-element-error "
+              ? "[&>.orbit-radio-icon-container]:border-form-element-error [&>.orbit-radio-icon-container]:hover:border-form-element-error-hover [&>.orbit-radio-icon-container]:active:border-form-element-error"
               : "[&>.orbit-radio-icon-container]:border-form-element [&>.orbit-radio-icon-container]:hover:border-form-element-hover [&>.orbit-radio-icon-container]:active:border-form-element-active"),
           checked &&
-            "[&>.orbit-radio-icon-container]:border-form-element-focus [&>.orbit-radio-icon-container]:bg-blue-normal active:border-form-element-focus",
+            "[&>.orbit-radio-icon-container]:border-form-element-focus active:border-form-element-focus [&>.orbit-radio-icon-container]:bg-white-normal",
         ],
       )}
     >
@@ -64,18 +64,17 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             "flex flex-none items-center justify-center",
             "size-icon-medium rounded-full",
             "duration-fast scale-100 transition-all ease-in-out",
-            "lm:border border-[2px] border-solid",
+            "border-solid",
+            checked ? "border-2" : "border",
             "active:scale-95",
             "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
-            disabled
-              ? "bg-form-element-disabled-background border-transparent"
-              : "bg-form-element-background",
+            disabled ? "bg-cloud-light border-cloud-dark" : "bg-form-element-background",
           )}
         >
           <span
             className={cx(
-              "size-xs rounded-full",
-              disabled ? "bg-cloud-light" : "bg-form-element-background",
+              "size-[10px] rounded-full",
+              disabled ? "bg-cloud-dark" : "bg-blue-normal",
               checked ? "visible" : "invisible",
             )}
           />