Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: use styled-system v5 #422

Merged
merged 1 commit into from
Feb 5, 2020
Merged

refactor: use styled-system v5 #422

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
165 changes: 100 additions & 65 deletions docs/UIProvider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,86 +21,121 @@ ReactDOM.render(
);
```

## Examples
## I18n Examples

```jsx live
() => {
const [value, setValue] = useState('en_US');
const { locale, setLocale } = useLocaleContext();
const [visible, setVisible] = useState(false);
const modal = useModal();

const contents = {
en_US: {
modal: {
title: 'This is a Modal',
content: 'This is the content of Modal',
openButton: 'Open Modal',
},
confirmModal: {
title: 'Do you Want to delete these items?',
content: 'Some descriptions',
},
popconfirm: {
content: 'Are you sure to delete this todo?',
},
upload: {
withSuccess: 'With Success: ',
withFail: 'With Fail: ',
},
},
zh_Hant: {
modal: {
title: '這是一個 Modal',
content: '這是 Modal 的內容',
openButton: '打開 Modal',
},
confirmModal: {
title: '你確定要刪掉這些東西嗎？',
content: '一些內容',
},
popconfirm: {
content: '你確定要刪掉這個待辦事項嗎？',
},
upload: {
withSuccess: '成功：',
withFail: '失敗：',
},
},
}[locale];

return (
<>
<RadioGroup value={value} onChange={setValue}>
<RadioGroup value={locale} onChange={setLocale}>
<Radio value="en_US">English</Radio>
<Radio value="zh_Hant">正體中文</Radio>
</RadioGroup>

<Box mt="3">
<UIProvider locale={locales[value]}>
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

改成使用全域的 UIProvider 避免多個 Provider 打架

<>
<Flex>
<Modal
title="This is a Modal"
visible={visible}
closable
onConfirm={() => setVisible(false)}
onCancel={() => setVisible(false)}
>
<div>This is the content of Modal</div>
</Modal>
<Button onClick={() => setVisible(true)}>Open Modal</Button>
<Flex>
<Modal
title={contents.modal.title}
visible={visible}
closable
onConfirm={() => setVisible(false)}
onCancel={() => setVisible(false)}
>
<div>{contents.modal.content}</div>
</Modal>
<Button onClick={() => setVisible(true)}>{contents.modal.openButton}</Button>

<Button
ml="2"
onClick={() => {
modal.confirm({
title: 'Do you Want to delete these items?',
content: 'Some descriptions',
onConfirm: () => console.log('confirmed!'),
onCancel: () => console.log('canceled!'),
});
}}
>
Confirm Modal
</Button>
<Button
ml="2"
onClick={() => {
modal.confirm({
title: contents.confirmModal.title,
content: contents.confirmModal.content,
onConfirm: () => console.log('confirmed!'),
onCancel: () => console.log('canceled!'),
});
}}
>
Confirm Modal
</Button>

<Box ml="2">
<Popconfirm
position={Position.BOTTOM}
content="Are you sure to delete this todo?"
onConfirm={() => console.log('confirm')}
onCancel={() => console.log('cancel')}
>
<Button>Popconfirm</Button>
</Popconfirm>
</Box>
</Flex>
<Box mt="3">
<DatePicker onChange={() => {}} />
</Box>
<Box mt="3">
<Flex>
<Box mr="2">With Success:</Box>
<Upload
onSelect={() =>
new Promise(resolve => setTimeout(resolve, 2000))
}
/>
</Flex>
</Box>
<Box mt="1">
<Flex>
<Box mr="2">With Failed:</Box>
<Upload
onSelect={() =>
new Promise((resolve, reject) => setTimeout(reject, 2000))
}
/>
</Flex>
</Box>
</>
</UIProvider>
<Box ml="2">
<Popconfirm
position={Position.BOTTOM}
content={contents.popconfirm.content}
onConfirm={() => console.log('confirm')}
onCancel={() => console.log('cancel')}
>
<Button>Popconfirm</Button>
</Popconfirm>
</Box>
</Flex>
<Box mt="3">
<DatePicker onChange={() => {}} />
</Box>
<Box mt="3">
<Flex alignItems="center">
<Box mr="2">{contents.upload.withSuccess}</Box>
<Upload
onSelect={() =>
new Promise(resolve => setTimeout(resolve, 2000))
}
/>
</Flex>
</Box>
<Box mt="1">
<Flex alignItems="center">
<Box mr="2">{contents.upload.withFail}</Box>
<Upload
onSelect={() =>
new Promise((resolve, reject) => setTimeout(reject, 2000))
}
/>
</Flex>
</Box>
</Box>
</>
);
Expand Down
8 changes: 1 addition & 7 deletions docs/layout/Responsive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,5 @@ const breakpoints = [
'75rem', // 122px
]

// aliases
breakpoints.sm = breakpoints[0]
breakpoints.md = breakpoints[1]
breakpoints.lg = breakpoints[2]
breakpoints.xl = breakpoints[3]

<Box width={{ sm: 1, md: 1/2, lg: 1/4 }} />
<Box width={[1, 1 / 2, 1 / 4]} />
```
10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
"@docusaurus/preset-classic": "^2.0.0-alpha.40",
"@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",
"@react-spring/mock-raf": "^1.1.1",
"@testing-library/jest-dom": "^5.1.0",
"@testing-library/jest-dom": "^5.1.1",
"@testing-library/react": "^9.4.0",
"@types/fuzzaldrin-plus": "^0.6.0",
"@types/jest": "^25.1.1",
Expand All @@ -65,10 +65,10 @@
"@types/react": "16.9.19",
"@types/react-dom": "^16.9.5",
"@types/styled-components": "4.4.2",
"@types/styled-system": "^4.2.2",
"@types/styled-system": "^5.1.6",
"@types/yup": "^0.26.29",
"@typescript-eslint/eslint-plugin": "^2.18.0",
"@typescript-eslint/parser": "^2.18.0",
"@typescript-eslint/eslint-plugin": "^2.19.0",
"@typescript-eslint/parser": "^2.19.0",
"babel-core": "^7.0.0-0",
"babel-eslint": "^10.0.3",
"babel-jest": "^25.1.0",
Expand All @@ -79,7 +79,7 @@
"classnames": "^2.2.6",
"cross-env": "^7.0.0",
"eslint": "^6.8.0",
"eslint-config-yoctol": "^0.23.3",
"eslint-config-yoctol": "^0.24.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-jest": "^3.0.0",
"eslint-plugin-import": "2.20.1",
Expand Down
32 changes: 6 additions & 26 deletions packages/tailor-ui-theme/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,34 +57,14 @@ export interface BreakpointsType {
* 1200px
*/
3: string;
/**
* 576px
*/
sm: string;
/**
* 768px
*/
md: string;
/**
* 992px
*/
lg: string;
/**
* 1200px
*/
xl: string;
}

const breakpoints: BreakpointsType = {
0: toRem(576),
1: toRem(768),
2: toRem(992),
3: toRem(1200),
sm: toRem(576),
md: toRem(768),
lg: toRem(992),
xl: toRem(1200),
};
const breakpoints: BreakpointsType = [
toRem(576),
toRem(768),
toRem(992),
toRem(1200),
];
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

https://github.com/styled-system/styled-system/blob/master/packages/core/src/index.js#L62

因為 v5 新增了 cache breakpoints 的功能，但他們實作上只支援 array
所以這邊把 sm / md / lg / xl 的 alias 拿掉了

Copy link
Collaborator

@tw0517tw tw0517tw Feb 5, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

這樣對tailor ui 來說是 breaking change QQ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

但事實上我們沒有用這個功能 XD


export interface SpaceType {
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/tailor-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"react-intl-tel-input": "^7.1.0",
"react-tiny-virtual-list": "^2.2.0",
"styled-normalize": "^8.0.7",
"styled-system": "^4.2.4"
"styled-system": "^5.1.4"
},
"peerDependencies": {
"react": ">=16.10.0",
Expand Down
12 changes: 4 additions & 8 deletions packages/tailor-ui/src/Divider/Divider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,16 @@ import React, { FC } from 'react';
import styled, { css } from 'styled-components';
import {
ColorProps,
FontSizeProps,
FontWeightProps,
SpaceProps,
TypographyProps,
color,
fontSize,
fontWeight,
space,
typography,
} from 'styled-system';

type IStyledDividerProps = SpaceProps &
ColorProps &
FontSizeProps &
FontWeightProps & {
TypographyProps & {
type: 'horizontal' | 'vertical';
orientation?: 'left' | 'right';
dashed?: boolean;
Expand Down Expand Up @@ -108,8 +105,7 @@ const StyledDivider = styled.div<IStyledDividerProps>`

${space};
${color};
${fontSize};
${fontWeight};
${typography};
`;

StyledDivider.defaultProps = {
Expand Down
Loading