fix: Sider support ConfigProvider theme (#50780)

* fix: Sider support cp * fix: css layout * chore: size limit
2024-12-03 12:38:58 +08:00 · 2024-09-10 15:43:58 +08:00 · 2024-09-10 15:43:58 +08:00 · 4fffbea08f
commit 4fffbea08f
parent 5cb88bceb4
8 changed files with 201 additions and 147 deletions
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@ -9,6 +9,7 @@ import omit from 'rc-util/lib/omit';
 import isNumeric from '../_util/isNumeric';
 import { ConfigContext } from '../config-provider';
 import { LayoutContext } from './context';
+import useStyle from './style/sider';

 const dimensionMaxMap = {
  xs: '479.98px',
@ -97,6 +98,12 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
    onCollapse?.(value, type);
  };

+  // =========================== Prefix ===========================
+  const { getPrefixCls } = useContext(ConfigContext);
+  const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
+
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+
  // ========================= Responsive =========================
  const responsiveHandlerRef = useRef<(mql: MediaQueryListEvent | MediaQueryList) => void>();
  responsiveHandlerRef.current = (mql: MediaQueryListEvent | MediaQueryList) => {
@ -145,10 +152,7 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
    handleSetCollapsed(!collapsed, 'clickTrigger');
  };

-  const { getPrefixCls } = useContext(ConfigContext);
-
  const renderSider = () => {
-    const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
    const divProps = omit(otherProps, ['collapsed']);
    const rawWidth = collapsed ? collapsedWidth : width;
    // use "px" as fallback unit for width
@ -200,6 +204,8 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
        [`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
      },
      className,
+      hashId,
+      cssVarCls,
    );
    return (
      <aside className={siderCls} {...divProps} style={divStyle} ref={ref}>
@ -211,7 +217,9 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {

  const contextValue = React.useMemo(() => ({ siderCollapsed: collapsed }), [collapsed]);

-  return <SiderContext.Provider value={contextValue}>{renderSider()}</SiderContext.Provider>;
+  return wrapCSSVar(
+    <SiderContext.Provider value={contextValue}>{renderSider()}</SiderContext.Provider>,
+  );
 });

 if (process.env.NODE_ENV !== 'production') {
--- a/components/layout/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/layout/tests/snapshots/demo-extend.test.ts.snap
@ -165,7 +165,15 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
  >
    <aside
      class="ant-layout-sider ant-layout-sider-dark"
-      style="background: rgb(255, 255, 255); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
+      style="flex: 0 0 32px; max-width: 32px; min-width: 32px; width: 32px;"
+    >
+      <div
+        class="ant-layout-sider-children"
+      />
+    </aside>
+    <aside
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
    >
      <div
        class="ant-layout-sider-children"
@ -174,7 +182,7 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
          class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
          data-menu-list="true"
          role="menu"
-          style="height: 100%; border-right: 0;"
+          style="border-right: 0;"
          tabindex="0"
        >
          <li
--- a/components/layout/tests/snapshots/demo.test.ts.snap
+++ b/components/layout/tests/snapshots/demo.test.ts.snap
@ -163,7 +163,15 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
  >
    <aside
      class="ant-layout-sider ant-layout-sider-dark"
-      style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      style="flex:0 0 32px;max-width:32px;min-width:32px;width:32px"
+    >
+      <div
+        class="ant-layout-sider-children"
+      />
+    </aside>
+    <aside
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
    >
      <div
        class="ant-layout-sider-children"
@ -172,7 +180,7 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
          class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
          data-menu-list="true"
          role="menu"
-          style="height:100%;border-right:0"
+          style="border-right:0"
          tabindex="0"
        >
          <li
--- a/components/layout/demo/component-token.tsx
+++ b/components/layout/demo/component-token.tsx
@ -40,7 +40,7 @@ const App: React.FC = () => {
            headerHeight: 64,
            headerPadding: `0 24px`,
            headerColor: colorBgContainer,
-            siderBg: colorBgContainer,
+            siderBg: '#800080',
          },
        },
      }}
@ -51,12 +51,23 @@ const App: React.FC = () => {
          <div style={{ marginInlineStart: 24, fontSize: 24 }}>Ant Design</div>
        </Header>
        <Layout>
-          <Sider width={200} style={{ background: colorBgContainer }}>
+          <ConfigProvider
+            theme={{
+              components: {
+                Layout: {
+                  siderBg: 'red',
+                },
+              },
+            }}
+          >
+            <Sider width={32} />
+          </ConfigProvider>
+          <Sider width={200}>
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
-              style={{ height: '100%', borderRight: 0 }}
+              style={{ borderRight: 0 }}
              items={items2}
            />
          </Sider>
--- a/components/layout/style/index.ts
+++ b/components/layout/style/index.ts
@ -4,7 +4,6 @@ import type { CSSObject } from '@ant-design/cssinjs';

 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
-import genLayoutLightStyle from './light';

 export interface ComponentToken {
  /** @deprecated Use headerBg instead */
@ -103,23 +102,14 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
    antCls, // .ant
    componentCls, // .ant-layout
    colorText,
-    triggerColor,
    footerBg,
-    triggerBg,
    headerHeight,
    headerPadding,
    headerColor,
    footerPadding,
-    triggerHeight,
-    zeroTriggerHeight,
-    zeroTriggerWidth,
-    motionDurationMid,
-    motionDurationSlow,
    fontSize,
-    borderRadius,
    bodyBg,
    headerBg,
-    siderBg,
  } = token;

  return {
@ -148,98 +138,6 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
        flex: '0 0 auto',
      },

-      [`${componentCls}-sider`]: {
-        position: 'relative',
-
-        // fix firefox can't set width smaller than content on flex item
-        minWidth: 0,
-        background: siderBg,
-        transition: `all ${motionDurationMid}, background 0s`,
-
-        '&-children': {
-          height: '100%',
-          // Hack for fixing margin collapse bug
-          // https://github.com/ant-design/ant-design/issues/7967
-          // solution from https://stackoverflow.com/a/33132624/3040605
-          marginTop: -0.1,
-          paddingTop: 0.1,
-
-          [`${antCls}-menu${antCls}-menu-inline-collapsed`]: {
-            width: 'auto',
-          },
-        },
-
-        '&-has-trigger': {
-          paddingBottom: triggerHeight,
-        },
-
-        '&-right': {
-          order: 1,
-        },
-
-        '&-trigger': {
-          position: 'fixed',
-          bottom: 0,
-          zIndex: 1,
-          height: triggerHeight,
-          color: triggerColor,
-          lineHeight: unit(triggerHeight),
-          textAlign: 'center',
-          background: triggerBg,
-          cursor: 'pointer',
-          transition: `all ${motionDurationMid}`,
-        },
-
-        '&-zero-width': {
-          '> *': {
-            overflow: 'hidden',
-          },
-
-          '&-trigger': {
-            position: 'absolute',
-            top: headerHeight,
-            insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
-            zIndex: 1,
-            width: zeroTriggerWidth,
-            height: zeroTriggerHeight,
-            color: triggerColor,
-            fontSize: token.fontSizeXL,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: siderBg,
-            borderStartStartRadius: 0,
-            borderStartEndRadius: borderRadius,
-            borderEndEndRadius: borderRadius,
-            borderEndStartRadius: 0,
-
-            cursor: 'pointer',
-            transition: `background ${motionDurationSlow} ease`,
-
-            '&::after': {
-              position: 'absolute',
-              inset: 0,
-              background: 'transparent',
-              transition: `all ${motionDurationSlow}`,
-              content: '""',
-            },
-
-            '&:hover::after': {
-              background: `rgba(255, 255, 255, 0.2)`,
-            },
-
-            '&-right': {
-              insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
-              borderStartStartRadius: borderRadius,
-              borderStartEndRadius: 0,
-              borderEndEndRadius: 0,
-              borderEndStartRadius: borderRadius,
-            },
-          },
-        },
-      },
-      // Light
-      ...genLayoutLightStyle(token),
      // RTL
      '&-rtl': {
        direction: 'rtl',
@ -320,10 +218,12 @@ export const prepareComponentToken: GetDefaultToken<'Layout'> = (token) => {
 };

 // ============================== Export ==============================
-export default genStyleHooks('Layout', (token) => [genLayoutStyle(token)], prepareComponentToken, {
-  deprecatedTokens: [
+export const DEPRECATED_TOKENS: [keyof ComponentToken, keyof ComponentToken][] = [
  ['colorBgBody', 'bodyBg'],
  ['colorBgHeader', 'headerBg'],
  ['colorBgTrigger', 'triggerBg'],
-  ],
+];
+
+export default genStyleHooks('Layout', (token) => [genLayoutStyle(token)], prepareComponentToken, {
+  deprecatedTokens: DEPRECATED_TOKENS,
 });
--- a/components/layout/style/light.ts
+++ b/components/layout/style/light.ts
@ -1,28 +0,0 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-
-import type { LayoutToken } from '.';
-import type { GenerateStyle } from '../../theme/internal';
-
-const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
-  const { componentCls, bodyBg, lightSiderBg, lightTriggerBg, lightTriggerColor } = token;
-
-  return {
-    [`${componentCls}-sider-light`]: {
-      background: lightSiderBg,
-
-      [`${componentCls}-sider-trigger`]: {
-        color: lightTriggerColor,
-        background: lightTriggerBg,
-      },
-
-      [`${componentCls}-sider-zero-width-trigger`]: {
-        color: lightTriggerColor,
-        background: lightTriggerBg,
-        border: `1px solid ${bodyBg}`, // Safe to modify to any other color
-        borderInlineStart: 0,
-      },
-    },
-  };
-};
-
-export default genLayoutLightStyle;
--- a/components/layout/style/sider.ts
+++ b/components/layout/style/sider.ts
@ -0,0 +1,147 @@
+import { unit } from '@ant-design/cssinjs';
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import { DEPRECATED_TOKENS, prepareComponentToken } from '.';
+import type { LayoutToken } from '.';
+import type { GenerateStyle } from '../../theme/interface';
+import { genStyleHooks } from '../../theme/internal';
+
+const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
+  const {
+    componentCls,
+    siderBg,
+    motionDurationMid,
+    motionDurationSlow,
+    antCls,
+    triggerHeight,
+    triggerColor,
+    triggerBg,
+    headerHeight,
+    zeroTriggerWidth,
+    zeroTriggerHeight,
+    borderRadius,
+    lightSiderBg,
+    lightTriggerColor,
+    lightTriggerBg,
+    bodyBg,
+  } = token;
+
+  return {
+    [`${componentCls}`]: {
+      position: 'relative',
+
+      // fix firefox can't set width smaller than content on flex item
+      minWidth: 0,
+      background: siderBg,
+      transition: `all ${motionDurationMid}, background 0s`,
+
+      '&-has-trigger': {
+        paddingBottom: triggerHeight,
+      },
+
+      '&-right': {
+        order: 1,
+      },
+
+      [`${componentCls}-children`]: {
+        height: '100%',
+        // Hack for fixing margin collapse bug
+        // https://github.com/ant-design/ant-design/issues/7967
+        // solution from https://stackoverflow.com/a/33132624/3040605
+        marginTop: -0.1,
+        paddingTop: 0.1,
+
+        [`${antCls}-menu${antCls}-menu-inline-collapsed`]: {
+          width: 'auto',
+        },
+      },
+
+      [`${componentCls}-trigger`]: {
+        position: 'fixed',
+        bottom: 0,
+        zIndex: 1,
+        height: triggerHeight,
+        color: triggerColor,
+        lineHeight: unit(triggerHeight),
+        textAlign: 'center',
+        background: triggerBg,
+        cursor: 'pointer',
+        transition: `all ${motionDurationMid}`,
+      },
+
+      '&-zero-width': {
+        '> *': {
+          overflow: 'hidden',
+        },
+
+        [`${componentCls}-trigger`]: {
+          position: 'absolute',
+          top: headerHeight,
+          insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
+          zIndex: 1,
+          width: zeroTriggerWidth,
+          height: zeroTriggerHeight,
+          color: triggerColor,
+          fontSize: token.fontSizeXL,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: siderBg,
+          borderStartStartRadius: 0,
+          borderStartEndRadius: borderRadius,
+          borderEndEndRadius: borderRadius,
+          borderEndStartRadius: 0,
+
+          cursor: 'pointer',
+          transition: `background ${motionDurationSlow} ease`,
+
+          '&::after': {
+            position: 'absolute',
+            inset: 0,
+            background: 'transparent',
+            transition: `all ${motionDurationSlow}`,
+            content: '""',
+          },
+
+          '&:hover::after': {
+            background: `rgba(255, 255, 255, 0.2)`,
+          },
+
+          '&-right': {
+            insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
+            borderStartStartRadius: borderRadius,
+            borderStartEndRadius: 0,
+            borderEndEndRadius: 0,
+            borderEndStartRadius: borderRadius,
+          },
+        },
+      },
+
+      // Light
+      '&-light': {
+        background: lightSiderBg,
+
+        [`${componentCls}-trigger`]: {
+          color: lightTriggerColor,
+          background: lightTriggerBg,
+        },
+
+        [`${componentCls}-zero-width-trigger`]: {
+          color: lightTriggerColor,
+          background: lightTriggerBg,
+          border: `1px solid ${bodyBg}`, // Safe to modify to any other color
+          borderInlineStart: 0,
+        },
+      },
+    },
+  };
+};
+
+export default genStyleHooks(
+  ['Layout', 'Sider'],
+  (token) => [genSiderStyle(token)],
+  prepareComponentToken,
+  {
+    deprecatedTokens: DEPRECATED_TOKENS,
+  },
+);
--- a/package.json
+++ b/package.json
@ -353,7 +353,7 @@
    },
    {
      "path": "./dist/antd-with-locales.min.js",
-      "limit": "500 KiB",
+      "limit": "501 KiB",
      "gzip": true
    }
  ],