feat: ConfigProvider support Calendar className and style properties (#43385)

components/calendar/generateCalendar.tsx

@@ -115,7 +115,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
       onPanelChange,
       onSelect,
     } = props;
-    const { getPrefixCls, direction } = React.useContext(ConfigContext);
+    const { getPrefixCls, direction, calendar } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('picker', customizePrefixCls);
     const calendarPrefixCls = `${prefixCls}-calendar`;
 
@@ -304,11 +304,12 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
             [`${calendarPrefixCls}-mini`]: !fullscreen,
             [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
           },
+          calendar?.className,
           className,
           rootClassName,
           hashId,
         )}
-        style={style}
+        style={{ ...calendar?.style, ...style }}
       >
         {headerRender ? (
           headerRender({

components/config-provider/__tests__/style.test.tsx

@@ -6,6 +6,7 @@ import Anchor from '../../anchor';
 import Avatar from '../../avatar';
 import Badge from '../../badge';
 import Breadcrumb from '../../breadcrumb';
+import Calendar from '../../calendar';
 import Card from '../../card';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
@@ -778,6 +779,36 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
 
+  it('Should Calendar className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        calendar={{
+          className: 'test-class',
+        }}
+      >
+        <Calendar />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-picker-calendar')).toHaveClass('test-class');
+  });
+
+  it('Should Calendar style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        calendar={{
+          style: { color: 'red' },
+        }}
+      >
+        <Calendar style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-picker-calendar')).toHaveStyle(
+      'color: red; font-size: 16px;',
+    );
+  });
+
   it('Should Card className & style works', () => {
     const { container } = render(
       <ConfigProvider card={{ className: 'cp-card', style: { backgroundColor: 'blue' } }}>

components/config-provider/context.ts

@@ -98,6 +98,7 @@ export interface ConfigConsumerProps {
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
+  calendar?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -108,6 +108,7 @@ const {
 | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | card | Set Card common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -141,6 +141,7 @@ export interface ConfigProviderProps {
   alert?: ComponentStyleConfig;
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
+  calendar?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
   divider?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
@@ -268,6 +269,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     componentDisabled,
     segmented,
     spin,
+    calendar,
     cascader,
     typography,
     checkbox,
@@ -357,6 +359,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     theme: mergedTheme,
     segmented,
     spin,
+    calendar,
     cascader,
     typography,
     checkbox,

components/config-provider/index.zh-CN.md

@@ -109,6 +109,7 @@ const {
 | badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
 | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |