From 8c7b7330697666e2466cadb92c9146aaab5d1484 Mon Sep 17 00:00:00 2001 From: Ira Date: Thu, 15 Jul 2021 15:57:52 +0300 Subject: [PATCH] rewite surface, update palette and usage --- src/lib/global.ts | 12 +-- src/static/icons/index.ts | 1 + src/static/icons/threebars.svg | 1 + src/woly/atoms/button-icon/index.tsx | 4 +- src/woly/atoms/button-icon/usage.mdx | 6 -- src/woly/atoms/surface/index.tsx | 28 ++++- src/woly/atoms/surface/usage.mdx | 156 ++++++++++++++++----------- src/woly/atoms/text/index.tsx | 2 +- src/woly/molecules/modal/index.tsx | 9 +- src/woly/molecules/tooltip/index.tsx | 41 +++++-- src/woly/molecules/tooltip/usage.mdx | 29 +++-- 11 files changed, 183 insertions(+), 106 deletions(-) create mode 100644 src/static/icons/threebars.svg diff --git a/src/lib/global.ts b/src/lib/global.ts index 9c89919b..c3722182 100644 --- a/src/lib/global.ts +++ b/src/lib/global.ts @@ -118,15 +118,15 @@ export const Global = styled.div` } [data-priority='white'] { - --woly-shape-default: transparent; + --woly-shape-default: hsla(var(--bw-1000), 1); --woly-shape-disabled: hsla(var(--bw-200), 1); - --woly-shape-hover: transparent; - --woly-shape-active: transparent; + --woly-shape-hover: hsla(var(--bw-400), 1); + --woly-shape-active: hsla(var(--bw-600), 1); - --woly-shape-text-default: hsla(var(--bw-1000), 1); + --woly-shape-text-default: hsla(var(--bw-0), 1); --woly-shape-text-disabled: hsla(var(--bw-300), 1); - --woly-shape-text-hover: hsla(var(--bw-400), 1); - --woly-shape-text-active: hsla(var(--bw-500), 1); + --woly-shape-text-hover: hsla(var(--bw-0), 1); + --woly-shape-text-active: hsla(var(--bw-0), 1); --woly-canvas-default: transparent; --woly-canvas-disabled: hsla(var(--bw-200), 1); diff --git a/src/static/icons/index.ts b/src/static/icons/index.ts index 65413845..4fbe75d7 100644 --- a/src/static/icons/index.ts +++ b/src/static/icons/index.ts @@ -12,3 +12,4 @@ export { default as IconSearch } from './search.svg'; export { default as IconFilledUnchecked } from './check-filled-unchecked.svg'; export { default as IconSpinner } from './spinner.svg'; export { default as IconProfile } from './profile.svg'; +export { default as Threebars } from './threebars.svg'; diff --git a/src/static/icons/threebars.svg b/src/static/icons/threebars.svg new file mode 100644 index 00000000..0f77d4db --- /dev/null +++ b/src/static/icons/threebars.svg @@ -0,0 +1 @@ + diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx index 885f48f9..779ac909 100644 --- a/src/woly/atoms/button-icon/index.tsx +++ b/src/woly/atoms/button-icon/index.tsx @@ -128,8 +128,8 @@ export const ButtonIcon = styled(ButtonIconBase)` &[data-weight='goast'] { --local-shape-color: transparent; - --local-icon-color: var(--woly-shape-text-default); - --local-border-color: var(--woly-shape-text-default); + --local-icon-color: var(--woly-shape-default); + --local-border-color: var(--woly-shape-default); --local-shadow: var(--woly-border-width) var(--woly-border-width) calc(var(--woly-border-width) * 4) hsla(0, 0%, 100%, 50%); diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx index 0d9675a1..fefdb8a5 100644 --- a/src/woly/atoms/button-icon/usage.mdx +++ b/src/woly/atoms/button-icon/usage.mdx @@ -146,12 +146,6 @@ In case of choosing button-icon in black-and-white priority with outline styles weight="goast" priority="white" /> - } - onClick={() => console.info('ButtonIcon clicked')} - priority="white" - weight="fill" - /> diff --git a/src/woly/atoms/surface/index.tsx b/src/woly/atoms/surface/index.tsx index 5e053fba..efdb1a07 100644 --- a/src/woly/atoms/surface/index.tsx +++ b/src/woly/atoms/surface/index.tsx @@ -1,12 +1,32 @@ +import React from 'react'; import styled, { StyledComponent } from 'styled-components'; import { Priority } from 'lib/types'; -const map = (properties: Priority) => ({ +interface SurfaceProps { + weight?: string; +} + +const map = (properties: SurfaceProps & Priority) => ({ 'data-priority': properties.priority || 'secondary', + 'data-weight': properties.weight || 'goast', }); export const Surface = styled.div.attrs(map)` - background-color: var(--woly-shape-text-default); + z-index: 1; + + width: 100%; + border-radius: var(--woly-rounding); - box-shadow: var(--woly-box-shadow, 3px 3px 8px rgba(11, 31, 53, 0.04)); -` as StyledComponent<'div', Record, Priority>; + + &[data-weight='fill'] { + background-color: var(--woly-shape-default); + border-color: var(--woly-shape-default); + box-shadow: 3px 3px 8px var(--woly-shape-default); + } + + &[data-weight='goast'] { + background-color: var(--woly-background); + border-color: var(--woly-background); + box-shadow: 3px 3px 8px var(--woly-shape-text-disabled); + } +` as StyledComponent<'div', Record, SurfaceProps & Priority>; diff --git a/src/woly/atoms/surface/usage.mdx b/src/woly/atoms/surface/usage.mdx index 944dacf8..68502129 100644 --- a/src/woly/atoms/surface/usage.mdx +++ b/src/woly/atoms/surface/usage.mdx @@ -7,8 +7,31 @@ import { Playground, State } from 'lib/playground' -import {Button, ButtonIcon, Input, Label, Surface} from 'ui' -import {IconClose} from 'static/icons'; +import {Button, ButtonIcon, Input, Label, Surface, Popover, ListContainer, ListItem, Text} from 'ui'; +import {IconClose, Threebars} from 'static/icons'; + +export const links = [ + { + id: "fwed324fcse", + content: "John", + disabled: false + }, + { + id: "fwed32q4fcss", + content: "Alex", + disabled: true + }, + { + id: "fwed32q4fcsw", + content: "Michael", + disabled: false + }, + { + id: "fwed32q4fcsb", + content: "Donald", + disabled: false + } +]; `Surface` is a simple layer that contains information. Surface can be used inside Popover or Sidebar component. @@ -17,8 +40,10 @@ import {IconClose} from 'static/icons'; Simple text inside `Surface`. - - Surface content + + + Surface content + @@ -29,41 +54,41 @@ Sign in form based on `Surface`. !i}> {(value, change) => ( - -