Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.

Commit

Permalink
fix: fix border width in components
Browse files Browse the repository at this point in the history
  • Loading branch information
tatinacher committed May 4, 2021
1 parent 6c649d5 commit 3489c7c
Show file tree
Hide file tree
Showing 9 changed files with 30 additions and 47 deletions.
4 changes: 1 addition & 3 deletions src/lib/box-styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,6 @@ export const Global = styled.div`
}
[data-variant='secondary'] {
--woly-border-width: 1.5px;
--woly-background: #ffffff;
--woly-border: #b0a3f4;
--woly-color: #b0a3f4;
Expand Down Expand Up @@ -185,7 +183,7 @@ const Frame = styled.div`
max-width: 100%;
padding: 1rem;
overflow: auto;
border: 2px solid var(--base, rgb(246, 248, 250));
border: 2px solid rgb(246, 248, 250);
border-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/ui/atoms/button-floating/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const ButtonFloating = styled(ButtonFloatingBase)`
border-color: var(--woly-border, #000000);
border-style: solid;
border-width: var(--woly-border-width, 0);
border-width: var(--woly-border-width);
border-radius: 50%;
cursor: pointer;
Expand Down
2 changes: 1 addition & 1 deletion src/ui/atoms/button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const Button = styled(ButtonBase)`
}
&:focus {
box-shadow: 0 0 0 1.5px var(--woly-focus);
box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
}
&:disabled {
Expand Down
6 changes: 3 additions & 3 deletions src/ui/atoms/chip/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export const Chip = styled(ChipBase)`
}
[role='button']:focus {
box-shadow: 0 0 0 1px var(--woly-border-focus, #9381f1);
box-shadow: 0 0 0 var(--woly-border-width) var(--woly-border-focus, #9381f1);
}
[role='button']:hover {
Expand Down Expand Up @@ -158,7 +158,7 @@ export const Chip = styled(ChipBase)`
border-color: var(--woly-border, transparent);
border-style: solid;
border-width: var(--woly-border-width, 0);
border-width: var(--woly-border-width);
border-radius: var(--woly-rounding, 3px);
outline: none;
Expand Down Expand Up @@ -191,7 +191,7 @@ export const Chip = styled(ChipBase)`
}
&:focus {
box-shadow: 0 0 0 1px var(--woly-border-focus, #9381f1);
box-shadow: 0 0 0 var(--woly-border-width) var(--woly-border-focus, #9381f1);
}
}
` as StyledComponent<'div', Record<string, unknown>, ChipProps & Variant>;
21 changes: 7 additions & 14 deletions src/ui/atoms/list/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,22 +56,15 @@ const ListBase: React.FC<List & Variant> = ({
tabIndex={tabIndex}
>
{list.map(({ left, right, text, id, onClick, disabled }) => (
<li
data-disabled={disabled}
data-type="list-item"
key={id}
onClick={onClick}
tabIndex={-1}
>
<li data-disabled={disabled} data-type="list-item" key={id} onClick={onClick} tabIndex={-1}>
{left && <span data-icon="left">{left}</span>}
<span data-text="text">{text}</span>
{right && <span data-icon="right">{right}</span>}
</li>
))}
</ul>
);
}

};

export const List = styled(ListBase)`
--local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
Expand Down Expand Up @@ -122,7 +115,7 @@ export const List = styled(ListBase)`
padding: 0 var(--local-horizontal);
}
& > [data-text]:not(:only-child, :last-child ){
& > [data-text]:not(:only-child, :last-child) {
padding-right: 0;
}
Expand Down Expand Up @@ -176,9 +169,9 @@ export const List = styled(ListBase)`
}
}
}
&:focus {
box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
}
&[data-disabled='true'] {
Expand All @@ -190,7 +183,7 @@ export const List = styled(ListBase)`
}
[data-icon] {
--local-color: var(--woly-canvas-text-disabled);
}
--local-color: var(--woly-canvas-text-disabled);
}
}
` as StyledComponent<'ul', Record<string, unknown>, List & Variant>;
2 changes: 1 addition & 1 deletion src/ui/atoms/surface/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const Surface = styled.div.attrs(map)`
background-color: var(--woly-canvas, #ffffff);
border-color: var(--woly-border, #000000);
border-style: solid;
border-width: var(--woly-border-width, 0);
border-width: var(--woly-border-width);
border-radius: var(--woly-rounding, 3px);
box-shadow: var(--woly-box-shadow, 3px 3px 8px rgba(11, 31, 53, 0.04));
`;
2 changes: 1 addition & 1 deletion src/ui/atoms/tooltip/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const Tooltip = styled(TooltipBase)`
background-color: var(--woly-background, #ffffff);
border-color: var(--woly-border, var(--woly-background, #ffffff));
border-style: solid;
border-width: var(--woly-border-width, 0);
border-width: var(--woly-border-width);
border-radius: var(--woly-rounding, 6px);
transition: all 0.3s ease-in-out;
Expand Down
34 changes: 13 additions & 21 deletions src/ui/elements/quarks/input-container/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLInputElement> {
interface InputContainerProps extends React.InputHTMLAttributes<HTMLInputElement> {
className?: string;
disabled?: boolean;
leftIcon?: React.ReactNode;
Expand All @@ -20,12 +19,10 @@ const InputContainerBase: React.FC<InputContainerProps & Variant> = ({
rightIcon,
variant = 'secondary',
}) => {

const tabIndex = disabled ? -1 : 0;

const onKeyDown = React.useCallback(
(event: React.KeyboardEvent) => {

if (event.key === 'Enter') {
event.preventDefault();
}
Expand Down Expand Up @@ -56,8 +53,7 @@ const InputContainerBase: React.FC<InputContainerProps & Variant> = ({
{rightIcon && <span data-icon="right">{rightIcon}</span>}
</div>
);
}

};

export const InputContainer = styled(InputContainerBase)`
--local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
Expand Down Expand Up @@ -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;
}
Expand All @@ -105,17 +101,17 @@ export const InputContainer = styled(InputContainerBase)`
[data-icon] {
--local-icon-size: var(--woly-line-height);
display: flex;
align-items: center;
justify-content: center;
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'] {
Expand All @@ -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);
}
Expand All @@ -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);
}
Expand All @@ -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<string, unknown>,
InputContainerProps & Variant
>;
` as StyledComponent<'div', Record<string, unknown>, InputContainerProps & Variant>;
4 changes: 2 additions & 2 deletions src/ui/molecules/select/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export const Select = styled(SelectBase)`
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-width: var(--woly-border-width);
border-radius: var(--woly-rounding, 3px);
box-sizing: border-box;
color: var(--woly-color, #000000);
Expand All @@ -181,7 +181,7 @@ export const Select = styled(SelectBase)`
background-color: var(--woly-canvas, #ffffff);
border-color: var(--woly-border, var(--woly-background, #f8f7f7));
border-style: solid;
border-width: var(--woly-border-width, 1px);
border-width: var(--woly-border-width);
border-radius: var(--woly-rounding, 3px);
padding: 0;
z-index: 1;
Expand Down

0 comments on commit 3489c7c

Please sign in to comment.