[DS][Tag] Выравнивание публичного API

README.md

@@ -2,6 +2,10 @@
 
 Репозиторий UI kit на основе Prime Faces, Prime Flex для React Native
 
+Документация компонентов:
+
+- [Tag](src/components/Tag/Tag.md)
+
 ## Installation
 
 **Yarn**

app.config.ts

@@ -23,6 +23,7 @@ const internalFontsPlugin = [
           fontFamily: 'Noto Sans',
           fontDefinitions: [
             { path: './assets/fonts/NotoSans-Bold.ttf', weight: 700 },
+            { path: './assets/fonts/NotoSans-SemiBold.ttf', weight: 600 },
             { path: './assets/fonts/NotoSans-Regular.ttf', weight: 400 },
           ],
         },
@@ -34,6 +35,7 @@ const internalFontsPlugin = [
         './assets/fonts/TTFellows-DemiBoldItalic.ttf',
         './assets/fonts/TTFellows-Regular.ttf',
         './assets/fonts/NotoSans-Regular.ttf',
+        './assets/fonts/NotoSans-SemiBold.ttf',
         './assets/fonts/NotoSans-Bold.ttf',
       ],
     },

design-tokens/input/tokens.json

@@ -4777,7 +4777,7 @@
         "light": {
           "primary": {
             "background": "{color.bg.brand.strong.default}",
-            "color": "{color.fg.default}"
+            "color": "{color.fg.on.brand.default}"
           },
           "secondary": {
             "background": "{color.bg.neutral.medium.default}",
@@ -4819,14 +4819,14 @@
           },
           "primary": {
             "background": "{color.bg.brand.strong.default}",
-            "color": "{color.fg.inverse.default}"
+            "color": "{color.fg.on.brand.default}"
           },
           "secondary": {
-            "background": "{color.bg.neutral.strong.hover}",
-            "color": "{color.fg.inverse.default}"
+            "background": "{color.bg.neutral.medium.default}",
+            "color": "{color.fg.default}"
           },
           "success": {
-            "background": "{color.bg.brand.strong.hover}",
+            "background": "{color.bg.status.success.strong.hover}",
             "color": "{color.fg.on.status.success.default}"
           },
           "warn": {
@@ -4837,7 +4837,7 @@
       },
       "root": {
         "fontSize": "{fonts.fontSize.100}",
-        "fontWeight": "{fonts.fontWeight.regular}",
+        "fontWeight": "{fonts.fontWeight.demibold}",
         "padding": "{dimension.space.100} {dimension.space.200}",
         "gap": "{dimension.space.100}",
         "borderRadius": "{dimension.borderRadius.200}",

src/components/Tag/Tag.md

@@ -0,0 +1,40 @@
+# Tag
+
+Текстовая метка для статуса или категории с необязательной иконкой.
+
+## Использование
+
+```tsx
+import { Tag } from '@cdek-it/react-native-ui-kit'
+
+export function DeliveryStatus() {
+  return <Tag text='Доставлено' severity='success' />
+}
+```
+
+## Props
+
+- `text` — обязательный текст метки
+- `severity` — `primary | info | success | warning | danger | secondary`; по
+  умолчанию `primary`. Определяет оформление и стандартную иконку. Устаревший
+  `basic` поддерживается как алиас `primary`
+- `rounded` — полное скругление углов; по умолчанию `false`
+- `showIcon` — показывает иконку; по умолчанию `true`
+- `Icon` — SVG типа `SvgSource`, переопределяющая стандартную иконку
+
+Полный контракт — [TagProps](./Tag.tsx).
+
+## Доступность
+
+Текст масштабируется с системным шрифтом и остаётся однострочным; при нехватке
+ширины сокращается многоточием.
+
+Скринридер озвучивает видимый текст или заданный `accessibilityLabel` без
+дублирования. Иконка декоративная.
+
+Для обработки нажатия используйте интерактивного родителя. Доступное имя и роль
+задавайте родителю, оставляя Tag без собственного `accessibilityLabel`.
+
+## Макет
+
+[Tag в Figma](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=21-1238&m=dev)

src/components/Tag/Tag.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import {
   IconAlertTriangle,
   IconCheck,
+  IconCircleCheck,
   IconCircleX,
   IconInfoCircle,
 } from '@tabler/icons-react-native'
@@ -10,26 +11,24 @@ import { Tag } from './Tag'
 
 const icons = {
   IconCheck,
+  IconCircleCheck,
   IconInfoCircle,
   IconAlertTriangle,
   IconCircleX,
-  none: undefined,
+  default: undefined,
 }
 
 const meta: Meta<typeof Tag> = {
   title: 'Misc/Tag',
   component: Tag,
-  args: {
-    text: 'Tag',
-    rounded: false,
-    severity: 'basic',
-    showIcon: true,
-    Icon: IconCheck,
-  },
+  args: { text: 'Tag', rounded: false, severity: 'primary', showIcon: true },
   argTypes: {
+    text: { control: 'text' },
+    rounded: { control: 'boolean' },
+    showIcon: { control: 'boolean' },
     severity: {
       control: 'radio',
-      options: ['basic', 'info', 'success', 'warning', 'danger', 'secondary'],
+      options: ['primary', 'info', 'success', 'warning', 'danger', 'secondary'],
     },
     Icon: { control: 'radio', options: Object.keys(icons), mapping: icons },
   },

src/components/Tag/Tag.tsx

@@ -1,18 +1,29 @@
+import {
+  IconAlertTriangle,
+  IconCheck,
+  IconCircleCheck,
+  IconCircleX,
+  IconInfoCircle,
+} from '@tabler/icons-react-native'
 import { memo } from 'react'
 import {
   View,
   Text,
+  useWindowDimensions,
   type ViewStyle,
+  type TextStyle,
   type StyleProp,
   type AccessibilityProps,
   type ViewProps,
 } from 'react-native'
 
 import { StyleSheet } from 'react-native-unistyles'
 
-import type { ComponentTokens } from '../../theme/tokens/index'
 import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal'
 
+/** @deprecated Используйте primary. Будет удалён в 2.0 после миграции SuperApp */
+type DeprecatedTagSeverity = 'basic'
+
 export interface TagProps
   extends AccessibilityProps, Pick<ViewProps, 'testID' | 'collapsable'> {
   /** Текст */
@@ -23,9 +34,16 @@
 
   /**
    *  Выбор варианта стиля компонента
-   *  @default 'basic'
+   *  @default 'primary'
    */
-  severity?: 'basic' | 'info' | 'success' | 'warning' | 'danger' | 'secondary'
+  severity?:
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'secondary'
+    | DeprecatedTagSeverity
 
   /**
    * Показать или скрыть иконку внутри компонента
@@ -36,63 +54,90 @@
   /** Дополнительная стилизация для контейнера компонента */
   style?: StyleProp<ViewStyle>
 
-  /** SVG-иконка */
+  /** SVG-иконка. Заменяет стандартную иконку выбранного severity */
   Icon?: SvgSource
 }
 
-type TagSeverity = NonNullable<TagProps['severity']>
+type TagSeverity = Exclude<
+  NonNullable<TagProps['severity']>,
+  DeprecatedTagSeverity
+>
 
-const tagIconColor: Record<TagSeverity, (t: ComponentTokens) => string> = {
-  basic: (t) => t.tag.colorScheme.primary.color,
-  info: (t) => t.tag.colorScheme.info.color,
-  success: (t) => t.tag.colorScheme.success.color,
-  warning: (t) => t.tag.colorScheme.warn.color,
-  danger: (t) => t.tag.colorScheme.danger.color,
-  secondary: (t) => t.tag.colorScheme.secondary.color,
+const tagIcons: Record<TagSeverity, SvgSource> = {
+  primary: IconCheck,
+  info: IconInfoCircle,
+  success: IconCircleCheck,
+  warning: IconAlertTriangle,
+  danger: IconCircleX,
+  secondary: IconCircleX,
 }
 
 /**
  * Используется для маркировки элементов интерфейса
- * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921
- * @see https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24043-13865
+ * Внутри интерактивного родителя задавайте доступное имя родителю,
+ * оставляя Tag без собственного accessibilityLabel
+ * @see https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=21-1238
  */
 export const Tag = memo<TagProps>(
   ({
     text,
     rounded,
-    severity = 'basic',
+    severity = 'primary',
     showIcon = true,
     style,
     Icon,
     testID,
     collapsable,
+    accessibilityLabel,
     ...rest
   }) => {
-    tagStyles.useVariants({ severity })
+    // На iOS пересоздание Text сбрасывает измерения при смене масштаба шрифта.
+    const { fontScale } = useWindowDimensions()
+    const resolvedSeverity = severity === 'basic' ? 'primary' : severity
+    const colorSchemeKey =
+      resolvedSeverity === 'warning' ? 'warn' : resolvedSeverity
+    const hasAccessibilityLabel = accessibilityLabel !== undefined
+
+    tagStyles.useVariants({ severity: resolvedSeverity })
 
     return (
       <View
         collapsable={collapsable}
         style={style}
         testID={testID || TagTestId.root}
         {...rest}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole={hasAccessibilityLabel ? 'text' : undefined}
+        accessible={hasAccessibilityLabel}
       >
         <View
+          accessibilityElementsHidden={hasAccessibilityLabel}
+          accessible={false}
           collapsable={collapsable}
+          importantForAccessibility={
+            hasAccessibilityLabel ? 'no-hide-descendants' : 'auto'
+          }
           style={[tagStyles.container, rounded && tagStyles.roundedContainer]}
           testID={TagTestId.innerContainer}
         >
-          {showIcon && Icon ? (
+          {showIcon ? (
             <SvgUniversal
-              {...tagStyles.icon}
-              source={Icon}
+              accessibilityElementsHidden
+              accessible={false}
+              importantForAccessibility='no-hide-descendants'
+              source={Icon ?? tagIcons[resolvedSeverity]}
               testID={TagTestId.icon}
-              uniProps={({ components }) => {
-                return { color: tagIconColor[severity](components) }
-              }}
+              uniProps={({ components }) => ({
+                color: components.tag.colorScheme[colorSchemeKey].color,
+                width: components.tag.icon.size,
+                height: components.tag.icon.size,
+              })}
             />
           ) : null}
           <Text
+            accessibilityRole='text'
+            accessible={!hasAccessibilityLabel}
+            key={fontScale}
             numberOfLines={1}
             style={tagStyles.text}
             testID={TagTestId.text}
@@ -116,7 +161,7 @@
     borderRadius: components.tag.root.borderRadius,
     variants: {
       severity: {
-        basic: {
+        primary: {
           backgroundColor: components.tag.colorScheme.primary.background,
         },
         info: { backgroundColor: components.tag.colorScheme.info.background },
@@ -136,16 +181,17 @@
     },
   },
   roundedContainer: { borderRadius: components.tag.root.roundedBorderRadius },
-  icon: { width: components.tag.icon.size, height: components.tag.icon.size },
   text: {
     flexShrink: 1,
     fontSize: components.tag.root.fontSize,
     includeFontPadding: false,
     verticalAlign: 'middle',
-    fontFamily: fonts.fontFamily.heading,
+    fontFamily: fonts.fontFamily.base,
+    fontWeight: components.tag.root.fontWeight as TextStyle['fontWeight'],
+    lineHeight: fonts.lineHeight[250],
     variants: {
       severity: {
-        basic: { color: components.tag.colorScheme.primary.color },
+        primary: { color: components.tag.colorScheme.primary.color },
         info: { color: components.tag.colorScheme.info.color },
         success: { color: components.tag.colorScheme.success.color },
         warning: { color: components.tag.colorScheme.warn.color },