From 9d786864f793bc53599ee2f39e83779cfbc4b853 Mon Sep 17 00:00:00 2001 From: shifeng1993 Date: Tue, 9 May 2023 23:53:26 +0800 Subject: [PATCH 1/2] fix bug --- components/layout/demo/basic.vue | 118 +++++++++--------- components/space/index.tsx | 17 ++- components/steps/index.tsx | 7 +- components/switch/demo/disabled.vue | 7 +- components/switch/demo/loading.vue | 5 +- components/switch/demo/size.vue | 5 +- components/switch/demo/text.vue | 6 +- .../component-demos/slider/sliderInBg.tsx | 2 +- .../component-demos/tag/tag.tsx | 4 +- .../overviews/Primary.tsx | 2 +- site/src/views/ComponentOverview.less | 4 +- 11 files changed, 89 insertions(+), 88 deletions(-) diff --git a/components/layout/demo/basic.vue b/components/layout/demo/basic.vue index ea97c61536..a03beb9e2c 100644 --- a/components/layout/demo/basic.vue +++ b/components/layout/demo/basic.vue @@ -16,76 +16,70 @@ Classic page layouts. + diff --git a/components/space/index.tsx b/components/space/index.tsx index bd5ddd249d..76136365da 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -63,10 +63,16 @@ const Space = defineComponent({ props.align === undefined && props.direction === 'horizontal' ? 'center' : props.align, ); const cn = computed(() => { - return classNames(prefixCls.value, hashId.value, `${prefixCls.value}-${props.direction}`, { - [`${prefixCls.value}-rtl`]: directionConfig.value === 'rtl', - [`${prefixCls.value}-align-${mergedAlign.value}`]: mergedAlign.value, - }); + return classNames( + prefixCls.value, + hashId.value, + `${prefixCls.value}-${props.direction}`, + { + [`${prefixCls.value}-rtl`]: directionConfig.value === 'rtl', + [`${prefixCls.value}-align-${mergedAlign.value}`]: mergedAlign.value, + }, + attrs.class, + ); }); const marginDirection = computed(() => @@ -81,6 +87,7 @@ const Space = defineComponent({ return { ...gapStyle, ...(props.wrap && { flexWrap: 'wrap', marginBottom: `${-verticalSize.value}px` }), + ...(attrs.style as CSSProperties), } as CSSProperties; }); return () => { @@ -97,7 +104,7 @@ const Space = defineComponent({ const horizontalSizeVal = horizontalSize.value; const latestIndex = len - 1; return ( -
+
{items.map((child, index) => { const originIndex = children.indexOf(child); let itemStyle: CSSProperties = {}; diff --git a/components/steps/index.tsx b/components/steps/index.tsx index 650d31d869..cc3a533474 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -15,6 +15,7 @@ import Tooltip from '../tooltip'; import { VcStepProps } from '../vc-steps/Step'; import type { Status, ProgressDotRender } from '../vc-steps/interface'; import type { MouseEventHandler } from '../_util/EventInterface'; +import { useToken } from '../theme/internal'; // CSSINJS import useStyle from './style'; @@ -66,6 +67,7 @@ const Steps = defineComponent({ const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props); // style const [wrapSSR, hashId] = useStyle(prefixCls); + const [, token] = useToken(); const screens = useBreakpoint(); const direction = computed(() => @@ -90,7 +92,10 @@ const Steps = defineComponent({ }) => { if (status === 'process' && props.percent !== undefined) { // currently it's hard-coded, since we can't easily read the actually width of icon - const progressWidth = props.size === 'small' ? 32 : 40; + + const progressWidth = + props.size === 'small' ? token.value.controlHeight : token.value.controlHeightLG; + const iconWithProgress = (