fix: change the text color of disabled controls #2304

draugi · 2021-03-04T14:46:01Z

Новая переменная тему - textColorDisabledContrast. Отвечает за цвет текста на отключённых контролах, у которых есть тёмный фон.

Полный список этих контролов:

Button
Select
Switcher
Input
FxInput
CurrencyInput
DateInput
DatePicker
Token
TokenInput
ComboBox
Textarea

fix #2207

BREAKING CHANGE: Text color of disabled Button, Token, TokenInput changed from #a0a0a0 to #808080

…color # Conflicts: # packages/react-ui/internal/themes/DefaultTheme.ts

packages/react-ui/internal/themes/DefaultTheme.ts

packages/react-ui/components/Input/Input.styles.ts

packages/react-ui/components/Input/Input.tsx

dzekh · 2021-03-30T10:39:07Z

BREAKING CHANGE

а чо, реально это настолько BREAKING CHANGE?
АПИ же не меняется, только цвет. ничего не должно сломаться

draugi · 2021-03-30T10:42:42Z

BREAKING CHANGE

а чо, реально это настолько BREAKING CHANGE?
АПИ же не меняется, только цвет. ничего не должно сломаться

Мне казалось, что Breaking change это более широкое понятие, не только про апи. Например, у кого-то могут полечь скриншотные тесты в проекте

vercel · 2021-03-30T18:13:34Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

storybook-default – ./packages/react-ui

🔍 Inspect: https://vercel.com/reactui/storybook-default/8j1ySpKQphusXmNT6SLqgbz7Q4CX
✅ Preview: https://storybook-default-git-disabled-change-text-color-reactui.vercel.app

storybook-flat – ./packages/react-ui

🔍 Inspect: https://vercel.com/reactui/storybook-flat/8qJrD2JoFmnQtJu56MbFwuKDkQHU
✅ Preview: https://storybook-flat-git-disabled-change-text-color-reactui.vercel.app

storybook-8px – ./packages/react-ui

🔍 Inspect: https://vercel.com/reactui/storybook-8px/F7tAu9VCqespZpUCeBVmc9sYZEB4
✅ Preview: https://storybook-8px-git-disabled-change-text-color-reactui.vercel.app

packages/react-ui/internal/themes/DefaultTheme.ts

packages/react-ui/components/Select/Select.styles.ts

vercel · 2021-04-01T18:26:42Z

Deployment failed with the following error:

The most recent charge for your active payment method has failed. Please update it here: https://vercel.com/teams/reactui/settings/billing.

lossir

Для нескольких тестов обновились скриншоты, хотя на вид они не изменились:

Input/Inputs with different sizes/With long typed text large/ie11/With long typed text.png
Input/Inputs with different sizes/With long typed text large/ie11Flat/With long typed text.png

Попробовал прогнать тест со старым скриншотом, и вроде норм. Надо проверить.

packages/react-ui/components/Select/__stories__/Select.stories.tsx

zhzz

Вроде все круто. Единственное, я бы предложил немного переименовать переменные:

inputPlaceholderDisabledColor -> inputPlaceholderColorDisabled
и подобные, в соответсвии с нашим неписанным соглашением
textColorDisabledOnDark -> textColorDisabledContrast
субъективно кажется более подходящее название

zhzz · 2021-04-05T14:05:15Z

Во время влития нужно будет засквошить и убрать пометку BREAKING CHANGE.

…hange-text-color # Conflicts: # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chrome/page - 1.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chrome/page - 2.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chrome/page - 3.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chrome/page - 4.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chrome/page - 5.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chromeFlat/page - 1.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chromeFlat/page - 2.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chromeFlat/page - 3.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chromeFlat/page - 4.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/chromeFlat/page - 5.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefox/page - 1.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefox/page - 2.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefox/page - 3.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefox/page - 4.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefox/page - 5.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefoxFlat/page - 1.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefoxFlat/page - 2.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefoxFlat/page - 3.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefoxFlat/page - 4.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/firefoxFlat/page - 5.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11/page - 1.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11/page - 2.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11/page - 3.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11/page - 4.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11/page - 5.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11Flat/page - 1.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11Flat/page - 2.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11Flat/page - 3.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11Flat/page - 4.png # packages/react-ui/.creevey/images/Button/disabled combinations/simple/ie11Flat/page - 5.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chrome/page - 1.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chrome/page - 2.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chrome/page - 3.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chrome/page - 4.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chrome/page - 5.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chromeFlat/page - 1.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chromeFlat/page - 2.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chromeFlat/page - 3.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chromeFlat/page - 4.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/chromeFlat/page - 5.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefox/page - 1.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefox/page - 2.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefox/page - 3.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefox/page - 4.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefox/page - 5.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefoxFlat/page - 1.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefoxFlat/page - 2.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefoxFlat/page - 3.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefoxFlat/page - 4.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/firefoxFlat/page - 5.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11/page - 1.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11/page - 2.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11/page - 3.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11/page - 4.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11/page - 5.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11Flat/page - 1.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11Flat/page - 2.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11Flat/page - 3.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11Flat/page - 4.png # packages/react-ui/.creevey/images/Button/loading combinations/simple/ie11Flat/page - 5.png # packages/react-ui/.creevey/images/Button/text styles reset/chrome.png # packages/react-ui/.creevey/images/Button/text styles reset/chromeFlat.png # packages/react-ui/.creevey/images/Button/text styles reset/firefox.png # packages/react-ui/.creevey/images/Button/text styles reset/firefoxFlat.png # packages/react-ui/.creevey/images/Button/text styles reset/ie11.png # packages/react-ui/.creevey/images/Button/text styles reset/ie11Flat.png # packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/chrome/focused first element.png # packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/firefox/focused first element.png # packages/react-ui/.creevey/images/ComboBoxView/input like text/focused first element/ie11/focused first element.png # packages/react-ui/.creevey/images/ComboBoxView/input like text/plain/chrome/plain.png # packages/react-ui/.creevey/images/ComboBoxView/input like text/plain/firefox/plain.png # packages/react-ui/.creevey/images/ComboBoxView/input like text/plain/ie11/plain.png # packages/react-ui/.creevey/images/FxInput/with disabled/chrome.png # packages/react-ui/.creevey/images/FxInput/with disabled/firefox.png # packages/react-ui/.creevey/images/FxInput/with disabled/ie11.png # packages/react-ui/.creevey/images/Switcher/disabled/chrome.png # packages/react-ui/.creevey/images/Switcher/disabled/firefox.png # packages/react-ui/.creevey/images/Switcher/disabled/firefoxFlat.png # packages/react-ui/.creevey/images/Switcher/disabled/ie11.png # packages/react-ui/.creevey/images/Switcher/disabled/ie11Flat.png # packages/react-ui/.creevey/images/Textarea/Different states/Focus/chrome/Focus.png # packages/react-ui/.creevey/images/Textarea/Different states/Focus/firefox/Focus.png # packages/react-ui/.creevey/images/Textarea/Different states/Focus/ie11/Focus.png # packages/react-ui/.creevey/images/Textarea/Different states/Typed/chrome/Typed.png # packages/react-ui/.creevey/images/Textarea/Different states/Typed/firefox/Typed.png # packages/react-ui/.creevey/images/Textarea/Different states/Typed/ie11/Typed.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/Focus/chrome/Focus.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/Focus/ie11/Focus.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/FocusAutoresize/chrome/FocusAutoresize.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/FocusAutoresize/ie11/FocusAutoresize.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/FocusWithHelpClosed/chrome/CounterWithHelp.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/FocusWithHelpClosed/ie11/CounterWithHelp.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/FocusWithHelpOpened/chrome/CounterWithHelpOpened.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/FocusWithHelpOpened/chromeFlat/CounterWithHelpOpened.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/FocusWithHelpOpened/ie11/CounterWithHelpOpened.png # packages/react-ui/.creevey/images/Textarea/Textarea with length counter/FocusWithHelpOpened/ie11Flat/CounterWithHelpOpened.png # packages/react-ui/.creevey/images/ThemePlayground/playground/dark theme top/chrome/dark theme top.png # packages/react-ui/.creevey/images/ThemePlayground/playground/dark theme top/firefox/dark theme top.png # packages/react-ui/.creevey/images/ThemePlayground/playground/dark theme top/ie11/dark theme top.png # packages/react-ui/.creevey/images/ThemePlayground/playground/default theme top/chrome/default theme top.png # packages/react-ui/.creevey/images/ThemePlayground/playground/default theme top/firefox/default theme top.png # packages/react-ui/.creevey/images/ThemePlayground/playground/default theme top/ie11/default theme top.png # packages/react-ui/.creevey/images/ThemePlayground/playground/flat theme top/chrome/flat theme top.png # packages/react-ui/.creevey/images/ThemePlayground/playground/flat theme top/firefox/flat theme top.png # packages/react-ui/.creevey/images/ThemePlayground/playground/flat theme top/ie11/flat theme top.png # packages/react-ui/.creevey/images/Tooltip/manual control/call hide after show/chrome/call hide after show.png # packages/react-ui/.creevey/images/Tooltip/manual control/call hide after show/firefox/call hide after show.png # packages/react-ui/.creevey/images/Tooltip/manual control/call hide after show/ie11/call hide after show.png # packages/react-ui/.creevey/images/Tooltip/manual control/call show/chrome/call show.png # packages/react-ui/.creevey/images/Tooltip/manual control/call show/firefox/call show.png # packages/react-ui/.creevey/images/Tooltip/manual control/call show/ie11/call show.png # packages/react-ui/internal/themes/DefaultTheme.ts

…hange-text-color

textColorDisabledOnDark -> textColorDisabledContrast inputPlaceholderDisabledColor -> inputPlaceholderColorDisabled selectPlaceholderDisabledColor -> selectPlaceholderColorDisabled textareaPlaceholderDisabledColor -> textareaPlaceholderColorDisabled tokenInputPlaceholderDisabledColor -> tokenInputPlaceholderColorDisabled

draugi linked an issue Mar 4, 2021 that may be closed by this pull request

[Button] [Input] [Token] Цвет текста на заблокированных контролах #2207

Closed

draugi requested a review from lossir March 4, 2021 15:16

draugi force-pushed the disabled-change-text-color branch from f71d75d to cec0f1c Compare March 10, 2021 15:12

feat(Button, Token, TokenInput): text color of disabled elements changed

c096eeb

BREAKING CHANGE: Text color of disabled Button, Token, TokenInput changed from #a0a0a0 to #808080

draugi force-pushed the disabled-change-text-color branch from cec0f1c to c096eeb Compare March 15, 2021 18:00

draugi added 2 commits March 17, 2021 15:01

Merge remote-tracking branch 'origin/next' into disabled-change-text-…

2497a06

…color # Conflicts: # packages/react-ui/internal/themes/DefaultTheme.ts

fix(Select, DefaultTheme): small fixes after merge

5917f4f

lossir reviewed Mar 28, 2021

View reviewed changes

refactor(DefaultTheme, Input, Textarea): fixes after review

deebcd9

vercel bot temporarily deployed to Preview – storybook-default March 30, 2021 18:13 Inactive

vercel bot temporarily deployed to Preview – storybook-flat March 30, 2021 18:13 Inactive

vercel bot temporarily deployed to Preview – storybook-8px March 30, 2021 18:13 Inactive

draugi requested a review from lossir March 30, 2021 18:32

lossir reviewed Apr 1, 2021

View reviewed changes

packages/react-ui/internal/themes/DefaultTheme.ts Show resolved Hide resolved

packages/react-ui/components/Select/Select.styles.ts Outdated Show resolved Hide resolved

refactor(Select, TokenInput): review fixes, updated screenshots in tests

5c5af3f

draugi force-pushed the disabled-change-text-color branch from ced9233 to 5c5af3f Compare April 1, 2021 18:40

draugi requested a review from lossir April 1, 2021 19:00

lossir reviewed Apr 1, 2021

View reviewed changes

packages/react-ui/components/Select/__stories__/Select.stories.tsx Outdated Show resolved Hide resolved

test(Select): disabled select story refactored, screenshots updated

bde7301

draugi requested a review from lossir April 1, 2021 22:27

lossir previously approved these changes Apr 2, 2021

View reviewed changes

Merge branch 'next' into disabled-change-text-color

d38cb08

draugi marked this pull request as ready for review April 2, 2021 07:41

draugi requested review from StathamJason, dzekh and zhzz April 2, 2021 07:41

zhzz reviewed Apr 5, 2021

View reviewed changes

zhzz force-pushed the next branch from f84d412 to a0dcbc3 Compare April 9, 2021 15:11

lossir dismissed their stale review via a66fc7c April 12, 2021 06:46

Merge branch 'next' of github.com:skbkontur/retail-ui into disabled-c…

3559acf

…hange-text-color

lossir force-pushed the disabled-change-text-color branch from 1920b89 to 3559acf Compare April 12, 2021 08:02

lossir requested a review from zhzz April 12, 2021 11:03

zhzz approved these changes Apr 12, 2021

View reviewed changes

lossir changed the title ~~feat(Button, Token, TokenInput): text color of disabled elements changed~~ fix: change the text color of disabled controls Apr 13, 2021

lossir merged commit 09e27e9 into next Apr 13, 2021

lossir deleted the disabled-change-text-color branch April 13, 2021 05:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: change the text color of disabled controls #2304

fix: change the text color of disabled controls #2304

draugi commented Mar 4, 2021 •

edited by lossir

Loading

dzekh commented Mar 30, 2021

draugi commented Mar 30, 2021

vercel bot commented Mar 30, 2021 •

edited

Loading

vercel bot commented Apr 1, 2021

lossir left a comment

zhzz left a comment

zhzz commented Apr 5, 2021

fix: change the text color of disabled controls #2304

fix: change the text color of disabled controls #2304

Conversation

draugi commented Mar 4, 2021 • edited by lossir Loading

dzekh commented Mar 30, 2021

draugi commented Mar 30, 2021

vercel bot commented Mar 30, 2021 • edited Loading

storybook-default – ./packages/react-ui

storybook-flat – ./packages/react-ui

storybook-8px – ./packages/react-ui

vercel bot commented Apr 1, 2021

lossir left a comment

Choose a reason for hiding this comment

zhzz left a comment

Choose a reason for hiding this comment

zhzz commented Apr 5, 2021

draugi commented Mar 4, 2021 •

edited by lossir

Loading

vercel bot commented Mar 30, 2021 •

edited

Loading