[FRNT-513] rewrite input and textarea styles (#147)

* rewrite input and textarea styles * update styles
woly-ui · Jun 23, 2021 · 82fc58c · 82fc58c
1 parent 56a2453
commit 82fc58c
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 107 deletions.
diff --git a/src/lib/global.ts b/src/lib/global.ts
@@ -86,7 +86,7 @@ export const Global = styled.div`
   --woly-font-size: 15px;
 
   --woly-background: hsla(var(--bw-1000), 1);
-  --woly-neutral: hsla(var(--bw-50), 1);
+  --woly-neutral: hsla(var(--bw-500), 1);
   --woly-focus-color: hsla(var(--primary-700), 1);
   --woly-danger-color: hsla(var(--danger-500), 1);
 

diff --git a/src/woly/atoms/input/usage.mdx b/src/woly/atoms/input/usage.mdx
@@ -80,6 +80,15 @@ Disabled text fields are uneditable. They have less opacity so that they appear
       type="text"
       priority="primary"
     />
+    <Input
+      disabled
+      leftIcon={<IconInfo />}
+      name="name"
+      onChange={(event) => console.info('On input change')}
+      value="Maria Ivanova"
+      type="text"
+      priority="primary"
+    />
   </Form>
 </Playground>
 
@@ -157,9 +166,9 @@ Icons can also be touch targets for nested components.
   </Form>
 </Playground>
 
-### prioritys
+### Priorities
 
-Primary and secondary prioritys are should be used to focus user attention.
+Primary and secondary priorities are should be used to focus user attention.
 
 <Playground direction="vertical">
   <Form autoComplete="false">

diff --git a/src/woly/atoms/text-area/index.tsx b/src/woly/atoms/text-area/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
+import { box } from 'ui/elements';
 
 interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   className?: string;
@@ -54,17 +55,16 @@ const TextAreaBase: React.FC<TextAreaProps & Priority> = ({
       className={className}
       data-disabled={disabled}
       data-priority={priority}
-      tabIndex={tabIndex}
       data-overflow={overflow}
       data-resize={resize}
       ref={textAreaRef}
     >
       <textarea
         cols={cols}
-        data-priority={priority}
         maxLength={maxLength}
         minLength={minlength}
         name={name}
+        tabIndex={tabIndex}
         onChange={onChange}
         placeholder={placeholder}
         rows={rows}
@@ -77,75 +77,72 @@ const TextAreaBase: React.FC<TextAreaProps & Priority> = ({
 };
 
 export const TextArea = styled(TextAreaBase)`
-  --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)
-  );
-
-  --local-border-color: var(--woly-canvas-text-hover);
+  --local-border-color: var(--woly-shape-default);
   --local-background-color: var(--woly-canvas-default);
-  --local-value-color: var(--woly-canvas-text-default);
-  box-sizing: border-box;
-
-  width: 100%;
-
-  font-size: var(--woly-font-size, 15px);
-  line-height: var(--woly-line-height, 21px);
-
-  outline: none;
+  --local-text-color: var(--woly-canvas-text-default);
+  ${box}
 
   textarea {
-    padding: var(--local-vertical) var(--local-horizontal);
+    box-sizing: border-box;
+    width: 100%;
 
-    overflow: hidden;
+    color: var(--local-text-color);
 
-    color: var(--local-value-color);
+    font-size: var(--woly-font-size);
+    line-height: var(--woly-line-height);
 
     background-color: var(--local-background-color);
-
-    border: var(--woly-border-width) solid var(--local-border-color);
-    border-radius: var(--woly-rounding);
-
+    border: none;
     outline: none;
 
     resize: none;
 
     &::placeholder {
-      color: var(--woly-canvas-text-disabled);
+      color: var(--woly-neutral);
     }
   }
 
-  &:focus > textarea {
-    --local-border-color: var(--woly-focus);
+  box-sizing: border-box;
+
+  width: 100%;
+
+  overflow: hidden;
+
+  background-color: var(--local-background-color);
+
+  border: var(--woly-border-width) solid var(--local-border-color);
+  border-radius: var(--woly-rounding);
+
+  outline: none;
+
+  &:focus-within {
+    --local-border-color: var(--woly-shape-active);
     outline: none;
-    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
   }
 
-  &:active > textarea {
-    --local-border-color: var(--woly-focus);
+  &:active {
+    --local-border-color: var(--woly-shape-active);
     outline: none;
-    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
   }
 
-  &:hover > textarea {
+  &:hover {
     --local-border-color: var(--woly-shape-hover);
   }
 
   &[data-disabled='true'] {
     pointer-events: none;
 
-    textarea {
-      --local-background-color: var(--woly-canvas-disabled);
-      --local-border-color: var(--woly-shape-disabled);
-      --local-value-color: var(--woly-canvas-text-disabled);
-    }
+    --local-background-color: var(--woly-canvas-disabled);
+    --local-border-color: var(--woly-canvas-disabled);
+    --local-text-color: var(--woly-canvas-text-disabled);
   }
 
   &[data-overflow='true'] > textarea {
     overflow: auto;
   }
 
-  &[data-resize='true'] > textarea {
+  &[data-resize='true'] {
     resize: both;
   }
 ` as StyledComponent<'textarea', Record<string, unknown>, TextAreaProps & Priority>;
diff --git a/src/woly/atoms/text-area/usage.mdx b/src/woly/atoms/text-area/usage.mdx
@@ -8,43 +8,60 @@ TextArea is often used in a form, to collect user inputs like comments or review
 ## Example
 
 <Playground>
-  <TextArea
-    name="name"
-    placeholder="Simple text-area"
-    onChange={() => console.info('On textarea change')}
-    priority="secondary"
-  />
+  <block.S>
+    <TextArea
+      name="name"
+      placeholder="Simple text-area"
+      onChange={() => console.info('On textarea change')}
+      priority="secondary"
+      resize
+    />
+  </block.S>
 </Playground>
 
-## prioritys
-
-Primary and danger prioritys are should be used to focus user attention.
-
-<Playground direction="vertical">
-  <TextArea
-    name="name"
-    placeholder="Primary"
-    onChange={() => console.info('On textarea change')}
-    priority="primary"
-  />
-  <TextArea
-    name="name"
-    placeholder="Error"
-    value="Error"
-    onChange={() => console.info('On textarea change')}
-    priority="danger"
-  />
+## Priorities
+
+Primary and danger priorities are should be used to focus user attention.
+
+<Playground direction="horizontal">
+  <block.L>
+    <TextArea
+      name="name"
+      placeholder="Primary"
+      onChange={() => console.info('On textarea change')}
+      priority="primary"
+    />
+  </block.L>
+  <block.L>
+    <TextArea
+      name="name"
+      placeholder="Error"
+      value="Error"
+      onChange={() => console.info('On textarea change')}
+      priority="danger"
+    />
+  </block.L>
 </Playground>
 
-Secondary priority should be used as a default priority.
+Secondary and default priority should be used as a default priority.
 
-<Playground>
-  <TextArea
-    name="name"
-    placeholder="Primary"
-    onChange={() => console.info('On textarea change')}
-    priority="secondary"
-  />
+<Playground direction="horizontal">
+  <block.S>
+    <TextArea
+      name="name"
+      placeholder="Primary"
+      onChange={() => console.info('On textarea change')}
+      priority="secondary"
+    />
+  </block.S>
+  <block.S>
+    <TextArea
+      name="name"
+      placeholder="Default"
+      onChange={() => console.info('On textarea change')}
+      priority="default"
+    />
+  </block.S>
 </Playground>
 
 ## Disabled
@@ -54,15 +71,27 @@ If this attribute is not specified, the control inherits its setting from the co
 if there is no containing element when the disabled attribute is set, the control is enabled.
 
 <Playground>
-  <TextArea name="name" placeholder="Disabled" priority="primary" disabled />
+  <block.L>
+    <TextArea name="name" placeholder="Disabled" priority="default" disabled />
+  </block.L>
+  <block.L>
+    <TextArea
+      name="name"
+      value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+      Phasellus convallis lacus non est porta interdum."
+      priority="default"
+      disabled
+      resize
+    />
+  </block.L>
 </Playground>
 
 ## Resize
 
 The resize property defines if (and how) an element is resizable by the user.
 
 <Playground>
-  <div style={{ marginBottom: '60px' }}>
+  <block.L style={{ marginBottom: '60px' }}>
     <TextArea
       name="name"
       placeholder="Here, the user can resize both the height and width"
@@ -71,15 +100,15 @@ The resize property defines if (and how) an element is resizable by the user.
       rows={5}
       resize
     />
-  </div>
-  <div style={{ marginBottom: '40px' }}>
+  </block.L>
+  <block.L style={{ marginBottom: '40px' }}>
     <TextArea
       name="name"
       placeholder="Oops! You can't resize this textarea"
       onChange={() => console.info('On textarea change')}
       priority="primary"
     />
-  </div>
+  </block.L>
 </Playground>
 
 ## Cols, rows and wrap
@@ -110,21 +139,25 @@ Possible values are:
   and the textarea becomes horizontally scrollable.
 
 <Playground>
-  <TextArea
-    name="name"
-    placeholder="Hey! Here is 20 cols and it's wrapp off"
-    onChange={() => console.info('On textarea change')}
-    priority="primary"
-    cols={20}
-    wrap="off"
-  />
-  <TextArea
-    name="name"
-    placeholder="Oops! Textarea consists only 3 rows"
-    onChange={() => console.info('On textarea change')}
-    priority="primary"
-    rows={3}
-  />
+  <block.L>
+    <TextArea
+      name="name"
+      placeholder="Hey! Here is 20 cols and it's wrapp off"
+      onChange={() => console.info('On textarea change')}
+      priority="primary"
+      cols={20}
+      wrap="off"
+    />
+  </block.L>
+  <block.L>
+    <TextArea
+      name="name"
+      placeholder="Oops! Textarea consists only 3 rows"
+      onChange={() => console.info('On textarea change')}
+      priority="primary"
+      rows={3}
+    />
+  </block.L>
 </Playground>
 
 ## Sizes
@@ -179,14 +212,14 @@ TextArea can be placed inside the container. TextArea width is equal to containe
       priority="primary"
     />
   </block.S>
-  <block.S>
+  <block.L>
     <TextArea
       name="name"
       placeholder="Primary"
       onChange={() => console.info('On textarea change')}
       priority="primary"
     />
-  </block.S>
+  </block.L>
 </Playground>
 
 ### Props
@@ -200,7 +233,7 @@ TextArea can be placed inside the container. TextArea width is equal to containe
 | `name`        | `string`                                                       |               | Name attribute specifies a name of the text-area                                         |
 | `onChange`    | `(e: React.ChangeEvent<HTMLInputElement>) => unknown`          |               | Callback when user text-area                                                             |
 | `onKeyDown`   | `(event: React.KeyboardEvent<HTMLTextAreaElement>) => unknown` |               | Callback when user text-area                                                             |
-| `overflow`    | `string`                                                       |               | The overflow property specifies what should happen if content overflows an element's box |
+| `overflow`    | `boolean`                                                      |               | The overflow property specifies what should happen if content overflows an element's box |
 | `placeholder` | `string`                                                       |               | The placeholder represents the placeholder text                                          |
 | `priority`    | `string`                                                       | `'secondary'` | Priority prop to style TextArea component                                                |
 | `resize`      | `string`                                                       |               | The resize property defines if (and how) an element is resizable by the user             |