plasma-new-hope: Refactoring tabs tokens, variations, config #873

nikewht · 2023-11-27T12:36:24Z

Tabs

вынесены токены в отдельный файл
исправлен конфиг
убрана вариация active

What/why changed

🐤 Download canary assets:

color

color_default_ios-swift--canary.873.7083023187.swift
color_default_kotlin--canary.873.7083023187.kt
color_default_react-native--canary.873.7083023187.ts
color_default_xml--canary.873.7083023187.xml
color_plasma_b2c_ios-swift--canary.873.7083023187.swift
color_plasma_b2c_kotlin--canary.873.7083023187.kt
color_plasma_b2c_react-native--canary.873.7083023187.ts
color_plasma_b2c_xml--canary.873.7083023187.xml
color_plasma_web_ios-swift--canary.873.7083023187.swift
color_plasma_web_kotlin--canary.873.7083023187.kt
color_plasma_web_react-native--canary.873.7083023187.ts
color_plasma_web_xml--canary.873.7083023187.xml
color_sberHealth_ios-swift--canary.873.7083023187.swift
color_sberHealth_kotlin--canary.873.7083023187.kt
color_sberHealth_react-native--canary.873.7083023187.ts
color_sberHealth_xml--canary.873.7083023187.xml
color_sbermarket_business_ios-swift--canary.873.7083023187.swift
color_sbermarket_business_kotlin--canary.873.7083023187.kt
color_sbermarket_business_react-native--canary.873.7083023187.ts
color_sbermarket_business_xml--canary.873.7083023187.xml
color_sbermarket_ios-swift--canary.873.7083023187.swift
color_sbermarket_kotlin--canary.873.7083023187.kt
color_sbermarket_metro_ios-swift--canary.873.7083023187.swift
color_sbermarket_metro_kotlin--canary.873.7083023187.kt
color_sbermarket_metro_react-native--canary.873.7083023187.ts
color_sbermarket_metro_xml--canary.873.7083023187.xml
color_sbermarket_react-native--canary.873.7083023187.ts
color_sbermarket_selgros_ios-swift--canary.873.7083023187.swift
color_sbermarket_selgros_kotlin--canary.873.7083023187.kt
color_sbermarket_selgros_react-native--canary.873.7083023187.ts
color_sbermarket_selgros_xml--canary.873.7083023187.xml
color_sbermarket_wlbusiness_ios-swift--canary.873.7083023187.swift
color_sbermarket_wlbusiness_kotlin--canary.873.7083023187.kt
color_sbermarket_wlbusiness_react-native--canary.873.7083023187.ts
color_sbermarket_wlbusiness_xml--canary.873.7083023187.xml
color_sbermarket_xml--canary.873.7083023187.xml
color_sberonline_ios-swift--canary.873.7083023187.swift
color_sberonline_kotlin--canary.873.7083023187.kt
color_sberonline_react-native--canary.873.7083023187.ts
color_sberonline_xml--canary.873.7083023187.xml
color_sberprime_ios-swift--canary.873.7083023187.swift
color_sberprime_kotlin--canary.873.7083023187.kt
color_sberprime_react-native--canary.873.7083023187.ts
color_sberprime_xml--canary.873.7083023187.xml
color_stylesSalute_ios-swift--canary.873.7083023187.swift
color_stylesSalute_kotlin--canary.873.7083023187.kt
color_stylesSalute_react-native--canary.873.7083023187.ts
color_stylesSalute_xml--canary.873.7083023187.xml

shadow

shadow_default_react-native--canary.873.7083023187.ts
shadow_plasma_b2c_react-native--canary.873.7083023187.ts
shadow_plasma_web_react-native--canary.873.7083023187.ts
shadow_sberHealth_react-native--canary.873.7083023187.ts
shadow_sbermarket_business_react-native--canary.873.7083023187.ts
shadow_sbermarket_metro_react-native--canary.873.7083023187.ts
shadow_sbermarket_react-native--canary.873.7083023187.ts
shadow_sbermarket_selgros_react-native--canary.873.7083023187.ts
shadow_sbermarket_wlbusiness_react-native--canary.873.7083023187.ts
shadow_sberonline_react-native--canary.873.7083023187.ts
shadow_sberprime_react-native--canary.873.7083023187.ts
shadow_stylesSalute_react-native--canary.873.7083023187.ts

borderRadius

borderRadius_default_react-native--canary.873.7083023187.ts
borderRadius_plasma_b2c_react-native--canary.873.7083023187.ts
borderRadius_plasma_web_react-native--canary.873.7083023187.ts
borderRadius_sberHealth_react-native--canary.873.7083023187.ts
borderRadius_sbermarket_business_react-native--canary.873.7083023187.ts
borderRadius_sbermarket_metro_react-native--canary.873.7083023187.ts
borderRadius_sbermarket_react-native--canary.873.7083023187.ts
borderRadius_sbermarket_selgros_react-native--canary.873.7083023187.ts
borderRadius_sbermarket_wlbusiness_react-native--canary.873.7083023187.ts
borderRadius_sberonline_react-native--canary.873.7083023187.ts
borderRadius_sberprime_react-native--canary.873.7083023187.ts
borderRadius_stylesSalute_react-native--canary.873.7083023187.ts

spacing

spacing_default_react-native--canary.873.7083023187.ts
spacing_plasma_b2c_react-native--canary.873.7083023187.ts
spacing_plasma_web_react-native--canary.873.7083023187.ts
spacing_sberHealth_react-native--canary.873.7083023187.ts
spacing_sbermarket_business_react-native--canary.873.7083023187.ts
spacing_sbermarket_metro_react-native--canary.873.7083023187.ts
spacing_sbermarket_react-native--canary.873.7083023187.ts
spacing_sbermarket_selgros_react-native--canary.873.7083023187.ts
spacing_sbermarket_wlbusiness_react-native--canary.873.7083023187.ts
spacing_sberonline_react-native--canary.873.7083023187.ts
spacing_sberprime_react-native--canary.873.7083023187.ts
spacing_stylesSalute_react-native--canary.873.7083023187.ts

typo

typo_mage_ios-swift--canary.873.7083023187.swift
typo_mage_kotlin--canary.873.7083023187.kt
typo_mage_react-native--canary.873.7083023187.ts
typo_plasma_ios-swift--canary.873.7083023187.swift
typo_plasma_kotlin--canary.873.7083023187.kt
typo_plasma_react-native--canary.873.7083023187.ts
typo_ruler_ios-swift--canary.873.7083023187.swift
typo_ruler_kotlin--canary.873.7083023187.kt
typo_ruler_react-native--canary.873.7083023187.ts
typo_sage_ios-swift--canary.873.7083023187.swift
typo_sage_kotlin--canary.873.7083023187.kt
typo_sage_react-native--canary.873.7083023187.ts
typo_sbermarket_ios-swift--canary.873.7083023187.swift
typo_sbermarket_kotlin--canary.873.7083023187.kt
typo_sbermarket_react-native--canary.873.7083023187.ts
typo_soulmate_ios-swift--canary.873.7083023187.swift
typo_soulmate_kotlin--canary.873.7083023187.kt
typo_soulmate_react-native--canary.873.7083023187.ts

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

Salute-Eva · 2023-11-27T12:39:08Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-873/

Salute-Eva · 2023-11-27T12:50:13Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-873/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-873/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-873/web-storybook/
new-hope storybook: http://plasma.sberdevices.ru/pr/pr-873/new-hope-storybook/
asdk storybook: http://plasma.sberdevices.ru/pr/pr-873/asdk-storybook/

neretin-trike · 2023-11-28T08:28:35Z

packages/plasma-new-hope/src/examples/sds_engineer/components/Tabs/TabItem.config.ts

-                --plasma-tabs-color: var(--text-primary);
-                --plasma-tabs-color-hover: var(--text-primary);
+                --plasma-tabs-font-color: var(--text-primary);
+                --plasma-tabs-font-color-hover: var(--text-primary);


а можешь, пожалуйста, токены, которые ты вынес в отдельный файл перенести и сюда тоже?

Поправил

neretin-trike · 2023-11-28T08:30:17Z

packages/plasma-new-hope/src/examples/sds_engineer/components/Tabs/TabItem.config.ts

@@ -12,22 +12,22 @@ export const config = {
                --plasma-tabs-underline-color: var(--surface-solid-tertiary);
                --plasma-tabs-underline-height: 2px;
                --plasma-tabs-font-weight: 500;
-                --plasma-tabs-color: var(--text-accent);
+                --plasma-tabs-font-color: var(--text-accent);


не критично

кажется, что не обязательно добавлять font, т.к. именно для фона какого-то элемента (в данном случае таба) используется свойство background, и выглядело бы оно тогда --plasma-tabs-background

Поправил

neretin-trike · 2023-11-28T08:31:00Z

packages/plasma-new-hope/src/components/Tabs/TabItem.tokens.ts

+    fontWeight: '--plasma-tabs-font-weight',
+    fontColor: '--plasma-tabs-font-color',
+    fontColorHover: '--plasma-tabs-font-color-hover',
+};


а вообще подумал, что лучше эти токены перенести в общий файлик - Tabs.tokens и забирать из одного места во всех компонентах

Поправил

Salute-Eva · 2023-12-01T09:14:15Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-873/

Salute-Eva · 2023-12-01T09:21:38Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-873/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-873/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-873/web-storybook/
new-hope storybook: http://plasma.sberdevices.ru/pr/pr-873/new-hope-storybook/
asdk storybook: http://plasma.sberdevices.ru/pr/pr-873/asdk-storybook/

neretin-trike · 2023-12-01T11:50:48Z

packages/plasma-new-hope/src/examples/sds_engineer/components/Tabs/TabItem.config.ts

-                --plasma-tabs-cursor: pointer;
-                --plasma-tabs-color-hover: var(--text-primary);
+                ${tokens.underlineColor}: var(--surface-solid-tertiary);
+                ${tokens.underlineHeight}: 2px;


переведи в rem пожалуста

Поправил

neretin-trike · 2023-12-01T11:51:31Z

packages/plasma-new-hope/src/examples/sds_engineer/components/Tabs/TabItem.config.ts

 import { css } from '@linaria/core';

+import { tokens } from '../../../../components/Tabs/TabItem.tokens';


здесь лучше забрать токены из индекса, по аналогии с Dropdown:

import { dropdownTokens } from '../../../../../components/Dropdown';

Поправил

neretin-trike · 2023-12-01T11:52:56Z

packages/plasma-new-hope/src/components/Tabs/index.ts

@@ -1 +1,2 @@
 export { tabsRoot, tabsConfig } from './Tabs';
+export { tabItemRoot, tabItemConfig } from './TabItem';


тут ещё нужно добавить ре-экспорт токенов

export { classes as dropdownClasses, tokens as dropdownTokens } from './Dropdown.tokens';

Поправил

neretin-trike · 2023-12-01T11:55:14Z

packages/plasma-new-hope/src/components/Tabs/TabItem/variations/_disabled/base.ts

+    :hover {
+        cursor: var(${tokens.cursor});
+    }
+`;


кажется, что это должно быть не в disabled? 🤔

Удалил по аналогии с active

neretin-trike · 2023-12-01T11:56:12Z

packages/plasma-new-hope/src/components/Tabs/Tabs.tokens.ts

@@ -0,0 +1,4 @@
+export const tokens = {
+    disabledOpacity: '--plasma-tabs-disabled-opacity',
+    containerWidth: '--plasma-tabs-container-width',


вот сюда добавить токены из TabsItem, имел ввиду

Перенес

Salute-Eva · 2023-12-04T06:48:46Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-873/

Salute-Eva · 2023-12-04T06:55:10Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-873/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-873/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-873/web-storybook/
new-hope storybook: http://plasma.sberdevices.ru/pr/pr-873/new-hope-storybook/
asdk storybook: http://plasma.sberdevices.ru/pr/pr-873/asdk-storybook/

Yeti-or · 2023-12-04T07:47:18Z

🎱

Salute-Eva · 2023-12-14T06:36:13Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

nikewht requested review from Yeti-or, neretin-trike, Yakutoc and kayman233 as code owners November 27, 2023 12:36

nikewht temporarily deployed to internal November 27, 2023 12:36 — with GitHub Actions Inactive

neretin-trike reviewed Nov 28, 2023

View reviewed changes

Yeti-or approved these changes Nov 30, 2023

View reviewed changes

nikewht force-pushed the nikewht.new-hope.tabs branch from b6703a9 to 7d4ccdb Compare December 1, 2023 09:11

nikewht temporarily deployed to internal December 1, 2023 09:11 — with GitHub Actions Inactive

neretin-trike reviewed Dec 1, 2023

View reviewed changes

refactor(new-hope): tokens, variations, config

7576816

nikewht force-pushed the nikewht.new-hope.tabs branch from 7d4ccdb to 7576816 Compare December 4, 2023 06:46

nikewht temporarily deployed to internal December 4, 2023 06:46 — with GitHub Actions Inactive

neretin-trike approved these changes Dec 4, 2023

View reviewed changes

Yeti-or removed request for Yakutoc and kayman233 December 4, 2023 07:47

nikewht added this pull request to the merge queue Dec 4, 2023

Merged via the queue into dev with commit f17b825 Dec 4, 2023
24 checks passed

nikewht deleted the nikewht.new-hope.tabs branch December 4, 2023 07:53

Salute-Eva added the prerelease label Dec 5, 2023

This was referenced Dec 13, 2023

Release by 13.12.2023 #911

Closed

Release by 13.12.2023 #912

Closed

Yakutoc changed the title ~~refactor(new-hope): Tabs tokens, variations, config~~ plasma-new-hope: Refactoring tabs tokens, variations, config Dec 13, 2023

Yakutoc added the plasma-components label Dec 13, 2023

Salute-Eva added released and removed prerelease labels Dec 14, 2023

Salute-Eva mentioned this pull request Jan 18, 2024

Release by 18.01.2024 #972

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

plasma-new-hope: Refactoring tabs tokens, variations, config #873

plasma-new-hope: Refactoring tabs tokens, variations, config #873

nikewht commented Nov 27, 2023 •

edited by Yakutoc

Loading

Salute-Eva commented Nov 27, 2023

Salute-Eva commented Nov 27, 2023

neretin-trike Nov 28, 2023

nikewht Dec 4, 2023

neretin-trike Nov 28, 2023

nikewht Dec 4, 2023

neretin-trike Nov 28, 2023

neretin-trike Dec 1, 2023

nikewht Dec 4, 2023

Salute-Eva commented Dec 1, 2023

Salute-Eva commented Dec 1, 2023

neretin-trike Dec 1, 2023

nikewht Dec 4, 2023

neretin-trike Dec 1, 2023

nikewht Dec 4, 2023

neretin-trike Dec 1, 2023

nikewht Dec 4, 2023

neretin-trike Dec 1, 2023

nikewht Dec 4, 2023

neretin-trike Dec 1, 2023

nikewht Dec 4, 2023

Salute-Eva commented Dec 4, 2023

Salute-Eva commented Dec 4, 2023

Yeti-or commented Dec 4, 2023

Salute-Eva commented Dec 14, 2023

		import { css } from '@linaria/core';

		import { tokens } from '../../../../components/Tabs/TabItem.tokens';

		@@ -1 +1,2 @@
		export { tabsRoot, tabsConfig } from './Tabs';
		export { tabItemRoot, tabItemConfig } from './TabItem';

plasma-new-hope: Refactoring tabs tokens, variations, config #873

plasma-new-hope: Refactoring tabs tokens, variations, config #873

Conversation

nikewht commented Nov 27, 2023 • edited by Yakutoc Loading

Tabs

What/why changed

Salute-Eva commented Nov 27, 2023

Salute-Eva commented Nov 27, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Salute-Eva commented Dec 1, 2023

Salute-Eva commented Dec 1, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Salute-Eva commented Dec 4, 2023

Salute-Eva commented Dec 4, 2023

Yeti-or commented Dec 4, 2023

Salute-Eva commented Dec 14, 2023

nikewht commented Nov 27, 2023 •

edited by Yakutoc

Loading