diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index 27d4014663..3a91fe1bf0 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -1,30 +1,31 @@ import type * as React from 'react'; import type { ComponentToken as AnchorComponentToken } from '../../anchor/style'; +import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'; import type { ComponentToken as ButtonComponentToken } from '../../button/style'; +import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'; +import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'; +import type { ComponentToken as CascaderComponentToken } from '../../cascader/style'; +import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; import type { ComponentToken as DividerComponentToken } from '../../divider/style'; import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style'; import type { ComponentToken as EmptyComponentToken } from '../../empty/style'; -import type { ComponentToken as CascaderComponentToken } from '../../cascader/style'; +import type { ComponentToken as ImageComponentToken } from '../../image/style'; import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style'; import type { ComponentToken as LayoutComponentToken } from '../../layout/style'; +import type { ComponentToken as ListComponentToken } from '../../list/style'; import type { ComponentToken as MentionsComponentToken } from '../../mentions/style'; +import type { ComponentToken as MenuComponentToken } from '../../menu/style'; +import type { ComponentToken as ModalComponentToken } from '../../modal/style'; import type { ComponentToken as NotificationComponentToken } from '../../notification/style'; +import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style'; +import type { ComponentToken as ProgressComponentToken } from '../../progress/style'; import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style'; import type { ComponentToken as SelectComponentToken } from '../../select/style'; import type { ComponentToken as SliderComponentToken } from '../../slider/style'; -import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; -import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'; -import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'; -import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; -import type { ComponentToken as TimelineComponentToken } from '../../timeline/style'; -import type { ComponentToken as MenuComponentToken } from '../../menu/style'; -import type { ComponentToken as UploadComponentToken } from '../../upload/style'; -import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'; -import type { ComponentToken as ProgressComponentToken } from '../../progress/style'; import type { ComponentToken as SpaceComponentToken } from '../../space/style'; -import type { ComponentToken as ModalComponentToken } from '../../modal/style'; -import type { ComponentToken as ImageComponentToken } from '../../image/style'; -import type { ComponentToken as ListComponentToken } from '../../list/style'; +import type { ComponentToken as TimelineComponentToken } from '../../timeline/style'; +import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; +import type { ComponentToken as UploadComponentToken } from '../../upload/style'; export const PresetColors = [ 'blue', @@ -84,6 +85,7 @@ export interface OverrideToken { Notification?: NotificationComponentToken; Pagination?: {}; Popover?: {}; + Popconfirm?: PopconfirmComponentToken; Rate?: {}; Result?: {}; Segmented?: SegmentedComponentToken; diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index 001f724c16..80dfd88669 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -18071,10 +18071,10 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = ` role="tooltip" >
"`; +exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"
code
"`; -exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"
code
"`; +exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"
code
"`; -exports[`Popconfirm shows content for render functions 1`] = `"
some-title
"`; +exports[`Popconfirm shows content for render functions 1`] = `"
some-title
"`; diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index 2e30387b49..ff61cc1d73 100644 --- a/components/popconfirm/index.tsx +++ b/components/popconfirm/index.tsx @@ -15,6 +15,7 @@ import ActionButton from '../_util/ActionButton'; import type { RenderFunction } from '../_util/getRenderPropValue'; import { getRenderPropValue } from '../_util/getRenderPropValue'; import { cloneElement } from '../_util/reactNode'; +import usePopconfirmStyle from './style'; export interface PopconfirmProps extends AbstractTooltipProps { title: React.ReactNode | RenderFunction; @@ -130,9 +131,10 @@ const Popconfirm = React.forwardRef((props, ref) => { overlayClassName, ...restProps } = props; - const prefixCls = getPrefixCls('popover', customizePrefixCls); - const prefixClsConfirm = getPrefixCls('popconfirm', customizePrefixCls); - const overlayClassNames = classNames(prefixClsConfirm, overlayClassName); + const prefixCls = getPrefixCls('popconfirm', customizePrefixCls); + const overlayClassNames = classNames(prefixCls, overlayClassName); + + const [wrapSSR] = usePopconfirmStyle(prefixCls); const overlay = ( @@ -140,16 +142,16 @@ const Popconfirm = React.forwardRef((props, ref) => { ); - return ( + return wrapSSR( {cloneElement(children, { onKeyDown: (e: React.KeyboardEvent) => { @@ -159,7 +161,7 @@ const Popconfirm = React.forwardRef((props, ref) => { onKeyDown(e); }, })} - + , ); }); diff --git a/components/popconfirm/style/index.less b/components/popconfirm/style/index.less index b753bc432f..22be193f57 100644 --- a/components/popconfirm/style/index.less +++ b/components/popconfirm/style/index.less @@ -1,8 +1,8 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; +// @import '../../style/themes/index'; +// @import '../../style/mixins/index'; -@popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm'; +// @popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm'; -.@{popconfirm-prefix-cls} { - z-index: @zindex-popoconfirm; -} +// .@{popconfirm-prefix-cls} { +// z-index: @zindex-popoconfirm; +// } diff --git a/components/popconfirm/style/index.tsx b/components/popconfirm/style/index.tsx index f0c7bbe6da..30f957101e 100644 --- a/components/popconfirm/style/index.tsx +++ b/components/popconfirm/style/index.tsx @@ -1,8 +1,83 @@ -import '../../style/index.less'; +// deps-lint-skip-all +import type { FullToken, GenerateStyle } from '../../_util/theme'; +import { genComponentStyleHook } from '../../_util/theme'; -// style dependencies -// deps-lint-skip: tooltip, popover -import '../../popover/style'; -import '../../button/style'; +export interface ComponentToken { + zIndexPopup: number; +} -import './index.less'; +export interface PopconfirmToken extends FullToken<'Popconfirm'> {} + +// =============================== Base =============================== +const genBaseStyle: GenerateStyle = token => { + const { + componentCls, + paddingSM, + padding, + paddingXXS, + iconCls, + zIndexPopup, + colorText, + colorWarning, + marginXS, + marginXXS, + fontSize, + lineHeight, + } = token; + + return { + [componentCls]: { + zIndex: zIndexPopup, + + [`${componentCls}-inner-content`]: { + padding: `${paddingSM}px ${padding}px`, + color: colorText, + }, + + [`${componentCls}-message`]: { + position: 'relative', + padding: `${paddingXXS}px 0 ${paddingSM}px`, + color: colorText, + fontSize, + display: 'flex', + flexWrap: 'nowrap', + alignItems: 'start', + + [`> ${iconCls}`]: { + color: colorWarning, + fontSize, + flex: 'none', + lineHeight: 1, + paddingTop: (Math.round(fontSize * lineHeight) - fontSize) / 2, + }, + + '&-title': { + flex: 'auto', + marginInlineStart: marginXS, + }, + }, + + [`${componentCls}-buttons`]: { + marginBottom: marginXXS, + textAlign: 'end', + + button: { + marginInlineStart: marginXS, + }, + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Popconfirm', + token => genBaseStyle(token), + token => { + const { zIndexPopupBase } = token; + + return { + zIndexPopup: zIndexPopupBase + 60, + }; + }, +); diff --git a/components/popover/index.tsx b/components/popover/index.tsx index 928f3b76ad..baa9b0f149 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -47,6 +47,7 @@ const Popover = React.forwardRef( ref={ref as any} overlay={_overlay || getOverlay(prefixCls)} transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)} + data-popover-inject />, ); }, diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index d1505fdf0c..90f2e1fd4d 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -5,15 +5,15 @@ // deps-lint-skip: tooltip // deps-lint-skip-all -import { TinyColor } from '@ctrl/tinycolor'; import type { CSSObject } from '@ant-design/cssinjs'; -import type { PresetColorType, GenerateStyle, FullToken } from '../../_util/theme'; +import { TinyColor } from '@ctrl/tinycolor'; +import type { FullToken, GenerateStyle, PresetColorType } from '../../_util/theme'; import { + genComponentStyleHook, + mergeToken, PresetColors, resetComponent, roundedArrow, - genComponentStyleHook, - mergeToken, } from '../../_util/theme'; // FIXME @@ -36,7 +36,6 @@ type PopoverToken = FullToken<'Popover'> & { const genBaseStyle: GenerateStyle = token => { const { componentCls, - iconCls, popoverBg, popoverColor, popoverMinWidth, @@ -48,11 +47,6 @@ const genBaseStyle: GenerateStyle = token => { boxShadow, colorSplit, colorTextHeading, - colorWarning, - fontSize, - marginSM, - marginXS, - lineHeight, radiusBase: borderRadius, paddingSM, } = token; @@ -109,38 +103,6 @@ const genBaseStyle: GenerateStyle = token => { color: popoverColor, }, - // FIXME 没找到使用地方，先保留 - '&-message': { - position: 'relative', - // FIXME - padding: '4px 0 12px', - color: popoverColor, - fontSize, - - [`> ${iconCls}`]: { - position: 'absolute', - // FIXME - top: 4 + (lineHeight * fontSize - fontSize) / 2, - color: colorWarning, - fontSize, - }, - - '&-title': { - // FIXME - paddingInlineStart: fontSize + 8, - }, - }, - - // FIXME 没找到使用地方，先保留 - '&-buttons': { - marginBottom: marginXS, - textAlign: 'end', - - button: { - marginInlineStart: marginSM, - }, - }, - [`${componentCls}-arrow`]: { position: 'absolute', display: 'block', diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index 85433888d4..dc05644adb 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -259,10 +259,10 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] = role="tooltip" >
Are you sure delete this task?