From a98c77aecf90672bd869bd8b504fc9f74a7bec22 Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 11 Sep 2026 15:44:29 +0300 Subject: [PATCH 1/3] =?UTF-8?q?feat(Body):=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=B8=D1=82=D1=8C=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80?= =?UTF-8?q?=D1=8B=20=D0=B8=20fallback=20=D0=B4=D0=BB=D1=8F=20base?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- configs/eslint/rules/react.ts | 2 +- .../__snapshots__/ListBase.test.tsx.snap | 24 +- .../MenuItem/Template/MenuItemTemplate.tsx | 2 +- .../MenuItemTemplate.test.tsx.snap | 27 +- src/components/Message/Message.tsx | 2 +- .../__snapshots__/Message.test.tsx.snap | 20 +- src/components/Typography/Body.stories.ts | 8 +- src/components/Typography/Body.tsx | 32 +- .../Typography/__tests__/Body.test.tsx | 69 +- .../__snapshots__/Body.test.tsx.snap | 1515 +---------------- 10 files changed, 143 insertions(+), 1558 deletions(-) diff --git a/configs/eslint/rules/react.ts b/configs/eslint/rules/react.ts index 22bd3bd5..bb6a6dd4 100644 --- a/configs/eslint/rules/react.ts +++ b/configs/eslint/rules/react.ts @@ -15,7 +15,7 @@ export const reactConfig = defineConfig([ 'error', { validateNested: true, - rule: '(^(is|has|with|show)[A-Z]([A-Za-z0-9]?)+)|disabled|loading|paragraph|base|controlled', + rule: '(^(is|has|with|show)[A-Z]([A-Za-z0-9]?)+)|disabled|loading|paragraph|base|controlled|strikethrough', }, ], diff --git a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap index 323012bf..c04064d0 100644 --- a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap +++ b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap @@ -309,9 +309,7 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -320,6 +318,10 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` { "color": "#181a1f", }, + { + "fontSize": 14, + "lineHeight": 20, + }, undefined, undefined, undefined, @@ -864,9 +866,7 @@ exports[`ListBase tests ListBase full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -875,6 +875,10 @@ exports[`ListBase tests ListBase full disabled 1`] = ` { "color": "#181a1f", }, + { + "fontSize": 14, + "lineHeight": 20, + }, undefined, undefined, undefined, @@ -1426,9 +1430,7 @@ exports[`ListBase tests ListBase maximal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -1437,6 +1439,10 @@ exports[`ListBase tests ListBase maximal config 1`] = ` { "color": "#181a1f", }, + { + "fontSize": 14, + "lineHeight": 20, + }, undefined, undefined, undefined, @@ -1760,9 +1766,7 @@ exports[`ListBase tests ListBase minimal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -1771,6 +1775,10 @@ exports[`ListBase tests ListBase minimal config 1`] = ` { "color": "#181a1f", }, + { + "fontSize": 14, + "lineHeight": 20, + }, undefined, undefined, undefined, diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index fb2d4c05..c868bbf1 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -116,7 +116,7 @@ export const MenuItemTemplate = memo( /> ) : null} - {title} + {title} {caption ? ( {caption} ) : null} diff --git a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap index 0f47173b..cd652db8 100644 --- a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap +++ b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap @@ -244,9 +244,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -262,6 +260,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" @@ -611,9 +610,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -629,6 +626,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" @@ -813,9 +811,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -831,6 +827,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" @@ -1153,9 +1150,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -1171,6 +1166,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" @@ -1268,9 +1264,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -1286,6 +1280,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" @@ -1594,9 +1589,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -1612,6 +1605,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" @@ -1859,9 +1853,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -1877,6 +1869,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" @@ -1977,9 +1970,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -1995,6 +1986,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" @@ -2098,9 +2090,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, "includeFontPadding": false, - "lineHeight": 20, "verticalAlign": "middle", }, { @@ -2116,6 +2106,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` undefined, undefined, undefined, + undefined, ] } testID="Body" diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 728468fa..3770e9c3 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -201,7 +201,7 @@ export const Message = memo( {LeftContent} - + {title} {caption ? ( diff --git a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap index 06eed4f8..4f859bdb 100644 --- a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap +++ b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap @@ -50,7 +50,7 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` } > @@ -211,7 +211,7 @@ exports[`Message {"Icon": [Object]} 1`] = ` } > @@ -397,7 +397,7 @@ exports[`Message {"body": [Object], "caption": "caption", "severity": "info", "s } > @@ -593,7 +593,7 @@ exports[`Message {"body": [Object], "footer": [Object], "severity": "warning"} 1 } > @@ -764,7 +764,7 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio } > @@ -997,7 +997,7 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se } > @@ -1342,7 +1342,7 @@ exports[`Message {"hiddenIcon": false} 1`] = ` } > @@ -1405,7 +1405,7 @@ exports[`Message {"onTimerFinish": [Function mockConstructor], "timerValue": 5} } > @@ -1589,7 +1589,7 @@ exports[`Message {"severity": "danger"} 1`] = ` } > @@ -1773,7 +1773,7 @@ exports[`Message {} 1`] = ` } > diff --git a/src/components/Typography/Body.stories.ts b/src/components/Typography/Body.stories.ts index 10ae70b1..ba897184 100644 --- a/src/components/Typography/Body.stories.ts +++ b/src/components/Typography/Body.stories.ts @@ -10,15 +10,17 @@ const meta: Meta = { children: 'Test', disabled: false, paragraph: false, + size: 'lg', + strikethrough: false, weight: 'regular', - base: false, }, argTypes: { color: { control: 'radio', options: ['default', 'secondary', 'primary'] }, disabled: { control: 'boolean' }, paragraph: { control: 'boolean' }, - weight: { control: 'radio', options: ['regular', 'medium', 'bold'] }, - base: { control: 'boolean' }, + size: { control: 'radio', options: ['base', 'lg', 'xl'] }, + strikethrough: { control: 'boolean' }, + weight: { control: 'radio', options: ['regular', 'bold'] }, }, } diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index f223873e..855dbfc2 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -3,30 +3,47 @@ import { Text, type TextProps } from 'react-native' import { StyleSheet } from 'react-native-unistyles' export interface BodyProps extends TextProps { + /** + * @deprecated Используйте `size`. Проп будет удалён в следующей мажорной версии. + */ readonly base?: boolean + readonly size?: 'base' | 'lg' | 'xl' readonly color?: 'default' | 'secondary' | 'primary' readonly disabled?: boolean readonly paragraph?: boolean + readonly strikethrough?: boolean readonly weight?: 'regular' | 'bold' } export const Body = ({ + // eslint-disable-next-line @typescript-eslint/no-deprecated -- fallback поддерживается до следующей мажорной версии base, + size, color = 'default', disabled, paragraph, + strikethrough, weight = 'regular', style, ...other }: BodyProps) => { + // TODO: удалить fallback на base при следующем мажорном обновлении. + const resolvedSize = size ?? (base ? 'base' : 'lg') + return ( ({ text: { - fontSize: typography.Size['text-base'], includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.secondary, - lineHeight: 20, }, regular: { fontWeight: 400 }, bold: { fontWeight: 700, letterSpacing: -0.5 }, @@ -50,7 +65,14 @@ const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ primary: { color: theme.General.primaryColor }, secondary: { color: theme.General.textSecondaryColor }, base: { fontSize: typography.Size['text-sm'], lineHeight: 18 }, - paragraph: { lineHeight: 24 }, + lg: { fontSize: typography.Size['text-base'], lineHeight: 20 }, + xl: { + fontSize: typography.Size['text-xl'], + lineHeight: 30, + letterSpacing: 0, + }, + paragraphLg: { lineHeight: 24 }, paragraphBase: { lineHeight: 21 }, + strikethrough: { textDecorationLine: 'line-through' }, disabled: { opacity: 0.6 }, })) diff --git a/src/components/Typography/__tests__/Body.test.tsx b/src/components/Typography/__tests__/Body.test.tsx index 7dc1cb3c..556b5ca2 100644 --- a/src/components/Typography/__tests__/Body.test.tsx +++ b/src/components/Typography/__tests__/Body.test.tsx @@ -1,28 +1,69 @@ +/* eslint-disable @typescript-eslint/no-deprecated -- тесты фиксируют fallback до следующей мажорной версии */ import { render } from '@testing-library/react-native' import { Body, type BodyProps } from '../Body' describe('Body component tests', () => { - const snapshotCases = generatePropsCombinations({ - base: [true, false], - color: ['default', 'secondary', 'primary'], - disabled: [true, false], - paragraph: [true, false], - weight: ['regular', 'bold'], - }) + const snapshotCases: ReadonlyArray<{ name: string; props: BodyProps }> = [ + { + name: 'base regular paragraph', + props: { + color: 'secondary', + paragraph: true, + size: 'base', + weight: 'regular', + }, + }, + { name: 'lg regular paragraph', props: { paragraph: true, size: 'lg' } }, + { + name: 'xl bold strikethrough disabled', + props: { + color: 'primary', + disabled: true, + size: 'xl', + strikethrough: true, + weight: 'bold', + }, + }, + ] - test.each(snapshotCases)( - 'base = $base, color = $color, disabled = $disabled, paragraph = $paragraph, weight = $weight', - (props) => { - const renderedBody = render(Text) + test.each(snapshotCases)('$name', ({ props }) => { + const renderedBody = render(Text) - expect(renderedBody.toJSON()).toMatchSnapshot() - } - ) + expect(renderedBody.toJSON()).toMatchSnapshot() + }) test('default props', () => { const renderedBody = render(Text) expect(renderedBody.toJSON()).toMatchSnapshot() }) + + test.each([ + { name: 'base=true', base: true, size: 'base' as const }, + { name: 'base=false', base: false, size: 'lg' as const }, + ])('$name использует deprecated fallback', ({ base, size }) => { + const legacyBody = render(Text) + const body = render(Text) + + expect(legacyBody.toJSON()).toStrictEqual(body.toJSON()) + }) + + test('без size и deprecated base сохраняется размер lg', () => { + const legacyDefaultBody = render(Text) + const body = render(Text) + + expect(legacyDefaultBody.toJSON()).toStrictEqual(body.toJSON()) + }) + + test('size имеет приоритет над deprecated base', () => { + const bodyWithFallback = render( + + Text + + ) + const body = render(Text) + + expect(bodyWithFallback.toJSON()).toStrictEqual(body.toJSON()) + }) }) diff --git a/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap index 5e3a51ad..22aa5cd3 100644 --- a/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Body.test.tsx.snap @@ -1,1293 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Body component tests base = false, color = default, disabled = false, paragraph = false, weight = bold 1`] = ` +exports[`Body component tests base regular paragraph 1`] = ` - Text - -`; - -exports[`Body component tests base = false, color = default, disabled = false, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = default, disabled = false, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = default, disabled = false, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = default, disabled = true, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = default, disabled = true, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = default, disabled = true, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = default, disabled = true, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = primary, disabled = false, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = primary, disabled = false, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = primary, disabled = false, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = primary, disabled = false, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = primary, disabled = true, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = primary, disabled = true, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = primary, disabled = true, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = primary, disabled = true, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = secondary, disabled = false, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = secondary, disabled = false, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = secondary, disabled = false, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = secondary, disabled = false, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = secondary, disabled = true, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = secondary, disabled = true, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = secondary, disabled = true, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = false, color = secondary, disabled = true, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = default, disabled = false, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = default, disabled = false, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = default, disabled = false, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = default, disabled = false, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = default, disabled = true, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = default, disabled = true, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = default, disabled = true, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = default, disabled = true, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = primary, disabled = false, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = primary, disabled = false, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = primary, disabled = false, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = primary, disabled = false, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = primary, disabled = true, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = primary, disabled = true, paragraph = false, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = primary, disabled = true, paragraph = true, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = primary, disabled = true, paragraph = true, weight = regular 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = secondary, disabled = false, paragraph = false, weight = bold 1`] = ` - `; -exports[`Body component tests base = true, color = secondary, disabled = false, paragraph = false, weight = regular 1`] = ` +exports[`Body component tests default props 1`] = ` - Text - -`; - -exports[`Body component tests base = true, color = secondary, disabled = false, paragraph = true, weight = bold 1`] = ` - `; -exports[`Body component tests base = true, color = secondary, disabled = false, paragraph = true, weight = regular 1`] = ` +exports[`Body component tests lg regular paragraph 1`] = ` - Text - -`; - -exports[`Body component tests base = true, color = secondary, disabled = true, paragraph = false, weight = bold 1`] = ` - - Text - -`; - -exports[`Body component tests base = true, color = secondary, disabled = true, paragraph = false, weight = regular 1`] = ` - `; -exports[`Body component tests base = true, color = secondary, disabled = true, paragraph = true, weight = bold 1`] = ` +exports[`Body component tests xl bold strikethrough disabled 1`] = ` - Text - -`; - -exports[`Body component tests base = true, color = secondary, disabled = true, paragraph = true, weight = regular 1`] = ` - `; - -exports[`Body component tests default props 1`] = ` - - Text - -`; From d12d1612b76ffa9bdd911376e119462724396f3d Mon Sep 17 00:00:00 2001 From: Alesya Volosach Date: Fri, 11 Sep 2026 15:45:12 +0300 Subject: [PATCH 2/3] =?UTF-8?q?fix(Typography):=20=D1=81=D0=B8=D0=BD=D1=85?= =?UTF-8?q?=D1=80=D0=BE=D0=BD=D0=B8=D0=B7=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?= =?UTF-8?q?=D1=82=D1=8C=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D1=81=20Figma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Typography/Anchor.stories.tsx | 3 +- src/components/Typography/Anchor.tsx | 22 +++--- src/components/Typography/Service.tsx | 6 +- src/components/Typography/Subtitle.stories.ts | 1 + src/components/Typography/Title.tsx | 2 +- .../__snapshots__/Anchor.test.tsx.snap | 78 +++++++++---------- .../__snapshots__/Service.test.tsx.snap | 20 +++++ .../__snapshots__/Title.test.tsx.snap | 1 + 8 files changed, 80 insertions(+), 53 deletions(-) diff --git a/src/components/Typography/Anchor.stories.tsx b/src/components/Typography/Anchor.stories.tsx index 9016d6f7..6118328d 100644 --- a/src/components/Typography/Anchor.stories.tsx +++ b/src/components/Typography/Anchor.stories.tsx @@ -20,6 +20,7 @@ const meta: Meta = { RightIcon: undefined, }, argTypes: { + base: { control: 'boolean' }, LeftIcon: { control: 'radio', options: Object.keys(Icons), mapping: Icons }, RightIcon: { control: 'radio', @@ -39,7 +40,7 @@ const AnchorStory: Story = { - + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci ducimus est fuga hic iusto laborum minima modi, non reiciendis repellat repudiandae{' '} diff --git a/src/components/Typography/Anchor.tsx b/src/components/Typography/Anchor.tsx index 475176e6..d0743422 100644 --- a/src/components/Typography/Anchor.tsx +++ b/src/components/Typography/Anchor.tsx @@ -22,7 +22,7 @@ export interface AnchorProps extends Omit< 'onPressIn' | 'onPressOut' > { readonly onPress: () => void - /** true, если необходим базовый размер текста ссылки, равный 14 */ + /** true, если необходим уменьшенный размер текста ссылки, равный 12.25 */ readonly base?: boolean /** true, если необходимо состояние посещенной ссылки. Меняет цвет */ readonly visited?: boolean @@ -137,29 +137,29 @@ const styles = StyleSheet.create(({ spacing, typography, fonts }) => ({ container: { flexDirection: 'row', alignItems: 'center' }, text: { flexShrink: 1, - fontSize: typography.Size['text-sm'], + fontSize: typography.Size['text-base'], includeFontPadding: false, verticalAlign: 'middle', color: typography.Color.Service['text-info'], fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + lineHeight: undefined, + letterSpacing: 0, }, underlined: { textDecorationLine: 'underline' }, base: { - fontSize: typography.Size['text-base'], - lineHeight: undefined, - letterSpacing: 0, + fontSize: typography.Size['text-sm'], + lineHeight: 15, + letterSpacing: -0.25, }, visited: { color: typography.Color.Service['text-help'] }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, - iconBase: { width: typography.Size['text-xl'], height: typography.Size['text-xl'], }, + iconBase: { + width: typography.Size['text-base'], + height: typography.Size['text-base'], + }, leftIconContainer: { paddingRight: spacing.Padding['p-2'] }, rightIconContainer: { paddingLeft: spacing.Padding['p-2'] }, })) diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index 78ea369e..79a2a127 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -108,7 +108,11 @@ const styles = StyleSheet.create(({ typography, spacing, fonts }) => ({ lineHeight: 15, letterSpacing: -0.25, }, - textBase: { lineHeight: undefined, fontSize: typography.Size['text-base'] }, + textBase: { + lineHeight: undefined, + fontSize: typography.Size['text-base'], + letterSpacing: 0, + }, warning: { color: typography.Color.Service['text-warning'] }, success: { color: typography.Color.Service['text-success'] }, diff --git a/src/components/Typography/Subtitle.stories.ts b/src/components/Typography/Subtitle.stories.ts index d57f7caa..2ffe9305 100644 --- a/src/components/Typography/Subtitle.stories.ts +++ b/src/components/Typography/Subtitle.stories.ts @@ -7,6 +7,7 @@ const meta: Meta = { component: Subtitle, args: { base: false, color: 'default', children: 'Subtitle' }, argTypes: { + base: { control: 'boolean' }, color: { control: 'radio', options: ['default', 'primary', 'secondary'] }, }, } diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx index de6dd6d0..c492bcf0 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -26,5 +26,5 @@ const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ h3: { fontSize: typography.Size['text-lg'] }, h4: { fontSize: typography.Size['text-base'] }, h5: { fontSize: typography.Size['text-sm'] }, - h6: { fontSize: typography.Size['text-xs'] }, + h6: { fontSize: typography.Size['text-xs'], lineHeight: 12 }, })) diff --git a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap index 53bf9367..1d503668 100644 --- a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -20,10 +20,10 @@ exports[`Body component tests default props 1`] = ` "color": "#1e76cd", "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": 0, + "lineHeight": undefined, "verticalAlign": "middle", }, false, @@ -89,11 +89,11 @@ exports[`Body component tests левая иконка, base, visited, testID = C > Date: Tue, 15 Sep 2026 11:38:01 +0300 Subject: [PATCH 3/3] =?UTF-8?q?feat(Typography):=20=D0=B4=D0=BE=D0=B1?= =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D1=82=D1=8C=20=D0=B2=D0=B0=D1=80=D0=B8=D0=B0?= =?UTF-8?q?=D0=BD=D1=82=D1=8B=20d1-d3=20=D0=B2=20Title?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Typography/Title.stories.ts | 5 +- .../Typography/__tests__/Title.test.tsx | 2 +- .../__snapshots__/Title.test.tsx.snap | 69 +++++++++++++++++++ 3 files changed, 74 insertions(+), 2 deletions(-) diff --git a/src/components/Typography/Title.stories.ts b/src/components/Typography/Title.stories.ts index 96942b90..f1c673e8 100644 --- a/src/components/Typography/Title.stories.ts +++ b/src/components/Typography/Title.stories.ts @@ -7,7 +7,10 @@ const meta: Meta = { component: Title, args: { level: 'h1', children: 'Test' }, argTypes: { - level: { control: 'radio', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }, + level: { + control: 'radio', + options: ['d1', 'd2', 'd3', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], + }, }, } diff --git a/src/components/Typography/__tests__/Title.test.tsx b/src/components/Typography/__tests__/Title.test.tsx index 791a47ad..a33de6d7 100644 --- a/src/components/Typography/__tests__/Title.test.tsx +++ b/src/components/Typography/__tests__/Title.test.tsx @@ -4,7 +4,7 @@ import { Title, type TitleProps } from '../Title' describe('Title component tests', () => { const snapshotCases = generatePropsCombinations({ - level: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], + level: ['d1', 'd2', 'd3', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], }) test.each(snapshotCases)('level = $level', (props) => { diff --git a/src/components/Typography/__tests__/__snapshots__/Title.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Title.test.tsx.snap index 91d0ec6d..89f302ee 100644 --- a/src/components/Typography/__tests__/__snapshots__/Title.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Title.test.tsx.snap @@ -1,5 +1,74 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Title component tests level = d1 1`] = ` + + Text + +`; + +exports[`Title component tests level = d2 1`] = ` + + Text + +`; + +exports[`Title component tests level = d3 1`] = ` + + Text + +`; + exports[`Title component tests level = h1 1`] = `