feat: introduce NEO style Tabs and RadioGroup

lablup · Feb 20, 2025 · 03a9536 · 03a9536
1 parent d54d1c4
commit 03a9536
Show file tree

Hide file tree

Showing 14 changed files with 250 additions and 112 deletions.
diff --git a/react/src/components/BAICard.tsx b/react/src/components/BAICard.tsx
@@ -6,6 +6,7 @@ import React, { ReactNode } from 'react';
 export interface BAICardProps extends CardProps {
   status?: 'success' | 'error' | 'warning' | 'default';
   extraButtonTitle?: string | ReactNode;
+  showDivider?: boolean;
   onClickExtraButton?: () => void;
   ref?: React.LegacyRef<HTMLDivElement> | undefined;
 }
@@ -16,6 +17,8 @@ const BAICard: React.FC<BAICardProps> = ({
   onClickExtraButton,
   extra,
   style,
+  styles,
+  showDivider,
   ...cardProps
 }) => {
   const { token } = theme.useToken();
@@ -50,6 +53,19 @@ const BAICard: React.FC<BAICardProps> = ({
                 ? token.colorSuccess
                 : style?.borderColor, // default
       })}
+      styles={_.merge(
+        showDivider
+          ? {}
+          : {
+              header: {
+                borderBottom: 'none',
+              },
+              body: {
+                paddingTop: token.marginXS,
+              },
+            },
+        styles,
+      )}
       extra={_extra}
       {...cardProps}
     />

diff --git a/react/src/components/BAIRadioGroup.tsx b/react/src/components/BAIRadioGroup.tsx
@@ -0,0 +1,65 @@
+import { ConfigProvider, Radio, theme } from 'antd';
+import type { RadioGroupProps } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import React from 'react';
+
+interface BAIRadioGroupProps extends RadioGroupProps {}
+
+const useStyle = createStyles(({ css, token }) => ({
+  baiRadioGroup: css`
+    // border version
+    .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked)::before,
+    .ant-radio-button-wrapper:hover::before {
+      background-color: transparent;
+    }
+    .ant-radio-button-wrapper-checked:hover::before,
+    .ant-radio-button-wrapper-checked::before {
+      background-color: transparent;
+      /* 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)`}; */
+    }
+
+    // original design version
+    /* .ant-radio-button-wrapper-checked::before,
+    .ant-radio-button-wrapper::before {
+      background-color: ${token.colorBorder};
+    }
+    .ant-radio-button-wrapper-checked:hover::before,
+    .ant-radio-button-wrapper:hover::before {
+      background-color: ${token.colorBorder};
+    }
+
+    .ant-radio-button-wrapper-checked {
+      border-color: transparent !important;
+    } */
+  `,
+}));
+const BAIRadioGroup: React.FC<BAIRadioGroupProps> = ({ options, ...props }) => {
+  const { styles } = useStyle();
+  const { token } = theme.useToken();
+  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)`;
+  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)`;
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Radio: {
+            buttonSolidCheckedBg: colorPrimaryWithAlpha,
+            buttonSolidCheckedColor: token.colorPrimary,
+            buttonSolidCheckedHoverBg: colorPrimaryWithLessAlpha,
+          },
+        },
+      }}
+    >
+      <Radio.Group
+        className={classNames(styles.baiRadioGroup, props.className)}
+        options={options}
+        optionType="button"
+        buttonStyle="solid"
+        {...props}
+      />
+    </ConfigProvider>
+  );
+};
+
+export default BAIRadioGroup;
diff --git a/react/src/components/BAITable.tsx b/react/src/components/BAITable.tsx
@@ -1,6 +1,6 @@
 import { useThemeMode } from '../hooks/useThemeMode';
 import { useDebounce } from 'ahooks';
-import { ConfigProvider, GetProps, Table } from 'antd';
+import { ConfigProvider, GetProps, Table, theme } from 'antd';
 import { createStyles } from 'antd-style';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import { TableProps } from 'antd/lib';
@@ -124,6 +124,7 @@ const BAITable = <RecordType extends object = any>({
   ...tableProps
 }: BAITableProps<RecordType>) => {
   const { styles } = useStyles();
+  const { token } = theme.useToken();
   const { isDarkMode } = useThemeMode();
   const [resizedColumnWidths, setResizedColumnWidths] = useState<
     Record<string, number>
@@ -163,6 +164,8 @@ const BAITable = <RecordType extends object = any>({
             !isDarkMode && neoStyle
               ? {
                   headerBg: '#E3E3E3',
+                  headerSplitColor: token.colorTextQuaternary,
+                  // headerSplitColor: token.colorTextQuaternary
                 }
               : undefined,
         },

diff --git a/react/src/components/BAITabs.tsx b/react/src/components/BAITabs.tsx
@@ -0,0 +1,32 @@
+import { Tabs, TabsProps } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import React from 'react';
+
+const useStyles = createStyles(({ token, css }) => ({
+  baiTabs: css`
+    .ant-tabs-nav::before {
+      border-color: ${token.colorPrimary};
+    }
+    .ant-tabs-tab:not(.ant-tabs-tab-active) {
+      border-bottom-color: ${token.colorPrimary};
+    }
+    .ant-tabs-tab.ant-tabs-tab-active {
+      border-color: ${token.colorPrimary};
+    }
+  `,
+}));
+
+interface BAITabsProps extends TabsProps {}
+const BAITabs: React.FC<BAITabsProps> = ({ className, ...props }) => {
+  const { styles } = useStyles();
+  return (
+    <Tabs
+      className={classNames(styles.baiTabs, className)}
+      type="card"
+      {...props}
+    />
+  );
+};
+
+export default BAITabs;
diff --git a/react/src/components/ComputeSessionNodeItems/SessionStatusTag.tsx b/react/src/components/ComputeSessionNodeItems/SessionStatusTag.tsx
@@ -4,7 +4,7 @@ import {
   SessionStatusTagFragment$key,
 } from './__generated__/SessionStatusTagFragment.graphql';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Tag, theme } from 'antd';
+import { Tag, theme, Tooltip } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
 import React from 'react';
@@ -69,24 +69,32 @@ const SessionStatusTag: React.FC<SessionStatusTagProps> = ({
 
   return session ? (
     _.isEmpty(session.status_info) || !showInfo ? (
-      <Tag
-        color={
-          session.status ? _.get(statusTagColor, session.status) : undefined
-        }
-        icon={isTransitional(session) ? <LoadingOutlined spin /> : undefined}
-        // Comment out to match the legacy tag style temporarily
-        // style={{
-        //   borderRadius: 11,
-        //   paddingLeft: token.paddingSM,
-        //   paddingRight: token.paddingSM,
-        // }}
-      >
-        {session.status || ' '}
-      </Tag>
+      <Tooltip title={session.status_info}>
+        <Tag
+          color={
+            session.status ? _.get(statusTagColor, session.status) : undefined
+          }
+          icon={isTransitional(session) ? <LoadingOutlined spin /> : undefined}
+          // Comment out to match the legacy tag style temporarily
+          style={{
+            borderRadius: 11,
+            paddingLeft: token.paddingSM,
+            paddingRight: token.paddingSM,
+          }}
+        >
+          {session.status || ' '}
+        </Tag>
+      </Tooltip>
     ) : (
       <Flex>
         <Tag
-          style={{ margin: 0, zIndex: 1 }}
+          style={{
+            margin: 0,
+            zIndex: 1,
+            paddingLeft: token.paddingSM,
+            borderTopLeftRadius: 11,
+            borderBottomLeftRadius: 11,
+          }}
           color={
             session.status ? _.get(statusTagColor, session.status) : undefined
           }
@@ -98,6 +106,9 @@ const SessionStatusTag: React.FC<SessionStatusTagProps> = ({
             margin: 0,
             marginLeft: -1,
             borderStyle: 'dashed',
+            paddingRight: token.paddingSM,
+            borderTopRightRadius: 11,
+            borderBottomRightRadius: 11,
             color:
               session.status_info &&
               _.get(statusInfoTagColor, session.status_info)