Browse Source

fix: fix Descriptions size small of CP (#42244)

pull/42252/head
huiwang 2 years ago
committed by GitHub
parent
commit
d0e29d33b7
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 12
      components/descriptions/__tests__/index.test.tsx
  2. 8
      components/descriptions/index.tsx

12
components/descriptions/__tests__/index.test.tsx

@ -4,6 +4,7 @@ import Descriptions from '..';
import mountTest from '../../../tests/shared/mountTest';
import { resetWarned } from '../../_util/warning';
import { render } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
describe('Descriptions', () => {
mountTest(Descriptions);
@ -267,4 +268,15 @@ describe('Descriptions', () => {
expect(container).toHaveAttribute('data-id', '12345');
expect(container).toHaveAttribute('aria-describedby', 'some-label');
});
it('Descriptions should inherit the size from ConfigProvider if the componentSize is set ', () => {
const { container } = render(
<ConfigProvider componentSize="small">
<Descriptions bordered>
<Descriptions.Item label="small">small</Descriptions.Item>
</Descriptions>
</ConfigProvider>,
);
expect(container.querySelectorAll('.ant-descriptions-small')).toHaveLength(1);
});
});

8
components/descriptions/index.tsx

@ -11,6 +11,7 @@ import DescriptionsItem from './Item';
import Row from './Row';
import useStyle from './style';
import SizeContext from '../config-provider/SizeContext';
export interface DescriptionsContextProps {
labelStyle?: React.CSSProperties;
@ -127,7 +128,7 @@ function Descriptions({
className,
rootClassName,
style,
size,
size: customizeSize,
labelStyle,
contentStyle,
...restProps
@ -137,6 +138,9 @@ function Descriptions({
const [screens, setScreens] = React.useState<ScreenMap>({});
const mergedColumn = getColumn(column, screens);
const size = React.useContext(SizeContext);
const mergedSize = customizeSize ?? size;
const [wrapSSR, hashId] = useStyle(prefixCls);
const responsiveObserver = useResponsiveObserver();
@ -167,7 +171,7 @@ function Descriptions({
className={classNames(
prefixCls,
{
[`${prefixCls}-${size}`]: size && size !== 'default',
[`${prefixCls}-${mergedSize}`]: mergedSize && mergedSize !== 'default',
[`${prefixCls}-bordered`]: !!bordered,
[`${prefixCls}-rtl`]: direction === 'rtl',
},

Loading…
Cancel
Save