From 291c15419cb478a6c6034e7b55c2634a35e3a157 Mon Sep 17 00:00:00 2001 From: arturbien Date: Tue, 1 Nov 2022 21:40:24 +0100 Subject: [PATCH 1/3] WIP --- src/Checkbox/Checkbox.tsx | 15 +++--- src/Handle/Handle.stories.tsx | 4 +- src/MenuList/MenuList.tsx | 3 +- src/ProgressBar/ProgressBar.tsx | 85 +++++++++++++-------------------- src/Radio/Radio.tsx | 22 ++++++--- src/ScrollView/ScrollView.tsx | 35 +++----------- src/Select/Select.styles.tsx | 13 ++--- src/Select/Select.tsx | 2 - src/Slider/Slider.tsx | 18 +++---- src/Table/TableBody.tsx | 2 - src/Tabs/Tab.tsx | 8 ++-- src/Window/Window.stories.tsx | 2 +- src/Window/Window.tsx | 6 ++- src/common/index.ts | 77 +++++++++++++---------------- src/types.ts | 1 - 15 files changed, 123 insertions(+), 170 deletions(-) diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index e1196985..b1d69c84 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -129,13 +129,14 @@ const CheckmarkIcon = styled.span.attrs(() => ({ ? theme.checkmarkDisabled : theme.checkmark}; `} - ${StyledMenuListItem}:hover & { - ${({ $disabled, theme, variant }) => - !$disabled && - variant === 'menu' && - css` - border-color: ${theme.materialTextInvert}; - `}; + ${StyledMenuListItem}:hover & { + ${({ $disabled, theme, variant }) => + !$disabled && + variant === 'menu' && + css` + border-color: ${theme.materialTextInvert}; + `}; + } } `; const IndeterminateIcon = styled.span.attrs(() => ({ diff --git a/src/Handle/Handle.stories.tsx b/src/Handle/Handle.stories.tsx index a6a9fe04..caa253ae 100644 --- a/src/Handle/Handle.stories.tsx +++ b/src/Handle/Handle.stories.tsx @@ -18,12 +18,12 @@ export function Default() { return ( - + - + ); diff --git a/src/MenuList/MenuList.tsx b/src/MenuList/MenuList.tsx index 57b57848..d0435c0e 100644 --- a/src/MenuList/MenuList.tsx +++ b/src/MenuList/MenuList.tsx @@ -16,7 +16,8 @@ const MenuList = styled.ul.attrs(() => ({ }))` box-sizing: border-box; width: ${props => (props.fullWidth ? '100%' : 'auto')}; - padding: 4px; + /* 6px padding to make up for borders (4px) and leave 2px padding around MenuListItem elements */ + padding: 6px; ${createBorderStyles({ style: 'window' })} ${createBoxStyles()} ${props => diff --git a/src/ProgressBar/ProgressBar.tsx b/src/ProgressBar/ProgressBar.tsx index 349f8079..99edccb7 100644 --- a/src/ProgressBar/ProgressBar.tsx +++ b/src/ProgressBar/ProgressBar.tsx @@ -19,12 +19,6 @@ type ProgressBarProps = { } & React.HTMLAttributes & CommonStyledProps; -const Wrapper = styled.div>>` - display: inline-block; - height: ${blockSizes.md}; - width: 100%; -`; - const ProgressCutout = styled(StyledScrollView)< Required> >` @@ -32,35 +26,30 @@ const ProgressCutout = styled(StyledScrollView)< height: 100%; position: relative; text-align: center; - padding: 0; overflow: hidden; - &:before { - z-index: 1; - } + display: inline-block; + height: ${blockSizes.md}; + width: 100%; `; const commonBarStyles = css` - width: calc(100% - 4px); - height: calc(100% - 4px); - + position: absolute; + top: 4px; + left: 4px; + right: 4px; + bottom: 4px; display: flex; align-items: center; justify-content: space-around; `; + const WhiteBar = styled.div` - position: relative; - top: 4px; ${commonBarStyles} background: ${({ theme }) => theme.canvas}; color: #000; - margin-left: 2px; - margin-top: -2px; color: ${({ theme }) => theme.materialText}; `; const BlueBar = styled.div>` - position: absolute; - top: 2px; - left: 2px; ${commonBarStyles} color: ${({ theme }) => theme.materialTextInvert}; background: ${({ theme }) => theme.progress}; @@ -74,11 +63,13 @@ const BlueBar = styled.div>` `; const TilesWrapper = styled.div` - width: calc(100% - 6px); - height: calc(100% - 8px); position: absolute; - left: 3px; - top: 4px; + left: 6px; + top: 6px; + right: 6px; + bottom: 6px; + /* -1px horizontal margin to make up for the Tile border */ + margin: 0 -1px; box-sizing: border-box; display: inline-flex; `; @@ -89,22 +80,14 @@ const Tile = styled.span` box-sizing: border-box; height: 100%; background: ${({ theme }) => theme.progress}; + background-clip: padding-box; border-color: ${({ theme }) => theme.material}; border-width: 0px 1px; border-style: solid; `; const ProgressBar = forwardRef( - ( - { - hideValue = false, - shadow = true, - value, - variant = 'default', - ...otherProps - }, - ref - ) => { + ({ hideValue = false, value, variant = 'default', ...otherProps }, ref) => { const displayValue = hideValue ? null : `${value}%`; const tilesWrapperRef = useRef(null); @@ -131,30 +114,28 @@ const ProgressBar = forwardRef( }, [updateTilesNumber]); return ( - - - {variant === 'default' ? ( - - {displayValue} - - {displayValue} - - - ) : ( - - {tiles.map((_, index) => ( - - ))} - - )} - - + {variant === 'default' ? ( + + {displayValue} + + {displayValue} + + + ) : ( + + {tiles.map((_, index) => ( + + ))} + + )} + ); } ); diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index f49b51ca..f11f8ff4 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -9,7 +9,6 @@ import { StyledLabel } from '../common/SwitchBase'; import { StyledMenuListItem } from '../MenuList/MenuList'; -import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonStyledProps } from '../types'; type RadioVariant = 'default' | 'flat' | 'menu'; @@ -44,11 +43,18 @@ type StyledCheckboxProps = { $disabled: boolean; }; -const StyledCheckbox = styled(StyledScrollView)` +// had to style borders here instead of using ScrollView or createBorderStyles +// due to round shape (box-shadow based borders only look good for rectangular elements) +const StyledCheckbox = styled.div` ${sharedCheckboxStyles} - background: ${({ $disabled, theme }) => - $disabled ? theme.material : theme.canvas}; - + box-sizing: border-box; + position: relative; + background: ${props => props.theme.canvas}; + border-color: ${props => props.theme.borderDark} + ${props => props.theme.borderLightest} + ${props => props.theme.borderLightest} ${props => props.theme.borderDark}; + border-style: solid; + border-width: 2px; &:before { content: ''; position: absolute; @@ -57,7 +63,11 @@ const StyledCheckbox = styled(StyledScrollView)` width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; - box-shadow: none; + border-color: ${props => props.theme.borderDarkest} + ${props => props.theme.borderLight} ${props => props.theme.borderLight} + ${props => props.theme.borderDarkest}; + border-style: solid; + border-width: 2px; } `; const StyledFlatCheckbox = styled.div` diff --git a/src/ScrollView/ScrollView.tsx b/src/ScrollView/ScrollView.tsx index 632ae1e3..8fcd0e6d 100644 --- a/src/ScrollView/ScrollView.tsx +++ b/src/ScrollView/ScrollView.tsx @@ -1,44 +1,21 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; -import { insetShadow, createScrollbars } from '../common'; +import { createScrollbars, createBorderStyles } from '../common'; import { CommonStyledProps } from '../types'; type ScrollViewProps = { children?: React.ReactNode; - shadow?: boolean; } & React.HTMLAttributes & CommonStyledProps; -export const StyledScrollView = styled.div>` +export const StyledScrollView = styled.div` position: relative; box-sizing: border-box; - padding: 2px; font-size: 1rem; - border-style: solid; - border-width: 2px; - border-left-color: ${({ theme }) => theme.borderDark}; - border-top-color: ${({ theme }) => theme.borderDark}; - border-right-color: ${({ theme }) => theme.borderLightest}; - border-bottom-color: ${({ theme }) => theme.borderLightest}; line-height: 1.5; - &:before { - position: absolute; - left: 0; - top: 0; - content: ''; - width: calc(100% - 4px); - height: calc(100% - 4px); - border-style: solid; - border-width: 2px; - border-left-color: ${({ theme }) => theme.borderDarkest}; - border-top-color: ${({ theme }) => theme.borderDarkest}; - border-right-color: ${({ theme }) => theme.borderLight}; - border-bottom-color: ${({ theme }) => theme.borderLight}; - - pointer-events: none; - ${props => props.shadow && `box-shadow:${insetShadow};`} - } + padding: 4px; + ${createBorderStyles({ style: 'field' })}; `; const Content = styled.div` @@ -51,9 +28,9 @@ const Content = styled.div` `; const ScrollView = forwardRef( - ({ children, shadow = true, ...otherProps }, ref) => { + ({ children, ...otherProps }, ref) => { return ( - + {children} ); diff --git a/src/Select/Select.styles.tsx b/src/Select/Select.styles.tsx index 4697e4f6..84ed2040 100644 --- a/src/Select/Select.styles.tsx +++ b/src/Select/Select.styles.tsx @@ -132,9 +132,9 @@ export const StyledDropdownButton = styled(Button).attrs(() => ({ ` : ` position: absolute; - top: 2px; - right: 2px; - height: calc(100% - 4px); + top: 4px; + right: 4px; + height: calc(100% - 8px); `)} pointer-events: ${({ $disabled = false, native = false }) => $disabled || native ? 'none' : 'auto'} @@ -170,7 +170,6 @@ export const StyledDropdownMenu = styled.ul` font-size: 1rem; position: absolute; transform: translateY(100%); - left: 0; background: ${({ theme }) => theme.canvas}; padding: 2px; border-top: none; @@ -181,13 +180,15 @@ export const StyledDropdownMenu = styled.ul` ${({ variant = 'default' }) => variant === 'flat' ? css` + left: 0; bottom: 2px; width: 100%; border: 2px solid ${({ theme }) => theme.flatDark}; ` : css` - bottom: -2px; - width: calc(100% - 2px); + left: 2px; + right: 4px; + bottom: 0; border: 2px solid ${({ theme }) => theme.borderDarkest}; `} ${({ variant = 'default' }) => createScrollbars(variant)} diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx index 1f195a7a..f503b0da 100644 --- a/src/Select/Select.tsx +++ b/src/Select/Select.tsx @@ -95,7 +95,6 @@ function SelectInner( open: openProp, options: optionsProp, readOnly, - shadow = true, style, variant = 'default', value: valueProp, @@ -229,7 +228,6 @@ function SelectInner( {...wrapperProps} $disabled={disabled} ref={wrapperRef} - shadow={shadow} style={{ ...style, width }} > css` const StyledGroove = styled(StyledScrollView)` ${sharedGrooveStyles()} `; -const StyledFlatGroove = styled(StyledScrollView)` +const StyledFlatGroove = styled.div` ${sharedGrooveStyles()} - - border-left-color: ${({ theme }) => theme.flatLight}; - border-top-color: ${({ theme }) => theme.flatLight}; - border-right-color: ${({ theme }) => theme.canvas}; - border-bottom-color: ${({ theme }) => theme.canvas}; - &:before { - border-left-color: ${({ theme }) => theme.flatDark}; - border-top-color: ${({ theme }) => theme.flatDark}; - border-right-color: ${({ theme }) => theme.flatLight}; - border-bottom-color: ${({ theme }) => theme.flatLight}; - } + box-shadow: inset -2px -2px ${({ theme }) => + theme.canvas}, inset 2px 2px ${({ theme }) => theme.flatLight}, + inset -4px -4px ${({ theme }) => theme.flatLight}, inset 4px 4px ${({ + theme + }) => theme.flatDark}; `; const Thumb = styled.span` position: relative; diff --git a/src/Table/TableBody.tsx b/src/Table/TableBody.tsx index 542de3a0..53de5f0b 100644 --- a/src/Table/TableBody.tsx +++ b/src/Table/TableBody.tsx @@ -1,6 +1,5 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; -import { insetShadow } from '../common'; import { CommonStyledProps } from '../types'; type TableBodyProps = { @@ -11,7 +10,6 @@ type TableBodyProps = { const StyledTableBody = styled.tbody` background: ${({ theme }) => theme.canvas}; display: table-row-group; - box-shadow: ${insetShadow}; overflow-y: auto; `; diff --git a/src/Tabs/Tab.tsx b/src/Tabs/Tab.tsx index 17f0666f..7f491946 100644 --- a/src/Tabs/Tab.tsx +++ b/src/Tabs/Tab.tsx @@ -18,6 +18,8 @@ type TabProps = { const StyledTab = styled.button` ${createBoxStyles()} ${createBorderStyles()} + border: none; + appearance: none; position: relative; display: inline-flex; align-items: center; @@ -61,11 +63,11 @@ const StyledTab = styled.button` &:before { content: ''; position: absolute; - width: calc(100% - 4px); + width: calc(100% - 8px); height: 6px; background: ${({ theme }) => theme.material}; - bottom: -4px; - left: 2px; + bottom: 2px; + left: 4px; } `; diff --git a/src/Window/Window.stories.tsx b/src/Window/Window.stories.tsx index 06c88960..103f6e82 100644 --- a/src/Window/Window.stories.tsx +++ b/src/Window/Window.stories.tsx @@ -55,7 +55,7 @@ const Wrapper = styled.div` } .footer { display: block; - margin: 0.25rem; + margin: 4px; height: 31px; line-height: 31px; padding-left: 0.25rem; diff --git a/src/Window/Window.tsx b/src/Window/Window.tsx index 79c003dd..d1264167 100644 --- a/src/Window/Window.tsx +++ b/src/Window/Window.tsx @@ -23,10 +23,12 @@ const ResizeHandle = styled.span` ${({ theme }) => css` display: inline-block; position: absolute; - bottom: 10px; - right: 10px; + bottom: 0; + right: 0; width: 25px; height: 25px; + border-right: 8px solid transparent; + border-bottom: 8px solid transparent; background-image: linear-gradient( 135deg, ${theme.borderLightest} 16.67%, diff --git a/src/common/index.ts b/src/common/index.ts index 6789ed15..6b1f2922 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -2,7 +2,6 @@ import { css } from 'styled-components'; import { Color, CommonThemeProps, Theme } from '../types'; export const shadow = '4px 4px 10px 0 rgba(0, 0, 0, 0.35)'; -export const insetShadow = 'inset 2px 2px 3px rgba(0,0,0,0.2)'; export const createDisabledTextStyles = () => css` -webkit-text-fill-color: ${({ theme }) => theme.materialTextDisabled}; @@ -131,32 +130,6 @@ const borderStyles: Record = { } }; -export const createInnerBorderWithShadow = ({ - theme, - topLeftInner, - bottomRightInner, - hasShadow = false, - hasInsetShadow = false -}: { - theme: Theme; - topLeftInner: keyof Theme | null; - bottomRightInner: keyof Theme | null; - hasShadow?: boolean; - hasInsetShadow?: boolean; -}) => - [ - hasShadow ? shadow : false, - hasInsetShadow ? insetShadow : false, - topLeftInner !== null - ? `inset 1px 1px 0px 1px ${theme[topLeftInner]}` - : false, - bottomRightInner !== null - ? `inset -1px -1px 0 1px ${theme[bottomRightInner]}` - : false - ] - .filter(Boolean) - .join(', '); - export const createBorderStyles = ({ invert = false, style = 'button' @@ -167,26 +140,42 @@ export const createBorderStyles = ({ bottomRightInner: invert ? 'topLeftInner' : 'bottomRightInner', bottomRightOuter: invert ? 'topLeftOuter' : 'bottomRightOuter' } as const; + const topLeftInner = borderStyles[style][borders.topLeftInner]; + const bottomRightInner = borderStyles[style][borders.bottomRightInner]; return css` - border-style: solid; - border-width: 2px; - border-left-color: ${({ theme }) => - theme[borderStyles[style][borders.topLeftOuter]]}; - border-top-color: ${({ theme }) => - theme[borderStyles[style][borders.topLeftOuter]]}; - border-right-color: ${({ theme }) => - theme[borderStyles[style][borders.bottomRightOuter]]}; - border-bottom-color: ${({ theme }) => - theme[borderStyles[style][borders.bottomRightOuter]]}; - box-shadow: ${({ theme, shadow: hasShadow }) => - createInnerBorderWithShadow({ - theme, - topLeftInner: borderStyles[style][borders.topLeftInner], - bottomRightInner: borderStyles[style][borders.bottomRightInner], - hasShadow - })}; + box-shadow: inset -2px -2px + ${({ theme }) => theme[borderStyles[style][borders.bottomRightOuter]]}, + inset 2px 2px + ${({ theme }) => theme[borderStyles[style][borders.topLeftOuter]]}, + inset -4px -4px + ${({ theme }) => + bottomRightInner ? theme[bottomRightInner] : 'transparent'}, + inset 4px 4px + ${({ theme }) => (topLeftInner ? theme[topLeftInner] : 'transparent')}; `; }; +// background: linear-gradient( +// to bottom, +// ${({ theme }) => theme[borderStyles[style][borders.topLeftOuter]]}, +// ${({ theme }) => (topLeftInner ? theme[topLeftInner] : 'transparent')}, +// transparent 4px, +// transparent calc(100% - 4px), +// ${({ theme }) => +// bottomRightInner ? theme[bottomRightInner] : 'transparent'}, +// ${({ theme }) => theme[borderStyles[style][borders.bottomRightOuter]]} +// ), +// linear-gradient( +// to right, +// ${({ theme }) => theme[borderStyles[style][borders.topLeftOuter]]}, +// ${({ theme }) => (topLeftInner ? theme[topLeftInner] : 'transparent')}, +// transparent 4px, +// transparent calc(100% - 4px), +// ${({ theme }) => +// bottomRightInner ? theme[bottomRightInner] : 'transparent'}, +// ${({ theme }) => theme[borderStyles[style][borders.bottomRightOuter]]} +// ); +// background-blend-mode: hard-light; +// border-radius: 2px; /** @deprecated Use `createBorderStyles` instead */ export const createWellBorderStyles = (invert = false) => diff --git a/src/types.ts b/src/types.ts index 9e75b220..6b0dc911 100644 --- a/src/types.ts +++ b/src/types.ts @@ -24,7 +24,6 @@ export type HTMLDataAttributes = Record<`data-${string}`, any>; export type CommonThemeProps = { 'data-testid'?: string; $disabled?: boolean; - shadow?: boolean; }; export { Color, Theme, WindowsTheme }; From ea6e6f2f06d92b83b4f5a5d8d697ec0ba3673dc2 Mon Sep 17 00:00:00 2001 From: arturbien Date: 2022年11月30日 13:59:03 +0100 Subject: [PATCH 2/3] WIP --- src/Frame/Frame.tsx | 3 ++- src/common/index.ts | 48 +++++++++++++++++++-------------------------- 2 files changed, 22 insertions(+), 29 deletions(-) diff --git a/src/Frame/Frame.tsx b/src/Frame/Frame.tsx index 8094ee14..1a38a4ab 100644 --- a/src/Frame/Frame.tsx +++ b/src/Frame/Frame.tsx @@ -44,13 +44,14 @@ const createFrameStyles = (variant: FrameProps['variant']) => { const StyledFrame = styled.div>>` position: relative; font-size: 1rem; - ${({ variant }) => createFrameStyles(variant)} + ${({ variant }) => createBoxStyles( variant === 'field' ? { background: 'canvas', color: 'canvasText' } : undefined )} + ${({ variant }) => createFrameStyles(variant)} `; const Frame = forwardRef( diff --git a/src/common/index.ts b/src/common/index.ts index 6b1f2922..5192113f 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -143,39 +143,31 @@ export const createBorderStyles = ({ const topLeftInner = borderStyles[style][borders.topLeftInner]; const bottomRightInner = borderStyles[style][borders.bottomRightInner]; return css` - box-shadow: inset -2px -2px - ${({ theme }) => theme[borderStyles[style][borders.bottomRightOuter]]}, - inset 2px 2px + background: linear-gradient( + to bottom, ${({ theme }) => theme[borderStyles[style][borders.topLeftOuter]]}, - inset -4px -4px + ${({ theme }) => (topLeftInner ? theme[topLeftInner] : 'transparent')}, + transparent 4px, + transparent calc(100% - 4px), ${({ theme }) => bottomRightInner ? theme[bottomRightInner] : 'transparent'}, - inset 4px 4px - ${({ theme }) => (topLeftInner ? theme[topLeftInner] : 'transparent')}; + ${({ theme }) => theme[borderStyles[style][borders.bottomRightOuter]]} + ), + linear-gradient( + to right, + ${({ theme }) => theme[borderStyles[style][borders.topLeftOuter]]}, + ${({ theme }) => (topLeftInner ? theme[topLeftInner] : 'transparent')}, + transparent 4px, + transparent calc(100% - 4px), + ${({ theme }) => + bottomRightInner ? theme[bottomRightInner] : 'transparent'}, + ${({ theme }) => theme[borderStyles[style][borders.bottomRightOuter]]} + ); + background-blend-mode: hard-light; + border-radius: 2px; + /* border: 1px solid ${p => p.theme.borderDarkest}; */ `; }; -// background: linear-gradient( -// to bottom, -// ${({ theme }) => theme[borderStyles[style][borders.topLeftOuter]]}, -// ${({ theme }) => (topLeftInner ? theme[topLeftInner] : 'transparent')}, -// transparent 4px, -// transparent calc(100% - 4px), -// ${({ theme }) => -// bottomRightInner ? theme[bottomRightInner] : 'transparent'}, -// ${({ theme }) => theme[borderStyles[style][borders.bottomRightOuter]]} -// ), -// linear-gradient( -// to right, -// ${({ theme }) => theme[borderStyles[style][borders.topLeftOuter]]}, -// ${({ theme }) => (topLeftInner ? theme[topLeftInner] : 'transparent')}, -// transparent 4px, -// transparent calc(100% - 4px), -// ${({ theme }) => -// bottomRightInner ? theme[bottomRightInner] : 'transparent'}, -// ${({ theme }) => theme[borderStyles[style][borders.bottomRightOuter]]} -// ); -// background-blend-mode: hard-light; -// border-radius: 2px; /** @deprecated Use `createBorderStyles` instead */ export const createWellBorderStyles = (invert = false) => From 8ed69781ae649467eff0746bebf12f6b31532870 Mon Sep 17 00:00:00 2001 From: arturbien Date: 2023年2月18日 17:32:39 +0100 Subject: [PATCH 3/3] WIP --- src/common/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/index.ts b/src/common/index.ts index 5192113f..e6a1720c 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -19,7 +19,7 @@ export const createBoxStyles = ({ } = {}) => css` box-sizing: border-box; display: inline-block; - background: ${({ theme }) => theme[background]}; + background-color: ${({ theme }) => theme[background]}; color: ${({ theme }) => theme[color]}; `;

AltStyle によって変換されたページ (->オリジナル) /