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

[FRNT-492] Fix styled types in header panel and add css prop for shadow #96

Merged
merged 3 commits into from
May 4, 2021
Merged

[FRNT-492] Fix styled types in header panel and add css prop for shadow #96

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8978c07
fix: add styled-components type
tatinacher Apr 26, 2021
c2146f5
fix: add css property for shadow
tatinacher Apr 26, 2021
e990ab7
Merge branch 'master' into fix/FRNT-492-fix-styled-types-in-HeaderPanel
tatinacher Apr 29, 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
3 changes: 2 additions & 1 deletion src/lib/box-styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ export const Global = styled.div`
--woly-border-width: 1.5px;
--woly-rounding: 4px;
--woly-font-size: 15px;
--woly-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
Copy link
Member

Choose a reason for hiding this comment

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

Там есть perfect shadow и shadow. Тут именно обычная тенюшка?


--woly-const-m: 6px;
--woly-main-level: 3;

--woly-neutral: var(--palette-snow-500);
--woly-focus: var(--palette-lavender-500);
--woly-background: var(--palette-snow-0);

[data-variant='primary'] {
--woly-shape-default: var(--palette-lavender-300);
--woly-shape-disabled: var(--palette-snow-300);
Expand Down
8 changes: 3 additions & 5 deletions src/ui/atoms/header-panel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { StyledComponent } from 'styled-components';
import { Variant } from 'lib/types';

const map = (properties: Variant) => ({
Expand All @@ -17,12 +17,10 @@ export const HeaderPanel = styled.div.attrs(map)`
var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
);

--local-box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);

padding: var(--local-vertical) var(--local-horizontal);

background-color: var(--woly-background);
border: var(--woly-border-width) solid var(--woly-background);
border-radius: var(--woly-rounding);
box-shadow: var(--local-box-shadow);
`;
box-shadow: var(--woly-shadow);
` as StyledComponent<'div', Record<string, unknown>, Variant>;
5 changes: 4 additions & 1 deletion src/ui/atoms/header-panel/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,15 @@ import { CloseIcon } from 'icons';

`HeaderPanel` is a navigation component that displays information and actions relating to the current screen.

### Example

<Playground>
<div style={{ marginBottom: '10px' }}>
<HeaderPanel>Hello! It`s a HeaderPanel</HeaderPanel>
</div>
</Playground>
### Example

### Menu example

<Playground>
<State initial={false} change={(i) => !i}>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/atoms/tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const Tooltip = styled(TooltipBase)`
z-index: 1;
opacity: 0;
cursor: pointer;
box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
box-shadow: var(--woly-shadow);
width: max-content;
min-width: 112px;
max-width: 240px;
Expand Down
2 changes: 1 addition & 1 deletion src/ui/molecules/select/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ export const Select = styled(SelectBase)`
padding: 0;
z-index: 1;
margin-top: 6px;
box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
box-shadow: var(--woly-shadow);
}
ul[data-visible='true'] {
display: flex;
Expand Down