fix: Tweaked CSS gradients and struct.json gradients #1131

qurle · 2024-11-28T18:00:15Z

Че случилось

Немного переписал логику генерации градиентов.
Теперь в CSS-версии токены не пишутся в каждый стоп градиента — только в точки с модификатором прозрачности 100%. В struct.json токен прописывается в каждом стопе градиента, если градиент сгенерирован по одной точке.

Обновлены тесты и пример в доке.

Пример работы

1 точка с алиасом

Source

gradient: gradient(namedAlias(‘colorBackgroundContent’))

CSS

--vkui--gradient: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 100%;

JSON

"gradient": [
			{
				"step": 0,
				"color": "rgba(255, 255, 255, 0)",
				"token": "colorBackgroundContent",
				"alpha": 0
			},
			{
				"step": 0.15,
				"color": "rgba(255, 255, 255, 0.05)",
				"token": "colorBackgroundContent",
				"alpha": 0.05
			},
			{
				"step": 0.3,
				"color": "rgba(255, 255, 255, 0.2)",
				"token": "colorBackgroundContent",
				"alpha": 0.2
			},
			{
				"step": 0.7,
				"color": "rgba(255, 255, 255, 0.8)",
				"token": "colorBackgroundContent",
				"alpha": 0.8
			},
			{
				"step": 0.85,
				"color": "rgba(255, 255, 255, 0.95)",
				"token": "colorBackgroundContent",
				"alpha": 0.95
			},
			{
				"step": 1,
				"color": "rgba(255, 255, 255, 1)",
				"token": "colorBackgroundContent",
				"alpha": 1
			}
		]

2 точки с алиасом

Source

gradient: gradient(namedAlias(‘colorBackgroundContent’, transparent))

CSS

--vkui--gradient: var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%;

JSON

"gradient": [
			{
				"step": 0,
				"color": "rgba(255, 255, 255, 1)",
				"token": "colorBackgroundContent",
				"alpha": 1
			},
			{
				"step": 1,
				"color": "rgba(0, 0, 0, 0)",
				"alpha": 0
			}
		],

Потенциальные проблемы

В struct.json значение токена во всех точках теперь наследуется от последней точки градиента — это точка со 100% непрозрачностью при задании градиента как gradient(namedAlias(tokenName)). Это может приводить к ошибкам, если градиент задаётся как gradient('#FFF', namedAlias(tokenName)) — тогда в первой точке появится неуместная ссылка на токен:

"gradient": [
			{
				"step": 1,
				"color": "rgba(255, 255, 255, 1)",
				"token": tokenName,
				"alpha": 1
			}
			{
				"step": 0,
				"color": "rgba(204, 255, 0, 1)",
				"token": tokenName,
				"alpha": 1
			},
		],

До этого значение токена наследовалось от первой точки градиента. Переписал на наследование от последней точки, потому что именно она в CSS-записи будет привязанна к переменной при задании градиента от одной точки: gradient: gradient(namedAlias(‘colorBackgroundContent’)) превращается в

--vkui--gradient: rgba(255, 255, 255, 0) 0%, ... , var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 100%;

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

:*

github-actions · 2024-11-28T18:02:36Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	92.45%	1274/1378
🟢	Branches	89.2%	355/398
🟢	Functions	93.4%	184/197
🟢	Lines	92.11%	1179/1280

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / compileStructJSON.ts	100%	86.67% (-1.57% 🔻)	100%	100%

Test suite run success

471 tests passing in 38 suites.

Report generated by 🧪jest coverage report action from 40359b7

qurle added 3 commits November 28, 2024 20:33

fix: Tweaked CSS gradients and struct.json gradients

414262a

updated doc

2056011

translated comment

40359b7

qurle mentioned this pull request Nov 28, 2024

v4.57.0 #1132

Closed

SevereCloud approved these changes Nov 28, 2024

View reviewed changes

SevereCloud merged commit 8c5c314 into master Dec 2, 2024
9 checks passed

SevereCloud mentioned this pull request Dec 2, 2024

feat: 4.56.2 version #1134

Merged

qurle deleted the qurle/fix/android-gradients branch December 2, 2024 11:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Tweaked CSS gradients and struct.json gradients #1131

fix: Tweaked CSS gradients and struct.json gradients #1131

qurle commented Nov 28, 2024 •

edited

Loading

github-actions bot commented Nov 28, 2024

fix: Tweaked CSS gradients and struct.json gradients #1131

fix: Tweaked CSS gradients and struct.json gradients #1131

Conversation

qurle commented Nov 28, 2024 • edited Loading

Че случилось

Пример работы

1 точка с алиасом

2 точки с алиасом

Потенциальные проблемы

github-actions bot commented Nov 28, 2024

Coverage report

Test suite run success

qurle commented Nov 28, 2024 •

edited

Loading