feat(Radio): set correct styles when not using visible label

einride · May 11, 2023 · 8cd1624 · 8cd1624
1 parent 3b3c7f9
commit 8cd1624
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/.changeset/little-pigs-sin.md b/.changeset/little-pigs-sin.md
@@ -0,0 +1,5 @@
+---
+"@einride/ui": minor
+---
+
+Radio: Set correct styles when not using visible label.
diff --git a/packages/einride-ui/src/components/controls/radios/Radio/Radio.tsx b/packages/einride-ui/src/components/controls/radios/Radio/Radio.tsx
@@ -31,21 +31,27 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
           onChange={(value) => onCheckedChange?.(value.target.checked)}
           ref={ref}
         />
-        <StyledLabel htmlFor={id} {...labelProps}>
-          {children}
-        </StyledLabel>
+        {children && (
+          <StyledLabel htmlFor={id} {...labelProps}>
+            {children}
+          </StyledLabel>
+        )}
       </Wrapper>
     )
   },
 )
 
 const Wrapper = styled.div`
-  padding-block: ${({ theme }) => 1.5 * theme.spacingBase}rem;
-  padding-inline: ${({ theme }) => 2 * theme.spacingBase}rem;
+  padding: ${({ theme }) => 1.5 * theme.spacingBase}rem;
   display: flex;
   align-items: center;
   gap: ${({ theme }) => 2 * theme.spacingBase}rem;
 
+  &:has(label) {
+    padding-inline: ${({ theme }) =>
+      2 * theme.spacingBase}rem; // increase inline padding when label is present
+  }
+
   &:has(input:focus-visible) label {
     text-decoration: underline;
   }
@@ -87,5 +93,6 @@ const StyledInput = styled.input`
 const StyledLabel = styled.label`
   font-family: ${({ theme }) => theme.fonts.body};
   font-size: ${({ theme }) => theme.fontSizes.md};
+  line-height: calc(4 / 3);
   color: ${({ theme }) => theme.colors.content.primary};
 `