fix: ok button of the DatePicker becomes compacted when used with Space.Compact (#46769)

* fix: ok button of the DatePicker becomes compacted when used with Space.Compact * fix: break CSS selector * fix: break the compact context on the panel * chore: update test
2024-11-30 02:59:04 +08:00 · 2024-01-16 14:02:31 +08:00 · 2024-01-16 14:02:31 +08:00 · 77b351f68f
commit 77b351f68f
parent 14af2a77ae
6 changed files with 120 additions and 112 deletions
--- a/components/date-picker/PickerButton.tsx
+++ b/components/date-picker/PickerButton.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ButtonProps } from '../button';
 import Button from '../button';
+import type { ButtonProps } from '../button';

 export default function PickerButton(props: ButtonProps) {
  return <Button size="small" type="primary" {...props} />;
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -16,7 +16,7 @@ import DisabledContext from '../../config-provider/DisabledContext';
 import useSize from '../../config-provider/hooks/useSize';
 import { FormItemInputContext } from '../../form/context';
 import { useLocale } from '../../locale';
-import { useCompactItemContext } from '../../space/Compact';
+import { NoCompactStyle, useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
 import {
@ -124,58 +124,64 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
    const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);

    return wrapCSSVar(
-      <RCRangePicker<DateType>
-        separator={
-          <span aria-label="to" className={`${prefixCls}-separator`}>
-            <SwapRightOutlined />
-          </span>
-        }
-        disabled={mergedDisabled}
-        ref={innerRef}
-        dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-        placeholder={getRangePlaceholder(locale, picker, placeholder)}
-        suffixIcon={suffixNode}
-        prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-        nextIcon={<span className={`${prefixCls}-next-icon`} />}
-        superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-        superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-        transitionName={`${rootPrefixCls}-slide-up`}
-        {...restProps}
-        {...additionalOverrideProps}
-        className={classNames(
-          {
-            [`${prefixCls}-${mergedSize}`]: mergedSize,
-            [`${prefixCls}-${variant}`]: enableVariantCls,
-          },
-          getStatusClassNames(prefixCls, getMergedStatus(contextStatus, customStatus), hasFeedback),
-          hashId,
-          compactItemClassnames,
-          className,
-          rangePicker?.className,
-          cssVarCls,
-          rootCls,
-          rootClassName,
-        )}
-        style={{ ...rangePicker?.style, ...style }}
-        locale={locale.lang}
-        prefixCls={prefixCls}
-        getPopupContainer={customGetPopupContainer || getPopupContainer}
-        generateConfig={generateConfig}
-        components={Components}
-        direction={direction}
-        dropdownClassName={classNames(
-          hashId,
-          popupClassName || dropdownClassName,
-          cssVarCls,
-          rootCls,
-          rootClassName,
-        )}
-        popupStyle={{
-          ...props.popupStyle,
-          zIndex,
-        }}
-        allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
-      />,
+      <NoCompactStyle>
+        <RCRangePicker<DateType>
+          separator={
+            <span aria-label="to" className={`${prefixCls}-separator`}>
+              <SwapRightOutlined />
+            </span>
+          }
+          disabled={mergedDisabled}
+          ref={innerRef}
+          dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+          placeholder={getRangePlaceholder(locale, picker, placeholder)}
+          suffixIcon={suffixNode}
+          prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+          nextIcon={<span className={`${prefixCls}-next-icon`} />}
+          superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+          superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+          transitionName={`${rootPrefixCls}-slide-up`}
+          {...restProps}
+          {...additionalOverrideProps}
+          className={classNames(
+            {
+              [`${prefixCls}-${mergedSize}`]: mergedSize,
+              [`${prefixCls}-${variant}`]: enableVariantCls,
+            },
+            getStatusClassNames(
+              prefixCls,
+              getMergedStatus(contextStatus, customStatus),
+              hasFeedback,
+            ),
+            hashId,
+            compactItemClassnames,
+            className,
+            rangePicker?.className,
+            cssVarCls,
+            rootCls,
+            rootClassName,
+          )}
+          style={{ ...rangePicker?.style, ...style }}
+          locale={locale.lang}
+          prefixCls={prefixCls}
+          getPopupContainer={customGetPopupContainer || getPopupContainer}
+          generateConfig={generateConfig}
+          components={Components}
+          direction={direction}
+          dropdownClassName={classNames(
+            hashId,
+            popupClassName || dropdownClassName,
+            cssVarCls,
+            rootCls,
+            rootClassName,
+          )}
+          popupStyle={{
+            ...props.popupStyle,
+            zIndex,
+          }}
+          allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
+        />
+      </NoCompactStyle>,
    );
  });

--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -17,7 +17,7 @@ import DisabledContext from '../../config-provider/DisabledContext';
 import useSize from '../../config-provider/hooks/useSize';
 import { FormItemInputContext } from '../../form/context';
 import { useLocale } from '../../locale';
-import { useCompactItemContext } from '../../space/Compact';
+import { NoCompactStyle, useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
 import {
@ -151,58 +151,60 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
        const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);

        return wrapCSSVar(
-          <RCPicker<DateType>
-            ref={innerRef}
-            placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
-            suffixIcon={suffixNode}
-            dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-            prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-            nextIcon={<span className={`${prefixCls}-next-icon`} />}
-            superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-            superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-            transitionName={`${rootPrefixCls}-slide-up`}
-            {...additionalProps}
-            {...restProps}
-            {...additionalOverrideProps}
-            locale={locale!.lang}
-            className={classNames(
-              {
-                [`${prefixCls}-${mergedSize}`]: mergedSize,
-                [`${prefixCls}-${variant}`]: enableVariantCls,
-              },
-              getStatusClassNames(
-                prefixCls,
-                getMergedStatus(contextStatus, customStatus),
-                hasFeedback,
-              ),
-              hashId,
-              compactItemClassnames,
-              consumerStyle?.className,
-              className,
-              cssVarCls,
-              rootCls,
-              rootClassName,
-            )}
-            style={{ ...consumerStyle?.style, ...style }}
-            prefixCls={prefixCls}
-            getPopupContainer={customizeGetPopupContainer || getPopupContainer}
-            generateConfig={generateConfig}
-            components={Components}
-            direction={direction}
-            disabled={mergedDisabled}
-            dropdownClassName={classNames(
-              hashId,
-              cssVarCls,
-              rootCls,
-              rootClassName,
-              popupClassName || dropdownClassName,
-            )}
-            popupStyle={{
-              ...props.popupStyle,
-              zIndex,
-            }}
-            allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
-          />,
+          <NoCompactStyle>
+            <RCPicker<DateType>
+              ref={innerRef}
+              placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
+              suffixIcon={suffixNode}
+              dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+              prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+              nextIcon={<span className={`${prefixCls}-next-icon`} />}
+              superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+              superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+              transitionName={`${rootPrefixCls}-slide-up`}
+              {...additionalProps}
+              {...restProps}
+              {...additionalOverrideProps}
+              locale={locale!.lang}
+              className={classNames(
+                {
+                  [`${prefixCls}-${mergedSize}`]: mergedSize,
+                  [`${prefixCls}-${variant}`]: enableVariantCls,
+                },
+                getStatusClassNames(
+                  prefixCls,
+                  getMergedStatus(contextStatus, customStatus),
+                  hasFeedback,
+                ),
+                hashId,
+                compactItemClassnames,
+                consumerStyle?.className,
+                className,
+                cssVarCls,
+                rootCls,
+                rootClassName,
+              )}
+              style={{ ...consumerStyle?.style, ...style }}
+              prefixCls={prefixCls}
+              getPopupContainer={customizeGetPopupContainer || getPopupContainer}
+              generateConfig={generateConfig}
+              components={Components}
+              direction={direction}
+              disabled={mergedDisabled}
+              dropdownClassName={classNames(
+                hashId,
+                cssVarCls,
+                rootCls,
+                rootClassName,
+                popupClassName || dropdownClassName,
+              )}
+              popupStyle={{
+                ...props.popupStyle,
+                zIndex,
+              }}
+              allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
+            />
+          </NoCompactStyle>,
        );
      },
    );
--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/space/tests/snapshots/demo-extend.test.ts.snap
@ -6407,7 +6407,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                    class="ant-picker-ok"
                  >
                    <button
-                      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
+                      class="ant-btn ant-btn-primary ant-btn-sm"
                      disabled=""
                      type="button"
                    >
@ -8020,7 +8020,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
                      class="ant-picker-ok"
                    >
                      <button
-                        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
+                        class="ant-btn ant-btn-primary ant-btn-sm"
                        disabled=""
                        type="button"
                      >
@ -15185,7 +15185,7 @@ Array [
                    class="ant-picker-ok"
                  >
                    <button
-                      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-compact-item ant-btn-compact-first-item"
+                      class="ant-btn ant-btn-primary ant-btn-sm"
                      disabled=""
                      type="button"
                    >
--- a/components/statistic/index.ts
+++ b/components/statistic/index.ts
@ -13,4 +13,4 @@ export type CompoundedStatistic = typeof Statistic & CompoundedComponent;

 (Statistic as CompoundedStatistic).Countdown = Countdown;

-export default (Statistic as CompoundedStatistic);
+export default Statistic as CompoundedStatistic;
--- a/components/table/InternalTable.tsx
+++ b/components/table/InternalTable.tsx
@ -627,4 +627,4 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
  );
 };

-export default (React.forwardRef(InternalTable) as RefInternalTable);
+export default React.forwardRef(InternalTable) as RefInternalTable;