From d5b7f4a504edefaa72d129069bd13ca553126cad Mon Sep 17 00:00:00 2001 From: Ira Date: Wed, 14 Apr 2021 18:04:18 +0300 Subject: [PATCH 1/3] fix: fix checkbox styles --- src/lib/index.ts | 3 +- src/lib/keyboard-event.ts | 35 ++----- src/lib/select-handlers.ts | 22 ++-- src/ui/molecules/checkbox/index.tsx | 150 ++++++++++++++++++---------- src/ui/molecules/checkbox/usage.mdx | 47 ++++++--- src/ui/molecules/select/index.tsx | 28 +----- 6 files changed, 153 insertions(+), 132 deletions(-) diff --git a/src/lib/index.ts b/src/lib/index.ts index d79761ce..cdce13af 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 { selectHandlersGet } from './select-handlers'; +export { keyHandlerGet } from './select-handlers'; +export { Variant } from './types'; diff --git a/src/lib/keyboard-event.ts b/src/lib/keyboard-event.ts index 6c44c221..52b9b019 100644 --- a/src/lib/keyboard-event.ts +++ b/src/lib/keyboard-event.ts @@ -2,42 +2,25 @@ import React from 'react'; interface KeyboardEventProps { event: React.KeyboardEvent; - eventHandlers: EventHandlersProps; -} - -interface EventHandlersProps { - onArrowDown: () => void; - onArrowUp: () => void; - onEnter: () => void; - onShiftArrowDown: () => void; + keyHandler?: HandlerType; + shiftKeyHandler?: HandlerType; } interface HandlerType { - [key: string]: () => void; + [key: string]: (event: React.SyntheticEvent) => void; } const camelCase = (string: string) => string.charAt(0).toLowerCase() + string.slice(1); -export const keyboardEventHandle = ({ event, eventHandlers }: KeyboardEventProps) => { +export const keyboardEventHandle = ({ event, keyHandler, shiftKeyHandler }: KeyboardEventProps) => { const { shiftKey } = event; const key = camelCase(event.key); - const { onArrowDown, onArrowUp, onEnter, onShiftArrowDown } = eventHandlers; - - const keyHandler: HandlerType = { - arrowDown: onArrowDown, - arrowUp: onArrowUp, - enter: onEnter, - }; - const shiftKeyHandler: HandlerType = { - arrowDown: onShiftArrowDown, - }; - - if (!keyHandler.hasOwnProperty(key) && !shiftKeyHandler.hasOwnProperty(key)) return; + if (key && shiftKey && shiftKeyHandler && shiftKeyHandler.hasOwnProperty(key)) { + shiftKeyHandler[key](event); + } - if (shiftKey) { - shiftKeyHandler[key](); - } else { - keyHandler[key](); + if (key && keyHandler && keyHandler.hasOwnProperty(key)) { + keyHandler[key](event); } }; diff --git a/src/lib/select-handlers.ts b/src/lib/select-handlers.ts index 39475335..980d590e 100644 --- a/src/lib/select-handlers.ts +++ b/src/lib/select-handlers.ts @@ -4,10 +4,9 @@ interface GetSelectHandlersProps extends EnterProps { interface EnterProps { isOpen: boolean; + onChange: React.EventHandler; selectNode: HTMLElement; setIsOpen: () => void; - onChange: React.EventHandler; - event: React.KeyboardEvent; } const LI_TAG = 'LI'; @@ -28,25 +27,24 @@ const onArrowUp = (dropdownNode: HTMLElement) => () => { } }; -const onEnter = ({ isOpen, selectNode, setIsOpen, onChange, event }: EnterProps) => () => { +const onEnter = ({ isOpen, onChange, selectNode, setIsOpen }: EnterProps) => ( + event: React.SyntheticEvent, +) => { if (isOpen && document.activeElement?.tagName === LI_TAG) { onChange(event); } - setIsOpen(); selectNode.focus(); }; -export const selectHandlersGet = ({ - selectNode, +export const keyHandlerGet = ({ dropdownNode, - setIsOpen, isOpen, onChange, - event, + selectNode, + setIsOpen, }: GetSelectHandlersProps) => ({ - onArrowDown: onArrowDown(dropdownNode), - onArrowUp: onArrowUp(dropdownNode), - onEnter: onEnter({ isOpen, setIsOpen, selectNode, onChange, event }), - onShiftArrowDown: setIsOpen, + arrowDown: onArrowDown(dropdownNode), + arrowUp: onArrowUp(dropdownNode), + enter: onEnter({ selectNode, setIsOpen, isOpen, onChange }), }); diff --git a/src/ui/molecules/checkbox/index.tsx b/src/ui/molecules/checkbox/index.tsx index 831f71bd..469f9d7c 100644 --- a/src/ui/molecules/checkbox/index.tsx +++ b/src/ui/molecules/checkbox/index.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import styled, { StyledComponent } from 'styled-components'; import { CheckIcon, UnCheckIcon } from 'icons'; -import { Variant } from 'lib/types'; +import { Variant, keyboardEventHandle } from 'lib'; interface CheckboxProps { className?: string; disabled?: boolean; id: string; - isChecked: boolean; - onChange: React.ChangeEventHandler; + checked: boolean; + onChange: React.EventHandler; text?: string; } @@ -16,78 +16,128 @@ const CheckboxBase: React.FC = ({ className, disabled, id, - isChecked, + checked, onChange, text, variant = 'default', -}) => ( - -); + + ); +}; export const Checkbox = styled(CheckboxBase)` - --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-gap: calc( + --local-gap: calc( (1px * var(--woly-main-level)) + (1px * var(--woly-main-level) * var(--woly-component-level)) ); - --woly-checkbox-width: 24px; - --woly-checkbox-height: 24px; + --local-width: 24px; + --local-height: 24px; - padding: var(--woly-vertical, 6.4px) var(--woly-horizontal, 6.4px); + padding: var(--local-vertical, 6.4px) var(--local-horizontal, 6.4px); user-select: none; + outline: none; + + &:focus [data-checkmark] > svg, + &:active [data-checkmark] > svg { + box-shadow: 0 0 0 1.5px var(--woly-border, #9381f1); + border-radius: var(--woly-rounding, 3px); + } [data-block='container'] { display: flex; align-items: center; [data-checkmark] { - width: var(--woly-checkbox-width); - height: var(--woly-checkbox-height); - - align-items: center; - justify-content: center; + width: var(--local-width); + height: var(--local-height); - margin-right: var(--woly---woly-gap, 15px); - } - - [data-checkmark='unchecked'] { - display: block; - } - - [data-checkmark='checked'] { - display: none; + margin-right: var(--local-gap, 15px); } + [data-checkmark='unchecked'], input:checked ~ [data-checkmark='checked'] { - display: block; + display: flex; + align-items: center; + justify-content: center; } + [data-checkmark='checked'], input:checked ~ [data-checkmark='unchecked'] { display: none; } [data-checkmark='unchecked'] { - &:hover, - &:focus { + &:hover { svg > rect { stroke: var(--woly-color, #b0a3f4); } } + + &:focus, + &:active { + svg > rect { + stroke: var(--woly-color, #9381f1); + } + } + } + + [data-checkmark='checked'] { + &:hover { + svg > rect { + fill: var(--woly-color, #c9c0f8); + } + } + + &:focus, + &:active { + svg > rect { + fill: var(--woly-color, #9381f1); + } + } } } @@ -98,26 +148,18 @@ export const Checkbox = styled(CheckboxBase)` color: var(--woly-color, #e4e4e4); } - [data-checkmark='unchecked'] { - display: block; - - svg > rect { - stroke: var(--woly-canvas-color, #e4e4e4); - } - } - - [data-checkmark='checked'] { - display: none; - } - + [data-checkmark='unchecked'], input:checked ~ [data-checkmark='checked'] { - display: block; + display: flex; + align-items: center; + justify-content: center; svg > rect { fill: var(--woly-canvas-color, #e4e4e4); } } + [data-checkmark='checked'], input:checked ~ [data-checkmark='unchecked'] { display: none; } diff --git a/src/ui/molecules/checkbox/usage.mdx b/src/ui/molecules/checkbox/usage.mdx index 5fbe7342..a0fb82d3 100644 --- a/src/ui/molecules/checkbox/usage.mdx +++ b/src/ui/molecules/checkbox/usage.mdx @@ -5,7 +5,7 @@ package: 'woly' --- import { Checkbox } from './index'; -import { Playground } from 'box-styles' +import { Playground, State } from 'box-styles' Checkboxes allow you to setup selectable options for your users - either to toggle a single setting on or off, or to allow for multiple choices. @@ -22,20 +22,33 @@ Use a checkbox when the user has to stop before performing an action. Checkbox w ### Example - - + !i}> + {(value, change) => ( + + )} + - - ### Variants Error and primary/secondary variants are should be used to focus user attention. - - - - + + !i}> + {(value, change) => ( + <> + + + + + )} + ### Kinds @@ -46,10 +59,12 @@ Error and primary/secondary variants are should be used to focus user attention. ### Props -| Name | Type | Default | Description | -| ----------- | -------------------------------------------- | ----------- | ---------------------------------------- | -| `id` | `string` | | HTML id attribute | -| `isChecked` | `boolean` | | Whether checkbox is checked or not | -| `text` | `string` | | Text component | -| `onChange` | `React.ChangeEventHandler` | | Callback when checkbox is clicked | -| `variant` | `string` | `'default'` | Variant prop to style Checkbox component | +| Name | Type | Default | Description | +| ----------- | -------------------------------------------- | ----------- | ---------------------------------------------------------------------------- | +| `id` | `string` | | HTML id attribute | +| `disabled` | `boolean` | | HTML disabled attribute | +| `checked` | `boolean` | | Whether checkbox is checked or not | +| `text` | `string` | | Text component | +| `onKeyDown` | | | The onKeydown event occurs when the user is pressing a key (on the keyboard) | +| `onChange` | `React.ChangeEventHandler` | | Callback when checkbox is clicked | +| `variant` | `string` | `'default'` | Variant prop to style Checkbox component | diff --git a/src/ui/molecules/select/index.tsx b/src/ui/molecules/select/index.tsx index 316f82fc..a51ab618 100644 --- a/src/ui/molecules/select/index.tsx +++ b/src/ui/molecules/select/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled, { StyledComponent } from 'styled-components'; import { Variant } from 'lib/types'; -import { keyboardEventHandle, selectHandlersGet } from 'lib'; +import { keyHandlerGet, keyboardEventHandle } from 'lib'; /** * --woly-border @@ -59,19 +59,19 @@ export const SelectBase: React.FC = ({ } event.preventDefault(); - - const eventHandlers = selectHandlersGet({ + const kh = keyHandlerGet({ dropdownNode, - event, isOpen, onChange, selectNode, setIsOpen, }); + const shiftKeyHandler = { arrowDown: setIsOpen }; keyboardEventHandle({ event, - eventHandlers, + keyHandler: kh, + shiftKeyHandler, }); }, [selectRef, dropdownRef, isOpen, onChange], @@ -120,12 +120,10 @@ export const Select = styled(SelectBase)` --woly-horizontal: calc( var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--woly-vertical) ); - position: relative; align-items: center; outline: none; cursor: pointer; - &:focus > div[data-selected], &:active > div[data-selected] { border-color: var(--woly-background-focus, #1f68f5); @@ -134,59 +132,47 @@ export const Select = styled(SelectBase)` fill: var(--woly-color-focus, #c4c4c4); } } - &[data-open='true'] > div[data-selected] { border-color: var(--woly-border-focus, #b0a3f4); } - svg > path { fill: var(--woly-color, #000000); } - &[data-disabled='true'] { pointer-events: none; - svg > path { fill: var(--woly-color-disabled, #c4c4c4); } - div[data-selected] { background: var(--woly-background-disabled, #ffffff); border-color: var(--woly-border-disabled, var(--woly-background-disabled, #c4c4c4)); color: var(--woly-color-disabled, #c4c4c4); } } - div[data-selected] { display: flex; align-items: center; padding: var(--woly-vertical, 16px) var(--woly-horizontal, 6.4px); background: var(--woly-canvas, #ffffff); - border-color: var(--woly-border, var(--woly-background, #f8f7f7)); border-style: solid; border-width: var(--woly-border-width, 1.5px); border-radius: var(--woly-rounding, 3px); box-sizing: border-box; - color: var(--woly-color, #000000); - div { width: 225px; } } - span[data-icon='true'] { transform: rotate(180deg); } - span[data-icon='false'] { display: flex; flex-direction: column; justify-content: center; height: 100%; } - ul { display: none; position: absolute; @@ -202,19 +188,16 @@ export const Select = styled(SelectBase)` margin-top: 6px; box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12); } - ul[data-visible='true'] { display: flex; flex-direction: column; box-sizing: border-box; } - li { padding: var(--woly-vertical, 16px) var(--woly-horizontal, 6.4px); line-height: var(--woly-line-height, 24px); color: var(--woly-color, #000000); cursor: pointer; - &:hover, &:focus, &:active { @@ -223,7 +206,6 @@ export const Select = styled(SelectBase)` background-color: var(--woly-background-hover, #f8f8fa); } } - div:not(:first-child) { margin-top: var(--woly-gap); } From e5e146265d4ffff5d38c06b313575ffc16f3ce5f Mon Sep 17 00:00:00 2001 From: Ira Date: Wed, 14 Apr 2021 19:19:49 +0300 Subject: [PATCH 2/3] fix: fix checkbox styles --- src/lib/box-styles.tsx | 8 ++++++++ src/ui/molecules/checkbox/index.tsx | 12 ++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx index 0d80893f..d1bff7ea 100644 --- a/src/lib/box-styles.tsx +++ b/src/lib/box-styles.tsx @@ -27,6 +27,8 @@ export const Global = styled.div` --woly-background-disabled: #f5f5f5; --woly-border-disabled: #f5f5f5; --woly-color-disabled: #c0c0c0; + --woly-text-disabled: #e4e4e4; + --woly-fill-disabled: #e4e4e4; } [data-variant='secondary'] { @@ -48,6 +50,8 @@ export const Global = styled.div` --woly-background-disabled: #c0c0c0; --woly-border-disabled: #c0c0c0; --woly-color-disabled: #a39bb2; + --woly-text-disabled: #e4e4e4; + --woly-fill-disabled: #e4e4e4; } [data-variant='base'] { @@ -63,6 +67,8 @@ export const Global = styled.div` --woly-background-disabled: #c0c0c0; --woly-border-disabled: #c0c0c0; --woly-color-disabled: #a39bb2; + --woly-text-disabled: #e4e4e4; + --woly-fill-disabled: #e4e4e4; } [data-variant='error'] { @@ -81,6 +87,8 @@ export const Global = styled.div` --woly-background-disabled: #c0c0c0; --woly-border-disabled: #c0c0c0; --woly-color-disabled: #a39bb2; + --woly-text-disabled: #e4e4e4; + --woly-fill-disabled: #e4e4e4; } [data-variant='square'] { diff --git a/src/ui/molecules/checkbox/index.tsx b/src/ui/molecules/checkbox/index.tsx index 469f9d7c..2c9639e2 100644 --- a/src/ui/molecules/checkbox/index.tsx +++ b/src/ui/molecules/checkbox/index.tsx @@ -113,14 +113,14 @@ export const Checkbox = styled(CheckboxBase)` [data-checkmark='unchecked'] { &:hover { svg > rect { - stroke: var(--woly-color, #b0a3f4); + stroke: var(--woly-background, #b0a3f4); } } &:focus, &:active { svg > rect { - stroke: var(--woly-color, #9381f1); + stroke: var(--woly-background-focus, #9381f1); } } } @@ -128,14 +128,14 @@ export const Checkbox = styled(CheckboxBase)` [data-checkmark='checked'] { &:hover { svg > rect { - fill: var(--woly-color, #c9c0f8); + fill: var(--woly-border-hover, #c9c0f8); } } &:focus, &:active { svg > rect { - fill: var(--woly-color, #9381f1); + fill: var(--woly-background-focus, #9381f1); } } } @@ -145,7 +145,7 @@ export const Checkbox = styled(CheckboxBase)` pointer-events: none; [data-block='text'] { - color: var(--woly-color, #e4e4e4); + color: var(--woly-text-disabled, #e4e4e4); } [data-checkmark='unchecked'], @@ -155,7 +155,7 @@ export const Checkbox = styled(CheckboxBase)` justify-content: center; svg > rect { - fill: var(--woly-canvas-color, #e4e4e4); + fill: var(--woly-fill-disabled, #e4e4e4); } } From 0d0a564f6fc4cd8402bd5aaaba8aad83c7150235 Mon Sep 17 00:00:00 2001 From: Ira Date: Thu, 15 Apr 2021 16:02:51 +0300 Subject: [PATCH 3/3] fix: fix boxstyles --- src/lib/box-styles.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx index 63fe122e..b66fdb42 100644 --- a/src/lib/box-styles.tsx +++ b/src/lib/box-styles.tsx @@ -19,24 +19,30 @@ export const Global = styled.div` --woly-border-width: 1.5px; --woly-rounding: 4px; --woly-font-size: 15px; + --woly-const-m: 6px; --woly-main-level: 3; + --woly-neutral: var(--palette-snow-500); --woly-focus: var(--palette-lavender-500); --woly-background: var(--palette-snow-0); + [data-variant='primary'] { --woly-shape-default: var(--palette-lavender-300); --woly-shape-disabled: var(--palette-snow-300); --woly-shape-hover: var(--palette-lavender-100); --woly-shape-active: var(--palette-lavender-300); + --woly-shape-text-default: var(--palette-snow-0); --woly-shape-text-disabled: var(--palette-snow-0); --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-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);