diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index d17001bf97..9fbf9385a0 100644
--- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
style="flex-direction: column; flex-grow: 1; column-gap: 4px; row-gap: 4px; justify-content: center;"
>
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index ca511f1598..0dbe5ded6e 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -1,6 +1,7 @@
import React from 'react';
-import type {QAProps} from '../types';
+import {Box} from '../layout';
+import type {BoxProps} from '../layout';
import {colorText} from './colorText/colorText';
import type {ColorTextBaseProps} from './colorText/colorText';
@@ -9,24 +10,14 @@ import type {TextBaseProps} from './text/text';
export interface TextProps
extends Omit,
- ColorTextBaseProps,
- QAProps {
- /**
- * Ability to override default html tag
- */
- as?: C;
- style?: React.CSSProperties;
- className?: string;
- id?: string;
- children?: React.ReactNode;
- title?: string;
+ Omit, 'color'>,
+ ColorTextBaseProps {
ellipsisLines?: number;
}
-
type TextRef = React.ComponentPropsWithRef['ref'];
-type TextPropsWithoutRef = TextProps &
- Omit, keyof TextProps>;
+type TextPropsWithTypedAttrs = TextProps &
+ Omit, keyof TextProps>;
/**
* A component for working with typography.
@@ -54,24 +45,20 @@ type TextPropsWithoutRef = TextProps &
* some text
* ```
*/
-export const Text = React.forwardRef(function Text(
- {
- as,
- children,
- variant,
- className,
- ellipsis,
- color,
- whiteSpace,
- wordBreak,
- ellipsisLines,
- style: outerStyle,
- qa,
- ...rest
- }: TextPropsWithoutRef,
- ref?: TextRef,
-) {
- const Tag: React.ElementType = as || 'span';
+export const Text = function Text({
+ as: propsAs,
+ children,
+ variant,
+ className,
+ ellipsis,
+ color,
+ whiteSpace,
+ wordBreak,
+ ellipsisLines,
+ style: outerStyle,
+ ...rest
+}: TextProps) {
+ const as: React.ElementType = propsAs || 'span';
const style: React.CSSProperties = {
...outerStyle,
@@ -82,8 +69,8 @@ export const Text = React.forwardRef(function Text
{children}
-
+
);
-}) as (({
- ref,
- ...props
-}: TextPropsWithoutRef & {ref?: TextRef}) => React.ReactElement) & {displayName: string};
-
-Text.displayName = 'Text';
+} as ((
+ props: TextPropsWithTypedAttrs & {ref?: TextRef},
+) => React.ReactElement) & {displayName: string};
diff --git a/src/components/Text/__tests__/Text.test.tsx b/src/components/Text/__tests__/Text.test.tsx
new file mode 100644
index 0000000000..ef80c7814a
--- /dev/null
+++ b/src/components/Text/__tests__/Text.test.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import {render} from '../../../../test-utils/utils';
+import {Button} from '../../Button';
+import {Text} from '../Text';
+
+describe('Text', () => {
+ test('should return expected jsx if no props passed', () => {
+ const {container} = render(Hello World!);
+
+ expect(container).toMatchSnapshot();
+ });
+
+ test('should return expected jsx if qa attr passed and variant changed', () => {
+ const {container} = render(
+
+ Hello World!
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ test('should return expected jsx if html attributes passed and changed default html tag and with typed ref', () => {
+ const ComponentWithRef = () => {
+ const ref = React.useRef(null);
+
+ return (
+
+ Hello World!
+
+ );
+ };
+
+ const {container} = render();
+
+ expect(container).toMatchSnapshot();
+ });
+
+ test('should return expected jsx if passed props what converted to classNames and styles', () => {
+ const {container} = render(
+
+ Hello World!
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+
+ test('should return expected jsx with another component substitution', () => {
+ const {container} = render(
+
+ Hello World!
+ ,
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap b/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap
new file mode 100644
index 0000000000..6525d06eb5
--- /dev/null
+++ b/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text should return expected jsx if html attributes passed and changed default html tag and with typed ref 1`] = `
+
+
+
+`;
+
+exports[`Text should return expected jsx if no props passed 1`] = `
+
+
+ Hello World!
+
+
+`;
+
+exports[`Text should return expected jsx if passed props what converted to classNames and styles 1`] = `
+
+
+ Hello World!
+
+
+`;
+
+exports[`Text should return expected jsx if qa attr passed and variant changed 1`] = `
+
+
+ Hello World!
+
+
+`;
+
+exports[`Text should return expected jsx with another component substitution 1`] = `
+
+
+
+`;
diff --git a/src/components/layout/Box/Box.tsx b/src/components/layout/Box/Box.tsx
index 18275dc267..3e0d828494 100644
--- a/src/components/layout/Box/Box.tsx
+++ b/src/components/layout/Box/Box.tsx
@@ -35,6 +35,11 @@ export interface BoxProps
spacing?: SpacingProps;
}
+type BoxRef = React.ComponentPropsWithRef['ref'];
+
+type BoxPropsWithTypedAttrs = BoxProps &
+ Omit, keyof BoxProps>;
+
/**
* Basic block to build other components and for standalone usage as a smart block with build in support of most usable css properties and shortcut `spacing` properties.
* ```tsx
@@ -63,7 +68,7 @@ export const Box = React.forwardRef(function Box,
) {
const Tag: React.ElementType = as || 'div';
@@ -88,4 +93,6 @@ export const Box = React.forwardRef(function Box(
+ props: BoxPropsWithTypedAttrs & {ref?: BoxRef},
+) => React.ReactElement) & {displayName: string};
diff --git a/src/components/layout/Flex/Flex.tsx b/src/components/layout/Flex/Flex.tsx
index 1b8e5469a5..22ca7d3c2c 100644
--- a/src/components/layout/Flex/Flex.tsx
+++ b/src/components/layout/Flex/Flex.tsx
@@ -1,6 +1,5 @@
import React from 'react';
-import type {QAProps} from '../../types';
import {block} from '../../utils/cn';
import {Box} from '../Box/Box';
import type {BoxProps} from '../Box/Box';
@@ -12,7 +11,7 @@ import './Flex.scss';
const b = block('flex');
-export interface FlexProps extends QAProps, BoxProps {
+export interface FlexProps extends BoxProps {
/**
* `flex-direction` property
*/
@@ -90,6 +89,11 @@ export interface FlexProps extends QAProps,
space?: Space | MediaPartial;
}
+type FlexRef = React.ComponentPropsWithRef['ref'];
+
+type FlexPropsWithTypedAttrs = FlexProps &
+ Omit, keyof FlexProps>;
+
/**
* Flexbox model utility component.
*
@@ -124,11 +128,9 @@ export interface FlexProps extends QAProps,
* ---
* Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#flex
*/
-export const Flex = React.forwardRef(function Flex(
- props: FlexProps,
- ref: React.ComponentPropsWithRef['ref'],
-) {
+export const Flex = function Flex(props: FlexProps) {
const {
+ as: propsAs,
direction,
grow,
basis,
@@ -151,6 +153,8 @@ export const Flex = React.forwardRef(function Flex
{space
@@ -209,4 +213,6 @@ export const Flex = React.forwardRef(function Flex
);
-});
+} as ((
+ props: FlexPropsWithTypedAttrs & {ref?: FlexRef},
+) => React.ReactElement) & {displayName: string};