[FRNT-533] Rewrite field to box-model

src/ui/elements/quarks/box/index.ts

@@ -0,0 +1,13 @@
+import { css } from 'styled-components';
+
+export const verticalBox = css`
+  --local-gap: var(--woly-const-m);
+
+  & > *:not(:first-child) {
+    padding-top: var(--local-gap);
+  }
+
+  & > :only-child {
+    padding: 0;
+  }
+`;

src/ui/elements/quarks/index.ts

@@ -1,2 +1,3 @@
+export { verticalBox } from './box';
 export { InputContainer } from './input-container';
 export { InputElement } from './input-element';

src/ui/molecules/field/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
+import { box, verticalBox } from 'ui/elements/quarks';
 
 import { Label } from '../../atoms';
 
@@ -18,38 +19,27 @@ const FieldBase: React.FC<FieldProps & Variant> = ({
   row = false,
   variant = 'secondary',
 }) => (
-  <div className={className} data-row={row} data-variant={variant}>
-    <div data-field="label">
-      <Label>
-        {label}
-        <div data-field="content">{children}</div>
-      </Label>
-    </div>
-  </div>
+  <Label data-field="label" className={className} data-row={row} data-variant={variant}>
+    <span>{label}</span>
+    <div data-field="content">{children}</div>
+  </Label>
 );
 
 export const Field = styled(FieldBase)`
-  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
-  );
-
-  padding-bottom: var(--local-vertical, 6px);
+  --local-gap: calc(1px * var(--woly-component-level) * var(--woly-main-level));
 
   box-sizing: border-box;
-
   width: 100%;
 
-  label {
-    padding: var(--local-vertical, 6px) 0;
+  &[data-row='false'] {
+    ${verticalBox}
   }
 
   &[data-row='true'] {
     display: flex;
     align-items: center;
-
-    [data-field='label'] {
-      padding: 0 var(--local-horizontal, 6px);
+    & > :not(:first-child) {
+      padding-left: var(--local-gap);
     }
   }
 ` as StyledComponent<'label', Record<string, unknown>, FieldProps & Variant>;