💄 Fix radio and checkbox label padding (#1643)

* 💄 Removed extra padding between input and label * 📸 Update snapshots
equinor · Oct 21, 2021 · e145250 · e145250
1 parent 01e7c82
commit e145250
Show file tree

Hide file tree

Showing 6 changed files with 1 addition and 19 deletions.
diff --git a/libraries/core-react/src/components/Checkbox/Checkbox.tokens.ts b/libraries/core-react/src/components/Checkbox/Checkbox.tokens.ts
@@ -53,13 +53,6 @@ export const checkbox: CheckboxToken = {
       },
     },
   },
-  entities: {
-    label: {
-      spacings: {
-        left: medium_small,
-      },
-    },
-  },
   modes: {
     compact: {
       spacings: {

diff --git a/libraries/core-react/src/components/Checkbox/Checkbox.tsx b/libraries/core-react/src/components/Checkbox/Checkbox.tsx
@@ -2,7 +2,7 @@
 import { forwardRef, Ref, InputHTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { checkbox as tokens } from './Checkbox.tokens'
-import { typographyTemplate, spacingsTemplate } from '../../utils'
+import { typographyTemplate } from '../../utils'
 import { CheckboxInput } from './Input'
 
 type StyledLabelProps = {
@@ -17,7 +17,6 @@ const StyledLabel = styled.label<StyledLabelProps>`
 
 const LabelText = styled.span`
   ${typographyTemplate(tokens.typography)};
-  ${spacingsTemplate(tokens.entities.label.spacings)}
 `
 
 export type CheckboxProps = {

diff --git a/libraries/core-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/libraries/core-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -81,7 +81,6 @@ exports[`Checkbox Matches snapshot 1`] = `
   -ms-letter-spacing: 0.013em;
   letter-spacing: 0.013em;
   text-align: left;
-  padding-left: 12px;
 }
 
 @media (hover:hover) and (pointer:fine) {

diff --git a/libraries/core-react/src/components/Radio/Radio.tokens.ts b/libraries/core-react/src/components/Radio/Radio.tokens.ts
@@ -53,13 +53,6 @@ export const comfortable: RadioToken = {
       },
     },
   },
-  entities: {
-    label: {
-      spacings: {
-        left: medium_small,
-      },
-    },
-  },
   modes: {
     compact: {
       spacings: {

diff --git a/libraries/core-react/src/components/Radio/Radio.tsx b/libraries/core-react/src/components/Radio/Radio.tsx
@@ -84,7 +84,6 @@ const Svg = styled.svg.attrs(({ height, width, fill }) => ({
 
 const LabelText = styled.span`
   ${typographyTemplate(tokens.typography)}
-  ${spacingsTemplate(tokens.entities.label.spacings)}
 `
 
 type StyledInputWrapperProps = { disabled: boolean }

diff --git a/libraries/core-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/libraries/core-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -71,7 +71,6 @@ exports[`Radio Matches snapshot 1`] = `
   -ms-letter-spacing: 0.013em;
   letter-spacing: 0.013em;
   text-align: left;
-  padding-left: 12px;
 }
 
 .c1 {