From 0e2822589f79e19b79e81af93547478f974a3a0c Mon Sep 17 00:00:00 2001 From: Ira Date: Fri, 30 Apr 2021 13:02:30 +0300 Subject: [PATCH 1/2] implement upload area component --- src/lib/box-styles.tsx | 4 +- src/ui/atoms/button/index.tsx | 1 - src/ui/atoms/header-panel/index.tsx | 2 +- src/ui/atoms/index.ts | 1 + src/ui/atoms/input/index.tsx | 4 +- src/ui/atoms/input/usage.mdx | 61 ++- src/ui/atoms/label/index.tsx | 4 +- src/ui/atoms/text/index.tsx | 2 +- src/ui/atoms/upload-area/index.tsx | 64 +++ src/ui/atoms/upload-area/usage.mdx | 388 ++++++++++++++++++ .../elements/quarks/input-container/index.tsx | 34 +- .../elements/quarks/input-element/index.tsx | 3 +- src/ui/molecules/checkbox/index.tsx | 2 +- src/ui/molecules/field/usage.mdx | 20 +- src/ui/molecules/input-password/index.tsx | 18 +- src/ui/molecules/input-password/usage.mdx | 155 +++---- src/ui/molecules/switch/index.tsx | 1 - 17 files changed, 596 insertions(+), 168 deletions(-) create mode 100644 src/ui/atoms/upload-area/index.tsx create mode 100644 src/ui/atoms/upload-area/usage.mdx diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx index 52716796..b782641d 100644 --- a/src/lib/box-styles.tsx +++ b/src/lib/box-styles.tsx @@ -17,7 +17,7 @@ export const Global = styled.div` /* should be rewritten to formulas */ --woly-line-height: 24px; --woly-border-width: 1.5px; - --woly-rounding: 4px; + --woly-rounding: 3px; --woly-font-size: 15px; --woly-const-m: 6px; @@ -27,7 +27,7 @@ export const Global = styled.div` --woly-focus: var(--palette-lavender-500); --woly-background: var(--palette-snow-0); --woly-danger: var(--palette-dawn-300); - + [data-variant='primary'] { --woly-shape-default: var(--palette-lavender-300); --woly-shape-disabled: var(--palette-snow-300); diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx index 3712244a..21bdf699 100644 --- a/src/ui/atoms/button/index.tsx +++ b/src/ui/atoms/button/index.tsx @@ -7,7 +7,6 @@ export type ButtonVariants = 'default' | 'primary' | 'destructive' | 'text'; export type ButtonSizes = 'default' | 'small'; export interface ButtonProps extends React.ButtonHTMLAttributes { - children?: never; className?: string; icon?: React.ReactNode; text: React.ReactNode; diff --git a/src/ui/atoms/header-panel/index.tsx b/src/ui/atoms/header-panel/index.tsx index cd0dea34..2c279851 100644 --- a/src/ui/atoms/header-panel/index.tsx +++ b/src/ui/atoms/header-panel/index.tsx @@ -18,7 +18,7 @@ export const HeaderPanel = styled.div.attrs(map)` ); --local-box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12); - + padding: var(--local-vertical) var(--local-horizontal); background-color: var(--woly-background); diff --git a/src/ui/atoms/index.ts b/src/ui/atoms/index.ts index 02f223e2..c501a5c1 100644 --- a/src/ui/atoms/index.ts +++ b/src/ui/atoms/index.ts @@ -15,3 +15,4 @@ export { Table, Thead, Tbody, Tr, Td, Th } from './table'; export { Text } from './text'; export { TextArea } from './text-area'; export { Tooltip } from './tooltip'; +export { UploadArea } from './upload-area'; diff --git a/src/ui/atoms/input/index.tsx b/src/ui/atoms/input/index.tsx index 2180ffa9..bc33bf15 100644 --- a/src/ui/atoms/input/index.tsx +++ b/src/ui/atoms/input/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled, { StyledComponent } from 'styled-components'; import { Variant } from 'lib/types'; + import { InputContainer, InputElement } from '../../elements/quarks'; interface InputProps extends React.InputHTMLAttributes { @@ -52,12 +53,11 @@ export const Input = styled(InputBase)` --local-horizontal: calc( var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical) ); - + box-sizing: border-box; width: 100%; &[data-disabled='true'] { pointer-events: none; } - ` as StyledComponent<'div', Record, InputProps & Variant>; diff --git a/src/ui/atoms/input/usage.mdx b/src/ui/atoms/input/usage.mdx index ca4c7249..cae97f89 100644 --- a/src/ui/atoms/input/usage.mdx +++ b/src/ui/atoms/input/usage.mdx @@ -14,14 +14,14 @@ import { ButtonIcon } from '../../atoms'; `Input` is a field to accept data from the user. Input is used to create form fields that accept user input. They typically appear in forms and dialogs. -Inputs requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly. +Inputs requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly. This makes it easier for the user to enter information using a virtual keyboard. When a input is active or contains an error, the input’s border color and thickness vary. ## Placeholder text (Hint text) -Placeholder text rests in the input field until the user starts entering text. +Placeholder text rests in the input field until the user starts entering text. It may contain an action or an example, such as a phone number or email address. ## Helper text @@ -35,10 +35,9 @@ Specs: - Left justified - On a single line if possible, or with text wrapping (if multiple lines) - ## Error message -When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error. +When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error. Until the error is fixed, the error replaces the helper text. An error message should appear on a single line, if possible. @@ -52,7 +51,6 @@ Specs: - Right justified - Displayed as a ratio of characters used and the character limit (formatted as: characters used / character limit) - ### Example @@ -69,7 +67,7 @@ Specs: Disabled text fields are uneditable. They have less opacity so that they appear less tappable. - + -### Icons +### Icons Inputs can be combined with an icon on the left side or the right. Use icons on the both sides is not recommended. @@ -121,10 +119,10 @@ Inputs can be combined with an icon on the left side or the right. Use icons on /> -Icons can also be touch targets for nested components. +Icons can also be touch targets for nested components. - console.info('On input change')} variant="primary" /> - } type="text" name="name" @@ -162,9 +160,10 @@ Icons can also be touch targets for nested components. ### Variants Primary and secondary variants are should be used to focus user attention. + - + } name="name" @@ -185,7 +184,6 @@ Primary and secondary variants are should be used to focus user attention. /> - Error variant can be used to focus user attention on error. @@ -211,7 +209,7 @@ Size controlled by the `component-level` block property not from the props. placeholder="Enter your name here" type="text" variant="primary" - /> + /> + /> + /> + /> + /> @@ -265,10 +263,10 @@ Inputs can be placed inside the container. Input width is equal to container siz placeholder="Enter your name here" variant="primary" onChange={(event) => console.info('On input change')} - /> + /> - } type="text" name="name" @@ -288,7 +286,6 @@ Inputs can be placed inside the container. Input width is equal to container siz - ### Kinds | Name | Description | @@ -297,15 +294,15 @@ Inputs can be placed inside the container. Input width is equal to container siz ### Props -| Name | Type | Default | Description | -| -------------- | ----------------------------------------------------- | ----------- | ----------------------------------------------------------- | -| `type` | `"text" ӏ "password" ӏ "email"` | `text` | HTML type of the input | -| `name` | `string` | | Name attribute specifies a name of the input | -| `value` | `HTMLInputElement['value']` | `null` | Value of input field | -| `onChange` | `React.EventHandler;` | | On change event handler. | -| `variant` | `string` | `'default'` | Variant prop to style Input component | -| `leftIcon` | `React.ReactNode` | | Component to show on the left side of the text (ex.: Icon) | -| `disabled` | `boolean` | | HTML disabled attribute | -| `placeholder` | `string` | | CSS pseudo-element represents the placeholder text | -|`rightIcon` | `React.ReactNode` | | Component to show on the right side of the text (ex.: Icon) | -| `...` | `HTMLInputElement` | `{}` | Other props are inherited from `HTMLInputElement` | +| Name | Type | Default | Description | +| ------------- | ------------------------------------------- | ----------- | ----------------------------------------------------------- | +| `type` | `"text" ӏ "password" ӏ "email"` | `text` | HTML type of the input | +| `name` | `string` | | Name attribute specifies a name of the input | +| `value` | `HTMLInputElement['value']` | `null` | Value of input field | +| `onChange` | `React.EventHandler;` | | On change event handler. | +| `variant` | `string` | `'default'` | Variant prop to style Input component | +| `leftIcon` | `React.ReactNode` | | Component to show on the left side of the text (ex.: Icon) | +| `disabled` | `boolean` | | HTML disabled attribute | +| `placeholder` | `string` | | CSS pseudo-element represents the placeholder text | +| `rightIcon` | `React.ReactNode` | | Component to show on the right side of the text (ex.: Icon) | +| `...` | `HTMLInputElement` | `{}` | Other props are inherited from `HTMLInputElement` | diff --git a/src/ui/atoms/label/index.tsx b/src/ui/atoms/label/index.tsx index 9d31703c..9fdf7644 100644 --- a/src/ui/atoms/label/index.tsx +++ b/src/ui/atoms/label/index.tsx @@ -11,7 +11,9 @@ const map = (properties: LabelProps & Variant) => ({ export const Label = styled.label.attrs(map)` --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-horizontal: calc( + var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical) + ); --local-color: var(--woly-canvas-text-default); diff --git a/src/ui/atoms/text/index.tsx b/src/ui/atoms/text/index.tsx index bb191466..aa7e5df3 100644 --- a/src/ui/atoms/text/index.tsx +++ b/src/ui/atoms/text/index.tsx @@ -15,7 +15,7 @@ const map = (properties: TextProps & Variant) => ({ export const Text = styled.p.attrs(map)` --local-color: var(--woly-canvas-text-default); - + margin: 0; color: var(--local-color); font-size: 15px; diff --git a/src/ui/atoms/upload-area/index.tsx b/src/ui/atoms/upload-area/index.tsx new file mode 100644 index 00000000..0cb8d780 --- /dev/null +++ b/src/ui/atoms/upload-area/index.tsx @@ -0,0 +1,64 @@ +import * as React from 'react'; +import styled, { StyledComponent } from 'styled-components'; +import { Variant } from 'lib/types'; + +interface UploadAreaProps { + className?: string; + center?: boolean; + content?: React.ReactNode; +} + +const UploadAreaBase: React.FC = ({ + className, + center = false, + content, + variant = 'default', +}) => ( +
+
+
+ {content} +
+
+); + +export const UploadArea = styled(UploadAreaBase)` + --local-border-color: var(--woly-canvas-hover); + --local-background-color: var(--woly-canvas-disabled); + + width: 100%; + height: 100%; + + position: relative; + overflow: auto; + + background-color: var(--local-background-color); + border: var(--woly-border-width) dashed var(--local-border-color); + border-radius: var(--woly-rounding); + + [data-center='true'] { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &:focus { + --local-border-color: var(--woly-focus); + --local-background-color: rgba(110, 59, 254, 0.05); + outline: none; + + [data-overlay] { + width: 100%; + height: 100%; + + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + background: rgba(110, 59, 254, 0.05); + } + } +` as StyledComponent<'div', Record, UploadAreaProps & Variant>; diff --git a/src/ui/atoms/upload-area/usage.mdx b/src/ui/atoms/upload-area/usage.mdx new file mode 100644 index 00000000..e06d42d2 --- /dev/null +++ b/src/ui/atoms/upload-area/usage.mdx @@ -0,0 +1,388 @@ +--- +name: upload-area +category: atoms +package: 'woly' +--- + +import { Playground, Content } from 'box-styles'; +import { Table, Thead, Th, Tr, Td, Tbody, UploadArea, Text, Button } from 'ui'; + +export const tableHead = [ + { id: 'id', name: 'Id' }, + { id: 'firstName', name: 'First name' }, + { id: 'lastName', name: 'Last name' }, + { id: 'email', name: 'Email' }, + { id: 'country', name: 'Country' }, + { id: 'street', name: 'Street' }, + { id: 'date', name: 'Date' }, + { id: 'role', name: 'Role' }, + { id: 'content', name: 'Content' }, + { id: 'phone', name: 'Phone' }, +]; + +export const tableRows = [ + { + id: 1, + firstName: 'Michael', + lastName: 'Smith', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '9 Eliot Parkway', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 2, + firstName: 'Jonathan', + lastName: 'Kearney', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '4 Sloan Park', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 3, + firstName: 'Donald', + lastName: 'Morrison', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Sherman', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 4, + firstName: 'Tara', + lastName: 'Richardson', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Judy Court', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 1, + firstName: 'Michael', + lastName: 'Smith', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '9 Eliot Parkway', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 2, + firstName: 'Jonathan', + lastName: 'Kearney', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '4 Sloan Park', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 3, + firstName: 'Donald', + lastName: 'Morrison', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Sherman', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 4, + firstName: 'Tara', + lastName: 'Richardson', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Judy Court', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 1, + firstName: 'Michael', + lastName: 'Smith', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '9 Eliot Parkway', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 2, + firstName: 'Jonathan', + lastName: 'Kearney', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '4 Sloan Park', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 3, + firstName: 'Donald', + lastName: 'Morrison', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Sherman', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 4, + firstName: 'Tara', + lastName: 'Richardson', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Judy Court', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 1, + firstName: 'Michael', + lastName: 'Smith', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '9 Eliot Parkway', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 2, + firstName: 'Jonathan', + lastName: 'Kearney', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '4 Sloan Park', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 3, + firstName: 'Donald', + lastName: 'Morrison', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Sherman', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 4, + firstName: 'Tara', + lastName: 'Richardson', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Judy Court', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 1, + firstName: 'Michael', + lastName: 'Smith', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '9 Eliot Parkway', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 2, + firstName: 'Jonathan', + lastName: 'Kearney', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '4 Sloan Park', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 3, + firstName: 'Donald', + lastName: 'Morrison', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Sherman', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 4, + firstName: 'Tara', + lastName: 'Richardson', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Judy Court', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 1, + firstName: 'Michael', + lastName: 'Smith', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '9 Eliot Parkway', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 2, + firstName: 'Jonathan', + lastName: 'Kearney', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: '4 Sloan Park', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 3, + firstName: 'Donald', + lastName: 'Morrison', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Sherman', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, + { + id: 4, + firstName: 'Tara', + lastName: 'Richardson', + email: 'msmith2343@gmail.com', + country: 'Portugal', + street: 'Judy Court', + date: '19.03.2015', + role: 'Admin', + content: 'Information about user', + phone: '+35118456395', + }, +]; + +`UploadArea` component is a layer that can be used by developer/designer to create some custom upload component. + +Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool. + +- when you need to upload one or more files. + +- when you need to show the process of uploading. + +- when you need to upload files by dragging and dropping. + +As usuall the upolad component consists some content, like upload button or input. +In classic mode file selection dialog pops up when upload button is clicked. + +As a successfull result on the screen should be displayed upload data or files. + +Also `UploadArea` component should be reused in creation other components, eg drag&drop component. + +### Example + + + Empty UploadArea component  +
+ +
+ + + + UploadArea component with content  +
+ } /> +
+ + + + Scrolled UploadArea component with huge data  +
+ + + + {tableHead.map(({ id, name }) => ( + {name} + ))} + + + + {tableRows.map((row) => ( + + {tableHead.map(({ id }) => ( + {row[id]} + ))} + + ))} + + + } + /> +
+ + +### Kinds + +| Name | Description | +| ------------ | ------------ | +| `UploadArea` | Base UploadArea | + +### Props + +| Name | Type | Default | Description | +| ---------- | ----------------- | ----------- | ----------------------------------------------------------------- | +| `variant` | `string` | `'default'` | Variant prop to style UploadArea component | +| `content` | `React.ReactNode` | | Pass any content within UploadArea component. | +| `center` | `boolean` | `false` | Whether the component has benn centred or not | diff --git a/src/ui/elements/quarks/input-container/index.tsx b/src/ui/elements/quarks/input-container/index.tsx index 971d3570..8f5215c7 100644 --- a/src/ui/elements/quarks/input-container/index.tsx +++ b/src/ui/elements/quarks/input-container/index.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import styled, { StyledComponent } from 'styled-components'; import { Variant } from 'lib/types'; import { keyboardEventHandle } from 'lib'; -interface InputContainerProps - extends React.InputHTMLAttributes { +interface InputContainerProps extends React.InputHTMLAttributes { className?: string; disabled?: boolean; leftIcon?: React.ReactNode; @@ -20,12 +19,10 @@ const InputContainerBase: React.FC = ({ rightIcon, variant = 'default', }) => { - const tabIndex = disabled ? -1 : 0; const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { event.preventDefault(); } @@ -56,8 +53,7 @@ const InputContainerBase: React.FC = ({ {rightIcon && {rightIcon}}
); -} - +}; export const InputContainer = styled(InputContainerBase)` --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level)); @@ -88,13 +84,13 @@ export const InputContainer = styled(InputContainerBase)` border: var(--woly-border-width) solid var(--local-border-color); border-radius: var(--woly-rounding); - [data-input="input"] { + [data-input='input'] { flex: 1; color: var(--local-value-color); - + padding: 0 var(--local-horizontal); - input{ + input { padding: 0; } @@ -105,7 +101,7 @@ export const InputContainer = styled(InputContainerBase)` [data-icon] { --local-icon-size: var(--woly-line-height); - + display: flex; align-items: center; justify-content: center; @@ -113,9 +109,9 @@ export const InputContainer = styled(InputContainerBase)` width: var(--local-icon-size); height: var(--local-icon-size); - svg > path { - fill: var(--local-icon-fill); - } + svg > path { + fill: var(--local-icon-fill); + } } [data-icon='left'] { @@ -126,8 +122,8 @@ export const InputContainer = styled(InputContainerBase)` padding: 0 calc(var(--local-horizontal) - var(--local-compensate)) 0 0; } - [data-icon='left'] ~ [data-input="input"], - [data-input="input"] ~ [data-icon='right'] { + [data-icon='left'] ~ [data-input='input'], + [data-input='input'] ~ [data-icon='right'] { padding-left: var(--local-gap); } @@ -146,7 +142,7 @@ export const InputContainer = styled(InputContainerBase)` &:active { --local-border-color: var(--woly-focus); - + [data-icon] { --local-icon-fill: var(--woly-canvas-text-default); } @@ -159,8 +155,4 @@ export const InputContainer = styled(InputContainerBase)` --local-border-color: var(--woly-shape-disabled); --local-value-color: var(--woly-canvas-text-disabled); } -` as StyledComponent< - 'div', - Record, - InputContainerProps & Variant ->; +` as StyledComponent<'div', Record, InputContainerProps & Variant>; diff --git a/src/ui/elements/quarks/input-element/index.tsx b/src/ui/elements/quarks/input-element/index.tsx index ae2527cb..4ea6fca0 100644 --- a/src/ui/elements/quarks/input-element/index.tsx +++ b/src/ui/elements/quarks/input-element/index.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import styled, { StyledComponent } from 'styled-components'; -interface InputElementProps - extends React.InputHTMLAttributes { +interface InputElementProps extends React.InputHTMLAttributes { className?: string; name: string; onChange: React.EventHandler; diff --git a/src/ui/molecules/checkbox/index.tsx b/src/ui/molecules/checkbox/index.tsx index d67a499f..eea5b24b 100644 --- a/src/ui/molecules/checkbox/index.tsx +++ b/src/ui/molecules/checkbox/index.tsx @@ -171,7 +171,7 @@ export const Checkbox = styled(CheckboxBase)` justify-content: center; svg > rect { - fill: var(--woly-shape-disabled); + fill: var(--woly-shape-disabled); } } diff --git a/src/ui/molecules/field/usage.mdx b/src/ui/molecules/field/usage.mdx index 0946996c..1a21ac00 100644 --- a/src/ui/molecules/field/usage.mdx +++ b/src/ui/molecules/field/usage.mdx @@ -81,11 +81,7 @@ Labels and children component can be replaced in row !i}> {(value, change) => ( - + )} @@ -102,17 +98,13 @@ or in column variants !i}> {(value, change) => ( - + )} -### Variants +### Variants Error variant can be used to focus user attention on error. @@ -139,11 +131,7 @@ Error variant can be used to focus user attention on error. !i}> {(value, change) => ( - + )} diff --git a/src/ui/molecules/input-password/index.tsx b/src/ui/molecules/input-password/index.tsx index fa9f7b36..e1a940e3 100644 --- a/src/ui/molecules/input-password/index.tsx +++ b/src/ui/molecules/input-password/index.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import styled, { StyledComponent } from 'styled-components'; -import { Variant } from 'lib/types'; - import { ButtonIcon, Input } from 'ui'; +import { ClosedEyeIcon, InfoIcon, OpenedEyeIcon } from 'icons'; +import { Variant } from 'lib/types'; import { block } from 'box-styles'; -import { ClosedEyeIcon, OpenedEyeIcon, InfoIcon } from 'icons'; + interface InputPasswordProps { className?: string; disabled?: boolean; @@ -53,19 +53,17 @@ export const InputPasswordBase: React.FC = ({ /> ); -} +}; -export const InputPassword = styled(InputPasswordBase)` +export const InputPassword = (styled(InputPasswordBase)` --local-gap: calc( - (1px * var(--woly-main-level)) + - (1px * var(--woly-main-level) * var(--woly-component-level)) + (1px * var(--woly-main-level)) + (1px * var(--woly-main-level) * var(--woly-component-level)) ); - + box-sizing: border-box; width: 100%; & > *:not(:first-child) { margin-left: var(--woly-gap); } - -` as unknown as StyledComponent<'div', Record, InputPasswordProps & Variant>; +` as unknown) as StyledComponent<'div', Record, InputPasswordProps & Variant>; diff --git a/src/ui/molecules/input-password/usage.mdx b/src/ui/molecules/input-password/usage.mdx index 26d00365..cd6e879d 100644 --- a/src/ui/molecules/input-password/usage.mdx +++ b/src/ui/molecules/input-password/usage.mdx @@ -16,7 +16,7 @@ InputPassword can be used in an authorization form or to confirm user action. ### Example - !i}> + !i}> {(value, change) => ( @@ -97,73 +98,73 @@ Size controlled by the `component-level` block property not from the props. !i}> - {(value, change) => ( - console.info('On input change')} - variant="primary" - /> - )} - + {(value, change) => ( + console.info('On input change')} + variant="primary" + /> + )} + !i}> - {(value, change) => ( - console.info('On input change')} - variant="primary" - /> - )} - + {(value, change) => ( + console.info('On input change')} + variant="primary" + /> + )} + !i}> - {(value, change) => ( - console.info('On input change')} - variant="primary" - /> - )} - + {(value, change) => ( + console.info('On input change')} + variant="primary" + /> + )} + !i}> - {(value, change) => ( - console.info('On input change')} - variant="primary" - /> - )} - + {(value, change) => ( + console.info('On input change')} + variant="primary" + /> + )} + !i}> - {(value, change) => ( - console.info('On input change')} - variant="primary" - /> - )} - + {(value, change) => ( + console.info('On input change')} + variant="primary" + /> + )} + @@ -174,17 +175,17 @@ Inputs can be placed inside the container. Input width is equal to container siz !i}> - {(value, change) => ( - console.info('On input change')} - variant="primary" - /> - )} - + {(value, change) => ( + console.info('On input change')} + variant="primary" + /> + )} + @@ -196,13 +197,13 @@ Inputs can be placed inside the container. Input width is equal to container siz ### Props -| Name | Type | Default | Description | -| -------------- | -------------------------------------------- | ----------- | ----------------------------------------------------------- | -| `disabled` | `boolean` | `null` | HTML disabled attribute | -| `name` | `string` | | HTML name attribute | -| `onChange` | `React.ChangeEventHandler` | | Callback when input is changed | -| `value` | `HTMLInputElement['value']` | `null` | HTML value attribute | -| `variant` | `string` | `'default'` | Variant prop to style InputPassword component | -| `placeholder` | `string` | | CSS pseudo-element represents the placeholder text | -| `rightIcon` | `React.ReactNode` | | Component to show on the right side of the text (ex.: Icon) | -| `...` | `HTMLInputElement` | `{}` | Other props are inherited from `HTMLInputElement` | +| Name | Type | Default | Description | +| ------------- | -------------------------------------------- | ----------- | ----------------------------------------------------------- | +| `disabled` | `boolean` | `null` | HTML disabled attribute | +| `name` | `string` | | HTML name attribute | +| `onChange` | `React.ChangeEventHandler` | | Callback when input is changed | +| `value` | `HTMLInputElement['value']` | `null` | HTML value attribute | +| `variant` | `string` | `'default'` | Variant prop to style InputPassword component | +| `placeholder` | `string` | | CSS pseudo-element represents the placeholder text | +| `rightIcon` | `React.ReactNode` | | Component to show on the right side of the text (ex.: Icon) | +| `...` | `HTMLInputElement` | `{}` | Other props are inherited from `HTMLInputElement` | diff --git a/src/ui/molecules/switch/index.tsx b/src/ui/molecules/switch/index.tsx index f81a7f0e..940254d2 100644 --- a/src/ui/molecules/switch/index.tsx +++ b/src/ui/molecules/switch/index.tsx @@ -24,7 +24,6 @@ const SwitchBase: React.FC = ({ const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { event.preventDefault(); } From 3647d591cf32b8f5f9722e3478e1c8bfc94dd559 Mon Sep 17 00:00:00 2001 From: Ira Date: Fri, 30 Apr 2021 16:38:38 +0300 Subject: [PATCH 2/2] fixed with comments --- src/ui/atoms/button/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx index 21bdf699..3712244a 100644 --- a/src/ui/atoms/button/index.tsx +++ b/src/ui/atoms/button/index.tsx @@ -7,6 +7,7 @@ export type ButtonVariants = 'default' | 'primary' | 'destructive' | 'text'; export type ButtonSizes = 'default' | 'small'; export interface ButtonProps extends React.ButtonHTMLAttributes { + children?: never; className?: string; icon?: React.ReactNode; text: React.ReactNode;