fix: improve spaces when label is not defined (#450) (#515)

* fix: improve spaces when label is not defined (#450)

The margin has been removed in favour of gap to get rid of unnecessary indentation when label undefined

* chore: add shorthand margin

src/components/Checkbox/Checkbox.tsx

@@ -38,7 +38,7 @@ const WithTapAreaWrapper = styled.div<Pick<CheckboxProps, 'textVerticalAlign'>>`
     align-items: center;
 
     height: 1rem;
-    margin: 0 0.5rem 0 0;
+    margin: 0;
     ${({ textVerticalAlign }) => (textVerticalAlign === 'top' ? 'margin-top: 0.1875rem' : undefined)}
 `;
 

src/components/Checkbox/components/LabelWrapper.tsx

@@ -79,6 +79,8 @@ const LabelWrapper = styled.label.attrs({ theme })<LabelWrapperProps>`
     font-family: ${get('fonts.normal')};
     line-height: 1;
 
+    gap: 0.5rem;
+
     &:hover {
         ${hoverStyle}
     }

src/components/Checkbox/docs/Checkbox.stories.tsx

@@ -23,7 +23,11 @@ export default meta;
 
 type Story = StoryObj<typeof Checkbox>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        label: undefined
+    }
+};
 
 export const Selected: Story = {
     args: {

src/components/RadioButton/RadioButton.tsx

@@ -10,7 +10,7 @@ import { TapArea } from './components/TapArea';
 import { RadioButtonProps } from './RadioButtonProps';
 
 const WithTapAreaWrapper = styled.div<Pick<RadioButtonProps, 'textVerticalAlign'>>`
-    width: 1.5rem;
+    width: 1rem;
     position: relative;
     display: inline-flex;
     align-items: center;

src/components/RadioButton/components/Checkmark.tsx

@@ -15,7 +15,7 @@ const Checkmark = styled.input<CheckmarkProps>`
     width: 1rem;
     height: 1rem;
     padding: 0;
-    margin: 0 0.5rem 0 0;
+    margin: 0;
 
     background-color: ${getSemanticValue('background-page-default')};
     box-shadow: inset 0 0 0 0.125rem

src/components/RadioButton/components/LabelWrapper.tsx

@@ -63,6 +63,8 @@ const LabelWrapper = styled.label.attrs({ theme })<LabelWrapperProps>`
     font-family: ${get('fonts.normal')};
     line-height: 1;
 
+    gap: 0.5rem;
+
     &:hover {
         ${hoverStyle}
     }

src/components/Toggle/Label.tsx

@@ -11,6 +11,8 @@ const Label = styled.label<LabelProps>`
     cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
     user-select: none;
 
+    gap: 0.5rem;
+
     ${margin}
 `;
 

src/components/Toggle/Slide.tsx

@@ -31,7 +31,6 @@ const Slide = styled.div<SlideProps>`
     display: inline-block;
     border-radius: 0.5rem;
     position: relative;
-    margin-right: 0.5rem;
 
     &::before {
         content: '';

src/components/Toggle/Toggle.tsx

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithoutRef, FC, ReactNode, Ref } from 'react';
+import styled from 'styled-components';
 import { MarginProps } from 'styled-system';
 
 import { ClassNameProps, extractClassNameProps, extractWrapperMarginProps } from '../../utils/extractProps';
@@ -22,6 +23,11 @@ interface ToggleProps extends ToggleHtmlInputProps, ClassNameProps, MarginProps
     error?: boolean;
 }
 
+const SlideWrapper = styled.span`
+    display: inline-flex;
+    align-items: center;
+`;
+
 const Toggle: FC<ToggleProps> = props => {
     const { classNameProps, restProps: withoutClassName } = extractClassNameProps(props);
     const { marginProps, restProps } = extractWrapperMarginProps(withoutClassName);
@@ -34,8 +40,10 @@ const Toggle: FC<ToggleProps> = props => {
 
     return (
         <Label disabled={disabled} {...classNameProps} {...marginProps}>
-            <Input disabled={disabled} error={error} {...rest} type="checkbox" />
-            <Slide disabled={disabled} error={error} />
+            <SlideWrapper>
+                <Input disabled={disabled} error={error} {...rest} type="checkbox" />
+                <Slide disabled={disabled} error={error} />
+            </SlideWrapper>
             {dynamicLabel}
         </Label>
     );