Merge pull request #433 from oceanbase/dengfuping-ui

improve(ui): FooterToolbar children use large size and middle font-size
oceanbase · Jan 19, 2024 · 0df8ccc · 0df8ccc
2 parents cfe9b4c + 544df1f
commit 0df8ccc
Show file tree

Hide file tree

Showing 5 changed files with 1,010 additions and 9 deletions.
diff --git a/packages/ui/src/FooterToolbar/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/FooterToolbar/__tests__/__snapshots__/index.test.tsx.snap
@@ -14,15 +14,15 @@ exports[`FooterToolbar portalDom is true 1`] = `
       class="ant-pro-footer-bar-right"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-lg"
         type="button"
       >
         <span>
           Cancel
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-lg"
         type="button"
       >
         <span>
@@ -48,15 +48,15 @@ exports[`FooterToolbar render 1`] = `
       class="ant-pro-footer-bar-right"
     >
       <button
-        class="ant-btn ant-btn-default"
+        class="ant-btn ant-btn-default ant-btn-lg"
         type="button"
       >
         <span>
           Cancel
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary"
+        class="ant-btn ant-btn-primary ant-btn-lg"
         type="button"
       >
         <span>

diff --git a/packages/ui/src/FooterToolbar/index.tsx b/packages/ui/src/FooterToolbar/index.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { FooterToolbar as AntFooterToolbar } from '@ant-design/pro-components';
 import type { FooterToolbarProps as AntFooterToolbarProps } from '@ant-design/pro-layout/es/components/FooterToolbar';
-import { ConfigProvider } from '@oceanbase/design';
+import { ConfigProvider, theme } from '@oceanbase/design';
 import useStyle from './style';
 
 export type FooterToolbarProps = AntFooterToolbarProps;
@@ -10,14 +10,30 @@ const FooterToolbar: React.FC<FooterToolbarProps> = ({
   // render footer under parent instead of body by default
   portalDom = false,
   prefixCls: customizePrefixCls,
+  children,
   ...restProps
 }) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('pro-footer-bar', customizePrefixCls);
   const { wrapSSR } = useStyle(prefixCls);
 
+  const { token } = theme.useToken();
+
   return wrapSSR(
-    <AntFooterToolbar portalDom={portalDom} prefixCls={customizePrefixCls} {...restProps} />
+    <AntFooterToolbar portalDom={portalDom} prefixCls={customizePrefixCls} {...restProps}>
+      <ConfigProvider
+        // large size component
+        componentSize="large"
+        // middle font size
+        theme={{
+          token: {
+            fontSizeLG: token.fontSize,
+          },
+        }}
+      >
+        {children}
+      </ConfigProvider>
+    </AntFooterToolbar>
   );
 };