fix: checkbox/radio alignment with long text label (#1898)

WTTJ · Feb 2, 2023 · 38f1aed · 38f1aed
1 parent bb7b56c
commit 38f1aed
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/Field/styles.ts b/packages/Field/styles.ts
@@ -15,7 +15,12 @@ const columnStyles = css`
 
 const checkableFieldStyles = css`
   ${th('defaultFields.checkablelabel.default')};
-  margin-bottom: xs;
+  align-items: flex-start;
+  overflow-wrap: break-word;
+
+  input {
+    margin-top: xs;
+  }
 `
 
 type StyledFieldProps = {
@@ -33,11 +38,13 @@ export const Field = styled('div').withConfig({ shouldForwardProp })<StyledField
     ${StyledLabel} {
       ${flexDirection === 'row' && rowStyles};
       ${flexDirection === 'column' && !isCheckable && columnStyles};
-      ${isCheckable && !withHintText && checkableFieldStyles};
+      ${isCheckable && checkableFieldStyles};
+      ${isCheckable && withHintText && th('defaultFields.checkablelabel.default')}
       ${checked && th('defaultFields.checkablelabel.checked')}
+      margin-bottom: ${!withHintText && 'xs'}
     }
     ${StyledHint} {
-      ${isCheckable && withHintText && checkableFieldStyles};
+      margin-bottom: ${isCheckable && 'xxs'};
     }
     ${system};
   `

diff --git a/packages/Radio/styles.ts b/packages/Radio/styles.ts
@@ -77,6 +77,10 @@ export const Input = styled.div`
 
 export const Wrapper = styled(Box)`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: sm;
+
+  input {
+    margin-top: xs;
+  }
 `