diff --git a/.mapping.json b/.mapping.json index 9b138a887..b65a2202a 100644 --- a/.mapping.json +++ b/.mapping.json @@ -14322,6 +14322,10 @@ "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/empty/firefoxMobile/empty.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/empty/firefoxMobile/empty.png", "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/fixed-size-with-paddings/chromeMobile/fixed-size-with-paddings.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/fixed-size-with-paddings/chromeMobile/fixed-size-with-paddings.png", "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/fixed-size-with-paddings/firefoxMobile/fixed-size-with-paddings.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/fixed-size-with-paddings/firefoxMobile/fixed-size-with-paddings.png", + "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/chromeMobile/font_feature_ranges.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/chromeMobile/font_feature_ranges.png", + "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/firefoxMobile/font_feature_ranges.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/firefoxMobile/font_feature_ranges.png", + "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/chromeMobile/font_features.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/chromeMobile/font_features.png", + "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/firefoxMobile/font_features.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/firefoxMobile/font_features.png", "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/gradient-background/chromeMobile/gradient-background.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/gradient-background/chromeMobile/gradient-background.png", "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/gradient-background/firefoxMobile/gradient-background.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/gradient-background/firefoxMobile/gradient-background.png", "client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/gradient-color-text/chromeMobile/gradient-color-text.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/gradient-color-text/chromeMobile/gradient-color-text.png", diff --git a/client/web/divkit/src/components/text/Text.svelte b/client/web/divkit/src/components/text/Text.svelte index 65c0fea15..8498cf30f 100644 --- a/client/web/divkit/src/components/text/Text.svelte +++ b/client/web/divkit/src/components/text/Text.svelte @@ -95,7 +95,8 @@ underline: componentContext.json.underline, strike: componentContext.json.strike, line_height: componentContext.json.line_height, - text_shadow: componentContext.json.text_shadow + text_shadow: componentContext.json.text_shadow, + font_feature_settings: componentContext.json.font_feature_settings }); $: jsonTextSize = componentContext.getDerivedFromVars(componentContext.json.font_size); $: jsonLineHeight = componentContext.getDerivedFromVars(componentContext.json.line_height); diff --git a/client/web/divkit/src/components/text/TextRange.svelte b/client/web/divkit/src/components/text/TextRange.svelte index 0b52ea4a5..3be25e09b 100644 --- a/client/web/divkit/src/components/text/TextRange.svelte +++ b/client/web/divkit/src/components/text/TextRange.svelte @@ -140,7 +140,8 @@ * 2) There should not be a border-radius on line breaks, but there should be a border */ 'box-shadow': border ? `inset 0 0 0 ${pxToEm(border.width)} ${border.color}` : undefined, - 'border-radius': borderRadius ? pxToEm(borderRadius) : undefined + 'border-radius': borderRadius ? pxToEm(borderRadius) : undefined, + 'font-feature-settings': textStyles.font_feature_settings || undefined, }; diff --git a/client/web/divkit/src/dev.ts b/client/web/divkit/src/dev.ts index d1f5cc8c2..0b418c6f4 100644 --- a/client/web/divkit/src/dev.ts +++ b/client/web/divkit/src/dev.ts @@ -6,147 +6,19 @@ import Lottie from 'lottie-web/build/player/lottie'; import { initComponents } from './devCustomComponents'; const json = { - "templates": { - "tutorialCard": { - "type": "container", - "border": { - "corner_radius": 16, - "stroke": { - "color": "#aaaaaa", - "width": 1 - } - }, - "items": [ - { - "type": "text", - "font_size": 21, - "font_weight": "bold", - "margins": { - "bottom": 8 - }, - "$text": "title" - }, - { - "type": "text", - "font_size": 16, - "margins": { - "bottom": 4 - }, - "$text": "body" - }, - { - "type": "container", - "$items": "links" - } - ], - "margins": { - "bottom": 6 - }, - "orientation": "vertical", - "paddings": { - "top": 12, - "bottom": 12, - "left": 12, - "right": 12 - } - }, - "link": { - "type": "text", - "action": { - "$url": "link", - "$log_id": "log" - }, - "font_size": 14, - "margins": { - "bottom": 2 - }, - "text_color": "#0000ff", - "underline": "single", - "$text": "link_text" - } - }, - "card": { - "log_id": "div2_sample_card", - "states": [ - { - "state_id": 0, - "div": { - "type": "container", - "items": [ - { - "type": "tutorialCard", - "title": "@{getHours(parseUnixTimeAsLocal(1715855877))}", - "body": "Server side driven ui Яндекса\nПолезные ссылки:", - "links": [ - { - "type": "link", - "link_text": "Официальная документация", - "link": "https://doc.yandex-team.ru/divkit/overview/", - "log": "docs" - }, - { - "type": "link", - "link_text": "Примеры карточек", - "link": "https://a.yandex-team.ru/arcadia/divkit/public/test_data/samples", - "log": "samples" - }, - { - "type": "link", - "link_text": "Клуб в Этушке", - "link": "https://clubs.at.yandex-team.ru/divkit/", - "log": "atushka" - }, - { - "type": "link", - "link_text": "Канал в Мессенджере", - "link": "https://q.yandex-team.ru/#/join/b7263a0a-c2ef-4c02-9669-e8a1f4cf3762", - "log": "slack" - } - ] - }, - { - "type": "tutorialCard", - "title": "Горячие клавиши редактора", - "body": "ctrl+space - вызвать автодополнение\nctrl+f2 - заменить всё\nctrl+shift+i - отформатировать json\nctrl+shift+a закомментировать блок\nСхолпнуть json-блоки можно с помощью стрелочек, что появляются при наведении на блок с номерами строк слева\nf1 - вызвать меню со всеми доступными командами и горячими клавишами", - "links": [ - { - "type": "separator", - "delimiter_style": { - "color": "#00000000" - } - } - ] - }, - { - "type": "tutorialCard", - "title": "Интерактивная верстка на ваших устройствах", - "body": "Для того, чтобы посмотреть вашу верстку на android:\n1) Скачайте demo apk по ссылке ниже\n2) Установите apk на устройство и перейдите во вкладку \"Div2\"\n3) Нажмите на share на этой страничке и отсканируйте QR-код, нажав соответствующую кнопку в приложении, либо вставьте урл из поля \"Link to json\"\n4) Для каждого подключенного устройства в редакторе появится вкладка с тем, что отображается сейчас на экране", - "links": [ - { - "type": "link", - "link_text": "Android демо-приложение", - "link": "https://beta.m.soft.yandex.ru/description?app=divkit&platform_shortcut=android&branch=unknown", - "log": "android" - }, - { - "type": "link", - "link_text": "iOS демо-приложение", - "link": "https://teamcity.yandex-team.ru/buildConfiguration/MobileNew_Monorepo_DivKit_iOS_trunk?branch=&mode=builds", - "log": "ios" - } - ] - } - ], - "margins": { - "top": 8, - "bottom": 8, - "left": 8, - "right": 8 - } - } - } - ] - } + "templates": {}, + "card": { + "log_id": "snapshot_test_card", + "states": [ + { + "state_id": 0, + "div": { + "type": "text", + "text": "Hello world" + } + } + ] + } }; window.root = new Root({ diff --git a/client/web/divkit/src/types/text.d.ts b/client/web/divkit/src/types/text.d.ts index eb010eda8..2835190b4 100644 --- a/client/web/divkit/src/types/text.d.ts +++ b/client/web/divkit/src/types/text.d.ts @@ -18,6 +18,7 @@ export interface TextStyles { font_size?: number; font_family?: string; // font_size_unit + font_feature_settings?: string; letter_spacing?: number; font_weight?: FontWeight; text_color?: string; diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/chromeMobile/font_feature_ranges.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/chromeMobile/font_feature_ranges.png new file mode 100644 index 000000000..49894ba1f Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/chromeMobile/font_feature_ranges.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/firefoxMobile/font_feature_ranges.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/firefoxMobile/font_feature_ranges.png new file mode 100644 index 000000000..e63738ed3 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_feature_ranges/firefoxMobile/font_feature_ranges.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/chromeMobile/font_features.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/chromeMobile/font_features.png new file mode 100644 index 000000000..f47a80111 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/chromeMobile/font_features.png differ diff --git a/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/firefoxMobile/font_features.png b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/firefoxMobile/font_features.png new file mode 100644 index 000000000..5ccdb6136 Binary files /dev/null and b/client/web/divkit/tests/hermione/screens/crossplatform/components/div-text/font_features/firefoxMobile/font_features.png differ diff --git a/schema/div-text.json b/schema/div-text.json index eb7a46e24..efd0fd14d 100644 --- a/schema/div-text.json +++ b/schema/div-text.json @@ -46,7 +46,8 @@ "type": "string", "$description": "translations.json#/div_font_feature_settings", "platforms": [ - "android" + "android", + "web" ] }, "letter_spacing": { @@ -256,7 +257,8 @@ "type": "string", "$description": "translations.json#/div_font_feature_settings", "platforms": [ - "android" + "android", + "web" ] }, "line_height": { diff --git a/test_data/snapshot_test_data/div-text/font_feature_ranges.json b/test_data/snapshot_test_data/div-text/font_feature_ranges.json index 18803c116..17e77b9e4 100644 --- a/test_data/snapshot_test_data/div-text/font_feature_ranges.json +++ b/test_data/snapshot_test_data/div-text/font_feature_ranges.json @@ -1,7 +1,8 @@ { "description": "Text with font features", "platforms": [ - "android" + "android", + "web" ], "templates": { "text_template": { diff --git a/test_data/snapshot_test_data/div-text/font_features.json b/test_data/snapshot_test_data/div-text/font_features.json index 836c43aa9..07eb69153 100644 --- a/test_data/snapshot_test_data/div-text/font_features.json +++ b/test_data/snapshot_test_data/div-text/font_features.json @@ -1,7 +1,8 @@ { "description": "Text with font features", "platforms": [ - "android" + "android", + "web" ], "templates": { "text_template": {