Skip to content

Commit 8152ba7

Browse files
plakyda-codefresholeksandr-codefreshplakyda1
authored
Antd redesign (argoproj#161)
Antd redesign (argoproj#161) Signed-off-by: viktorplakida <[email protected]> Co-authored-by: Oleksandr Saulyak <[email protected]> Co-authored-by: viktorplakida <[email protected]> Co-authored-by: oleksandr-codefresh <[email protected]>
1 parent eeac356 commit 8152ba7

21 files changed

+2356
-67
lines changed

‎antd/.storybook/Argo.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {create} from '@storybook/theming';
2+
3+
export default create({
4+
base: 'light',
5+
brandTitle: 'Argo UX',
6+
fontBase: '"Heebo", sans-serif',
7+
brandUrl: 'https://github.com/argoproj/argo-ui',
8+
brandImage: 'https://raw.githubusercontent.com/cncf/artwork/master/projects/argo/horizontal/color/argo-horizontal-color.png',
9+
});

‎antd/.storybook/images/argo-favicon.png

2.63 KB
Loading

‎antd/.storybook/images/argo-icon-color-square.png

99.9 KB
Loading

‎antd/.storybook/main.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
stories: ['../components/**/*.stories.tsx'],
5+
addons: ['@storybook/addon-essentials'],
6+
webpackFinal: async (config, {configType}) => {
7+
config.module.rules.push({
8+
test: /\.less$/,
9+
use: [{
10+
loader: 'style-loader',
11+
}, {
12+
loader: 'css-loader',
13+
}, {
14+
loader: 'less-loader',
15+
options: {
16+
lessOptions: {
17+
javascriptEnabled: true
18+
}
19+
}
20+
}]
21+
});
22+
return config;
23+
},
24+
managerHead: (head) => `
25+
${head}
26+
<link rel="icon" href="/argo-favicon.png" />
27+
`,
28+
};

‎antd/.storybook/manager.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {addons} from '@storybook/addons';
2+
import argo from './Argo';
3+
4+
addons.setConfig({
5+
theme: argo,
6+
});

‎antd/.storybook/preview.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import argo from './Argo';
2+
3+
export const parameters = {
4+
backgrounds: {
5+
default: 'light',
6+
values: [
7+
{
8+
name: 'light',
9+
value: '#dee6eb',
10+
},
11+
{
12+
name: 'dark',
13+
value: '#0e0e14',
14+
},
15+
],
16+
},
17+
docs: {
18+
theme: argo,
19+
},
20+
};

‎antd/build/css/antd.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎antd/components/button/button.stories.tsx

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { DownloadOutlined } from '@ant-design/icons';
2+
import {Meta} from '@storybook/react';
3+
import * as React from 'react';
4+
5+
import { Button } from 'antd';
6+
7+
import '../../styles/antd.less';
8+
9+
const argg: Meta = {
10+
title: 'Components/Button',
11+
component: Button,
12+
argTypes: {
13+
type: {
14+
control: {
15+
type: 'select',
16+
options: ['primary', 'ghost', 'dashed', 'link', 'text', 'default'],
17+
},
18+
},
19+
shape: {
20+
control: {
21+
type: 'select',
22+
options: ['default', 'circle', 'round'],
23+
},
24+
},
25+
size: {
26+
control: {
27+
type: 'select',
28+
options: ['small', 'middle', 'large'],
29+
},
30+
},
31+
children: {control: {type: 'text'}},
32+
disabled: {control: {type: 'boolean'}},
33+
danger: {control: {type: 'boolean'}},
34+
icon: {control: {type: 'boolean'}},
35+
},
36+
args: {
37+
type: 'default',
38+
shape: 'default',
39+
size: 'middle',
40+
children: 'My button',
41+
disabled: false,
42+
danger: false,
43+
icon: false,
44+
},
45+
};
46+
47+
export default argg;
48+
49+
const ButtonStoryComponent = (args: any) => {
50+
return (
51+
<div style={{width: '50%', marginBottom: '1em'}}>
52+
<Button {...args} icon={args.icon && <DownloadOutlined />} />
53+
</div>
54+
);
55+
};
56+
57+
export const Primary = (args: any) => <ButtonStoryComponent {...args} />;
58+
59+
Primary.args = {
60+
type: 'primary',
61+
children: 'My button',
62+
};
63+
64+
export const Default = (args: any) => <ButtonStoryComponent {...args} />;
65+
66+
Default.args = {
67+
type: 'secondary',
68+
children: 'My button',
69+
};
70+
71+
export const Ghost = (args: any) => <ButtonStoryComponent {...args} />;
72+
73+
Ghost.args = {
74+
type: 'ghost',
75+
children: 'My button',
76+
};
77+
78+
export const Text = (args: any) => <ButtonStoryComponent {...args} />;
79+
80+
Text.args = {
81+
type: 'text',
82+
children: 'My button',
83+
};
84+
85+
export const Disabled = (args: any) => <ButtonStoryComponent {...args} />;
86+
87+
Disabled.args = {
88+
children: 'My button',
89+
disabled: true,
90+
};
91+
92+
export const Danger = (args: any) => <ButtonStoryComponent {...args} />;
93+
94+
Danger.args = {
95+
type: 'primary',
96+
danger: true,
97+
children: 'My button',
98+
};
99+
100+
export const DangerGhost = (args: any) => <ButtonStoryComponent {...args} />;
101+
102+
DangerGhost.args = {
103+
type: 'primary',
104+
danger: true,
105+
ghost: true,
106+
children: 'My button',
107+
};
108+
109+
export const DangerText = (args: any) => <ButtonStoryComponent {...args} />;
110+
111+
DangerText.args = {
112+
type: 'text',
113+
danger: true,
114+
children: 'My button',
115+
};

‎antd/components/input/input.stories.tsx

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { Form, Input } from 'antd';
2+
import * as React from 'react';
3+
4+
import '../../styles/antd.less';
5+
6+
export default {
7+
title: 'Components/Input',
8+
component: Input,
9+
argTypes: {
10+
style: {control: {disable: true}},
11+
innerref: {control: {disable: true}},
12+
placeholder: {control: {type: 'text'}},
13+
onChange: {action: 'inputChanged'},
14+
},
15+
};
16+
17+
export const Default = (args: any) => {
18+
return (
19+
<React.Fragment>
20+
<div style={{width: '50%', marginBottom: '1em'}}>
21+
<Input {...args} />
22+
</div>
23+
</React.Fragment>
24+
);
25+
};
26+
27+
Default.args = {
28+
placeholder: 'Type something here',
29+
};
30+
31+
export const Disabled = (args: any) => {
32+
return (
33+
<React.Fragment>
34+
<div style={{width: '50%', marginBottom: '1em'}}>
35+
<Input disabled={true} {...args} />
36+
</div>
37+
</React.Fragment>
38+
);
39+
};
40+
41+
Disabled.args = {
42+
placeholder: 'Type something here',
43+
};
44+
45+
export const Error = (args: any) => {
46+
return (
47+
<div style={{width: '50%', marginBottom: '1em'}}>
48+
<Form>
49+
<Form.Item
50+
validateStatus="error"
51+
help="Should be combination of numbers & alphabets"
52+
>
53+
<Input placeholder="Some error" id="error"/>
54+
</Form.Item>
55+
</Form>
56+
</div>
57+
);
58+
};
59+
60+
Error.args = {
61+
placeholder: 'Type something here',
62+
};
63+
64+
export const Warning = (args: any) => {
65+
return (
66+
<div style={{width: '50%', marginBottom: '1em'}}>
67+
68+
<Form>
69+
<Form.Item
70+
validateStatus="warning"
71+
help="Should be combination of numbers & alphabets"
72+
>
73+
<Input placeholder="Some warning" id="warning"/>
74+
</Form.Item>
75+
</Form>
76+
</div>
77+
);
78+
};
79+
80+
export const Suffix = (args: any) => {
81+
return (
82+
<React.Fragment>
83+
<div style={{width: '50%', marginBottom: '1em'}}>
84+
<Input
85+
{...args}
86+
suffix="SFX"
87+
/>
88+
</div>
89+
</React.Fragment>
90+
);
91+
};
92+
93+
Suffix.args = {
94+
placeholder: 'Type something here',
95+
};
96+
97+
export const Prefix = (args: any) => {
98+
return (
99+
<React.Fragment>
100+
<div style={{width: '50%', marginBottom: '1em'}}>
101+
<Input
102+
prefix="PRX"
103+
{...args}
104+
/>
105+
</div>
106+
</React.Fragment>
107+
);
108+
};
109+
110+
Suffix.args = {
111+
placeholder: 'Type something here',
112+
};

‎antd/styles/antd.less

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@antd: "../../node_modules/antd/lib";
2+
3+
// general
4+
@import '@{antd}/style/themes/default.less';
5+
@import '@{antd}/style/themes/index';
6+
@import '@{antd}/style/mixins/index';
7+
@import '@{antd}/style/core/base';
8+
@import '@{antd}/style/core/iconfont';
9+
@import '@{antd}/style/core/motion';
10+
11+
// components
12+
@import "@{antd}/button/style/index";
13+
@import "@{antd}/input/style/index";
14+
@import "@{antd}/form/style/index";
15+
@import "@{antd}/checkbox/style/index";
16+
@import "@{antd}/input-number/style/index";
17+
@import "@{antd}/select/style/index";
18+
@import "@{antd}/dropdown/style/index";
19+
@import "@{antd}/radio/style/index";
20+
21+
@import './argo-theme.less'; // variables to override above

‎antd/styles/argo-theme.less

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./common-variables";
2+
@import "components/index";

‎antd/styles/common-variables.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@border-radius-base: 4px;
2+
@font-size-base: 16px;
3+
@line-height-base: 24px;
4+
@border-width-base: 1px;
5+
@border-style-base: solid;
6+
@outline-color: #1FBDD0;

‎antd/styles/components/button/button-variables.less

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@import "../../../styles/design-variables.less";
2+
3+
// Buttons
4+
@btn-font-weight: 500; // restyled
5+
@btn-border-radius-base: 4px; // restyled
6+
@btn-border-radius-sm: 2px; // restyled
7+
@btn-border-width: 1px; // restyled
8+
@btn-border-style: solid; // restyled
9+
@btn-shadow: 0px 2px 0px rgba(54, 60, 74, 0.043); // restyled
10+
@btn-primary-shadow: 0px 2px 0px rgba(54, 60, 74, 0.043);
11+
@btn-text-shadow: 0px 2px 0px rgba(54, 60, 74, 0.043);
12+
13+
@btn-primary-color: @neutral-1;
14+
@btn-primary-bg: @blue-100;
15+
16+
@btn-default-color: @dark-3;
17+
@btn-default-bg: @neutral-1;
18+
@btn-default-border: @dark-3;
19+
20+
@btn-danger-color: @neutral-1;
21+
@btn-danger-bg: @red-100;
22+
@btn-danger-border: @red-100;
23+
24+
@btn-disable-color: @dark-5;
25+
@btn-disable-bg: @neutral-2-disabled-bg;
26+
@btn-disable-border: @dark-6;
27+
28+
@btn-default-ghost-color: @dark-3;
29+
@btn-default-ghost-bg: @neutral-1;
30+
@btn-default-ghost-border: @dark-3;
31+
32+
@btn-ghost-color: @blue-100;
33+
@btn-ghost-bg: @neutral-1;
34+
@btn-ghost-border: @blue-100;
35+
36+
@btn-font-size-lg: 18px;
37+
@btn-font-size-sm: 16px;
38+
@btn-padding-horizontal-base: 8px;
39+
@btn-padding-horizontal-lg: 9px;
40+
@btn-padding-horizontal-sm: 6px;
41+
42+
@btn-height-base: 40px;
43+
@btn-height-lg: @btn-height-base + 10px;
44+
@btn-height-sm: @btn-height-base - 10px;
45+
46+
@btn-line-height: 1.5; // 16px font size base
47+
48+
@btn-circle-size: 40px;
49+
@btn-circle-size-lg: @btn-circle-size + 10px;
50+
@btn-circle-size-sm: @btn-circle-size - 10px;
51+
52+
@btn-square-size: 40px;
53+
@btn-square-size-lg: @btn-square-size + 10px;
54+
@btn-square-size-sm: @btn-square-size - 10px;
55+
@btn-square-only-icon-size: 40px;
56+
@btn-square-only-icon-size-sm: @btn-square-only-icon-size + 10px;
57+
@btn-square-only-icon-size-lg: @btn-square-only-icon-size - 10px;
58+
59+
@btn-group-border: @blue-hover;
60+
61+
@btn-link-hover-bg: @blue-hover-bg;
62+
@btn-text-hover-bg: @neutral-3-bg;

‎antd/styles/components/button/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "./button-variables";

‎antd/styles/components/index.less

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./button/index";
2+
@import "./input/index";

‎antd/styles/components/input/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "input-variables";

0 commit comments

Comments
 (0)