Skip to content

Commit 13be49a

Browse files
yomybabyyomybaby
committed
feat: introduce NEO style Tabs and RadioGroup
1 parent d54d1c4 commit 13be49a

14 files changed

+250
-109
lines changed

‎react/src/components/BAICard.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import React, { ReactNode } from 'react';
66
export interface BAICardProps extends CardProps {
77
status?: 'success' | 'error' | 'warning' | 'default';
88
extraButtonTitle?: string | ReactNode;
9+
showDivider?: boolean;
910
onClickExtraButton?: () => void;
1011
ref?: React.LegacyRef<HTMLDivElement> | undefined;
1112
}
@@ -16,6 +17,8 @@ const BAICard: React.FC<BAICardProps> = ({
1617
onClickExtraButton,
1718
extra,
1819
style,
20+
styles,
21+
showDivider,
1922
...cardProps
2023
}) => {
2124
const { token } = theme.useToken();
@@ -50,6 +53,19 @@ const BAICard: React.FC<BAICardProps> = ({
5053
? token.colorSuccess
5154
: style?.borderColor, // default
5255
})}
56+
styles={_.merge(
57+
showDivider
58+
? {}
59+
: {
60+
header: {
61+
borderBottom: 'none',
62+
},
63+
body: {
64+
paddingTop: token.marginXS,
65+
},
66+
},
67+
styles,
68+
)}
5369
extra={_extra}
5470
{...cardProps}
5571
/>

‎react/src/components/BAIRadioGroup.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { ConfigProvider, Radio, theme } from 'antd';
2+
import type { RadioGroupProps } from 'antd';
3+
import { createStyles } from 'antd-style';
4+
import classNames from 'classnames';
5+
import React from 'react';
6+
7+
interface BAIRadioGroupProps extends RadioGroupProps {}
8+
9+
const useStyle = createStyles(({ css, token }) => ({
10+
baiRadioGroup: css`
11+
// border version
12+
.ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked)::before,
13+
.ant-radio-button-wrapper:hover::before {
14+
background-color: transparent;
15+
}
16+
.ant-radio-button-wrapper-checked:hover::before,
17+
.ant-radio-button-wrapper-checked::before {
18+
background-color: transparent;
19+
/* background-color: ${`rgba(${parseInt(token.colorPrimary.slice(1, 3), 16)}, ${parseInt(token.colorPrimary.slice(3, 5), 16)}, ${parseInt(token.colorPrimary.slice(5, 7), 16)}, 0.30)`}; */
20+
}
21+
22+
// original design version
23+
/* .ant-radio-button-wrapper-checked::before,
24+
.ant-radio-button-wrapper::before {
25+
background-color: ${token.colorBorder};
26+
}
27+
.ant-radio-button-wrapper-checked:hover::before,
28+
.ant-radio-button-wrapper:hover::before {
29+
background-color: ${token.colorBorder};
30+
}
31+
32+
.ant-radio-button-wrapper-checked {
33+
border-color: transparent !important;
34+
} */
35+
`,
36+
}));
37+
const BAIRadioGroup: React.FC<BAIRadioGroupProps> = ({ options, ...props }) => {
38+
const { styles } = useStyle();
39+
const { token } = theme.useToken();
40+
const colorPrimaryWithAlpha = `rgba(${parseInt(token.colorPrimary.slice(1, 3), 16)}, ${parseInt(token.colorPrimary.slice(3, 5), 16)}, ${parseInt(token.colorPrimary.slice(5, 7), 16)}, 0.15)`;
41+
const colorPrimaryWithLessAlpha = `rgba(${parseInt(token.colorPrimary.slice(1, 3), 16)}, ${parseInt(token.colorPrimary.slice(3, 5), 16)}, ${parseInt(token.colorPrimary.slice(5, 7), 16)}, 0.3)`;
42+
return (
43+
<ConfigProvider
44+
theme={{
45+
components: {
46+
Radio: {
47+
buttonSolidCheckedBg: colorPrimaryWithAlpha,
48+
buttonSolidCheckedColor: token.colorPrimary,
49+
buttonSolidCheckedHoverBg: colorPrimaryWithLessAlpha,
50+
},
51+
},
52+
}}
53+
>
54+
<Radio.Group
55+
className={classNames(styles.baiRadioGroup, props.className)}
56+
options={options}
57+
optionType="button"
58+
buttonStyle="solid"
59+
{...props}
60+
/>
61+
</ConfigProvider>
62+
);
63+
};
64+
65+
export default BAIRadioGroup;

‎react/src/components/BAITable.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useThemeMode } from '../hooks/useThemeMode';
22
import { useDebounce } from 'ahooks';
3-
import { ConfigProvider, GetProps, Table } from 'antd';
3+
import { ConfigProvider, GetProps, Table, theme } from 'antd';
44
import { createStyles } from 'antd-style';
55
import { ColumnsType, ColumnType } from 'antd/es/table';
66
import { TableProps } from 'antd/lib';
@@ -124,6 +124,7 @@ const BAITable = <RecordType extends object = any>({
124124
...tableProps
125125
}: BAITableProps<RecordType>) => {
126126
const { styles } = useStyles();
127+
const { token } = theme.useToken();
127128
const { isDarkMode } = useThemeMode();
128129
const [resizedColumnWidths, setResizedColumnWidths] = useState<
129130
Record<string, number>
@@ -163,6 +164,8 @@ const BAITable = <RecordType extends object = any>({
163164
!isDarkMode && neoStyle
164165
? {
165166
headerBg: '#E3E3E3',
167+
headerSplitColor: token.colorTextQuaternary,
168+
// headerSplitColor: token.colorTextQuaternary
166169
}
167170
: undefined,
168171
},

‎react/src/components/BAITabs.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Tabs, TabsProps } from 'antd';
2+
import { createStyles } from 'antd-style';
3+
import classNames from 'classnames';
4+
import React from 'react';
5+
6+
const useStyles = createStyles(({ token, css }) => ({
7+
baiTabs: css`
8+
.ant-tabs-nav::before {
9+
border-color: ${token.colorPrimary};
10+
}
11+
.ant-tabs-tab:not(.ant-tabs-tab-active) {
12+
border-bottom-color: ${token.colorPrimary};
13+
}
14+
.ant-tabs-tab.ant-tabs-tab-active {
15+
border-color: ${token.colorPrimary};
16+
}
17+
`,
18+
}));
19+
20+
interface BAITabsProps extends TabsProps {}
21+
const BAITabs: React.FC<BAITabsProps> = ({ className, ...props }) => {
22+
const { styles } = useStyles();
23+
return (
24+
<Tabs
25+
className={classNames(styles.baiTabs, className)}
26+
type="card"
27+
{...props}
28+
/>
29+
);
30+
};
31+
32+
export default BAITabs;

‎react/src/components/ComputeSessionNodeItems/SessionStatusTag.tsx

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
SessionStatusTagFragment$key,
55
} from './__generated__/SessionStatusTagFragment.graphql';
66
import { LoadingOutlined } from '@ant-design/icons';
7-
import { Tag, theme } from 'antd';
7+
import { Tag, theme, Tooltip } from 'antd';
88
import graphql from 'babel-plugin-relay/macro';
99
import _ from 'lodash';
1010
import React from 'react';
@@ -69,24 +69,32 @@ const SessionStatusTag: React.FC<SessionStatusTagProps> = ({
6969

7070
return session ? (
7171
_.isEmpty(session.status_info) || !showInfo ? (
72-
<Tag
73-
color={
74-
session.status ? _.get(statusTagColor, session.status) : undefined
75-
}
76-
icon={isTransitional(session) ? <LoadingOutlined spin /> : undefined}
77-
// Comment out to match the legacy tag style temporarily
78-
// style={{
79-
// borderRadius: 11,
80-
// paddingLeft: token.paddingSM,
81-
// paddingRight: token.paddingSM,
82-
// }}
83-
>
84-
{session.status || ' '}
85-
</Tag>
72+
<Tooltip title={session.status_info}>
73+
<Tag
74+
color={
75+
session.status ? _.get(statusTagColor, session.status) : undefined
76+
}
77+
icon={isTransitional(session) ? <LoadingOutlined spin /> : undefined}
78+
// Comment out to match the legacy tag style temporarily
79+
style={{
80+
borderRadius: 11,
81+
paddingLeft: token.paddingSM,
82+
paddingRight: token.paddingSM,
83+
}}
84+
>
85+
{session.status || ' '}
86+
</Tag>
87+
</Tooltip>
8688
) : (
8789
<Flex>
8890
<Tag
89-
style={{ margin: 0, zIndex: 1 }}
91+
style={{
92+
margin: 0,
93+
zIndex: 1,
94+
paddingLeft: token.paddingSM,
95+
borderTopLeftRadius: 11,
96+
borderBottomLeftRadius: 11,
97+
}}
9098
color={
9199
session.status ? _.get(statusTagColor, session.status) : undefined
92100
}
@@ -98,6 +106,9 @@ const SessionStatusTag: React.FC<SessionStatusTagProps> = ({
98106
margin: 0,
99107
marginLeft: -1,
100108
borderStyle: 'dashed',
109+
paddingRight: token.paddingSM,
110+
borderTopRightRadius: 11,
111+
borderBottomRightRadius: 11,
101112
color:
102113
session.status_info &&
103114
_.get(statusInfoTagColor, session.status_info)

0 commit comments

Comments
 (0)