mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-17 23:02:28 +08:00
Compare commits
15 Commits
get-prop-s
...
typography
| Author | SHA1 | Date | |
|---|---|---|---|
|
9a4cc2cbd3 | ||
|
|
e790b66a1e | ||
|
|
a052a5d2be | ||
|
|
3314988e39 | ||
|
|
36b916d8e0 | ||
|
|
1d4c4dd188 | ||
|
|
a2d889fb17 | ||
|
|
1c8eb5f00b | ||
|
|
a97fa60d90 | ||
|
|
5d2020f5cb | ||
|
|
a192155765 | ||
|
|
1edaa53a76 | ||
|
|
38f32d5cf7 | ||
|
|
065ff3d2ad | ||
|
|
08a0e26973 |
@@ -65,6 +65,7 @@ import type { TourProps } from '../tour/interface';
|
||||
import type { TransferProps } from '../transfer';
|
||||
import type { TreeProps } from '../tree';
|
||||
import type { TreeSelectProps } from '../tree-select';
|
||||
import type { TypographyClassNamesType, TypographyStylesType } from '../typography/Base';
|
||||
import type { UploadProps } from '../upload';
|
||||
import type { RenderEmptyHandler } from './defaultRenderEmpty';
|
||||
|
||||
@@ -242,6 +243,11 @@ export type AlertConfig = ComponentStyleConfig &
|
||||
|
||||
export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
|
||||
|
||||
export type TypographyConfig = ComponentStyleConfig & {
|
||||
classNames?: TypographyClassNamesType;
|
||||
styles?: TypographyStylesType;
|
||||
};
|
||||
|
||||
export type BreadcrumbConfig = ComponentStyleConfig &
|
||||
Pick<BreadcrumbProps, 'classNames' | 'styles' | 'separator' | 'dropdownIcon'>;
|
||||
|
||||
@@ -447,7 +453,7 @@ export interface ConfigComponentProps {
|
||||
collapse?: CollapseConfig;
|
||||
floatButton?: FloatButtonConfig;
|
||||
floatButtonGroup?: FloatButtonGroupConfig;
|
||||
typography?: ComponentStyleConfig;
|
||||
typography?: TypographyConfig;
|
||||
skeleton?: SkeletonConfig;
|
||||
spin?: SpinConfig;
|
||||
segmented?: SegmentedConfig;
|
||||
|
||||
@@ -74,6 +74,7 @@ import type {
|
||||
TourConfig,
|
||||
TransferConfig,
|
||||
TreeSelectConfig,
|
||||
TypographyConfig,
|
||||
UploadConfig,
|
||||
Variant,
|
||||
WaveConfig,
|
||||
@@ -225,7 +226,7 @@ export interface ConfigProviderProps {
|
||||
collapse?: CollapseConfig;
|
||||
divider?: ComponentStyleConfig;
|
||||
drawer?: DrawerConfig;
|
||||
typography?: ComponentStyleConfig;
|
||||
typography?: TypographyConfig;
|
||||
skeleton?: SkeletonConfig;
|
||||
spin?: SpinConfig;
|
||||
segmented?: ComponentStyleConfig;
|
||||
|
||||
@@ -16,6 +16,8 @@ export interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'> {
|
||||
onCopy: React.MouseEventHandler<HTMLButtonElement>;
|
||||
iconOnly: boolean;
|
||||
loading: boolean;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const CopyBtn: React.FC<CopyBtnProps> = ({
|
||||
@@ -28,6 +30,8 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
|
||||
tabIndex,
|
||||
onCopy,
|
||||
loading: btnLoading,
|
||||
className,
|
||||
style,
|
||||
}) => {
|
||||
const tooltipNodes = toList(tooltips);
|
||||
const iconNodes = toList(icon);
|
||||
@@ -40,10 +44,11 @@ const CopyBtn: React.FC<CopyBtnProps> = ({
|
||||
<Tooltip title={copyTitle}>
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(`${prefixCls}-copy`, {
|
||||
className={clsx(`${prefixCls}-copy`, className, {
|
||||
[`${prefixCls}-copy-success`]: copied,
|
||||
[`${prefixCls}-copy-icon-only`]: iconOnly,
|
||||
})}
|
||||
style={style}
|
||||
onClick={onCopy}
|
||||
aria-label={ariaLabel}
|
||||
tabIndex={tabIndex}
|
||||
|
||||
@@ -8,9 +8,10 @@ import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
|
||||
import { composeRef } from '@rc-component/util/lib/ref';
|
||||
import { clsx } from 'clsx';
|
||||
|
||||
import type { SemanticType } from '../../_util/hooks';
|
||||
import isNonNullable from '../../_util/isNonNullable';
|
||||
import { isStyleSupport } from '../../_util/styleChecker';
|
||||
import { ConfigContext } from '../../config-provider';
|
||||
import type { DirectionType } from '../../config-provider';
|
||||
import useLocale from '../../locale/useLocale';
|
||||
import type { TooltipProps } from '../../tooltip';
|
||||
import Tooltip from '../../tooltip';
|
||||
@@ -19,6 +20,7 @@ import useCopyClick from '../hooks/useCopyClick';
|
||||
import useMergedConfig from '../hooks/useMergedConfig';
|
||||
import usePrevious from '../hooks/usePrevious';
|
||||
import useTooltipProps from '../hooks/useTooltipProps';
|
||||
import { useTypographySemantic } from '../hooks/useTypographySemantic';
|
||||
import type { TypographyProps } from '../Typography';
|
||||
import Typography from '../Typography';
|
||||
import CopyBtn from './CopyBtn';
|
||||
@@ -28,6 +30,41 @@ import { isEleEllipsis, isValidText } from './util';
|
||||
|
||||
export type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
|
||||
|
||||
// Base typography props without generic parameter for semantic types
|
||||
export interface BaseTypographyProps extends React.HTMLAttributes<HTMLElement> {
|
||||
id?: string;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
rootClassName?: string;
|
||||
style?: React.CSSProperties;
|
||||
classNames?: TypographyClassNamesType;
|
||||
styles?: TypographyStylesType;
|
||||
children?: React.ReactNode;
|
||||
'aria-label'?: string;
|
||||
direction?: DirectionType;
|
||||
/** @private */
|
||||
component?: keyof JSX.IntrinsicElements;
|
||||
}
|
||||
|
||||
export type TypographySemanticClassNames = {
|
||||
root?: string;
|
||||
actions?: string;
|
||||
action?: string;
|
||||
};
|
||||
|
||||
export type TypographySemanticStyles = {
|
||||
root?: React.CSSProperties;
|
||||
actions?: React.CSSProperties;
|
||||
action?: React.CSSProperties;
|
||||
};
|
||||
|
||||
export type TypographyClassNamesType = SemanticType<
|
||||
BaseTypographyProps,
|
||||
TypographySemanticClassNames
|
||||
>;
|
||||
|
||||
export type TypographyStylesType = SemanticType<BaseTypographyProps, TypographySemanticStyles>;
|
||||
|
||||
export interface CopyConfig {
|
||||
text?: string | (() => string | Promise<string>);
|
||||
onCopy?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
@@ -65,9 +102,8 @@ export interface EllipsisConfig {
|
||||
tooltip?: React.ReactNode | TooltipProps;
|
||||
}
|
||||
|
||||
export interface BlockProps<
|
||||
C extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
|
||||
> extends TypographyProps<C> {
|
||||
export interface BlockProps<C extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements>
|
||||
extends TypographyProps<C> {
|
||||
title?: string;
|
||||
editable?: boolean | EditConfig;
|
||||
copyable?: boolean | CopyConfig;
|
||||
@@ -126,6 +162,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
style,
|
||||
classNames,
|
||||
styles,
|
||||
direction: typographyDirection,
|
||||
type,
|
||||
disabled,
|
||||
children,
|
||||
@@ -138,14 +177,18 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
onMouseLeave,
|
||||
...restProps
|
||||
} = props;
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const [textLocale] = useLocale('Text');
|
||||
|
||||
const typographyRef = React.useRef<HTMLElement>(null);
|
||||
const editIconRef = React.useRef<HTMLButtonElement>(null);
|
||||
|
||||
// ============================ MISC ============================
|
||||
const prefixCls = getPrefixCls('typography', customizePrefixCls);
|
||||
const [mergedClassNames, mergedStyles, prefixCls, direction] = useTypographySemantic(
|
||||
customizePrefixCls,
|
||||
classNames,
|
||||
styles,
|
||||
typographyDirection,
|
||||
props,
|
||||
);
|
||||
|
||||
const textProps = omit(restProps, DECORATION_PROPS);
|
||||
|
||||
@@ -356,7 +399,11 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
<button
|
||||
type="button"
|
||||
key="expand"
|
||||
className={`${prefixCls}-${expanded ? 'collapse' : 'expand'}`}
|
||||
className={clsx(
|
||||
`${prefixCls}-${expanded ? 'collapse' : 'expand'}`,
|
||||
mergedClassNames.action,
|
||||
)}
|
||||
style={mergedStyles.action}
|
||||
onClick={(e) => onExpandClick(e!, { expanded: !expanded })}
|
||||
aria-label={expanded ? textLocale.collapse : textLocale?.expand}
|
||||
>
|
||||
@@ -381,7 +428,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
<button
|
||||
type="button"
|
||||
ref={editIconRef}
|
||||
className={`${prefixCls}-edit`}
|
||||
className={clsx(`${prefixCls}-edit`, mergedClassNames.action)}
|
||||
style={mergedStyles.action}
|
||||
onClick={onEditClick}
|
||||
aria-label={ariaLabel}
|
||||
tabIndex={tabIndex}
|
||||
@@ -408,6 +456,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
onCopy={onCopyClick}
|
||||
loading={copyLoading}
|
||||
iconOnly={!isNonNullable(children)}
|
||||
className={mergedClassNames.action}
|
||||
style={mergedStyles.action}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -424,7 +474,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
return (
|
||||
<span
|
||||
key="operations"
|
||||
className={`${prefixCls}-actions`}
|
||||
className={clsx(`${prefixCls}-actions`, mergedClassNames.actions)}
|
||||
style={mergedStyles.actions}
|
||||
onMouseEnter={() => setIsHoveringOperations(true)}
|
||||
onMouseLeave={() => setIsHoveringOperations(false)}
|
||||
>
|
||||
@@ -474,6 +525,8 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
|
||||
},
|
||||
className,
|
||||
)}
|
||||
classNames={classNames}
|
||||
styles={styles}
|
||||
prefixCls={customizePrefixCls}
|
||||
style={{
|
||||
...style,
|
||||
|
||||
@@ -3,77 +3,120 @@ import type { JSX } from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
|
||||
import type { DirectionType } from '../config-provider';
|
||||
import { useComponentConfig } from '../config-provider/context';
|
||||
import type {
|
||||
BaseTypographyProps,
|
||||
TypographySemanticClassNames,
|
||||
TypographySemanticStyles,
|
||||
} from './Base';
|
||||
import { useTypographySemantic } from './hooks/useTypographySemantic';
|
||||
import useStyle from './style';
|
||||
|
||||
export interface TypographyProps<C extends keyof JSX.IntrinsicElements>
|
||||
extends React.HTMLAttributes<HTMLElement> {
|
||||
id?: string;
|
||||
prefixCls?: string;
|
||||
extends BaseTypographyProps {
|
||||
/** @internal */
|
||||
component?: C;
|
||||
}
|
||||
|
||||
interface InternalProps {
|
||||
className?: string;
|
||||
rootClassName?: string;
|
||||
style?: React.CSSProperties;
|
||||
children?: React.ReactNode;
|
||||
/** @internal */
|
||||
component?: C;
|
||||
'aria-label'?: string;
|
||||
component?: keyof JSX.IntrinsicElements;
|
||||
direction?: DirectionType;
|
||||
classNames?: TypographySemanticClassNames;
|
||||
styles?: TypographySemanticStyles;
|
||||
prefixCls: string;
|
||||
}
|
||||
|
||||
interface InternalTypographyProps<C extends keyof JSX.IntrinsicElements>
|
||||
extends TypographyProps<C> {}
|
||||
|
||||
const Typography = React.forwardRef<
|
||||
HTMLElement,
|
||||
InternalTypographyProps<keyof JSX.IntrinsicElements>
|
||||
>((props, ref) => {
|
||||
const InternalTypography = React.forwardRef<HTMLElement, InternalProps>((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
component: Component = 'article',
|
||||
className,
|
||||
rootClassName,
|
||||
children,
|
||||
direction: typographyDirection,
|
||||
direction,
|
||||
style,
|
||||
classNames,
|
||||
styles,
|
||||
prefixCls,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction: contextDirection,
|
||||
className: contextClassName,
|
||||
style: contextStyle,
|
||||
} = useComponentConfig('typography');
|
||||
|
||||
const direction = typographyDirection ?? contextDirection;
|
||||
const prefixCls = getPrefixCls('typography', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [hashId, cssVarCls] = useStyle(prefixCls);
|
||||
|
||||
const componentClassName = clsx(
|
||||
prefixCls,
|
||||
contextClassName,
|
||||
hashId,
|
||||
cssVarCls,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
rootClassName,
|
||||
hashId,
|
||||
cssVarCls,
|
||||
classNames?.root,
|
||||
);
|
||||
|
||||
const mergedStyle: React.CSSProperties = { ...contextStyle, ...style };
|
||||
const mergedStyle: React.CSSProperties = {
|
||||
...styles?.root,
|
||||
...style,
|
||||
};
|
||||
|
||||
return (
|
||||
// @ts-expect-error: Expression produces a union type that is too complex to represent.
|
||||
<Component className={componentClassName} style={mergedStyle} ref={ref} {...restProps}>
|
||||
<Component {...restProps} className={componentClassName} style={mergedStyle} ref={ref}>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
InternalTypography.displayName = 'InternalTypography';
|
||||
}
|
||||
|
||||
const Typography = React.forwardRef<HTMLElement, TypographyProps<keyof JSX.IntrinsicElements>>(
|
||||
(props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
rootClassName,
|
||||
children,
|
||||
direction: typographyDirection,
|
||||
style,
|
||||
classNames,
|
||||
styles,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const [mergedClassNames, mergedStyles, prefixCls, direction] = useTypographySemantic(
|
||||
customizePrefixCls,
|
||||
classNames,
|
||||
styles,
|
||||
typographyDirection,
|
||||
props,
|
||||
);
|
||||
|
||||
return (
|
||||
<InternalTypography
|
||||
ref={ref}
|
||||
component="article"
|
||||
className={clsx(className, rootClassName)}
|
||||
direction={direction}
|
||||
style={style}
|
||||
classNames={mergedClassNames}
|
||||
styles={mergedStyles}
|
||||
prefixCls={prefixCls}
|
||||
{...restProps}
|
||||
>
|
||||
{children}
|
||||
</InternalTypography>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Typography.displayName = 'Typography';
|
||||
}
|
||||
|
||||
export default Typography;
|
||||
export { InternalTypography };
|
||||
|
||||
@@ -59,7 +59,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/proximity"
|
||||
>
|
||||
Principles
|
||||
@@ -67,7 +67,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/overview"
|
||||
>
|
||||
Patterns
|
||||
@@ -75,7 +75,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/resources"
|
||||
>
|
||||
Resource Download
|
||||
@@ -163,7 +163,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/proximity-cn"
|
||||
>
|
||||
设计原则
|
||||
@@ -171,7 +171,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/overview-cn"
|
||||
>
|
||||
设计模式
|
||||
@@ -179,7 +179,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/resources-cn"
|
||||
>
|
||||
设计资源
|
||||
@@ -272,7 +272,7 @@ Array [
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/proximity"
|
||||
>
|
||||
Principles
|
||||
@@ -280,7 +280,7 @@ Array [
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/overview"
|
||||
>
|
||||
Patterns
|
||||
@@ -288,7 +288,7 @@ Array [
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/resources"
|
||||
>
|
||||
Resource Download
|
||||
@@ -371,7 +371,7 @@ Array [
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/proximity-cn"
|
||||
>
|
||||
设计原则
|
||||
@@ -379,7 +379,7 @@ Array [
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/overview-cn"
|
||||
>
|
||||
设计模式
|
||||
@@ -387,7 +387,7 @@ Array [
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/resources-cn"
|
||||
>
|
||||
设计资源
|
||||
@@ -422,17 +422,17 @@ Array [
|
||||
</div>
|
||||
</article>,
|
||||
<span
|
||||
class="ant-typography ant-typography-success css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-success"
|
||||
>
|
||||
Success but red
|
||||
</span>,
|
||||
<span
|
||||
class="ant-typography ant-typography-warning css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-warning"
|
||||
>
|
||||
Warning but green
|
||||
</span>,
|
||||
<span
|
||||
class="ant-typography ant-typography-danger css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-danger"
|
||||
>
|
||||
Danger but blue
|
||||
</span>,
|
||||
@@ -834,7 +834,7 @@ Array [
|
||||
</div>,
|
||||
<div
|
||||
aria-label="This is a loooooooooooooooooooooooooooooooong editable text with suffix."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
>
|
||||
This is a loooooooooooooooooooooooooooooooong editable text with suffix.
|
||||
<span
|
||||
@@ -1588,20 +1588,20 @@ Array [
|
||||
</span>
|
||||
</button>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</div>,
|
||||
<div
|
||||
aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style=""
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</div>,
|
||||
<span
|
||||
aria-describedby="test-id"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width: 200px;"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
@@ -1628,7 +1628,7 @@ Array [
|
||||
</div>,
|
||||
<span
|
||||
aria-describedby="test-id"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width: 200px;"
|
||||
>
|
||||
<code>
|
||||
@@ -1740,7 +1740,7 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx extend conte
|
||||
</div>
|
||||
<div
|
||||
aria-label="Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style=""
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
@@ -1931,7 +1931,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample
|
||||
<span
|
||||
@@ -1949,7 +1949,7 @@ Array [
|
||||
</div>,
|
||||
<span
|
||||
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style="max-width: 400px; font-size: 24px;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -2007,7 +2007,7 @@ Array [
|
||||
<br />,
|
||||
<span
|
||||
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style="max-width: 400px; font-size: 12px;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -2065,7 +2065,7 @@ Array [
|
||||
<br />,
|
||||
<span
|
||||
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style="width: 400px; font-size: 24px;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -2123,7 +2123,7 @@ Array [
|
||||
<br />,
|
||||
<span
|
||||
aria-label="Ant Design is a design language for background applications, is refined by Ant UED Team."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style="width: 100px;"
|
||||
>
|
||||
Ant Design is a design language for background applications, is refined by Ant UED Team.
|
||||
@@ -2181,7 +2181,7 @@ Array [
|
||||
<p>
|
||||
[Before]
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
>
|
||||
not ellipsis
|
||||
</span>
|
||||
@@ -2192,7 +2192,7 @@ Array [
|
||||
>
|
||||
<span
|
||||
aria-describedby="test-id"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width: 100px;"
|
||||
>
|
||||
默认 display none 样式的超长文字， 悬停 tooltip 失效了
|
||||
@@ -2219,7 +2219,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style="width: 300px;"
|
||||
>
|
||||
In the process of internal desktop applications development,
|
||||
@@ -2238,7 +2238,7 @@ Array [
|
||||
- render like this
|
||||
- and this
|
||||
and that"
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style=""
|
||||
>
|
||||
this is a multiline
|
||||
@@ -2252,7 +2252,7 @@ Array [
|
||||
<br />,
|
||||
<span
|
||||
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style="width: 100px; white-space: nowrap;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -2326,7 +2326,7 @@ Array [
|
||||
<span
|
||||
aria-describedby="test-id"
|
||||
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style="width: 280px; display: block;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -2410,7 +2410,7 @@ exports[`renders components/typography/demo/ellipsis-debug.tsx extend context co
|
||||
exports[`renders components/typography/demo/ellipsis-middle.tsx extend context correctly 1`] = `
|
||||
<span
|
||||
aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of "
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
style="max-width: 100%;"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -2430,7 +2430,7 @@ exports[`renders components/typography/demo/link-danger-debug.tsx extend context
|
||||
</span>
|
||||
<br />
|
||||
<a
|
||||
class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-danger ant-typography-link"
|
||||
href="https://ant.design"
|
||||
>
|
||||
Danger Link
|
||||
@@ -2713,7 +2713,7 @@ Array [
|
||||
</div>,
|
||||
<div
|
||||
aria-label="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
|
||||
class="ant-typography ant-typography-ellipsis css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis"
|
||||
title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
|
||||
>
|
||||
To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
|
||||
@@ -2740,7 +2740,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-secondary css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-secondary"
|
||||
>
|
||||
Ant Design (secondary)
|
||||
</span>
|
||||
@@ -2749,7 +2749,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-success css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-success"
|
||||
>
|
||||
Ant Design (success)
|
||||
</span>
|
||||
@@ -2758,7 +2758,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-warning css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-warning"
|
||||
>
|
||||
Ant Design (warning)
|
||||
</span>
|
||||
@@ -2767,7 +2767,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-danger css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-danger"
|
||||
>
|
||||
Ant Design (danger)
|
||||
</span>
|
||||
@@ -2776,7 +2776,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-disabled css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-disabled"
|
||||
>
|
||||
Ant Design (disabled)
|
||||
</span>
|
||||
@@ -2862,7 +2862,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
|
||||
class="ant-space-item"
|
||||
>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="https://ant.design"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
|
||||
@@ -0,0 +1,379 @@
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`renders components/typography/demo/_semantic.tsx correctly 1`] = `
|
||||
<div
|
||||
class="acss-1ucck97"
|
||||
>
|
||||
<div
|
||||
class="ant-row css-var-test-id"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-16 acss-my3sst css-var-test-id"
|
||||
>
|
||||
<div
|
||||
aria-label="Ant Design is a design language for background applications, refined by Ant UED Team. It aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development."
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis semantic-mark-root"
|
||||
style=""
|
||||
>
|
||||
Ant Design is a design language for background applications, refined by Ant UED Team. It aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.
|
||||
<span
|
||||
class="ant-typography-actions semantic-mark-actions"
|
||||
>
|
||||
<button
|
||||
aria-label="Edit"
|
||||
class="ant-typography-edit semantic-mark-action"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="edit"
|
||||
class="anticon anticon-edit"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="edit"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Copy"
|
||||
class="ant-typography-copy semantic-mark-action"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
class="anticon anticon-copy"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="copy"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-8 css-var-test-id"
|
||||
>
|
||||
<ul
|
||||
class="acss-1ry21g5"
|
||||
>
|
||||
<li
|
||||
class="acss-1ehfz5v"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
|
||||
>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px;"
|
||||
>
|
||||
root
|
||||
</h5>
|
||||
<span
|
||||
class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
|
||||
>
|
||||
6.4.0
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
aria-hidden="true"
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="pushpin"
|
||||
class="anticon anticon-pushpin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="pushpin"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-hidden="true"
|
||||
class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="info-circle"
|
||||
class="anticon anticon-info-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="info-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px; font-size: 12px;"
|
||||
>
|
||||
根元素，包含排版基础样式、布局和定位
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="acss-1ehfz5v"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
|
||||
>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px;"
|
||||
>
|
||||
actions
|
||||
</h5>
|
||||
<span
|
||||
class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
|
||||
>
|
||||
6.4.0
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
aria-hidden="true"
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="pushpin"
|
||||
class="anticon anticon-pushpin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="pushpin"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-hidden="true"
|
||||
class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="info-circle"
|
||||
class="anticon anticon-info-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="info-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px; font-size: 12px;"
|
||||
>
|
||||
操作区域元素，包含复制、编辑、展开/收起等操作按钮的布局和间距样式
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="acss-1ehfz5v"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
|
||||
>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
|
||||
>
|
||||
<h5
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px;"
|
||||
>
|
||||
action
|
||||
</h5>
|
||||
<span
|
||||
class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
|
||||
>
|
||||
6.4.0
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
|
||||
>
|
||||
<button
|
||||
aria-hidden="true"
|
||||
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="pushpin"
|
||||
class="anticon anticon-pushpin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="pushpin"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-hidden="true"
|
||||
class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="info-circle"
|
||||
class="anticon anticon-info-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="info-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-typography css-var-test-id"
|
||||
style="margin: 0px; font-size: 12px;"
|
||||
>
|
||||
单个操作按钮元素，包括复制、编辑、展开、收起按钮的样式，如内边距、圆角、颜色等
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -60,7 +60,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/proximity"
|
||||
>
|
||||
Principles
|
||||
@@ -68,7 +68,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/overview"
|
||||
>
|
||||
Patterns
|
||||
@@ -76,7 +76,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/resources"
|
||||
>
|
||||
Resource Download
|
||||
@@ -164,7 +164,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/proximity-cn"
|
||||
>
|
||||
设计原则
|
||||
@@ -172,7 +172,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/overview-cn"
|
||||
>
|
||||
设计模式
|
||||
@@ -180,7 +180,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/resources-cn"
|
||||
>
|
||||
设计资源
|
||||
@@ -272,7 +272,7 @@ Array [
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/proximity"
|
||||
>
|
||||
Principles
|
||||
@@ -280,7 +280,7 @@ Array [
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/overview"
|
||||
>
|
||||
Patterns
|
||||
@@ -288,7 +288,7 @@ Array [
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/resources"
|
||||
>
|
||||
Resource Download
|
||||
@@ -371,7 +371,7 @@ Array [
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/proximity-cn"
|
||||
>
|
||||
设计原则
|
||||
@@ -379,7 +379,7 @@ Array [
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/spec/overview-cn"
|
||||
>
|
||||
设计模式
|
||||
@@ -387,7 +387,7 @@ Array [
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="/docs/resources-cn"
|
||||
>
|
||||
设计资源
|
||||
@@ -422,17 +422,17 @@ Array [
|
||||
</div>
|
||||
</article>,
|
||||
<span
|
||||
class="ant-typography ant-typography-success css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-success"
|
||||
>
|
||||
Success but red
|
||||
</span>,
|
||||
<span
|
||||
class="ant-typography ant-typography-warning css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-warning"
|
||||
>
|
||||
Warning but green
|
||||
</span>,
|
||||
<span
|
||||
class="ant-typography ant-typography-danger css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-danger"
|
||||
>
|
||||
Danger but blue
|
||||
</span>,
|
||||
@@ -684,7 +684,7 @@ Array [
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
>
|
||||
This is a loooooooooooooooooooooooooooooooong editable text
|
||||
<!-- -->
|
||||
@@ -1190,24 +1190,24 @@ Array [
|
||||
</span>
|
||||
</button>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
|
||||
style="-webkit-line-clamp:2"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</div>,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width:200px"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</span>,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width:200px"
|
||||
>
|
||||
<code>
|
||||
@@ -1275,7 +1275,7 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1`
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
|
||||
style="-webkit-line-clamp:2"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.
|
||||
@@ -1422,7 +1422,7 @@ Array [
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
>
|
||||
Ant Design, a design language for background applications, is refined by Ant UED Team. This is a nest sample
|
||||
<!-- -->
|
||||
@@ -1441,7 +1441,7 @@ Array [
|
||||
case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
|
||||
</div>,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="max-width:400px;font-size:24px"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -1477,7 +1477,7 @@ Array [
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="max-width:400px;font-size:12px"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -1513,7 +1513,7 @@ Array [
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width:400px;font-size:24px"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -1549,7 +1549,7 @@ Array [
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width:100px"
|
||||
>
|
||||
Ant Design is a design language for background applications, is refined by Ant UED Team.
|
||||
@@ -1586,7 +1586,7 @@ Array [
|
||||
<p>
|
||||
[Before]
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
>
|
||||
not ellipsis
|
||||
</span>
|
||||
@@ -1596,14 +1596,14 @@ Array [
|
||||
style="display:none"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width:100px"
|
||||
>
|
||||
默认 display none 样式的超长文字， 悬停 tooltip 失效了
|
||||
</span>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
|
||||
style="width:300px;-webkit-line-clamp:3"
|
||||
>
|
||||
In the process of internal desktop applications development,
|
||||
@@ -1616,7 +1616,7 @@ Array [
|
||||
</div>,
|
||||
<pre>
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-multiple-line"
|
||||
style="-webkit-line-clamp:2"
|
||||
>
|
||||
this is a multiline
|
||||
@@ -1629,7 +1629,7 @@ Array [
|
||||
</pre>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width:100px;white-space:nowrap"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -1680,7 +1680,7 @@ Array [
|
||||
3. Move from copy button back to the text (without leaving the block) → ellipsis tooltip should show again.
|
||||
</div>
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="width:280px;display:block"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
|
||||
@@ -1720,7 +1720,7 @@ Array [
|
||||
|
||||
exports[`renders components/typography/demo/ellipsis-middle.tsx correctly 1`] = `
|
||||
<span
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
style="max-width:100%"
|
||||
>
|
||||
In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of
|
||||
@@ -1740,7 +1740,7 @@ exports[`renders components/typography/demo/link-danger-debug.tsx correctly 1`]
|
||||
</span>
|
||||
<br />
|
||||
<a
|
||||
class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-danger ant-typography-link"
|
||||
href="https://ant.design"
|
||||
>
|
||||
Danger Link
|
||||
@@ -1997,7 +1997,7 @@ Array [
|
||||
/>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-ellipsis ant-typography-ellipsis-single-line"
|
||||
title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
|
||||
>
|
||||
To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life
|
||||
@@ -2024,7 +2024,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-secondary css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-secondary"
|
||||
>
|
||||
Ant Design (secondary)
|
||||
</span>
|
||||
@@ -2033,7 +2033,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-success css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-success"
|
||||
>
|
||||
Ant Design (success)
|
||||
</span>
|
||||
@@ -2042,7 +2042,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-warning css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-warning"
|
||||
>
|
||||
Ant Design (warning)
|
||||
</span>
|
||||
@@ -2051,7 +2051,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-danger css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-danger"
|
||||
>
|
||||
Ant Design (danger)
|
||||
</span>
|
||||
@@ -2060,7 +2060,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-typography ant-typography-disabled css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-disabled"
|
||||
>
|
||||
Ant Design (disabled)
|
||||
</span>
|
||||
@@ -2146,7 +2146,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
|
||||
class="ant-space-item"
|
||||
>
|
||||
<a
|
||||
class="ant-typography ant-typography-link css-var-test-id"
|
||||
class="ant-typography css-var-test-id ant-typography-link"
|
||||
href="https://ant.design"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
|
||||
@@ -2,24 +2,24 @@
|
||||
|
||||
exports[`Typography rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<div
|
||||
class="ant-typography ant-typography-rtl css-var-root"
|
||||
class="ant-typography css-var-root ant-typography-rtl"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Typography rtl render component should be rendered correctly in RTL direction 2`] = `
|
||||
<article
|
||||
class="ant-typography ant-typography-rtl css-var-root"
|
||||
class="ant-typography css-var-root ant-typography-rtl"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Typography rtl render component should be rendered correctly in RTL direction 3`] = `
|
||||
<h1
|
||||
class="ant-typography ant-typography-rtl css-var-root"
|
||||
class="ant-typography css-var-root ant-typography-rtl"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Typography rtl render component should be rendered correctly in RTL direction 4`] = `
|
||||
<a
|
||||
class="ant-typography ant-typography-rtl ant-typography-link css-var-root"
|
||||
class="ant-typography css-var-root ant-typography-rtl ant-typography-link"
|
||||
/>
|
||||
`;
|
||||
|
||||
3
components/typography/__tests__/demo-semantic.test.tsx
Normal file
3
components/typography/__tests__/demo-semantic.test.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
import { semanticDemoTest } from '../../../tests/shared/demoTest';
|
||||
|
||||
semanticDemoTest('typography');
|
||||
122
components/typography/__tests__/semantic.test.tsx
Normal file
122
components/typography/__tests__/semantic.test.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import React from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
|
||||
import Typography from '..';
|
||||
import { render } from '../../../tests/utils';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import type { TypographyClassNamesType, TypographyStylesType } from '../Base';
|
||||
|
||||
describe('Typography.Semantic', () => {
|
||||
it('should support classNames and styles for root, actions, and action', () => {
|
||||
const classNamesFn: TypographyClassNamesType = jest.fn(() => ({
|
||||
root: 'custom-typography',
|
||||
actions: 'custom-actions',
|
||||
action: 'custom-action',
|
||||
}));
|
||||
|
||||
const stylesFn: TypographyStylesType = jest.fn(() => ({
|
||||
root: { color: '#1890ff' },
|
||||
actions: { backgroundColor: '#f0f0f0' },
|
||||
action: { padding: '5px' },
|
||||
}));
|
||||
|
||||
const { rerender } = render(
|
||||
<Typography.Paragraph classNames={classNamesFn} styles={stylesFn} copyable>
|
||||
Test Typography
|
||||
</Typography.Paragraph>,
|
||||
);
|
||||
|
||||
expect(classNamesFn).toHaveBeenCalled();
|
||||
expect(stylesFn).toHaveBeenCalled();
|
||||
|
||||
const rootElement = document.querySelector<HTMLElement>('.ant-typography');
|
||||
expect(rootElement).toHaveClass('custom-typography');
|
||||
expect(rootElement).toHaveStyle({ color: 'rgb(24, 144, 255)' });
|
||||
|
||||
const actionsElement = document.querySelector<HTMLElement>('.ant-typography-actions');
|
||||
expect(actionsElement).toHaveClass('custom-actions');
|
||||
expect(actionsElement).toHaveStyle({ backgroundColor: 'rgb(240, 240, 240)' });
|
||||
|
||||
const actionButton = document.querySelector<HTMLElement>('.ant-typography-actions button');
|
||||
expect(actionButton).toHaveClass('custom-action');
|
||||
expect(actionButton).toHaveStyle({ padding: '5px' });
|
||||
|
||||
rerender(
|
||||
<Typography.Paragraph
|
||||
classNames={{
|
||||
root: 'obj-root',
|
||||
actions: 'obj-actions',
|
||||
action: 'obj-action',
|
||||
}}
|
||||
styles={{
|
||||
root: { fontSize: '16px', color: '#52c41a' },
|
||||
actions: { margin: '10px' },
|
||||
action: { borderRadius: '4px' },
|
||||
}}
|
||||
copyable
|
||||
>
|
||||
Updated Typography
|
||||
</Typography.Paragraph>,
|
||||
);
|
||||
|
||||
const updatedRootElement = document.querySelector<HTMLElement>('.ant-typography');
|
||||
expect(updatedRootElement).toHaveClass('obj-root');
|
||||
expect(updatedRootElement).toHaveStyle({ fontSize: '16px', color: 'rgb(82, 196, 26)' });
|
||||
|
||||
const updatedActionsElement = document.querySelector<HTMLElement>('.ant-typography-actions');
|
||||
expect(updatedActionsElement).toHaveClass('obj-actions');
|
||||
expect(updatedActionsElement).toHaveStyle({ margin: '10px' });
|
||||
|
||||
const updatedActionButton = document.querySelector<HTMLElement>(
|
||||
'.ant-typography-actions button',
|
||||
);
|
||||
expect(updatedActionButton).toHaveClass('obj-action');
|
||||
expect(updatedActionButton).toHaveStyle({ borderRadius: '4px' });
|
||||
});
|
||||
|
||||
it('should merge context and component classNames and styles', () => {
|
||||
const contextClassNames: TypographyClassNamesType = {
|
||||
root: 'context-root',
|
||||
actions: 'context-actions',
|
||||
};
|
||||
const contextStyles: TypographyStylesType = {
|
||||
root: { padding: '10px' },
|
||||
actions: { margin: '5px' },
|
||||
};
|
||||
const componentClassNames: TypographyClassNamesType = {
|
||||
root: 'component-root',
|
||||
};
|
||||
const componentStyles: TypographyStylesType = {
|
||||
root: { fontSize: '14px' },
|
||||
};
|
||||
|
||||
render(
|
||||
<ConfigProvider>
|
||||
<ConfigProvider
|
||||
typography={{
|
||||
className: undefined,
|
||||
style: undefined,
|
||||
classNames: contextClassNames,
|
||||
styles: contextStyles,
|
||||
}}
|
||||
>
|
||||
<Typography.Paragraph classNames={componentClassNames} styles={componentStyles} copyable>
|
||||
Test Typography
|
||||
</Typography.Paragraph>
|
||||
</ConfigProvider>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
const rootElement = document.querySelector<HTMLElement>('.ant-typography');
|
||||
const actionsElement = document.querySelector<HTMLElement>('.ant-typography-actions');
|
||||
|
||||
expect(rootElement).toHaveClass(clsx(contextClassNames.root, componentClassNames.root));
|
||||
expect(actionsElement).toHaveClass(contextClassNames.actions!);
|
||||
|
||||
expect(rootElement).toHaveStyle({
|
||||
padding: contextStyles.root?.padding,
|
||||
fontSize: componentStyles.root?.fontSize,
|
||||
});
|
||||
expect(actionsElement).toHaveStyle({ margin: contextStyles.actions?.margin });
|
||||
});
|
||||
});
|
||||
43
components/typography/demo/_semantic.tsx
Normal file
43
components/typography/demo/_semantic.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import { Typography } from 'antd';
|
||||
|
||||
import useLocale from '../../../.dumi/hooks/useLocale';
|
||||
import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
root: '根元素，包含排版基础样式、布局和定位',
|
||||
actions: '操作区域元素，包含复制、编辑、展开/收起等操作按钮的布局和间距样式',
|
||||
action: '单个操作按钮元素，包括复制、编辑、展开、收起按钮的样式，如内边距、圆角、颜色等',
|
||||
},
|
||||
en: {
|
||||
root: 'Root element with base typography styles, layout, and positioning',
|
||||
actions:
|
||||
'Actions element with layout and spacing styles for copy, edit, expand/collapse buttons',
|
||||
action:
|
||||
'Individual action button element including copy, edit, expand, collapse button styles like padding, border radius, colors, etc.',
|
||||
},
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [locale] = useLocale(locales);
|
||||
return (
|
||||
<SemanticPreview
|
||||
componentName="Typography"
|
||||
semantics={[
|
||||
{ name: 'root', desc: locale.root, version: '6.4.0' },
|
||||
{ name: 'actions', desc: locale.actions, version: '6.4.0' },
|
||||
{ name: 'action', desc: locale.action, version: '6.4.0' },
|
||||
]}
|
||||
>
|
||||
<Typography.Paragraph copyable editable ellipsis={{ rows: 2, expandable: true }}>
|
||||
Ant Design is a design language for background applications, refined by Ant UED Team. It
|
||||
aims to uniform the user interface specs for internal background projects, lower the
|
||||
unnecessary cost of design differences and implementation and liberate the resources of
|
||||
design and front-end development.
|
||||
</Typography.Paragraph>
|
||||
</SemanticPreview>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
62
components/typography/hooks/useTypographySemantic.ts
Normal file
62
components/typography/hooks/useTypographySemantic.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { useMergeSemantic } from '../../_util/hooks';
|
||||
import type { DirectionType } from '../../config-provider';
|
||||
import { useComponentConfig } from '../../config-provider/context';
|
||||
import type {
|
||||
BaseTypographyProps,
|
||||
TypographyClassNamesType,
|
||||
TypographySemanticClassNames,
|
||||
TypographySemanticStyles,
|
||||
TypographyStylesType,
|
||||
} from '../Base';
|
||||
|
||||
type UseTypographySemanticResult = [
|
||||
mergedClassNames: TypographySemanticClassNames,
|
||||
mergedStyles: TypographySemanticStyles,
|
||||
prefixCls: string,
|
||||
direction: DirectionType | undefined,
|
||||
];
|
||||
|
||||
export const useTypographySemantic = (
|
||||
customizePrefixCls?: string,
|
||||
classNames?: TypographyClassNamesType | undefined,
|
||||
styles?: TypographyStylesType | undefined,
|
||||
typographyDirection?: DirectionType,
|
||||
props?: BaseTypographyProps,
|
||||
): UseTypographySemanticResult => {
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction: contextDirection,
|
||||
className: contextClassName,
|
||||
style: contextStyle,
|
||||
classNames: contextClassNames,
|
||||
styles: contextStyles,
|
||||
} = useComponentConfig('typography');
|
||||
|
||||
const direction = typographyDirection ?? contextDirection;
|
||||
const prefixCls = getPrefixCls('typography', customizePrefixCls);
|
||||
|
||||
const mergedProps: BaseTypographyProps = {
|
||||
...props,
|
||||
prefixCls,
|
||||
direction,
|
||||
};
|
||||
|
||||
const contextClassNamesObject = useMemo(() => ({ root: contextClassName }), [contextClassName]);
|
||||
const contextStylesObject = useMemo(() => ({ root: contextStyle }), [contextStyle]);
|
||||
|
||||
const [mergedClassNames, mergedStyles] = useMergeSemantic<
|
||||
TypographyClassNamesType,
|
||||
TypographyStylesType,
|
||||
BaseTypographyProps
|
||||
>(
|
||||
[contextClassNamesObject, contextClassNames, classNames],
|
||||
[contextStylesObject, contextStyles, styles],
|
||||
{
|
||||
props: mergedProps,
|
||||
},
|
||||
);
|
||||
|
||||
return [mergedClassNames, mergedStyles, prefixCls, direction];
|
||||
};
|
||||
@@ -4,14 +4,16 @@ import Text from './Text';
|
||||
import Title from './Title';
|
||||
import OriginTypography from './Typography';
|
||||
|
||||
export type TypographyProps = typeof OriginTypography & {
|
||||
export type { TypographyProps } from './Typography';
|
||||
|
||||
type CompoundedComponent = typeof OriginTypography & {
|
||||
Text: typeof Text;
|
||||
Link: typeof Link;
|
||||
Title: typeof Title;
|
||||
Paragraph: typeof Paragraph;
|
||||
};
|
||||
|
||||
const Typography = OriginTypography as TypographyProps;
|
||||
const Typography = OriginTypography as CompoundedComponent;
|
||||
Typography.Text = Text;
|
||||
Typography.Link = Link;
|
||||
Typography.Title = Title;
|
||||
|
||||
Reference in New Issue
Block a user