From c8d5d98c9396009a3bd3ad1db6fbf790af5be811 Mon Sep 17 00:00:00 2001
From: Tatiana Cherednichenko <tatinacher@gmail.com>
Date: Thu, 6 May 2021 15:07:39 +0300
Subject: [PATCH 1/3] fix: rewrite field to box model

---
 src/ui/elements/quarks/box/index.ts | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/ui/elements/quarks/box/index.ts

diff --git a/src/ui/elements/quarks/box/index.ts b/src/ui/elements/quarks/box/index.ts
new file mode 100644
index 00000000..9c998850
--- /dev/null
+++ b/src/ui/elements/quarks/box/index.ts
@@ -0,0 +1,32 @@
+import { css } from 'styled-components';
+
+export const box = css`
+  --local-vertical: calc(
+    1px * var(--woly-component-level) * var(--woly-main-level) - var(--woly-border-width)
+  );
+  --local-horizontal: calc(
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical) -
+      var(--woly-border-width)
+  );
+  --local-gap: calc(1px * var(--woly-component-level) * var(--woly-main-level));
+  --local-compensate: var(--local-vertical);
+  & > * {
+    padding-top: var(--local-vertical);
+    padding-bottom: var(--local-vertical);
+  }
+  & > :first-child {
+    padding-left: var(--local-horizontal);
+  }
+  & > :last-child {
+    padding-right: var(--local-horizontal);
+  }
+  & > [data-icon]:first-child {
+    padding-left: var(--local-compensate);
+  }
+  & > [data-icon]:last-child {
+    padding-right: var(--local-compensate);
+  }
+  & > :not(:first-child) {
+    margin-left: var(--local-gap);
+  }
+`;

From 39d846dc9f8f54bb1957f65770e3d3fd408b4e18 Mon Sep 17 00:00:00 2001
From: Tatiana Cherednichenko <tatinacher@gmail.com>
Date: Fri, 7 May 2021 12:47:49 +0300
Subject: [PATCH 2/3] fix

---
 src/ui/elements/quarks/box/index.ts | 13 +++++++++++++
 src/ui/elements/quarks/index.ts     |  1 +
 src/ui/molecules/field/index.tsx    | 25 +++++++++----------------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/ui/elements/quarks/box/index.ts b/src/ui/elements/quarks/box/index.ts
index 9c998850..3a7ef468 100644
--- a/src/ui/elements/quarks/box/index.ts
+++ b/src/ui/elements/quarks/box/index.ts
@@ -1,5 +1,17 @@
 import { css } from 'styled-components';
 
+export const verticalBox = css`
+  --local-gap: var(--woly-const-m);
+
+  & > *:not(:last-child) {
+    padding-bottom: var(--local-gap);
+  }
+
+  & > :only-child {
+    padding: 0;
+  }
+`;
+
 export const box = css`
   --local-vertical: calc(
     1px * var(--woly-component-level) * var(--woly-main-level) - var(--woly-border-width)
@@ -10,6 +22,7 @@ export const box = css`
   );
   --local-gap: calc(1px * var(--woly-component-level) * var(--woly-main-level));
   --local-compensate: var(--local-vertical);
+
   & > * {
     padding-top: var(--local-vertical);
     padding-bottom: var(--local-vertical);
diff --git a/src/ui/elements/quarks/index.ts b/src/ui/elements/quarks/index.ts
index 858e080c..84f9a6e5 100644
--- a/src/ui/elements/quarks/index.ts
+++ b/src/ui/elements/quarks/index.ts
@@ -1,2 +1,3 @@
+export { verticalBox } from './box';
 export { InputContainer } from './input-container';
 export { InputElement } from './input-element';
diff --git a/src/ui/molecules/field/index.tsx b/src/ui/molecules/field/index.tsx
index 02940f65..db5391f2 100644
--- a/src/ui/molecules/field/index.tsx
+++ b/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 { verticalBox } from 'ui/elements/quarks';
 
 import { Label } from '../../atoms';
 
@@ -18,30 +19,22 @@ 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); */
 
-  padding-bottom: var(--local-vertical, 6px);
+  ${verticalBox}
 
   box-sizing: border-box;
-
   width: 100%;
 
   label {
-    padding: var(--local-vertical, 6px) 0;
+    /* padding: var(--local-vertical, 6px) 0; */
   }
 
   &[data-row='true'] {
@@ -49,7 +42,7 @@ export const Field = styled(FieldBase)`
     align-items: center;
 
     [data-field='label'] {
-      padding: 0 var(--local-horizontal, 6px);
+      /* padding: 0 var(--local-horizontal, 6px); */
     }
   }
 ` as StyledComponent<'label', Record<string, unknown>, FieldProps & Variant>;

From 39012474f4d082fee8ad670195cf3f828d62f5f4 Mon Sep 17 00:00:00 2001
From: Tatiana Cherednichenko <tatinacher@gmail.com>
Date: Fri, 7 May 2021 13:24:35 +0300
Subject: [PATCH 3/3] fix: rewrite field to box-model

---
 src/ui/elements/quarks/box/index.ts | 36 ++---------------------------
 src/ui/molecules/field/index.tsx    | 15 +++++-------
 2 files changed, 8 insertions(+), 43 deletions(-)

diff --git a/src/ui/elements/quarks/box/index.ts b/src/ui/elements/quarks/box/index.ts
index 3a7ef468..fe2a82bf 100644
--- a/src/ui/elements/quarks/box/index.ts
+++ b/src/ui/elements/quarks/box/index.ts
@@ -3,43 +3,11 @@ import { css } from 'styled-components';
 export const verticalBox = css`
   --local-gap: var(--woly-const-m);
 
-  & > *:not(:last-child) {
-    padding-bottom: var(--local-gap);
+  & > *:not(:first-child) {
+    padding-top: var(--local-gap);
   }
 
   & > :only-child {
     padding: 0;
   }
 `;
-
-export const box = css`
-  --local-vertical: calc(
-    1px * var(--woly-component-level) * var(--woly-main-level) - var(--woly-border-width)
-  );
-  --local-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical) -
-      var(--woly-border-width)
-  );
-  --local-gap: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-compensate: var(--local-vertical);
-
-  & > * {
-    padding-top: var(--local-vertical);
-    padding-bottom: var(--local-vertical);
-  }
-  & > :first-child {
-    padding-left: var(--local-horizontal);
-  }
-  & > :last-child {
-    padding-right: var(--local-horizontal);
-  }
-  & > [data-icon]:first-child {
-    padding-left: var(--local-compensate);
-  }
-  & > [data-icon]:last-child {
-    padding-right: var(--local-compensate);
-  }
-  & > :not(:first-child) {
-    margin-left: var(--local-gap);
-  }
-`;
diff --git a/src/ui/molecules/field/index.tsx b/src/ui/molecules/field/index.tsx
index db5391f2..5f693e60 100644
--- a/src/ui/molecules/field/index.tsx
+++ b/src/ui/molecules/field/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
-import { verticalBox } from 'ui/elements/quarks';
+import { box, verticalBox } from 'ui/elements/quarks';
 
 import { Label } from '../../atoms';
 
@@ -26,23 +26,20 @@ const FieldBase: React.FC<FieldProps & Variant> = ({
 );
 
 export const Field = styled(FieldBase)`
-  /* padding-bottom: var(--local-vertical, 6px); */
-
-  ${verticalBox}
+  --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>;