From c30fc19fd583221353a3d6e6e0329750962d88e7 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Thu, 15 Apr 2021 16:00:30 +0300
Subject: [PATCH 1/6] fix: rewrite menulist

---
 src/lib/box-styles.tsx              |   2 +-
 src/ui/atoms/header-panel/usage.mdx | 119 +++++++++++++++-------------
 src/ui/atoms/list/index.tsx         |  68 ++++++----------
 src/ui/atoms/list/usage.mdx         |  12 ++-
 src/ui/atoms/text-area/index.tsx    |   4 +-
 src/ui/atoms/text-area/usage.mdx    |  34 ++++----
 src/ui/molecules/field/index.tsx    |   6 +-
 src/ui/molecules/field/usage.mdx    |  60 +++++++-------
 src/ui/molecules/select/usage.mdx   |   5 +-
 9 files changed, 148 insertions(+), 162 deletions(-)

diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
index 537804ee..fb64532e 100644
--- a/src/lib/box-styles.tsx
+++ b/src/lib/box-styles.tsx
@@ -27,7 +27,7 @@ export const Global = styled.div`
     --woly-shape-text-hover: var(--palette-snow-0);
     --woly-shape-text-active: var(--palette-snow-0);
     --woly-canvas-default: transparent;
-    --woly-canvas-disabled: var(--palete-snow-100);
+    --woly-canvas-disabled: var(--palette-snow-100);
     --woly-canvas-hover: var(--palette-snow-500);
     --woly-canvas-active: var(--palette-snow-500);
     --woly-canvas-text-default: var(--palette-snow-1000);
diff --git a/src/ui/atoms/header-panel/usage.mdx b/src/ui/atoms/header-panel/usage.mdx
index e0186648..a21125df 100644
--- a/src/ui/atoms/header-panel/usage.mdx
+++ b/src/ui/atoms/header-panel/usage.mdx
@@ -11,64 +11,75 @@ import { CloseIcon } from 'icons';
 `HeaderPanel` is a navigation component that displays information and actions relating to the current screen.
 
 <Playground>
-    <div style={{marginBottom: "10px"}}>
-        <HeaderPanel>Hello! It`s a HeaderPanel</HeaderPanel>
-    </div>
+  <div style={{ marginBottom: '10px' }}>
+    <HeaderPanel>Hello! It`s a HeaderPanel</HeaderPanel>
+  </div>
 </Playground>
- 
 ### Example
 
 <Playground>
-    <State initial={false} change={(i) => !i}>
-        {(value, change) => (
-        <block.S style={{marginBottom: "10px"}}>
-            <HeaderPanel>
-                <div style={{paddingRight: "10px"}}>
-                    <Button onClick={change} text="Sign in" variant="primary" />
-                </div>
-                <div>
-                    <b><a href="" target="" style={{paddingRight: "10px"}}>This is a link</a></b>
-                    <b><a href="" target="" style={{paddingRight: "10px"}}>This is a link</a></b>
-                    <b><a href="" target="" >This is a link</a></b>
-                </div>
-            </HeaderPanel>
-            <div 
-            style={{
-                position: 'absolute',
-                    visibility: value ? 'visible' : 'hidden',
-                    width: value ? '250px' : '0',
-                    marginTop: '20px',
-                
-            }}>
-                <Surface>
-                <FormBlock>
-                    <Label variant="base">Name</Label>
-                    <Input
-                        name="name"
-                        onChange={(event) => console.info('On input change')}
-                        placeholder="Ivan Ivanov"
-                        type="text"
-                        variant="base"
-                    />
-                    <Label variant="base">Password</Label>
-                    <Input
-                        name="password"
-                        onChange={(event) => console.info('On input change')}
-                        type="password"
-                        variant="base"
-                    />
-                    <Button
-                        style={{ marginTop: '20px' }}
-                        onClick={() => {}}
-                        text="Sign in"
-                        variant="primary"
-                    />
-                </FormBlock>
-                </Surface>
-            </div>
-            </block.S>
-        )}
-    </State>
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <block.S style={{ marginBottom: '10px' }}>
+        <HeaderPanel>
+          <div style={{ paddingRight: '10px' }}>
+            <Button onClick={change} text="Sign in" variant="primary" />
+          </div>
+          <div>
+            <b>
+              <a href="" target="" style={{ paddingRight: '10px' }}>
+                This is a link
+              </a>
+            </b>
+            <b>
+              <a href="" target="" style={{ paddingRight: '10px' }}>
+                This is a link
+              </a>
+            </b>
+            <b>
+              <a href="" target="">
+                This is a link
+              </a>
+            </b>
+          </div>
+        </HeaderPanel>
+        <div
+          style={{
+            position: 'absolute',
+            visibility: value ? 'visible' : 'hidden',
+            width: value ? '250px' : '0',
+            marginTop: '20px',
+          }}
+        >
+          <Surface>
+            <FormBlock>
+              <Label variant="base">Name</Label>
+              <Input
+                name="name"
+                onChange={(event) => console.info('On input change')}
+                placeholder="Ivan Ivanov"
+                type="text"
+                variant="base"
+              />
+              <Label variant="base">Password</Label>
+              <Input
+                name="password"
+                onChange={(event) => console.info('On input change')}
+                type="password"
+                variant="base"
+              />
+              <Button
+                style={{ marginTop: '20px' }}
+                onClick={() => {}}
+                text="Sign in"
+                variant="primary"
+              />
+            </FormBlock>
+          </Surface>
+        </div>
+      </block.S>
+    )}
+  </State>
 </Playground>
 
 ### Kinds
diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx
index 92544f7d..cf314ad9 100644
--- a/src/ui/atoms/list/index.tsx
+++ b/src/ui/atoms/list/index.tsx
@@ -1,20 +1,6 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
-
-/**
- * --woly-list-padding
- * --woly-list-color
- * --woly-list-background
- * --woly-rounding
- * --woly-shadow
- * --woly-canvas
- * --woly-background-hover
- * --woly-color
- * --woly-color-hover
- * --woly-line-height
- */
-
 interface List {
   className?: string;
   list: Array<{
@@ -29,13 +15,8 @@ interface List {
 
 const ListBase: React.FC<List & Variant> = ({ className, list, variant = 'default' }) => (
   <ul className={className} data-variant={variant}>
-    {list.map(({ left, right, text, id, disabled, onClick }) => (
-      <li
-        key={id}
-        data-type="list-item"
-        data-disabled={disabled}
-        onClick={onClick}
-      >
+    {list.map(({ left, right, text, id, disabled = 'false', onClick }) => (
+      <li key={id} data-type="list-item" data-disabled={disabled} onClick={onClick}>
         {left && <span data-icon="left">{left}</span>}
         <span data-block="content">{text}</span>
         {right && <span data-icon="right">{right}</span>}
@@ -45,37 +26,35 @@ const ListBase: React.FC<List & Variant> = ({ className, list, variant = 'defaul
 );
 
 export const List = styled(ListBase)`
-  --woly-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --woly-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--woly-vertical)
+  --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)
   );
 
-  --woly-width: 100%;
+  --local-color: var(--woly-canvas-text-default);
+  --local-background: var(--woly-shape-text-default);
+  --local-item-background: var(--woly-canvas-default);
 
   box-sizing: border-box;
-  width: var(--woly-width);
+  width: 100%;
 
   padding: 0;
 
-  color: var(--woly-color, #000000);
-
   list-style-type: none;
-  background-color: var(--woly-canvas, #ffffff);
-  border-radius: var(--woly-rounding, 3px);
-  box-shadow: var(--woly-shadow, 3px 3px 8px rgba(11, 31, 53, 0.04));
 
   [data-icon] {
+    --local-icon-size: var(--woly-line-height);
     display: flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
 
-    width: var(--woly-line-height, 24px);
-    height: var(--woly-line-height, 24px);
+    width: var(--local-icon-size);
+    height: var(--local-icon-size);
     padding-right: 6px;
 
     svg > path {
-      fill: var(--woly-color-disabled, #000000);
+      fill: var(--local-color);
     }
   }
 
@@ -84,7 +63,9 @@ export const List = styled(ListBase)`
     flex: 1;
     align-items: center;
 
-    padding: var(--woly-vertical, 12px) var(--woly-horizontal, 18px 12px);
+    padding: var(--local-vertical) var(--local-horizontal);
+
+    background: var(--local-item-background);
 
     font-size: var(--woly-font-size, 15px);
     line-height: var(--woly-line-height, 24px);
@@ -93,27 +74,30 @@ export const List = styled(ListBase)`
 
     [data-block='content'] {
       flex: 1;
+      color: var(--local-color);
     }
 
     &:hover {
-      background-color: var(--woly-background-hover, #f5f5f5);
+      --local-item-background: var(--woly-canvas-disabled);
+      border-radius: var(--woly-rounding);
     }
 
     &:focus,
     &:active {
-      border-color: var(--woly-border-focus, #1f68f5);
-      border-style: solid;
-      border-width: var(--woly-border-width, 1.5px);
+      outline: none;
+      box-shadow: 0 0 0 1.5px var(--woly-focus);
+      border-radius: var(--woly-rounding);
     }
 
     &[data-disabled='true'] {
-      color: var(--woly-color-disabled, #c4c4c4);
-
+      [data-block='content'] {
+        --local-color: var(--woly-canvas-active);
+      }
       pointer-events: none;
 
       [data-icon] {
         svg > path {
-          fill: var(--woly-canvas, #c4c4c4);
+          --local-color: var(--woly-canvas-active);
         }
       }
     }
diff --git a/src/ui/atoms/list/usage.mdx b/src/ui/atoms/list/usage.mdx
index d9178e3a..b76ac3b0 100644
--- a/src/ui/atoms/list/usage.mdx
+++ b/src/ui/atoms/list/usage.mdx
@@ -23,6 +23,7 @@ It does not need to be a direct child of the List component.
 
 <Playground>
   <List
+    variant="primary"
     list={[
       { id: 0, text: 'Red' },
       { id: 1, text: 'Green' },
@@ -31,16 +32,13 @@ It does not need to be a direct child of the List component.
   />
 </Playground>
 
-<!-- <ListExample /> -->
-
 ### Icons
 
 listList items can consist icon on the left side or the right. Use icons on the both sides is not recommended.
 
-{' '}
-
 <Playground>
   <List
+    variant="primary"
     list={[
       {
         left: <InfoIcon />,
@@ -53,6 +51,7 @@ listList items can consist icon on the left side or the right. Use icons on the
     ]}
   />
   <List
+    variant="primary"
     list={[
       { id: 0, text: 'Red', right: <Check /> },
       { id: 1, text: 'Green', right: <Check /> },
@@ -60,6 +59,7 @@ listList items can consist icon on the left side or the right. Use icons on the
     ]}
   />
   <List
+    variant="primary"
     list={[
       {
         left: <InfoIcon />,
@@ -73,6 +73,7 @@ listList items can consist icon on the left side or the right. Use icons on the
     ]}
   />
   <List
+    variant="primary"
     list={[
       {
         left: <InfoIcon />,
@@ -100,6 +101,7 @@ Size controlled by the `component-level` block property not from the props.
 <Playground>
   <block.S>
     <List
+      variant="primary"
       list={[
         { left: <InfoIcon />, id: 0, text: 'Red' },
         { left: <InfoIcon />, id: 1, text: 'Green' },
@@ -109,6 +111,7 @@ Size controlled by the `component-level` block property not from the props.
   </block.S>
   <block.L>
     <List
+      variant="primary"
       list={[
         { left: <InfoIcon />, id: 0, text: 'Red' },
         { left: <InfoIcon />, id: 1, text: 'Green' },
@@ -118,6 +121,7 @@ Size controlled by the `component-level` block property not from the props.
   </block.L>
   <block.XL>
     <List
+      variant="primary"
       list={[
         { left: <InfoIcon />, id: 0, text: 'Red' },
         { left: <InfoIcon />, id: 1, text: 'Green' },
diff --git a/src/ui/atoms/text-area/index.tsx b/src/ui/atoms/text-area/index.tsx
index 93219fd4..1b28498d 100644
--- a/src/ui/atoms/text-area/index.tsx
+++ b/src/ui/atoms/text-area/index.tsx
@@ -71,9 +71,7 @@ const TextAreaBase: React.FC<TextAreaProps & Variant> = ({
 );
 
 export const TextArea = styled(TextAreaBase)`
-  --woly-vertical: calc(
-    1px * var(--woly-component-level) * var(--woly-main-level)
-  );
+  --woly-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
   --woly-horizontal: calc(
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--woly-vertical)
   );
diff --git a/src/ui/atoms/text-area/usage.mdx b/src/ui/atoms/text-area/usage.mdx
index f590cb14..585ec783 100644
--- a/src/ui/atoms/text-area/usage.mdx
+++ b/src/ui/atoms/text-area/usage.mdx
@@ -20,20 +20,20 @@ import { TextAreaExample } from './example';
 
 ### Props
 
-| Name       | Type                                                          | Default     | Description                                                                                |
-| ---------- | ------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------ |
-| `name`       | `string`                                                      |             | Name attribute specifies a name of the text-area                                         |
-| `isDisabled` | `boolean`                                                     | `null`      | HTML disabled attribute                                                                  |
-| `value`      | `HTMLInputElement['value']`                                   | `null`      | Value of text-area field                                                                 |
-| `onChange`   | `(e: React.ChangeEvent<HTMLInputElement>) => unknown`         |             | Callback when user text-area                                                             |
-| `onKeyDown`  | `(event: React.KeyboardEvent<HTMLTextAreaElement>) => unknown`|             | Callback when user text-area                                                             |
-| `variant`    | `string`                                                      | `'default'` | Variant prop to style TextArea component                                                 |
-| `row`        | `number`                                                      |             | Number of rows to display                                                                |
-| `cols`       | `number`                                                      |             | Number of cols to display                                                                |
-| `wrap`       | `string`                                                      |             | The wrap attribute specifies how the text in a text area is to be wrapped                |
-| `resize`     | `string`                                                      |             | The resize property defines if (and how) an element is resizable by the user             |
-| `maxLength`  | `number`                                                      |             | The maxlength attribute specifies the maximum length (in characters)                     |
-| `minLength`  | `number`                                                      |             | The minlength attribute specifies the maximum length (in characters)                     |
-| `overflow`   | `string`                                                      |             | The overflow property specifies what should happen if content overflows an element's box |
-| `placeholder`| `string`                                                      |             | The placeholder represents the placeholder text                                          |
-|`...`         | `HTMLInputElement`                                            | `{}`        | Other props are inherited from `HTMLInputElement`                                        |
+| Name          | Type                                                           | Default     | Description                                                                              |
+| ------------- | -------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------- |
+| `name`        | `string`                                                       |             | Name attribute specifies a name of the text-area                                         |
+| `isDisabled`  | `boolean`                                                      | `null`      | HTML disabled attribute                                                                  |
+| `value`       | `HTMLInputElement['value']`                                    | `null`      | Value of text-area field                                                                 |
+| `onChange`    | `(e: React.ChangeEvent<HTMLInputElement>) => unknown`          |             | Callback when user text-area                                                             |
+| `onKeyDown`   | `(event: React.KeyboardEvent<HTMLTextAreaElement>) => unknown` |             | Callback when user text-area                                                             |
+| `variant`     | `string`                                                       | `'default'` | Variant prop to style TextArea component                                                 |
+| `row`         | `number`                                                       |             | Number of rows to display                                                                |
+| `cols`        | `number`                                                       |             | Number of cols to display                                                                |
+| `wrap`        | `string`                                                       |             | The wrap attribute specifies how the text in a text area is to be wrapped                |
+| `resize`      | `string`                                                       |             | The resize property defines if (and how) an element is resizable by the user             |
+| `maxLength`   | `number`                                                       |             | The maxlength attribute specifies the maximum length (in characters)                     |
+| `minLength`   | `number`                                                       |             | The minlength attribute specifies the maximum length (in characters)                     |
+| `overflow`    | `string`                                                       |             | The overflow property specifies what should happen if content overflows an element's box |
+| `placeholder` | `string`                                                       |             | The placeholder represents the placeholder text                                          |
+| `...`         | `HTMLInputElement`                                             | `{}`        | Other props are inherited from `HTMLInputElement`                                        |
diff --git a/src/ui/molecules/field/index.tsx b/src/ui/molecules/field/index.tsx
index 1670718d..06999f81 100644
--- a/src/ui/molecules/field/index.tsx
+++ b/src/ui/molecules/field/index.tsx
@@ -29,9 +29,7 @@ const FieldBase: React.FC<FieldProps & Variant> = ({
 );
 
 export const Field = styled(FieldBase)`
-  --local-vertical: calc(
-    1px * var(--woly-component-level) * var(--woly-main-level)
-  );
+  --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)
   );
@@ -45,7 +43,7 @@ export const Field = styled(FieldBase)`
   label {
     padding: var(--local-vertical, 6px) 0;
   }
-  
+
   &[data-row='true'] {
     display: flex;
     align-items: center;
diff --git a/src/ui/molecules/field/usage.mdx b/src/ui/molecules/field/usage.mdx
index bb5663dd..4b8370aa 100644
--- a/src/ui/molecules/field/usage.mdx
+++ b/src/ui/molecules/field/usage.mdx
@@ -8,15 +8,15 @@ import { Playground, block, State } from 'box-styles';
 import { Field, Input, InputPassword, Toggle, Checkbox, TextArea } from 'ui';
 import { ClosedEyeIcon, OpenedEyeIcon } from 'icons';
 
-`Field` is a master component that will make it easy to modify the label based on the field settings 
+`Field` is a master component that will make it easy to modify the label based on the field settings
 It’s common for fields to have different settings that are usually displayed in the label.
 
 ### Label
 
-Field labels display the type of input a field requires. 
+Field labels display the type of input a field requires.
 Every field component should have a label.
 
-Labels are aligned with the input line and always visible. 
+Labels are aligned with the input line and always visible.
 They can be resting (when a field is inactive and empty) or floating.
 
 Input line
@@ -31,13 +31,14 @@ The input line indicates where to enter text, displayed below the label.
       name="name"
       onChange={(event) => console.info('On input change')}
       placeholder="Placeholder"
-      type="text"/>
+      type="text"
+    />
   </Field>
 </Playground>
 
 ### Labels
 
-Labels can be used in case for a standalone component, in common it will be eg input, toggle, textarea 
+Labels can be used in case for a standalone component, in common it will be eg input, toggle, textarea
 
 or also as a label of group of component, eg checkbox or radiobutton groups.
 
@@ -47,7 +48,7 @@ or also as a label of group of component, eg checkbox or radiobutton groups.
     <Checkbox text="Item text" variant="default" />
     <Checkbox text="Item text" variant="default" />
   </Field>
-</Playground> 
+</Playground>
 <Playground size="S">
   <Field label="Label for a standalone component" variant="default">
     <TextArea
@@ -66,12 +67,13 @@ or also as a label of group of component, eg checkbox or radiobutton groups.
       name="input"
       onChange={() => console.info('change')}
       placeholder="Enter password"
-      variant="default"    
+      variant="default"
     />
   </Field>
-</Playground> 
+</Playground>{' '}
 
 Labels and children component can be replaced in row
+
 <Playground size="S">
   <Field label="Label of set" row>
     <Checkbox text="Item text" variant="default" />
@@ -81,48 +83,40 @@ Labels and children component can be replaced in row
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
       <Field label="Label of item" row>
-        <Toggle
-          isChecked={value}
-          onChange={change}
-          id="roundTwo"
-          variant="round"/>
+        <Toggle isChecked={value} onChange={change} id="roundTwo" variant="round" />
       </Field>
     )}
   </State>
 </Playground>
 
- or in column variants
+or in column variants
 
 <Playground size="S">
   <Field label="Label of set">
-      <Checkbox text="Item text" variant="default" />
-      <Checkbox text="Item text" variant="default" />
-      <Checkbox text="Item text" variant="default" />
-    </Field>
+    <Checkbox text="Item text" variant="default" />
+    <Checkbox text="Item text" variant="default" />
+    <Checkbox text="Item text" variant="default" />
+  </Field>
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
       <Field label="Label of item">
-        <Toggle
-          isChecked={value}
-          onChange={change}
-          id="roundOne"
-          variant="round"/>
+        <Toggle isChecked={value} onChange={change} id="roundOne" variant="round" />
       </Field>
     )}
   </State>
 </Playground>
 
-### Kinds 
+### Kinds
 
-| Name       | Description                                                 |
-| ---------- | ----------------------------------------------------------- |
-| `Field `   | Base Field. Useful for creating a new kind of Field         |
+| Name     | Description                                         |
+| -------- | --------------------------------------------------- |
+| `Field ` | Base Field. Useful for creating a new kind of Field |
 
 ### Props
 
-| Name          | Type                  | Default     | Description                                                      |
-| ------------- | --------------------- | ----------- | ---------------------------------------------------------------- |
-| `children`    | `React.ReactNode`     |             | Trigger element of Popover                                       |
-| `label`       | `React.ReactNode`     |             | Text appeared on the button                                      |
-| `row`         | `boolean`             |             | The row attribute specifies direction of label and component     |
-| `variant`     | `string`              | `'default'` | Variant prop to style component                                  |
+| Name       | Type              | Default     | Description                                                  |
+| ---------- | ----------------- | ----------- | ------------------------------------------------------------ |
+| `children` | `React.ReactNode` |             | Trigger element of Popover                                   |
+| `label`    | `React.ReactNode` |             | Text appeared on the button                                  |
+| `row`      | `boolean`         |             | The row attribute specifies direction of label and component |
+| `variant`  | `string`          | `'default'` | Variant prop to style component                              |
diff --git a/src/ui/molecules/select/usage.mdx b/src/ui/molecules/select/usage.mdx
index 6f9d1471..359155dd 100644
--- a/src/ui/molecules/select/usage.mdx
+++ b/src/ui/molecules/select/usage.mdx
@@ -41,10 +41,7 @@ Or you can pass initial selected value.
 
 <Playground size="S">
   <div style={{ height: '150px' }}>
-    <StateEvent
-      initial="Cats"  
-      change={(event) => event?.target?.dataset.value}
-    >
+    <StateEvent initial="Cats" change={(event) => event?.target?.dataset.value}>
       {(value, change) => (
         <div style={{ display: 'flex' }}>
           <Select

From 8557f93199473152123716af93965386ed237eed Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Thu, 15 Apr 2021 17:02:08 +0300
Subject: [PATCH 2/6] fix: add new styles

---
 src/lib/box-styles.tsx      |  6 +++---
 src/ui/atoms/list/index.tsx | 27 ++++++++++++++++-----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
index fb64532e..6376f682 100644
--- a/src/lib/box-styles.tsx
+++ b/src/lib/box-styles.tsx
@@ -31,9 +31,9 @@ export const Global = styled.div`
     --woly-canvas-hover: var(--palette-snow-500);
     --woly-canvas-active: var(--palette-snow-500);
     --woly-canvas-text-default: var(--palette-snow-1000);
-    --woly-canvas-text-disabled: var(--woly-snow-500);
-    --woly-canvas-text-hover: var(--woly-snow-500);
-    --woly-canvas-text-active: var(--woly-snow-500);
+    --woly-canvas-text-disabled: var(--palette-snow-500);
+    --woly-canvas-text-hover: var(--palette-snow-500);
+    --woly-canvas-text-active: var(--palette-snow-500);
   }
   [data-variant='secondary'] {
     --woly-border-width: 2px;
diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx
index cf314ad9..1e42c971 100644
--- a/src/ui/atoms/list/index.tsx
+++ b/src/ui/atoms/list/index.tsx
@@ -31,6 +31,9 @@ export const List = styled(ListBase)`
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
 
+  --local-gap: var(--local-vertical);
+  --local-compensate: var(--woly-const-m);
+
   --local-color: var(--woly-canvas-text-default);
   --local-background: var(--woly-shape-text-default);
   --local-item-background: var(--woly-canvas-default);
@@ -70,34 +73,36 @@ export const List = styled(ListBase)`
     font-size: var(--woly-font-size, 15px);
     line-height: var(--woly-line-height, 24px);
 
+    color: var(--local-color);
+
     cursor: pointer;
 
+    outline: none;
+    border-radius: var(--woly-rounding);
+
     [data-block='content'] {
       flex: 1;
-      color: var(--local-color);
     }
 
     &:hover {
       --local-item-background: var(--woly-canvas-disabled);
-      border-radius: var(--woly-rounding);
     }
-
-    &:focus,
-    &:active {
-      outline: none;
+    &:focus{
       box-shadow: 0 0 0 1.5px var(--woly-focus);
-      border-radius: var(--woly-rounding);
+    }
+    &:active {
+     --local-item-background: var(--woly-focus);
+     --local-color: var( --woly-shape-text-active);
     }
 
     &[data-disabled='true'] {
-      [data-block='content'] {
-        --local-color: var(--woly-canvas-active);
-      }
+      --local-color: var(--woly-canvas-text-disabled);
+      
       pointer-events: none;
 
       [data-icon] {
         svg > path {
-          --local-color: var(--woly-canvas-active);
+          --local-color: var(--woly-canvas-text-disabled);
         }
       }
     }

From 0ec10ec2b46579e66b7246fc87bcb1e71b451ced Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Thu, 15 Apr 2021 21:21:37 +0300
Subject: [PATCH 3/6] fix: add examples, fix styles

---
 src/ui/atoms/list/index.tsx | 115 ++++++++++++++++++++----------
 src/ui/atoms/list/usage.mdx | 138 +++++++++++++++++++++++++++++-------
 2 files changed, 190 insertions(+), 63 deletions(-)

diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx
index 1e42c971..11a7e90f 100644
--- a/src/ui/atoms/list/index.tsx
+++ b/src/ui/atoms/list/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
+import { keyboardEventHandle } from 'lib';
 interface List {
   className?: string;
   list: Array<{
@@ -9,19 +10,51 @@ interface List {
     text: React.ReactNode;
     id: string;
     disabled?: boolean;
-    onClick?: React.MouseEventHandler<HTMLLIElement>;
+    onClick: React.EventHandler<React.SyntheticEvent>;
   }>;
 }
 
-const ListBase: React.FC<List & Variant> = ({ className, list, variant = 'default' }) => (
+const ListBase: React.FC<List & Variant> = ({ className, list, variant = 'default', ...p }) => (
   <ul className={className} data-variant={variant}>
-    {list.map(({ left, right, text, id, disabled = 'false', onClick }) => (
-      <li key={id} data-type="list-item" data-disabled={disabled} onClick={onClick}>
-        {left && <span data-icon="left">{left}</span>}
-        <span data-block="content">{text}</span>
-        {right && <span data-icon="right">{right}</span>}
-      </li>
-    ))}
+    {list.map(({ left, right, text, id, disabled = 'false', onClick }) => {
+      const tabIndex = disabled ? -1 : 0;
+
+      const onKeyDown = React.useCallback(
+        (event: React.KeyboardEvent) => {
+          console.log(1);
+
+          if (event.key === 'Enter') {
+            event.preventDefault();
+          }
+          const keyHandler = {
+            enter: (event: React.SyntheticEvent<Element, Event>) => {
+              onClick(event);
+            },
+          };
+
+          keyboardEventHandle({
+            event,
+            keyHandler,
+          });
+        },
+        [onClick],
+      );
+
+      return (
+        <li
+          data-disabled={disabled}
+          data-type="list-item"
+          key={id}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          tabIndex={tabIndex}
+        >
+          {left && <span data-icon="left">{left}</span>}
+          <span data-text="text">{text}</span>
+          {right && <span data-icon="right">{right}</span>}
+        </li>
+      );
+    })}
   </ul>
 );
 
@@ -33,71 +66,81 @@ export const List = styled(ListBase)`
 
   --local-gap: var(--local-vertical);
   --local-compensate: var(--woly-const-m);
+  --local-margin: var(--woly-border-width);
 
   --local-color: var(--woly-canvas-text-default);
   --local-background: var(--woly-shape-text-default);
   --local-item-background: var(--woly-canvas-default);
+  --local-border: var(--woly-canvas-default);
 
   box-sizing: border-box;
+
   width: 100%;
 
   padding: 0;
+  margin: 0;
 
-  list-style-type: none;
-
-  [data-icon] {
-    --local-icon-size: var(--woly-line-height);
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-
-    width: var(--local-icon-size);
-    height: var(--local-icon-size);
-    padding-right: 6px;
+  border: var(--woly-border-width) solid var(--local-border);
 
-    svg > path {
-      fill: var(--local-color);
-    }
-  }
+  list-style-type: none;
 
   li[data-type='list-item'] {
     display: flex;
-    flex: 1;
     align-items: center;
 
-    padding: var(--local-vertical) var(--local-horizontal);
-
-    background: var(--local-item-background);
+    padding: var(--local-vertical) 0;
+    margin-bottom: var(--local-margin);
 
     font-size: var(--woly-font-size, 15px);
     line-height: var(--woly-line-height, 24px);
 
     color: var(--local-color);
+    background: var(--local-item-background);
 
     cursor: pointer;
-
     outline: none;
-    border-radius: var(--woly-rounding);
 
-    [data-block='content'] {
+    [data-text] {
+      display: flex;
       flex: 1;
+      padding: 0 var(--local-horizontal);
+    }
+
+    [data-icon] {
+      --local-icon-size: var(--woly-line-height);
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      padding: 0 calc(var(--local-horizontal) - var(--local-compensate));
+
+      width: var(--local-icon-size);
+      height: var(--local-icon-size);
+
+      svg > path {
+        fill: var(--local-color);
+      }
+    }
+
+    [data-icon='left'] ~ [data-text],
+    [data-text] ~ [data-icon='right'] {
+      padding-left: var(--local-gap);
     }
 
     &:hover {
       --local-item-background: var(--woly-canvas-disabled);
     }
-    &:focus{
+    &:focus {
       box-shadow: 0 0 0 1.5px var(--woly-focus);
     }
     &:active {
-     --local-item-background: var(--woly-focus);
-     --local-color: var( --woly-shape-text-active);
+      --local-item-background: var(--woly-focus);
+      --local-color: var(--woly-shape-text-active);
     }
 
     &[data-disabled='true'] {
       --local-color: var(--woly-canvas-text-disabled);
-      
+
       pointer-events: none;
 
       [data-icon] {
diff --git a/src/ui/atoms/list/usage.mdx b/src/ui/atoms/list/usage.mdx
index b76ac3b0..20b8491c 100644
--- a/src/ui/atoms/list/usage.mdx
+++ b/src/ui/atoms/list/usage.mdx
@@ -34,18 +34,13 @@ It does not need to be a direct child of the List component.
 
 ### Icons
 
-listList items can consist icon on the left side or the right. Use icons on the both sides is not recommended.
+List items can consist icon on the left side or the right. Use icons on the both sides is not recommended.
 
 <Playground>
   <List
     variant="primary"
     list={[
-      {
-        left: <InfoIcon />,
-        id: 0,
-        text: 'Red',
-        onClick: () => alert('Item clicked'),
-      },
+      { left: <InfoIcon />, id: 0, text: 'Red' },
       { left: <InfoIcon />, id: 1, text: 'Green' },
       { left: <InfoIcon />, id: 2, text: 'Blue' },
     ]}
@@ -72,26 +67,95 @@ listList items can consist icon on the left side or the right. Use icons on the
       { left: <InfoIcon />, id: 2, text: 'Blue', right: <Check /> },
     ]}
   />
-  <List
-    variant="primary"
-    list={[
-      {
-        left: <InfoIcon />,
-        id: 0,
-        text: 'Red',
-        right: <Check />,
-        disabled: true,
-      },
-      { left: <InfoIcon />, id: 1, text: 'Green', right: <Check /> },
-      {
-        left: <InfoIcon />,
-        id: 2,
-        text: 'Blue',
-        right: <Check />,
-        disabled: true,
-      },
-    ]}
-  />
+</Playground>
+
+List items can be clickable or not.
+
+<Playground>
+  <block.M>
+    <List
+      variant="primary"
+      list={[
+        {
+          left: <InfoIcon />,
+          id: 0,
+          text: 'Red',
+          right: <Check />,
+          onClick: () => alert('Item clicked'),
+        },
+        {
+          left: <InfoIcon />,
+          id: 1,
+          text: 'Green',
+          right: <Check />,
+          onClick: () => alert('Item clicked'),
+        },
+        {
+          left: <InfoIcon />,
+          id: 2,
+          text: 'Blue',
+          right: <Check />,
+          onClick: () => alert('Item clicked'),
+        },
+      ]}
+    />
+  </block.M>
+  <block.M>
+    <List
+      variant="primary"
+      list={[
+        {
+          left: <InfoIcon />,
+          id: 0,
+          text: 'Red',
+          right: <Check />,
+          onClick: () => alert('Item clicked'),
+        },
+        {
+          left: <InfoIcon />,
+          id: 1,
+          text: 'Green',
+          right: <Check />,
+          disabled: true,
+        },
+        {
+          left: <InfoIcon />,
+          id: 2,
+          text: 'Blue',
+          right: <Check />,
+          onClick: () => alert('Item clicked'),
+        },
+      ]}
+    />
+  </block.M>
+  <block.M>
+    <List
+      variant="primary"
+      list={[
+        {
+          left: <InfoIcon />,
+          id: 0,
+          text: 'Red',
+          right: <Check />,
+          disabled: true,
+        },
+        {
+          left: <InfoIcon />,
+          id: 1,
+          text: 'Green',
+          right: <Check />,
+          disabled: true,
+        },
+        {
+          left: <InfoIcon />,
+          id: 2,
+          text: 'Blue',
+          right: <Check />,
+          disabled: true,
+        },
+      ]}
+    />
+  </block.M>
 </Playground>
 
 ### Sizes
@@ -109,6 +173,16 @@ Size controlled by the `component-level` block property not from the props.
       ]}
     />
   </block.S>
+  <block.M>
+    <List
+      variant="primary"
+      list={[
+        { left: <InfoIcon />, id: 0, text: 'Red' },
+        { left: <InfoIcon />, id: 1, text: 'Green' },
+        { left: <InfoIcon />, id: 2, text: 'Blue' },
+      ]}
+    />
+  </block.M>
   <block.L>
     <List
       variant="primary"
@@ -129,6 +203,16 @@ Size controlled by the `component-level` block property not from the props.
       ]}
     />
   </block.XL>
+  <block.H>
+    <List
+      variant="primary"
+      list={[
+        { left: <InfoIcon />, id: 0, text: 'Red' },
+        { left: <InfoIcon />, id: 1, text: 'Green' },
+        { left: <InfoIcon />, id: 2, text: 'Blue' },
+      ]}
+    />
+  </block.H>
 </Playground>
 
 ### Kinds

From 838ae8907d72a4e090a507d17a37a325bec2cb72 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Wed, 21 Apr 2021 20:00:38 +0300
Subject: [PATCH 4/6] fix: fix list styles

---
 src/lib/index.ts            |  2 +-
 src/lib/select-handlers.ts  | 18 ++++++++++++++++--
 src/ui/atoms/list/index.tsx | 35 ++++++++++++++++++++++-------------
 src/ui/atoms/list/usage.mdx | 23 +++++++++++++----------
 4 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5497a978..e50fa4ad 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,3 @@
 export { positionRelativeGet } from './position-relative';
 export { keyboardEventHandle } from './keyboard-event';
-export { keyHandlerGet } from './select-handlers';
+export { keyHandlerGet, keyHandlerList } from './select-handlers';
diff --git a/src/lib/select-handlers.ts b/src/lib/select-handlers.ts
index eecf9118..87e76cfa 100644
--- a/src/lib/select-handlers.ts
+++ b/src/lib/select-handlers.ts
@@ -2,6 +2,11 @@ interface GetSelectHandlersProps extends EnterProps {
   dropdownNode: HTMLElement;
 }
 
+interface GetListHandlersProps extends EnterProps {
+  dropdownNode: HTMLElement;
+  onEnter: (event: React.SyntheticEvent<Element, Event>) => void;
+}
+
 interface EnterProps {
   isOpen: boolean;
   onChange: React.EventHandler<React.SyntheticEvent>;
@@ -13,7 +18,7 @@ const LI_TAG = 'LI';
 
 const onArrowDown = (dropdownNode: HTMLElement) => () => {
   if (document.activeElement?.tagName === LI_TAG) {
-    (document.activeElement.nextElementSibling as HTMLElement).focus();
+    (document.activeElement?.nextElementSibling as HTMLElement).focus();
   } else {
     (dropdownNode.firstChild as HTMLElement).focus();
   }
@@ -21,7 +26,7 @@ const onArrowDown = (dropdownNode: HTMLElement) => () => {
 
 const onArrowUp = (dropdownNode: HTMLElement) => () => {
   if (document.activeElement?.tagName === LI_TAG) {
-    (document.activeElement.previousElementSibling as HTMLElement).focus();
+    (document?.activeElement?.previousElementSibling as HTMLElement).focus();
   } else {
     (dropdownNode.lastChild as HTMLElement).focus();
   }
@@ -48,3 +53,12 @@ export const keyHandlerGet = ({
   arrowUp: onArrowUp(dropdownNode),
   enter: onEnter({ selectNode, setIsOpen, isOpen, onChange }),
 });
+
+export const keyHandlerList = ({
+  dropdownNode,
+  onEnter
+}: any) => ({
+  arrowDown: onArrowDown(dropdownNode),
+  arrowUp: onArrowUp(dropdownNode),
+  enter: onEnter,
+});
diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx
index a2ed69b6..35f5b448 100644
--- a/src/ui/atoms/list/index.tsx
+++ b/src/ui/atoms/list/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
-import { keyboardEventHandle } from 'lib';
+import { keyHandlerList, keyboardEventHandle } from 'lib';
 interface List {
   className?: string;
   disabled?: boolean;
@@ -12,7 +12,6 @@ interface List {
     text: React.ReactNode;
     id: string;
     disabled?: boolean;
-    onChange: React.EventHandler<React.SyntheticEvent>;
   }>;
 }
 
@@ -20,29 +19,37 @@ const ListBase: React.FC<List & Variant> = ({
   className,
   list,
   variant = 'default',
-  disabled = 'false',
+  disabled = false,
   onChange
 }) => {
   const tabIndex = disabled ? -1 : 0;
+  const dropdownRef = React.useRef(null);
 
   const onKeyDown = React.useCallback(
     (event: React.KeyboardEvent) => {
+      const dropdownNode = dropdownRef.current;
 
-      if (event.key === 'Enter') {
-        event.preventDefault();
+      if (!document || !dropdownNode || event.key === 'Tab') {
+        return;
       }
-      const keyHandler = {
-        enter: (event: React.SyntheticEvent<Element, Event>) => {
-          onChange(event);
-        },
+
+      event.preventDefault();
+
+      const onEnter = (event: React.SyntheticEvent<Element, Event>) => {
+        onChange(event);
       };
 
+      const kh = keyHandlerList({
+        dropdownNode,
+        onEnter,
+      });
+
       keyboardEventHandle({
         event,
-        keyHandler,
+        keyHandler: kh,
       });
     },
-    [onChange],
+    [dropdownRef, onChange],
   );
   return (
     <ul
@@ -50,14 +57,16 @@ const ListBase: React.FC<List & Variant> = ({
       data-variant={variant}
       onKeyDown={onKeyDown}
       tabIndex={tabIndex}
-      onChange={onChange}
       role="listbox"
+      ref={dropdownRef}
     >
-      {list.map(({ left, right, text, id, onChange }) => (
+      {list.map(({ left, right, text, id }) => (
         <li
           data-disabled={disabled}
           data-type="list-item"
           key={id}
+          onClick={onChange}
+          tabIndex={-1}
         >
           {left && <span data-icon="left">{left}</span>}
           <span data-text="text">{text}</span>
diff --git a/src/ui/atoms/list/usage.mdx b/src/ui/atoms/list/usage.mdx
index ca3101e4..1966078a 100644
--- a/src/ui/atoms/list/usage.mdx
+++ b/src/ui/atoms/list/usage.mdx
@@ -4,7 +4,7 @@ category: atoms
 package: 'woly'
 ---
 
-import { Playground, block } from 'box-styles'
+import { Playground, block, StateEvent } from 'box-styles'
 import { List } from 'ui';
 import { InfoIcon, Check } from 'icons';
 
@@ -22,15 +22,18 @@ It does not need to be a direct child of the List component.
 ### Example
 
 <Playground>
-  <List
-    variant="primary"
-    onChange={() => {console.log(1)}}
-    list={[
-      { id: 0, text: 'Red' },
-      { id: 1, text: 'Green' },
-      { id: 2, text: 'Blue', onClick: () => alert('Item clicked')},
-    ]}
-  />
+  <StateEvent initial={null} change={(event) => event?.target?.dataset.value}>
+    {(value, change) => (
+      <List
+        variant="primary"
+        list={[
+          { id: 0, text: 'Red' },
+          { id: 1, text: 'Green' },
+          { id: 2, text: 'Blue', onClick: {change}},
+        ]}
+      />
+    )}
+  </StateEvent>
 </Playground>
 
 ### Icons

From c7b90e23423f9cf031cd98ae5c0b7a5582a58be6 Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Thu, 22 Apr 2021 11:37:31 +0300
Subject: [PATCH 5/6] fix styles

---
 src/lib/select-handlers.ts  |  14 ++-
 src/ui/atoms/list/index.tsx |  14 +--
 src/ui/atoms/list/usage.mdx | 181 +++++++++++++++++++-----------------
 3 files changed, 110 insertions(+), 99 deletions(-)

diff --git a/src/lib/select-handlers.ts b/src/lib/select-handlers.ts
index 87e76cfa..37496e28 100644
--- a/src/lib/select-handlers.ts
+++ b/src/lib/select-handlers.ts
@@ -4,7 +4,6 @@ interface GetSelectHandlersProps extends EnterProps {
 
 interface GetListHandlersProps extends EnterProps {
   dropdownNode: HTMLElement;
-  onEnter: (event: React.SyntheticEvent<Element, Event>) => void;
 }
 
 interface EnterProps {
@@ -20,7 +19,7 @@ const onArrowDown = (dropdownNode: HTMLElement) => () => {
   if (document.activeElement?.tagName === LI_TAG) {
     (document.activeElement?.nextElementSibling as HTMLElement).focus();
   } else {
-    (dropdownNode.firstChild as HTMLElement).focus();
+    (dropdownNode?.firstChild as HTMLElement).focus();
   }
 };
 
@@ -42,6 +41,14 @@ const onEnter = ({ isOpen, onChange, selectNode, setIsOpen }: EnterProps) => (
   selectNode.focus();
 };
 
+const onItemEnter = (dropdownNode: HTMLElement) => () => {
+  if (document.activeElement?.tagName === LI_TAG) {
+    (document?.activeElement as HTMLElement).click();
+  } else {
+    (dropdownNode?.lastChild as HTMLElement).focus();
+  }
+};
+
 export const keyHandlerGet = ({
   dropdownNode,
   isOpen,
@@ -56,9 +63,8 @@ export const keyHandlerGet = ({
 
 export const keyHandlerList = ({
   dropdownNode,
-  onEnter
 }: any) => ({
   arrowDown: onArrowDown(dropdownNode),
   arrowUp: onArrowUp(dropdownNode),
-  enter: onEnter,
+  enter: onItemEnter(dropdownNode),
 });
diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx
index 35f5b448..7ed34d74 100644
--- a/src/ui/atoms/list/index.tsx
+++ b/src/ui/atoms/list/index.tsx
@@ -5,13 +5,13 @@ import { keyHandlerList, keyboardEventHandle } from 'lib';
 interface List {
   className?: string;
   disabled?: boolean;
-  onChange: React.EventHandler<React.SyntheticEvent>;
   list: Array<{
     left?: React.ReactNode;
     right?: React.ReactNode;
     text: React.ReactNode;
     id: string;
     disabled?: boolean;
+    onClick?: React.EventHandler<React.SyntheticEvent>;
   }>;
 }
 
@@ -20,7 +20,6 @@ const ListBase: React.FC<List & Variant> = ({
   list,
   variant = 'default',
   disabled = false,
-  onChange
 }) => {
   const tabIndex = disabled ? -1 : 0;
   const dropdownRef = React.useRef(null);
@@ -35,13 +34,8 @@ const ListBase: React.FC<List & Variant> = ({
 
       event.preventDefault();
 
-      const onEnter = (event: React.SyntheticEvent<Element, Event>) => {
-        onChange(event);
-      };
-
       const kh = keyHandlerList({
         dropdownNode,
-        onEnter,
       });
 
       keyboardEventHandle({
@@ -49,7 +43,7 @@ const ListBase: React.FC<List & Variant> = ({
         keyHandler: kh,
       });
     },
-    [dropdownRef, onChange],
+    [dropdownRef],
   );
   return (
     <ul
@@ -60,12 +54,12 @@ const ListBase: React.FC<List & Variant> = ({
       role="listbox"
       ref={dropdownRef}
     >
-      {list.map(({ left, right, text, id }) => (
+      {list.map(({ left, right, text, id, onClick, disabled }) => (
         <li
           data-disabled={disabled}
           data-type="list-item"
           key={id}
-          onClick={onChange}
+          onClick={onClick}
           tabIndex={-1}
         >
           {left && <span data-icon="left">{left}</span>}
diff --git a/src/ui/atoms/list/usage.mdx b/src/ui/atoms/list/usage.mdx
index 1966078a..2f573235 100644
--- a/src/ui/atoms/list/usage.mdx
+++ b/src/ui/atoms/list/usage.mdx
@@ -22,14 +22,14 @@ It does not need to be a direct child of the List component.
 ### Example
 
 <Playground>
-  <StateEvent initial={null} change={(event) => event?.target?.dataset.value}>
+  <StateEvent initial={null} change={(event) => alert('Item clicked')}>
     {(value, change) => (
       <List
         variant="primary"
         list={[
-          { id: 0, text: 'Red' },
+          { id: 0, text: 'Red', disabled: true },
           { id: 1, text: 'Green' },
-          { id: 2, text: 'Blue', onClick: {change}},
+          { id: 2, text: 'Blue', onClick: change},
         ]}
       />
     )}
@@ -75,91 +75,102 @@ List items can consist icon on the left side or the right. Use icons on the both
 
 List items can be clickable or not.
 
+<Playground>
+   <StateEvent initial={null} change={(event) => alert('Item clicked')}>
+    {(value, change) => (
+    <>
+      <block.M>
+        <List
+          variant="primary"
+          list={[
+            {
+              left: <InfoIcon />,
+              id: 0,
+              text: 'Red',
+              right: <Check />,
+              onClick: change,
+            },
+            {
+              left: <InfoIcon />,
+              id: 1,
+              text: 'Green',
+              right: <Check />,
+              onClick: change,
+            },
+            {
+              left: <InfoIcon />,
+              id: 2,
+              text: 'Blue',
+              right: <Check />,
+              onClick: change,
+            },
+          ]}
+        />
+      </block.M>
+      <block.M>
+        <List
+          variant="primary"
+          list={[
+            {
+              left: <InfoIcon />,
+              id: 0,
+              text: 'Red',
+              right: <Check />,
+              onClick: change,
+            },
+            {
+              left: <InfoIcon />,
+              id: 1,
+              text: 'Green',
+              right: <Check />,
+              disabled: true,
+            },
+            {
+              left: <InfoIcon />,
+              id: 2,
+              text: 'Blue',
+              right: <Check />,
+              onClick: change,
+            },
+          ]}
+        />
+      </block.M>
+    </>
+   )}
+  </StateEvent>
+</Playground>
+
+### disabled
+
 <Playground>
   <block.M>
     <List
-      variant="primary"
-      list={[
-        {
-          left: <InfoIcon />,
-          id: 0,
-          text: 'Red',
-          right: <Check />,
-          onClick: () => alert('Item clicked'),
-        },
-        {
-          left: <InfoIcon />,
-          id: 1,
-          text: 'Green',
-          right: <Check />,
-          onClick: () => alert('Item clicked'),
-        },
-        {
-          left: <InfoIcon />,
-          id: 2,
-          text: 'Blue',
-          right: <Check />,
-          onClick: () => alert('Item clicked'),
-        },
-      ]}
-    />
-  </block.M>
-  <block.M>
-    <List
-      variant="primary"
-      list={[
-        {
-          left: <InfoIcon />,
-          id: 0,
-          text: 'Red',
-          right: <Check />,
-          onClick: () => alert('Item clicked'),
-        },
-        {
-          left: <InfoIcon />,
-          id: 1,
-          text: 'Green',
-          right: <Check />,
-          disabled: true,
-        },
-        {
-          left: <InfoIcon />,
-          id: 2,
-          text: 'Blue',
-          right: <Check />,
-          onClick: () => alert('Item clicked'),
-        },
-      ]}
-    />
-  </block.M>
-  <block.M>
-    <List
-      variant="primary"
-      list={[
-        {
-          left: <InfoIcon />,
-          id: 0,
-          text: 'Red',
-          right: <Check />,
-          disabled: true,
-        },
-        {
-          left: <InfoIcon />,
-          id: 1,
-          text: 'Green',
-          right: <Check />,
-          disabled: true,
-        },
-        {
-          left: <InfoIcon />,
-          id: 2,
-          text: 'Blue',
-          right: <Check />,
-          disabled: true,
-        },
-      ]}
-    />
-  </block.M>
+        variant="primary"
+        list={[
+          {
+            left: <InfoIcon />,
+            id: 0,
+            text: 'Red',
+            right: <Check />,
+            disabled: true,
+          },
+          {
+            left: <InfoIcon />,
+            id: 1,
+            text: 'Green',
+            right: <Check />,
+            disabled: true,
+          },
+          {
+            left: <InfoIcon />,
+            id: 2,
+            text: 'Blue',
+            right: <Check />,
+            disabled: true,
+          },
+        ]}
+      />
+    </block.M>
 </Playground>
 
 ### Sizes

From 432b3848aa13b72e0d6ef75e4cce7fba61b54c2b Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Thu, 22 Apr 2021 13:29:35 +0300
Subject: [PATCH 6/6] rewrite list styles

---
 src/lib/index.ts            |   3 +-
 src/lib/listHandlers.ts     |  33 +++++++++
 src/lib/select-handlers.ts  |  20 ------
 src/ui/atoms/list/index.tsx |  46 +++++++-----
 src/ui/atoms/list/usage.mdx | 140 ++++++++++++++++++------------------
 5 files changed, 133 insertions(+), 109 deletions(-)
 create mode 100644 src/lib/listHandlers.ts

diff --git a/src/lib/index.ts b/src/lib/index.ts
index e50fa4ad..cc58f72e 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,4 @@
 export { positionRelativeGet } from './position-relative';
 export { keyboardEventHandle } from './keyboard-event';
-export { keyHandlerGet, keyHandlerList } from './select-handlers';
+export { keyHandlerGet } from './select-handlers';
+export { keyHandlerList } from './listHandlers';
diff --git a/src/lib/listHandlers.ts b/src/lib/listHandlers.ts
new file mode 100644
index 00000000..686fdb5c
--- /dev/null
+++ b/src/lib/listHandlers.ts
@@ -0,0 +1,33 @@
+const LI_TAG = 'LI';
+
+export const onKeyDown = (listNode: HTMLElement) => () => {
+    if (document.activeElement?.tagName === LI_TAG) {
+        (document.activeElement?.nextElementSibling as HTMLElement)?.focus();
+    } else {
+        (listNode?.firstChild as HTMLElement)?.focus();
+    }
+};
+
+export const onKeyUp = (listNode: HTMLElement) => () => {
+    if (document.activeElement?.tagName === LI_TAG) {
+        (document?.activeElement?.previousElementSibling as HTMLElement)?.focus();
+    } else {
+        (listNode.lastChild as HTMLElement)?.focus();
+    }
+};
+
+const onItemEnter = (listNode: HTMLElement) => () => {
+    if (document.activeElement?.tagName === LI_TAG) {
+        (document?.activeElement as HTMLElement).click();
+    } else {
+        (listNode?.lastChild as HTMLElement).focus();
+    }
+};
+
+export const keyHandlerList = ({
+    listNode,
+}: any) => ({
+    arrowDown: onKeyDown(listNode),
+    arrowUp: onKeyUp(listNode),
+    enter: onItemEnter(listNode),
+});
diff --git a/src/lib/select-handlers.ts b/src/lib/select-handlers.ts
index 37496e28..4fa5e665 100644
--- a/src/lib/select-handlers.ts
+++ b/src/lib/select-handlers.ts
@@ -2,10 +2,6 @@ interface GetSelectHandlersProps extends EnterProps {
   dropdownNode: HTMLElement;
 }
 
-interface GetListHandlersProps extends EnterProps {
-  dropdownNode: HTMLElement;
-}
-
 interface EnterProps {
   isOpen: boolean;
   onChange: React.EventHandler<React.SyntheticEvent>;
@@ -41,14 +37,6 @@ const onEnter = ({ isOpen, onChange, selectNode, setIsOpen }: EnterProps) => (
   selectNode.focus();
 };
 
-const onItemEnter = (dropdownNode: HTMLElement) => () => {
-  if (document.activeElement?.tagName === LI_TAG) {
-    (document?.activeElement as HTMLElement).click();
-  } else {
-    (dropdownNode?.lastChild as HTMLElement).focus();
-  }
-};
-
 export const keyHandlerGet = ({
   dropdownNode,
   isOpen,
@@ -60,11 +48,3 @@ export const keyHandlerGet = ({
   arrowUp: onArrowUp(dropdownNode),
   enter: onEnter({ selectNode, setIsOpen, isOpen, onChange }),
 });
-
-export const keyHandlerList = ({
-  dropdownNode,
-}: any) => ({
-  arrowDown: onArrowDown(dropdownNode),
-  arrowUp: onArrowUp(dropdownNode),
-  enter: onItemEnter(dropdownNode),
-});
diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx
index 7ed34d74..5a6b69c4 100644
--- a/src/ui/atoms/list/index.tsx
+++ b/src/ui/atoms/list/index.tsx
@@ -22,37 +22,38 @@ const ListBase: React.FC<List & Variant> = ({
   disabled = false,
 }) => {
   const tabIndex = disabled ? -1 : 0;
-  const dropdownRef = React.useRef(null);
+  const itemListRef = React.useRef(null);
 
   const onKeyDown = React.useCallback(
     (event: React.KeyboardEvent) => {
-      const dropdownNode = dropdownRef.current;
+      const listNode = itemListRef.current;
 
-      if (!document || !dropdownNode || event.key === 'Tab') {
+      if (!document || !listNode || event.key === 'Tab') {
         return;
       }
 
       event.preventDefault();
 
-      const kh = keyHandlerList({
-        dropdownNode,
+      const handlerList = keyHandlerList({
+        listNode,
       });
 
       keyboardEventHandle({
         event,
-        keyHandler: kh,
+        keyHandler: handlerList,
       });
     },
-    [dropdownRef],
+    [itemListRef],
   );
   return (
     <ul
       className={className}
+      data-disabled={disabled}
       data-variant={variant}
       onKeyDown={onKeyDown}
-      tabIndex={tabIndex}
+      ref={itemListRef}
       role="listbox"
-      ref={dropdownRef}
+      tabIndex={tabIndex}
     >
       {list.map(({ left, right, text, id, onClick, disabled }) => (
         <li
@@ -78,8 +79,8 @@ export const List = styled(ListBase)`
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
 
-  --local-gap: var(--woly-const-m);
-  --local-compensate: calc(var(--woly-const-m)/2);
+  --local-gap: var(--local-vertical);
+  --local-compensate: var(--woly-const-m);
   --local-margin: var(--woly-border-width);
 
   --local-color: var(--woly-canvas-text-default);
@@ -157,7 +158,7 @@ export const List = styled(ListBase)`
       --local-item-background: var(--woly-canvas-disabled);
     }
     &:focus {
-      box-shadow: 0 0 0 1.5px var(--woly-focus);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
     }
     &:active {
       --local-item-background: var(--woly-focus);
@@ -166,17 +167,30 @@ export const List = styled(ListBase)`
 
     &[data-disabled='true'] {
       --local-color: var(--woly-canvas-text-disabled);
+      --local-item-background: var(--woly-canvas-disabled);
 
       pointer-events: none;
 
       [data-icon] {
-        svg > path {
-          --local-color: var(--woly-canvas-text-disabled);
-        }
+        --local-color: var(--woly-canvas-text-disabled);
       }
     }
   }
+  
   &:focus {
-      box-shadow: 0 0 0 1.5px var(--woly-focus);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+  }
+
+  &[data-disabled='true'] {
+    pointer-events: none;
+
+    li[data-type='list-item'] {
+      --local-color: var(--woly-canvas-text-disabled);
+      --local-item-background: var(--woly-canvas-disabled);
+    }
+
+    [data-icon] {
+        --local-color: var(--woly-canvas-text-disabled);
+      }
   }
 ` as StyledComponent<'ul', Record<string, unknown>, List & Variant>;
diff --git a/src/ui/atoms/list/usage.mdx b/src/ui/atoms/list/usage.mdx
index 2f573235..8ae6ae12 100644
--- a/src/ui/atoms/list/usage.mdx
+++ b/src/ui/atoms/list/usage.mdx
@@ -27,7 +27,7 @@ It does not need to be a direct child of the List component.
       <List
         variant="primary"
         list={[
-          { id: 0, text: 'Red', disabled: true },
+          { id: 0, text: 'Red' },
           { id: 1, text: 'Green' },
           { id: 2, text: 'Blue', onClick: change},
         ]}
@@ -73,78 +73,13 @@ List items can consist icon on the left side or the right. Use icons on the both
   />
 </Playground>
 
-List items can be clickable or not.
+List items can be clickable 
 
 <Playground>
    <StateEvent initial={null} change={(event) => alert('Item clicked')}>
     {(value, change) => (
-    <>
-      <block.M>
-        <List
-          variant="primary"
-          list={[
-            {
-              left: <InfoIcon />,
-              id: 0,
-              text: 'Red',
-              right: <Check />,
-              onClick: change,
-            },
-            {
-              left: <InfoIcon />,
-              id: 1,
-              text: 'Green',
-              right: <Check />,
-              onClick: change,
-            },
-            {
-              left: <InfoIcon />,
-              id: 2,
-              text: 'Blue',
-              right: <Check />,
-              onClick: change,
-            },
-          ]}
-        />
-      </block.M>
-      <block.M>
-        <List
-          variant="primary"
-          list={[
-            {
-              left: <InfoIcon />,
-              id: 0,
-              text: 'Red',
-              right: <Check />,
-              onClick: change,
-            },
-            {
-              left: <InfoIcon />,
-              id: 1,
-              text: 'Green',
-              right: <Check />,
-              disabled: true,
-            },
-            {
-              left: <InfoIcon />,
-              id: 2,
-              text: 'Blue',
-              right: <Check />,
-              onClick: change,
-            },
-          ]}
-        />
-      </block.M>
-    </>
-   )}
-  </StateEvent>
-</Playground>
-
-### disabled
-
-<Playground>
-  <block.M>
-    <List
+    <block.M>
+      <List
         variant="primary"
         list={[
           {
@@ -152,25 +87,85 @@ List items can be clickable or not.
             id: 0,
             text: 'Red',
             right: <Check />,
-            disabled: true,
+            onClick: change,
           },
           {
             left: <InfoIcon />,
             id: 1,
             text: 'Green',
             right: <Check />,
-            disabled: true,
+            onClick: change,
           },
           {
             left: <InfoIcon />,
             id: 2,
             text: 'Blue',
             right: <Check />,
-            disabled: true,
+            onClick: change,
           },
         ]}
       />
     </block.M>
+    )}
+  </StateEvent>
+</Playground>
+
+or not
+<Playground>
+  <block.L>
+    <List
+      variant="primary"
+      list={[
+        {
+          left: <InfoIcon />,
+          id: 0,
+          text: 'Red',
+          right: <Check />,
+        },
+        {
+          left: <InfoIcon />,
+          id: 1,
+          text: 'Green',
+          right: <Check />,
+        },
+        {
+          left: <InfoIcon />,
+          id: 2,
+          text: 'Blue',
+          right: <Check />,
+        },
+      ]}
+    />
+  </block.L>
+</Playground>
+
+### Disabled
+
+<Playground size="L">
+  <List
+    disabled
+    variant="primary"
+    list={[
+      {
+        left: <InfoIcon />,
+        id: 0,
+        text: 'Red',
+        right: <Check />,
+      },
+      {
+        left: <InfoIcon />,
+        id: 1,
+        text: 'Green',
+        right: <Check />,
+      },
+      {
+        left: <InfoIcon />,
+        id: 2,
+        text: 'Blue',
+        right: <Check />,
+      },
+    ]}
+  />
 </Playground>
 
 ### Sizes
@@ -242,3 +237,4 @@ Size controlled by the `component-level` block property not from the props.
 | --------- | ------------------------ | ----------- | ------------------------------------ |
 | `list`    | `Array<React.ReactNode>` |             | An array of List items               |
 | `variant` | `string`                 | `'default'` | Variant prop to style List component |
+| `disabled`| `boolean`                |             | Disable list                         |