From a828adf26e8bc622c919475b7178e6d1248e3588 Mon Sep 17 00:00:00 2001 From: Sergey Sova Date: Fri, 7 May 2021 18:09:08 +0300 Subject: [PATCH] style: reformat code and styles --- .github/workflows/pull-request.yml | 2 +- .stylelintrc.json | 4 +-- package.json | 6 ++-- src/ui/atoms/backdrop/index.tsx | 5 +-- src/ui/atoms/button-icon/index.tsx | 16 +++++---- src/ui/atoms/button/index.tsx | 8 +++-- src/ui/atoms/chip/index.tsx | 15 ++++---- src/ui/atoms/header-panel/index.tsx | 12 +++---- src/ui/atoms/heading/index.tsx | 2 +- src/ui/atoms/list/index.tsx | 14 ++++---- src/ui/atoms/separator/index.tsx | 1 + src/ui/atoms/table/index.tsx | 18 ++++++---- src/ui/atoms/text-area/index.tsx | 17 +++++---- src/ui/atoms/text/index.tsx | 5 +-- src/ui/atoms/tooltip/index.tsx | 44 ++++++++++++++--------- src/ui/atoms/upload-area/index.tsx | 15 ++++---- src/ui/elements/input-container/index.tsx | 18 +++++----- src/ui/elements/input-element/index.tsx | 7 ++-- src/ui/molecules/accordion/index.tsx | 13 +++---- src/ui/molecules/checkbox/index.tsx | 3 +- src/ui/molecules/modal/index.tsx | 29 ++++++++------- src/ui/molecules/popover/index.tsx | 6 ++-- src/ui/molecules/radio-button/index.tsx | 36 ++++++++++--------- src/ui/molecules/select/index.tsx | 28 ++++++++------- src/ui/molecules/switch/index.tsx | 10 ++++++ src/ui/templates/grid/index.tsx | 2 +- 26 files changed, 196 insertions(+), 140 deletions(-) diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 114cc7f7..e17dae11 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -35,7 +35,7 @@ jobs: run: yarn build - name: Check for formatting - run: yarn format:validate + run: yarn format - name: Check for code style run: yarn lint:code diff --git a/.stylelintrc.json b/.stylelintrc.json index f7a6e974..9e665561 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,5 +1,4 @@ { - "processors": ["stylelint-processor-styled-components"], "extends": [ "stylelint-config-recommended", "stylelint-config-styled-components", @@ -11,6 +10,7 @@ { "empty-line-between-groups": true } - ] + ], + "no-descending-specificity": null } } diff --git a/package.json b/package.json index c7c87284..0b8415a9 100755 --- a/package.json +++ b/package.json @@ -6,11 +6,11 @@ "build": "rm -rf dist && node build", "commit": "git-cz", "docs:build": "gatsby clean && gatsby build --prefix-paths", - "format": "prettier --write '{src,build,.storybook,packages}/**/**.{ts,tsx,js,md,mdx,json}'", - "format:validate": "prettier --check '{src,build,.storybook,packages}/**/**.{ts,tsx,js,md,mdx,json}'", + "format": "prettier --check '{src,build,.storybook,packages}/**/**.{ts,tsx,js,md,mdx,json}'", + "format:fix": "prettier --write '{src,build,.storybook,packages}/**/**.{ts,tsx,js,md,mdx,json}'", "lint:code": "eslint --ext .ts,.tsx src", "lint:code:fix": "yarn lint:code --fix", - "lint:style": "stylelint ./src/**/*.{js,css,ts,tsx}", + "lint:style": "stylelint './src/**/*.{js,css,ts,tsx}'", "percy:cypress": "percy exec -- cypress run", "start": "gatsby clean && gatsby develop", "test:visual": "start-server-and-test 'yarn start' http://localhost:8000/package/woly/component/button 'yarn percy:cypress'", diff --git a/src/ui/atoms/backdrop/index.tsx b/src/ui/atoms/backdrop/index.tsx index e6e4070a..16714a28 100644 --- a/src/ui/atoms/backdrop/index.tsx +++ b/src/ui/atoms/backdrop/index.tsx @@ -2,9 +2,10 @@ import styled from 'styled-components'; export const Backdrop = styled.div` position: fixed; - left: 0; top: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background: rgba(0, 0, 0, 0.3); `; diff --git a/src/ui/atoms/button-icon/index.tsx b/src/ui/atoms/button-icon/index.tsx index 1c58e7ee..db31c5e1 100644 --- a/src/ui/atoms/button-icon/index.tsx +++ b/src/ui/atoms/button-icon/index.tsx @@ -24,33 +24,33 @@ const ButtonIconBase: React.FC = ({ export const ButtonIcon = styled(ButtonIconBase)` ${box} - --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-shape-color: var(--woly-canvas-default); --local-icon-size: calc(var(--woly-line-height)); --local-button-size: calc(var(--local-icon-size) + (var(--local-vertical) * 2)); --local-icon-color: var(--woly-shape-default); display: flex; - justify-content: center; + align-items: center; + justify-content: center; box-sizing: border-box; width: var(--local-button-size); height: var(--local-button-size); + background: var(--local-shape-color); border: var(--woly-border-width) solid var(--local-shape-color); border-radius: var(--woly-rounding); - cursor: pointer; - background: var(--local-shape-color); outline: none; + cursor: pointer; [data-icon] { display: flex; align-items: center; justify-content: center; + svg { width: var(--local-icon-size); height: var(--local-icon-size); @@ -59,6 +59,7 @@ export const ButtonIcon = styled(ButtonIconBase)` svg > path { fill: var(--local-icon-color); } + svg > g { stroke: var(--local-icon-color); } @@ -71,13 +72,16 @@ export const ButtonIcon = styled(ButtonIconBase)` &:active { --local-shape-color: var(--woly-focus); } + &:focus { --local-shape-color: var(--woly-shape-active); box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); } + &:hover { --local-shape-color: var(--woly-shape-hover); } + &:disabled { --local-shape-color: var(--woly-canvas-disabled); } diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx index 54b24843..f6135c3c 100644 --- a/src/ui/atoms/button/index.tsx +++ b/src/ui/atoms/button/index.tsx @@ -41,13 +41,14 @@ export const Button = styled(ButtonBase)` --local-shape-color: var(--woly-shape-default); --local-border-color: var(--woly-shape-default); - ${box}; + ${box} - box-sizing: border-box; display: flex; flex-wrap: nowrap; justify-content: center; + box-sizing: border-box; + color: var(--local-text-color); font-size: var(--woly-font-size); line-height: var(--woly-line-height); @@ -60,9 +61,10 @@ export const Button = styled(ButtonBase)` outline: none; &[data-outlined='true'] { - background-color: transparent; color: var(--local-shape-color); + background-color: transparent; + svg > path { fill: var(--local-shape-color); } diff --git a/src/ui/atoms/chip/index.tsx b/src/ui/atoms/chip/index.tsx index e22453bc..bcd52e9c 100644 --- a/src/ui/atoms/chip/index.tsx +++ b/src/ui/atoms/chip/index.tsx @@ -54,25 +54,28 @@ export const Chip = styled(ChipBase)` --local-color: var(--woly-shape-text-default); --local-border-color: var(--woly-shape-default); - box-sizing: border-box; display: flex; align-items: center; - background-color: var(--local-background); + + box-sizing: border-box; + color: var(--local-color); - border-radius: var(--woly-rounding); font-size: var(--woly-font-size); - outline: none; + + background-color: var(--local-background); border: var(--woly-border-width) solid var(--local-border-color); + border-radius: var(--woly-rounding); + outline: none; [data-text] { - outline: none; line-height: var(--woly-line-height); + + outline: none; } &[role='button']:focus-within { --local-background: var(--woly-focus); --local-border-color: var(--woly-shape-active); - box-shadow: 0 0 0 var(--woly-border-width) var(--woly-shape-default); } diff --git a/src/ui/atoms/header-panel/index.tsx b/src/ui/atoms/header-panel/index.tsx index f26b063d..8c3af918 100644 --- a/src/ui/atoms/header-panel/index.tsx +++ b/src/ui/atoms/header-panel/index.tsx @@ -8,14 +8,9 @@ const map = (properties: Variant) => ({ export const HeaderPanel = styled.div.attrs(map)` display: flex; align-items: center; - - height: 100%; width: 100%; - --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) - ); + height: 100%; padding: var(--local-vertical) var(--local-horizontal); @@ -23,4 +18,9 @@ export const HeaderPanel = styled.div.attrs(map)` border: var(--woly-border-width) solid var(--woly-background); border-radius: var(--woly-rounding); box-shadow: var(--woly-shadow); + + --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) + ); ` as StyledComponent<'div', Record, Variant>; diff --git a/src/ui/atoms/heading/index.tsx b/src/ui/atoms/heading/index.tsx index 3ab3e034..ecbddd6d 100644 --- a/src/ui/atoms/heading/index.tsx +++ b/src/ui/atoms/heading/index.tsx @@ -18,9 +18,9 @@ export const Heading = styled.span.attrs(map)` --local-color: var(--woly-canvas-text-default); color: var(--local-color); + font-weight: 500; font-size: 24px; line-height: 30px; - font-weight: 500; &[data-size='2'] { font-size: 21px; line-height: 27px; diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx index 64f58e25..f3b51b45 100644 --- a/src/ui/atoms/list/index.tsx +++ b/src/ui/atoms/list/index.tsx @@ -32,9 +32,10 @@ export const ListContainer = styled.div.attrs(mapContainer)` display: grid; grid-template-columns: 1fr; gap: var(--local-gap); - background-color: var(--woly-shape-text-default); - padding: 0; margin: 0; + padding: 0; + + background-color: var(--woly-shape-text-default); ` as StyledComponent<'div', Record, Variant>; export const ListItem: React.FC = ({ @@ -67,17 +68,18 @@ const ListItemContainer = styled.div.attrs(mapItem)` ${box} --local-icon-color: var(--woly-canvas-text-default); --local-backgound: var(--woly-canvas-default); - --local-color: var(--woly-canvas-text-default) + --local-color: var(--woly-canvas-text-default); - cursor: pointer; + color: var(--local-color); font-size: var(--woly-font-size); line-height: var(--woly-line-height); text-decoration: none; - background-color: var(--local-backgound); - color: var(--local-color); list-style-type: none; + background-color: var(--local-backgound); + cursor: pointer; + span { svg > path { fill: var(--local-icon-color); diff --git a/src/ui/atoms/separator/index.tsx b/src/ui/atoms/separator/index.tsx index febaa15b..276f2782 100644 --- a/src/ui/atoms/separator/index.tsx +++ b/src/ui/atoms/separator/index.tsx @@ -16,6 +16,7 @@ export const Separator = styled(SeparatorBase)` [data-line] { height: var(--woly-border-width); + background: var(--woly-canvas-disabled); } ` as StyledComponent<'div', Record, Variant>; diff --git a/src/ui/atoms/table/index.tsx b/src/ui/atoms/table/index.tsx index 15d1ba42..5098b183 100644 --- a/src/ui/atoms/table/index.tsx +++ b/src/ui/atoms/table/index.tsx @@ -15,8 +15,8 @@ export const Table = styled.table.attrs(map)` --local-gap: calc(var(--woly-const-m) / 2); display: grid; - gap: var(--local-gap); grid-template-columns: repeat(var(--local-columns), auto); + gap: var(--local-gap); `; export const Thead = styled.thead` @@ -28,19 +28,23 @@ export const Tbody = styled.tbody` `; export const Th = styled.th` - padding: var(--local-vertical) var(--local-horizontal); - max-width: var(--local-cell-max-width); box-sizing: border-box; - background: var(--woly-shape-text-default); + max-width: var(--local-cell-max-width); + padding: var(--local-vertical) var(--local-horizontal); + color: var(--woly-canvas-text-disabled); + + background: var(--woly-shape-text-default); `; export const Td = styled.td` - padding: var(--local-vertical) var(--local-horizontal); - max-width: var(--local-cell-max-width); box-sizing: border-box; - background: var(--woly-shape-text-default); + max-width: var(--local-cell-max-width); + padding: var(--local-vertical) var(--local-horizontal); + color: var(--woly-canvas-text-default); + + background: var(--woly-shape-text-default); `; export const Tr = styled.tr` diff --git a/src/ui/atoms/text-area/index.tsx b/src/ui/atoms/text-area/index.tsx index 81fd7ce8..789af664 100644 --- a/src/ui/atoms/text-area/index.tsx +++ b/src/ui/atoms/text-area/index.tsx @@ -85,26 +85,29 @@ export const TextArea = styled(TextAreaBase)` --local-border-color: var(--woly-canvas-text-hover); --local-background-color: var(--woly-canvas-default); --local-value-color: var(--woly-canvas-text-default); + box-sizing: border-box; width: 100%; - box-sizing: border-box; - outline: none; font-size: var(--woly-font-size, 15px); line-height: var(--woly-line-height, 21px); + outline: none; + textarea { padding: var(--local-vertical) var(--local-horizontal); - outline: none; + overflow: hidden; - background-color: var(--local-background-color); color: var(--local-value-color); + background-color: var(--local-background-color); + border: var(--woly-border-width) solid var(--local-border-color); border-radius: var(--woly-rounding); - overflow: hidden; + outline: none; + resize: none; &::placeholder { @@ -114,14 +117,14 @@ export const TextArea = styled(TextAreaBase)` &:focus > textarea { --local-border-color: var(--woly-focus); - box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); outline: none; + box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); } &:active > textarea { --local-border-color: var(--woly-focus); - box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); outline: none; + box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); } &:hover > textarea { diff --git a/src/ui/atoms/text/index.tsx b/src/ui/atoms/text/index.tsx index a150d999..28e1523b 100644 --- a/src/ui/atoms/text/index.tsx +++ b/src/ui/atoms/text/index.tsx @@ -18,10 +18,11 @@ export const Text = styled.p.attrs(map)` --local-color: var(--woly-canvas-text-default); margin: 0; + color: var(--local-color); + font-weight: 400; font-size: 15px; line-height: 21px; - font-weight: 400; &[data-type='subtitle'][data-weight='medium'] { font-weight: 500; @@ -48,9 +49,9 @@ export const Text = styled.p.attrs(map)` } &[data-type='hint'] { + color: var(--local-color); font-size: 12px; line-height: 15px; - color: var(--local-color); } &[data-type='hint'][data-weight='light'] { diff --git a/src/ui/atoms/tooltip/index.tsx b/src/ui/atoms/tooltip/index.tsx index 4b16213f..f20ca82b 100644 --- a/src/ui/atoms/tooltip/index.tsx +++ b/src/ui/atoms/tooltip/index.tsx @@ -66,6 +66,7 @@ export const Tooltip = styled(TooltipBase)` --tooltip-position: calc(100% + 4px + var(--woly-gap, 10px)); position: relative; + font-size: var(--woly-font-size, 16px); line-height: 21px; @@ -73,13 +74,20 @@ export const Tooltip = styled(TooltipBase)` div[data-tooltip] { visibility: visible; opacity: 1; + transition: 0.3s linear; } } div[data-tooltip] { - visibility: hidden; position: absolute; + z-index: 1; + + box-sizing: border-box; + width: max-content; + min-width: 112px; + max-width: 240px; + min-height: 48px; padding: 12px 18px; @@ -90,26 +98,24 @@ export const Tooltip = styled(TooltipBase)` border-style: solid; border-width: var(--woly-border-width); border-radius: var(--woly-rounding, 6px); + box-shadow: var(--woly-shadow); + visibility: hidden; + cursor: pointer; + opacity: 0; transition: all 0.3s ease-in-out; - z-index: 1; - opacity: 0; - cursor: pointer; - box-shadow: var(--woly-shadow); - width: max-content; - min-width: 112px; - max-width: 240px; - min-height: 48px; - box-sizing: border-box; &::after { - content: ' '; + position: absolute; + width: 0; height: 0; + + border-color: var(--woly-background, #ffffff) transparent transparent transparent; border-style: solid; border-width: 4px 3px 0 3px; - border-color: var(--woly-background, #ffffff) transparent transparent transparent; - position: absolute; + + content: ' '; } &:hover { @@ -123,6 +129,7 @@ export const Tooltip = styled(TooltipBase)` &::after { bottom: calc(-4px - var(--woly-border-width, 0px)); left: 12px; + transform: initial; } } @@ -131,32 +138,35 @@ export const Tooltip = styled(TooltipBase)` top: var(--tooltip-position); &::after { - bottom: initial; top: calc(-4px - var(--woly-border-width, 0px)); + bottom: initial; left: 12px; + transform: rotate(180deg); } } &[data-position='left'] > [data-tooltip] { - right: var(--tooltip-position); top: 0; + right: var(--tooltip-position); &::after { top: 12px; right: calc(-5px - var(--woly-border-width, 0px)); + transform: rotate(-90deg); } } &[data-position='right'] > [data-tooltip] { - left: var(--tooltip-position); top: 0; + left: var(--tooltip-position); &::after { top: 12px; - left: calc(-5px - var(--woly-border-width, 0px)); right: initial; + left: calc(-5px - var(--woly-border-width, 0px)); + transform: rotate(90deg); } } diff --git a/src/ui/atoms/upload-area/index.tsx b/src/ui/atoms/upload-area/index.tsx index 0cb8d780..8646c23d 100644 --- a/src/ui/atoms/upload-area/index.tsx +++ b/src/ui/atoms/upload-area/index.tsx @@ -26,10 +26,10 @@ export const UploadArea = styled(UploadAreaBase)` --local-border-color: var(--woly-canvas-hover); --local-background-color: var(--woly-canvas-disabled); + position: relative; + width: 100%; height: 100%; - - position: relative; overflow: auto; background-color: var(--local-background-color); @@ -40,6 +40,7 @@ export const UploadArea = styled(UploadAreaBase)` position: absolute; top: 50%; left: 50%; + transform: translate(-50%, -50%); } @@ -49,16 +50,16 @@ export const UploadArea = styled(UploadAreaBase)` outline: none; [data-overlay] { - width: 100%; - height: 100%; - position: absolute; - z-index: 1; top: 50%; left: 50%; - transform: translate(-50%, -50%); + z-index: 1; + + width: 100%; + height: 100%; background: rgba(110, 59, 254, 0.05); + transform: translate(-50%, -50%); } } ` as StyledComponent<'div', Record, UploadAreaProps & Variant>; diff --git a/src/ui/elements/input-container/index.tsx b/src/ui/elements/input-container/index.tsx index ff69b61f..293409ec 100644 --- a/src/ui/elements/input-container/index.tsx +++ b/src/ui/elements/input-container/index.tsx @@ -39,27 +39,28 @@ export const InputContainer = styled(InputContainerBase)` --local-icon-fill: var(--woly-canvas-text-active); --local-value-color: var(--woly-canvas-text-default); - width: 100%; - outline: none; - - padding: calc(var(--local-vertical) - var(--woly-border-width)) 0; + display: flex; + align-items: center; box-sizing: border-box; - display: flex; - align-items: center; + width: 100%; + + padding: calc(var(--local-vertical) - var(--woly-border-width)) 0; background: var(--local-background-color); border: var(--woly-border-width) solid var(--local-border-color); border-radius: var(--woly-rounding); + outline: none; [data-input='input'] { flex: 1; - color: var(--local-value-color); padding: 0 var(--local-horizontal); + color: var(--local-value-color); + input { padding: 0; } @@ -102,12 +103,11 @@ export const InputContainer = styled(InputContainerBase)` } &:focus-within { + outline: none; box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); --local-border-color: var(--woly-focus); --local-icon-fill: var(--woly-canvas-text-default); - - outline: none; } &[data-disabled='true'] { diff --git a/src/ui/elements/input-element/index.tsx b/src/ui/elements/input-element/index.tsx index 3f71f7c2..be58eb0f 100644 --- a/src/ui/elements/input-element/index.tsx +++ b/src/ui/elements/input-element/index.tsx @@ -36,14 +36,15 @@ export const InputElement = styled(InputElementBase)` width: 100%; + padding: 0; + + color: var(--local-value-color); + font-size: var(--woly-font-size); line-height: var(--woly-line-height); - color: var(--local-value-color); background: var(--local-background); - padding: 0; - border: none; outline: none; diff --git a/src/ui/molecules/accordion/index.tsx b/src/ui/molecules/accordion/index.tsx index 54c420ee..043057eb 100644 --- a/src/ui/molecules/accordion/index.tsx +++ b/src/ui/molecules/accordion/index.tsx @@ -67,6 +67,7 @@ export const Accordion = styled(AccordionBase)` input { display: none; + outline: none; } @@ -74,17 +75,17 @@ export const Accordion = styled(AccordionBase)` display: flex; align-items: center; + margin-bottom: var(--woly-border-width); + + padding: var(--local-vertical) var(--local-horizontal); + background: var(--local-background-color); border-bottom: var(--woly-border-width) solid var(--local-border-color); border-radius: var(--woly-rounding); - padding: var(--local-vertical) var(--local-horizontal); - outline: none; - margin-bottom: var(--woly-border-width); - &:hover { --local-background-color: var(--woly-canvas-disabled); } @@ -101,9 +102,9 @@ export const Accordion = styled(AccordionBase)` [data-icon] { display: flex; + flex-shrink: 0; align-items: center; justify-content: center; - flex-shrink: 0; width: var(--local-icon-size); height: var(--local-icon-size); @@ -128,8 +129,8 @@ export const Accordion = styled(AccordionBase)` [data-open='true'] ~ [data-content] { display: inline-block; + width: 100%; height: auto; - width: 100%; } ` as StyledComponent<'div', Record, AccordionProps & Variant>; diff --git a/src/ui/molecules/checkbox/index.tsx b/src/ui/molecules/checkbox/index.tsx index 7a743b64..f7badef2 100644 --- a/src/ui/molecules/checkbox/index.tsx +++ b/src/ui/molecules/checkbox/index.tsx @@ -81,9 +81,10 @@ export const Checkbox = styled(CheckboxBase)` padding: var(--local-vertical) var(--local-horizontal); - user-select: none; outline: none; + user-select: none; + &:focus [data-checkmark] > svg, &:active [data-checkmark] > svg { box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); diff --git a/src/ui/molecules/modal/index.tsx b/src/ui/molecules/modal/index.tsx index 966d30cb..af4009c5 100644 --- a/src/ui/molecules/modal/index.tsx +++ b/src/ui/molecules/modal/index.tsx @@ -54,18 +54,20 @@ const ModalBase: React.FC = ({ }; const Shape = styled(Surface)` - z-index: 1; - padding: var(--local-padding-top) var(--local-padding) var(--local-padding); - - width: fit-content; position: relative; + top: 50%; left: 50%; - top: 50%; - transform: translate(-50%, -50%); + z-index: 1; + + box-sizing: border-box; + + width: fit-content; max-height: 100vh; + padding: var(--local-padding-top) var(--local-padding) var(--local-padding); overflow: scroll; - box-sizing: border-box; + + transform: translate(-50%, -50%); `; export const Modal = styled(ModalBase)` @@ -78,15 +80,15 @@ export const Modal = styled(ModalBase)` --local-padding-top: calc( var(--woly-const-m) * (var(--woly-component-level) + 1) + var(--local-padding) ); - - visibility: hidden; - opacity: 0; position: fixed; top: 0; - bottom: 0; right: 0; + bottom: 0; left: 0; + visibility: hidden; + opacity: 0; + &[data-visible='true'] { visibility: visible; opacity: 1; @@ -94,10 +96,11 @@ export const Modal = styled(ModalBase)` [data-icon] { position: absolute; - width: var(--local-icon-size); - height: var(--local-icon-size); top: var(--local-icon-position); right: var(--local-icon-position); + + width: var(--local-icon-size); + height: var(--local-icon-size); padding: var(--local-icon-padding); } diff --git a/src/ui/molecules/popover/index.tsx b/src/ui/molecules/popover/index.tsx index b07ec3eb..3078179a 100644 --- a/src/ui/molecules/popover/index.tsx +++ b/src/ui/molecules/popover/index.tsx @@ -98,10 +98,12 @@ export const Popover = styled(PopoverBase)` [data-popover] { position: absolute; - visibility: hidden; - opacity: 0; z-index: 1; + min-width: 100%; + + visibility: hidden; + opacity: 0; } & > [data-open='true'] { diff --git a/src/ui/molecules/radio-button/index.tsx b/src/ui/molecules/radio-button/index.tsx index e72f9d00..04b04b54 100644 --- a/src/ui/molecules/radio-button/index.tsx +++ b/src/ui/molecules/radio-button/index.tsx @@ -82,11 +82,12 @@ export const RadioButton = styled(RadioButtonBase)` display: flex; align-items: center; - outline: none; - border-radius: var(--local-border-rounding); margin-right: var(--local-vertical); + border-radius: var(--local-border-rounding); + outline: none; + label { display: flex; align-items: center; @@ -95,6 +96,7 @@ export const RadioButton = styled(RadioButtonBase)` input { display: none; + outline: none; } } @@ -107,24 +109,24 @@ export const RadioButton = styled(RadioButtonBase)` width: var(--local-radio-size); height: var(--local-radio-size); + margin-right: var(--local-gap); + background: var(--local-background); - border-radius: var(--local-border-rounding); border: var(--woly-border-width) solid var(--local-border-color); - - margin-right: var(--local-gap); + border-radius: var(--local-border-rounding); } input:checked + [data-checkbox] { --local-border-color: var(--woly-shape-default); &:before { - content: ''; - width: var(--local-ellipse-size); height: var(--local-ellipse-size); background-color: var(--local-icon-fill); border-radius: var(--local-border-rounding); + + content: ''; } &:hover { @@ -138,16 +140,22 @@ export const RadioButton = styled(RadioButtonBase)` } } - &:hover { - --local-border-color: var(--woly-shape-hover); + &:focus > label > [data-checkbox] { + box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); } &:active > label > [data-checkbox] { --local-border-color: var(--woly-shape-active); } - &:focus > label > [data-checkbox] { - box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus); + &:hover { + --local-border-color: var(--woly-shape-hover); + } + + [data-text] { + color: var(--local-color-text); + font-size: var(--woly-font-size); + line-height: var(--woly-line-height); } &[data-disabled='true'] { @@ -166,10 +174,4 @@ export const RadioButton = styled(RadioButtonBase)` --local-color-text: var(--woly-canvas-text-disabled); } } - - [data-text] { - font-size: var(--woly-font-size); - line-height: var(--woly-line-height); - color: var(--local-color-text); - } ` as StyledComponent<'div', Record, RadioButtonProps & Variant>; diff --git a/src/ui/molecules/select/index.tsx b/src/ui/molecules/select/index.tsx index ebe23b3c..e54aeaaf 100644 --- a/src/ui/molecules/select/index.tsx +++ b/src/ui/molecules/select/index.tsx @@ -123,6 +123,7 @@ export const Select = styled(SelectBase)` --local-icon-size: var(--woly-line-height); position: relative; + align-items: center; width: 100%; @@ -132,15 +133,16 @@ export const Select = styled(SelectBase)` [data-selected] { display: flex; align-items: center; + box-sizing: border-box; padding: var(--local-vertical) var(--local-horizontal); + + color: var(--local-shape-color); + background: var(--local-background); border: var(--woly-border-width) solid var(--local-border-input-color); border-radius: var(--woly-rounding); - box-sizing: border-box; - - color: var(--local-shape-color); [data-value] { flex: 1; @@ -153,37 +155,38 @@ export const Select = styled(SelectBase)` [data-icon] { display: flex; + flex-shrink: 1; align-items: center; justify-content: center; - flex-shrink: 1; width: var(--local-icon-size); height: var(--local-icon-size); svg > path { - height: 100%; width: 100%; + height: 100%; fill: var(--local-shape-color); } } ul { - display: none; - list-style-type: none; - position: absolute; z-index: 1; + + display: none; width: 100%; + margin-top: var(--local-gap); + + padding: 0; + + list-style-type: none; background: var(--local-list-background); border: var(--woly-border-width) solid var(--local-border-list); border-radius: var(--woly-rounding); - padding: 0; - margin-top: var(--local-gap); - box-shadow: var(--woly-shadow); } @@ -197,10 +200,11 @@ export const Select = styled(SelectBase)` li { padding: var(--local-vertical) var(--local-horizontal); + color: var(--local-shape-color); + line-height: var(--woly-line-height); background: var(--local-background); - color: var(--local-shape-color); cursor: pointer; diff --git a/src/ui/molecules/switch/index.tsx b/src/ui/molecules/switch/index.tsx index 15a168ed..0ee824f5 100644 --- a/src/ui/molecules/switch/index.tsx +++ b/src/ui/molecules/switch/index.tsx @@ -74,35 +74,44 @@ export const Switch = styled(SwitchBase)` --local-switch-margin: 3px; position: relative; + display: flex; align-items: center; + outline: none; label { width: var(--local-switch-width); height: var(--local-switch-height); + cursor: pointer; input { display: none; + outline: none; } } [data-checkbox] { position: absolute; + width: var(--local-switch-width); height: var(--local-switch-height); + background-color: var(--local-shape); border-radius: var(--local-switch-border-radius); &:before { position: absolute; + width: var(--local-tumbler-width); height: var(--local-tumbler-height); margin: var(--local-switch-margin); + background-color: var(--local-tumbler-background); border-radius: var(--local-tumbler-border-radius); + content: ''; } } @@ -140,6 +149,7 @@ export const Switch = styled(SwitchBase)` &:before { width: var(--local-tumbler-width-active); + box-shadow: none; } } diff --git a/src/ui/templates/grid/index.tsx b/src/ui/templates/grid/index.tsx index ef139b17..f99b718c 100644 --- a/src/ui/templates/grid/index.tsx +++ b/src/ui/templates/grid/index.tsx @@ -18,8 +18,8 @@ const columnMap = (properties: ColumnProps) => ({ export const Grid = styled.div.attrs(map)` display: grid; - width: 100%; grid-template-columns: repeat(var(--local-columns), 1fr); + width: 100%; ` as StyledComponent<'div', Record, GridProps>; export const Column = styled.div.attrs(columnMap)`