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

[FRNT-536, FRNT-435] Rewrite Button on box model #110

Merged
merged 1 commit into from
May 7, 2021
Merged

[FRNT-536, FRNT-435] Rewrite Button on box model #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 7 additions & 0 deletions src/lib/box-styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ export const Global = styled.div`
font-family: 'Helvetica Neue', sans-serif;
}

button {
Copy link
Contributor

Choose a reason for hiding this comment

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

а мы здесь будем сброс стилей описывать для компонентов?

padding: 0;
margin: 0;
}

Comment on lines +9 to +13
Copy link
Member

Choose a reason for hiding this comment

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

Лучше не добавлять глобальные стили, ведь тогда не получится встроить библиотеку компонентов в сущетсвующий проект, ведь можем спокойно получить конфликт стилей

--palette-snow-1000: #000000;
--palette-snow-500: #c0c0c0;
--palette-snow-300: #e5e5e5;
Expand Down Expand Up @@ -211,6 +216,8 @@ const Container = styled.div`
}
&[data-dir='horizontal'] {
flex-direction: row;
flex-wrap: wrap;

& > * + * {
margin-left: 0.5rem;
}
Expand Down
19 changes: 6 additions & 13 deletions src/ui/atoms/button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import * as React from 'react';
import styled, { StyledComponent } from 'styled-components';
import { Variant } from 'lib/types';
import { box } from 'ui/elements/quarks';

export type ButtonVariants = 'secondary' | 'primary' | 'destructive' | 'text';
export type ButtonSizes = 'default' | 'small';
Expand Down Expand Up @@ -40,10 +41,11 @@ export const Button = styled(ButtonBase)`
--local-shape-color: var(--woly-shape-default);
--local-border-color: var(--woly-shape-default);

${box};
Copy link
Member

Choose a reason for hiding this comment

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

Почему бы не удалить переменные local-vertical, gap, compensate из компонента?


box-sizing: border-box;
display: flex;
Copy link
Contributor

Choose a reason for hiding this comment

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

Снимок экрана 2021-05-07 в 14 44 06

прокинула кнопке размер N и она размерам не соответствует из-за бордера

Copy link
Contributor

Choose a reason for hiding this comment

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

Мне кажется, было бы хорошо делать примеры с самими мелкими элементами, т.к. они чаще всего будут вложенными и на них будет ломаться box model

flex-wrap: nowrap;
padding: var(--local-vertical) 0;
justify-content: center;

color: var(--local-text-color);
Expand All @@ -60,9 +62,9 @@ export const Button = styled(ButtonBase)`
&[data-outlined='true'] {
background-color: transparent;
color: var(--local-shape-color);
svg > path {
fill: var(--local-shape-color);
}
svg > path {
fill: var(--local-shape-color);
}
}

[data-icon] {
Expand All @@ -72,15 +74,6 @@ export const Button = styled(ButtonBase)`
justify-content: center;
width: var(--local-icon-size);
height: var(--local-icon-size);
padding: 0 0 0 calc(var(--local-horizontal) - var(--local-compensate));
}

[data-text] {
padding: 0 var(--local-horizontal);
}

span[data-icon='left'] + span[data-text] {
padding-left: var(--local-gap);
}

svg > path {
Expand Down
32 changes: 32 additions & 0 deletions src/ui/elements/quarks/box/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { css } from 'styled-components';

export const box = css`
--local-vertical: calc(
1px * var(--woly-component-level) * var(--woly-main-level) - var(--woly-border-width)
);
--local-horizontal: calc(
var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical) -
var(--woly-border-width)
);
--local-gap: calc(1px * var(--woly-component-level) * var(--woly-main-level));
--local-compensate: var(--local-vertical);
& > * {
Copy link
Contributor

Choose a reason for hiding this comment

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

мб стоит отступы между блоками делами делать? читать не очень

padding-top: var(--local-vertical);
padding-bottom: var(--local-vertical);
}
& > :first-child {
padding-left: var(--local-horizontal);
}
& > :last-child {
padding-right: var(--local-horizontal);
}
& > [data-icon]:first-child {
padding-left: var(--local-compensate);
}
& > [data-icon]:last-child {
padding-right: var(--local-compensate);
}
& > :not(:first-child) {
margin-left: var(--local-gap);
}
`;
1 change: 1 addition & 0 deletions src/ui/elements/quarks/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { box } from './box';
export { InputContainer } from './input-container';
export { InputElement } from './input-element';