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

Fix random issues #190

Merged
merged 17 commits into from
Aug 30, 2021
Merged

Fix random issues #190

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1f4ac77
wip: update
Aug 5, 2021
e971c02
wip: update
Aug 9, 2021
5d7613e
Merge remote-tracking branch 'origin' into research/DS-37-components-…
Aug 9, 2021
e6df454
wip: update lock
Aug 9, 2021
8f92789
wip: remove woly-text variable
Aug 9, 2021
8f4cfef
wip: remove woly-text variable
Aug 25, 2021
9686f41
fix: random issues
Aug 25, 2021
7be3478
Merge remote-tracking branch 'origin' into fix/random-issues
Aug 26, 2021
648314b
fix: remove console.log
Aug 26, 2021
47494e2
style: format + lint
Aug 26, 2021
d9b657e
Merge branch 'master' into fix/random-issues
Aug 26, 2021
695bbcb
fix: disabled button text
Aug 26, 2021
89e66c2
fix: disabled textarea placeholder
Aug 26, 2021
5218bc9
Merge branch 'master' into fix/random-issues
Aug 30, 2021
f8f4677
fix: text color
Aug 30, 2021
cbf575b
fix: accordion paddings and margins
Aug 30, 2021
a21bfe3
style: lint + format
Aug 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions src/dev/global.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,102 +54,111 @@ export const Global = styled(WolyGlobalStyles)`

[data-priority='default'] {
--woly-shape-default: hsla(var(--bw-500), 1);
--woly-shape-disabled: hsla(var(--bw-200), 1);
--woly-shape-disabled: hsla(var(--bw-500), 0.5);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Снимок экрана 2021-08-26 в 15 48 37

не видно текст

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Поправил

--woly-shape-hover: hsla(var(--bw-600), 1);
--woly-shape-active: hsla(var(--bw-700), 1);

--woly-shape-text-default: hsla(var(--bw-1000), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 0.5);
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
--woly-shape-text-active: hsla(var(--bw-1000), 1);
--woly-shape-text-transparent: hsla(var(--bw-1000), 0.5);

--woly-canvas-default: transparent;
--woly-canvas-disabled: hsla(var(--bw-200), 1);
--woly-canvas-disabled: hsla(var(--bw-100), 1);
--woly-canvas-hover: hsla(var(--bw-600), 1);
--woly-canvas-active: hsla(var(--bw-700), 1);

--woly-canvas-text-default: hsla(var(--bw-0), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-canvas-text-hover: hsla(var(--bw-0), 1);
--woly-canvas-text-active: hsla(var(--bw-0), 1);
--woly-canvas-text-transparent: hsla(var(--bw-0), 0.5);
}

[data-priority='primary'] {
--woly-shape-default: hsla(var(--primary-500), 1);
--woly-shape-disabled: hsla(var(--primary-200), 1);
--woly-shape-disabled: hsla(var(--primary-500), 0.5);
--woly-shape-hover: hsla(var(--primary-600), 1);
--woly-shape-active: hsla(var(--primary-700), 1);

--woly-shape-text-default: hsla(var(--bw-1000), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
--woly-shape-text-active: hsla(var(--bw-1000), 1);
--woly-shape-text-transparent: hsla(var(--bw-1000), 0.5);

--woly-canvas-default: transparent;
--woly-canvas-disabled: hsla(var(--bw-200), 1);
--woly-canvas-disabled: hsla(var(--bw-100), 1);
--woly-canvas-hover: hsla(var(--primary-600), 1);
--woly-canvas-active: hsla(var(--primary-700), 1);

--woly-canvas-text-default: hsla(var(--bw-0), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-canvas-text-hover: hsla(var(--bw-0), 1);
--woly-canvas-text-active: hsla(var(--bw-0), 1);
--woly-canvas-text-transparent: hsla(var(--bw-0), 0.5);
}

[data-priority='secondary'] {
--woly-shape-default: hsla(var(--secondary-500), 1);
--woly-shape-disabled: hsla(var(--secondary-200), 1);
--woly-shape-disabled: hsla(var(--secondary-500), 0.5);
--woly-shape-hover: hsla(var(--secondary-600), 1);
--woly-shape-active: hsla(var(--secondary-700), 1);

--woly-shape-text-default: hsla(var(--bw-1000), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
--woly-shape-text-active: hsla(var(--bw-1000), 1);
--woly-shape-text-transparent: hsla(var(--bw-1000), 0.5);

--woly-canvas-default: transparent;
--woly-canvas-disabled: hsla(var(--bw-200), 1);
--woly-canvas-disabled: hsla(var(--bw-100), 1);
--woly-canvas-hover: hsla(var(--secondary-600), 1);
--woly-canvas-active: hsla(var(--secondary-700), 1);

--woly-canvas-text-default: hsla(var(--bw-0), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-canvas-text-hover: hsla(var(--bw-0), 1);
--woly-canvas-text-active: hsla(var(--bw-0), 1);
--woly-canvas-text-transparent: hsla(var(--bw-0), 0.5);
}

[data-priority='white'] {
--woly-shape-default: hsla(var(--bw-1000), 1);
--woly-shape-disabled: hsla(var(--bw-200), 1);
--woly-shape-disabled: hsla(var(--bw-1000), 0.5);
--woly-shape-hover: hsla(var(--bw-400), 1);
--woly-shape-active: hsla(var(--bw-600), 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-0), 1);
--woly-shape-text-active: hsla(var(--bw-0), 1);
--woly-shape-text-transparent: hsla(var(--bw-0), 0.5);

--woly-canvas-default: transparent;
--woly-canvas-disabled: hsla(var(--bw-200), 1);
--woly-canvas-disabled: hsla(var(--bw-100), 1);
--woly-canvas-hover: transparent;
--woly-canvas-active: transparent;

--woly-canvas-text-default: hsla(var(--bw-0), 1);
--woly-canvas-text-disabled: hsla(var(--bw-300), 1);
--woly-canvas-text-hover: hsla(var(--bw-600), 1);
--woly-canvas-text-active: hsla(var(--bw-700), 1);
--woly-canvas-text-transparent: hsla(var(--bw-0), 0.5);
}

[data-priority='danger'] {
--woly-shape-default: hsla(var(--danger-500), 1);
--woly-shape-disabled: hsla(var(--danger-200), 1);
--woly-shape-disabled: hsla(var(--danger-500), 0.5);
--woly-shape-hover: hsla(var(--danger-600), 1);
--woly-shape-active: hsla(var(--danger-700), 1);

--woly-shape-text-default: hsla(var(--bw-1000), 1);
--woly-shape-text-disabled: hsla(var(--bw-300), 1);
--woly-shape-text-hover: hsla(var(--bw-1000), 1);
--woly-shape-text-active: hsla(var(--bw-1000), 1);
--woly-shape-text-transparent: hsla(var(--bw-1000), 0.5);

--woly-canvas-default: transparent;
--woly-canvas-disabled: hsla(var(--danger-200), 1);
Expand All @@ -160,5 +169,6 @@ export const Global = styled(WolyGlobalStyles)`
--woly-canvas-text-disabled: hsla(var(--danger-300), 1);
--woly-canvas-text-hover: hsla(var(--danger-600), 1);
--woly-canvas-text-active: hsla(var(--danger-700), 1);
--woly-canvas-text-transparent: hsla(var(--danger-700), 0.5);
}
`;
10 changes: 6 additions & 4 deletions src/dev/playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ export { block };
interface Props {
size: keyof typeof block;
direction: 'vertical' | 'horizontal';
filled: boolean;
configurators: ConfiguratorName[];
}

export const Playground: React.FC<Props> = ({
size = 'M',
direction = 'horizontal',
filled = true,
configurators = ['color'],
children,
}) => {
Expand All @@ -27,13 +29,13 @@ export const Playground: React.FC<Props> = ({

return (
<PlaygroundWrapper>
<Frame>
<Global data-scope={scopeId}>
<Global data-scope={scopeId}>
<Frame data-priority="primary">
<Wrapper>
<Container data-dir={direction}>{children}</Container>
</Wrapper>
</Global>
</Frame>
</Frame>
</Global>
<Configurators id={scopeId} for={configurators} />
</PlaygroundWrapper>
);
Expand Down
9 changes: 8 additions & 1 deletion src/woly/atoms/avatar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,19 @@ const AvatarBase: React.FC<AvatarProps> = ({
children = childrenProp;
} else {
// render fallback if image loading failed or no src attributes / children provided
children = <IconProfile />;
children = <Fallback />;
}

return <div {...props}>{children}</div>;
};

const Fallback = styled(IconProfile)`
> circle:first-of-type {
fill: var(--woly-canvas-text-default);
fill-opacity: 0.1;
}
`;

export const Avatar = styled(AvatarBase)`
--local-size: calc((var(--woly-component-level) + 2) * 2 * var(--woly-const-m));

Expand Down
2 changes: 1 addition & 1 deletion src/woly/atoms/backdrop/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Modal based on `Backdrop`.
<State initial={false} change={(i) => !i}>
{(value, change) => (
<>
<Button onClick={change} text="Open modal" />
<Button onClick={change} text="Open modal" priority="primary" />
<Modal visible={value} title="Change customer" onClose={change} priority="primary">
<form autoComplete="off">
<Field label="Customer name">
Expand Down
20 changes: 11 additions & 9 deletions src/woly/atoms/button-icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
&[data-weight='fill'] {
--local-shape-color: var(--woly-shape-default);
--local-icon-color: var(--woly-shape-text-default);
--local-border-color: transparent;

background: var(--local-shape-color);
border-color: var(--local-shape-color);
border-color: var(--local-border-color);

[data-element='icon'] > svg > path {
fill: var(--local-icon-color);
Expand All @@ -93,17 +94,18 @@ export const ButtonIcon = styled(ButtonIconBase)`

&:disabled {
pointer-events: none;
--local-shape-color: var(--woly-canvas-disabled);
--local-icon-color: var(--woly-shape-text-disabled);
--local-shape-color: var(--woly-shape-disabled);
--local-icon-color: var(--woly-shape-text-default);
}
}

&[data-weight='outline'] {
--local-shape-color: transparent;
--local-icon-color: var(--woly-shape-default);
--local-border-color: var(--local-icon-color);

background: var(--local-shape-color);
border-color: var(--local-icon-color);
border-color: var(--local-border-color);

[data-element='icon'] > svg > path {
fill: var(--local-icon-color);
Expand All @@ -125,15 +127,15 @@ export const ButtonIcon = styled(ButtonIconBase)`

&:disabled {
pointer-events: none;
--local-shape-color: var(--woly-shape-text-disabled);
--local-icon-color: var(--woly-canvas-text-disabled);
--local-shape-color: transparent;
--local-icon-color: var(--woly-shape-text-disabled);
}
}

&[data-weight='goast'] {
--local-shape-color: transparent;
--local-icon-color: var(--woly-shape-default);
--local-border-color: var(--woly-shape-default);
--local-border-color: transparent;

--local-shadow: var(--woly-border-width) var(--woly-border-width)
calc(var(--woly-border-width) * 4) hsla(0, 0%, 100%, 50%);
Expand Down Expand Up @@ -164,8 +166,8 @@ export const ButtonIcon = styled(ButtonIconBase)`

&:disabled {
pointer-events: none;
--local-shape-color: var(--woly-shape-text-disabled);
--local-icon-color: var(--woly-shape-disabled);
--local-shape-color: var(--woly-shape-disabled);
--local-icon-color: var(--woly-shape-text-disabled);
}
}

Expand Down
3 changes: 1 addition & 2 deletions src/woly/atoms/button-icon/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,8 @@ In case of choosing button-icon in black-and-white priority with outline styles
style={{
display: 'flex',
justifyContent: 'space-between',
padding: '100px',
padding: '24px',
width: '900px',
background: 'lightgrey',
}}
>
<ButtonIcon
Expand Down
7 changes: 3 additions & 4 deletions src/woly/atoms/button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const Button = styled(ButtonBase)`

--local-text-color: var(--woly-shape-text-default);
--local-shape-color: var(--woly-shape-default);
--local-border-color: var(--woly-shape-default);
--local-border-color: transparent;

display: flex;
flex-wrap: nowrap;
Expand All @@ -72,6 +72,8 @@ export const Button = styled(ButtonBase)`
outline: none;

&[data-outlined='true'] {
--local-border-color: var(--local-shape-color);

color: var(--local-shape-color);

background: transparent;
Expand Down Expand Up @@ -100,13 +102,11 @@ export const Button = styled(ButtonBase)`

&:hover {
--local-text-color: var(--woly-shape-text-hover);
--local-border-color: var(--woly-shape-hover);
--local-shape-color: var(--woly-shape-hover);
}

&:active {
--local-text-color: var(--woly-shape-text-active);
--local-border-color: var(--woly-shape-active);
--local-shape-color: var(--woly-shape-active);
}

Expand All @@ -116,7 +116,6 @@ export const Button = styled(ButtonBase)`

&:disabled {
--local-text-color: var(--woly-shape-text-disabled);
--local-border-color: var(--woly-shape-disabled);
--local-shape-color: var(--woly-shape-disabled);
}
` as StyledComponent<'button', Record<string, unknown>, ButtonProps & Priority>;
13 changes: 3 additions & 10 deletions src/woly/atoms/chip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const Chip = styled(ChipBase)`
--local-shape-color: var(--woly-shape-default);
--local-icon-size: var(--woly-line-height);
--local-text-color: var(--woly-shape-text-default);
--local-border-color: var(--woly-shape-default);
--local-border-color: transparent;

display: flex;
align-items: center;
Expand Down Expand Up @@ -117,10 +117,7 @@ export const Chip = styled(ChipBase)`
&[data-outlined='true'] {
--local-shape-color: transparent;
--local-text-color: var(--woly-shape-default);

[data-element='icon'] > svg > path {
fill: var(--woly-shape-default);
}
--local-border-color: var(--woly-shape-default);

&:hover {
--local-shape-color: transparent;
Expand All @@ -136,26 +133,22 @@ export const Chip = styled(ChipBase)`

&[role='button']:focus-within {
--local-shape-color: var(--woly-shape-active);
--local-border-color: var(--woly-shape-active);
box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
}

&[role='button']:hover {
--local-text-color: var(--woly-shape-text-hover);
--local-shape-color: var(--woly-shape-hover);
--local-border-color: var(--woly-shape-hover);
}

&[role='button']:active {
--local-text-color: var(--woly-shape-text-active);
--local-shape-color: var(--woly-shape-active);
--local-border-color: var(--woly-shape-active);
}

&[data-disabled='true'] {
--local-shape-color: var(--woly-shape-disabled);
--local-text-color: var(--woly-shape-text-disabled);
--local-border-color: var(--woly-shape-disabled);
--local-text-color: var(--woly-shape-text-default);

pointer-events: none;
}
Expand Down
4 changes: 2 additions & 2 deletions src/woly/atoms/chip/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ Chip can be represented in primary, secondary, default or white priorities and c
<Playground direction="horizontal" size="S">
<div
style={{
background: 'grey',
display: 'flex',
justifyContent: 'space-between',
padding: '100px 10px',
width: 496,
padding: '24px',
}}
>
<Chip text="Simple Chip" priority="primary" />
Expand Down
6 changes: 4 additions & 2 deletions src/woly/atoms/surface/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,16 @@ export const Surface = styled.div.attrs(map)`
border-radius: var(--woly-rounding);

&[data-weight='fill'] {
color: var(--woly-shape-text-default);

background-color: var(--woly-shape-default);
border-color: var(--woly-shape-default);
box-shadow: 3px 3px 8px var(--woly-shape-default);
box-shadow: var(--woly-shadow);
}

&[data-weight='goast'] {
background-color: var(--woly-background);
border-color: var(--woly-background);
box-shadow: 3px 3px 8px var(--woly-shape-text-disabled);
box-shadow: var(--woly-shadow);
}
` as StyledComponent<'div', Record<string, unknown>, SurfaceProps & Priority>;
2 changes: 1 addition & 1 deletion src/woly/atoms/surface/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Sign in form based on `Surface`.
<Popover
isOpen={false}
content={
<Surface priority="primary" weight="goast">
<Surface priority="primary" weight="fill">
<FormBlock>
<Label priority="primary">Name</Label>
<Input
Expand Down
Loading