refactor(Button): new arrow buttons layout

[StathamJason]

С какими проблемами столкнулся:

• Не получится просто так сделать угол более скругленным, так как теперь селектора два (:before и :after) и, соответственно, два элемента. При попытке изменения border-radius по углам происходит следующее:
  

• Пропала тень на верхней грани и верхнем ребре самой стрелки, так как псевдокомпоненты рисуются поверх блока с кнопкой. Если расположить под блоком, тогда надо добавлять четыре тени в box-shadow родителя, чтобы правая/левая грань была без границы и стили теней для верхнего ребра псевдоэлемента стрелки. CSS код распухнет.
  

Новая верстка решает некоторые артефакты предыдущей, но в целом все равно получается такое себе решение

[StathamJason]

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

[zhzz]

Думаю, в целом решение получается норм и изменения того стоят. Мы избавляемся от переменных стрелок для их фона и позиционирования. Решаем проблемы с торчащими то и дело уголками. Стрелки стали проще и ровнее. 👍

По артефактам:

1. border-radius К слову, прошлое решение его изменение вообще не поддерживало. А мы можем общий радус стрелок тоже унаследовать. Тогда до каких-то пределов его можно будет даже адекватно кастомизировать. А конкретно в углу стрелки думаю можно его захардкодить в 0 или 1px. Тогда получится что-то такое:

9px	2px

2. box-shadow Жаль, конечно, что его унаследовать никак не получится. Но это не большая беда. Артефакты, которые ты перечислил, думаю, не критичны. Но есть еще другой, по хуже. Дело в том, что стрелка перекрывает тень, которая применяется при нажатии на кнопку в дефолтной теме.

Было	Стало

Это стоит поправить. Думаю, как вариант обойтись копированием (с корректировкой) ее в тень верхней половинки стрелки. Будет немного заметна нестыковка при масштабировании, но вероятно с этим можно жить.

Сейчас	Будет с тенью

::before {
    ...
    box-shadow: 1px 0 0 0 rgba(0,0,0,0.25), inset -1px 1px 2px 0 rgba(0,0,0,0.1) !important;
}

---

Из других моментов, которые можно поправить до аппрува скриншотов и ревью:

1. Изменились переменные btnDefaultHoverBorderColor и btnCheckedDisabledShadow в плоской теме. Вроде незаконно.
2. Добавление состояния success в таблицу кнопок хорошая правка. Но сейчас она вызовет лишние изменения скриншотов, из-за которых мы можем упустить что-то важное в изменении стрелок. Лучше это сделать в конце или отдельно. Идеально, если на скриншотах поменяются только стрелки. Тогда мы будем уверены, что ничего другого не сломалось.

Еще остались переменные фона стрелок в темах, которые можно удалить.

[dzekh]

А что если внутреннюю тень нажатой кнопки сделать не честной тенью а градиентом? У нас же как-то реализован градиент на дефолтном состоянии? Тут он тоже будет выглядеть почище, если его получится подогнать.

[StathamJason]

С градиентом будет видно грани псевдоэлементов. Примерно так

[zhzz]

А что если внутреннюю тень нажатой кнопки сделать не честной тенью а градиентом? У нас же как-то реализован градиент на дефолтном состоянии? Тут он тоже будет выглядеть почище, если его получится подогнать.

Интересный вариант) Но получается не очень.

(справа все через градиенты, на второй диапазон градиента пошире)

Тень выглядит более размазанной и плавной. И плюс отбрасывается сразу на четыре стороны. А градиент нужен будет для каждой стороны отдельный.

Это похоже на нашу обводку через тени. Тоже какой-то не совсем правильный путь.

[zhzz]

@dzekh а тебе не нравится мой вариант с тенью?

Вот этот

Он хорош еще тем, что затрагивает только сами стрелки. Сама кнопка никак не страдает.

[StathamJason]

• Были убраны лишние миксины
• Верстка стала попроще
• Стало меньше визуальных артефактов
• Бэкграунд теперь наследуется
• Стало намного меньше переменных стрелок (и теперь они общие для левой и правой)
• Убрана лишняя тень кнопок во флэт теме checked состояния
• Тень верхней грани внутри стрелки задается с помощью linear-gradient через css-свойсто background-image (переменные arrowActiveShadowGradient и arrowCheckedShadowGradient)

[lossir]

Из-за изменений, о которых Егор говорит здесь #2263 (comment), также пришлось обновить скриншоты теста Button/text styles reset. Их тоже надо вернуть.

---

У стрелки совсем нет внутренней тени в нажатом состоянии. Мне кажется, её стоит добавить. Я попробовал сделать вариант, правда, только через браузер.

где	чего
было
стало
как вариант

[dzekh]

У стрелки совсем нет внутренней тени в нажатом состоянии. Мне кажется, её стоит добавить. Я попробовал сделать вариант, правда, только через браузер.

Да, мне нравится такой вариант, который «как вариант».
Если он не усложнит особо, и не добавит новых переменных.

[lossir]

По моим замечаниям всё ок. После переапрува скриншотов ещё гляну.

[zhzz]

Переаппрувлено и добавлено несколько лишних скриншотов (DateInput, Input, Link, Radio, Textarea, Tooltip). В идеале, должны поменяться только скриншоты с кнопками-стрелками. Новых быть не должно, т.к. тестов не добавляли.

Все это видно на вкладке "Files changed" в ПРе.

[zhzz]

Теперь четко 👍