bem/yandex-ui

Yandex UI Kit build on React and bem-react

@yandex/ui ·

Yandex UI Kit build on React and bem-react.

Installation

#⠀package with components
npm i -P @yandex/ui
#⠀peer dependencies
npm i -P @bem-react/core @bem-react/di @bem-react/classname

Usage

Detailed docs and example usage can be found at Storybook.

Supported platforms

We support stable versions of all major browsers including IE11.

Browser	Version
Chrome	Last 2 versions
Opera	>= 12.1
Firefox	>= 23
Android	>= 4
iOS Safari	>= 5.1
Internet Explorer	>= 11

yandex-ui's Issues

Screenshot testing

Hi. I see you using hermione to visual testing. I can suggest to try use Creevey. It's tightly integrated with storybook, so you don't need write tests explicitly, also it's faster and have better UI.

Компонент банковской карты

Планируется ли добавление компонента ввода данных для банковских карт?

Storybook examples don't work

Examples in Storybook (https://yastatic.net/s3/frontend/lego/storybook/index.html?path=/docsx/controls-tumbler-desktop--playground) don't work.

vendors~main.c6938e236c1ef83c73e2.bundle.js:6 Warning: Failed prop type: t: prop type `active` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.
    in t
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in ManagerConsumer
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component) (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in F (created by QueryLocation)
    in QueryLocation (created by Root)
    in t (created by Root)
    in HelmetProvider (created by Root)
    in Root
r @ vendors~main.c6938e236c1ef83c73e2.bundle.js:6
s @ vendors~main.c6938e236c1ef83c73e2.bundle.js:6
Oe @ vendors~main.c6938e236c1ef83c73e2.bundle.js:66
Te @ vendors~main.c6938e236c1ef83c73e2.bundle.js:66
render @ vendors~main.c6938e236c1ef83c73e2.bundle.js:127
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
gf @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
zm @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
Wh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
Vh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
qh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
M_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
k_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
P_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
w_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
t_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
enqueueSetState @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
A.setState @ vendors~main.c6938e236c1ef83c73e2.bundle.js:66
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
f @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
l @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
a @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
R @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
process @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
c @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
setTimeout (async)
u @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
add @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
A @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
makeDetectable @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
forEach @ vendors~main.c6938e236c1ef83c73e2.bundle.js:39
listenTo @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
value @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
value @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
Hg @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
jh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
h @ vendors~main.c6938e236c1ef83c73e2.bundle.js:82
c @ vendors~main.c6938e236c1ef83c73e2.bundle.js:82
_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:82
zh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
t.unstable_runWithPriority @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
L_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
M_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
k_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
P_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
w_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
t_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
Y_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
W_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
nb.render @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
U_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
sb @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
render @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
t.default @ vendors~main.c6938e236c1ef83c73e2.bundle.js:39
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:58
Promise.then (async)
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:58
l @ runtime~main.3e80324d580cf3681712.bundle.js:1
(anonymous) @ main.d3c0470a998994624bff.bundle.js:1
l @ runtime~main.3e80324d580cf3681712.bundle.js:1
t @ runtime~main.3e80324d580cf3681712.bundle.js:1
r @ runtime~main.3e80324d580cf3681712.bundle.js:1
(anonymous) @ main.d3c0470a998994624bff.bundle.js:1
Show 32 more frames
vendors~main.c6938e236c1ef83c73e2.bundle.js:66 Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <Styled(div)>. See https://fb.me/react-warning-keys for more information.
    in t
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in ManagerConsumer
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component) (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in F (created by QueryLocation)
    in QueryLocation (created by Root)
    in t (created by Root)
    in HelmetProvider (created by Root)
    in Root

update to React 17

Hi! Would be nice to update to React 17

Объясните выбор названий классов для некоторых компонентов

Почему используются названия .Button2, .Select2, .Popup2, вместо привычных .Button, .Select, .Popup ?
Это из-за возможности добавить дополнительный класс через prop className ?

[Textinput] hasClear не работает, если значение изменятся не через prop value

Если отслеживать изменения через ref или как это делает react-hook-form, то крестик, при установленном значении prop hasClear не будет появляться при наличии текста в поле для ввода. Может добавить принудилтельный модификатор isVisible, а не проверять наличии значения в prop value See

Низкий FPS при использовании шторки в режиме энергосбережения на айфоне

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

Пробовал поиграться с настройками анимации, но ничего не помогло.

При этом на мобильной версии eda.yandex.ru все выглядит плавно.

Добавить поддержку react 18

BUG Button

При создании такого компонента:
<Button view="raised" size="s" pin="circle-circle" > кнопка яндекс </Button>
неверно отрабатывает анимация при свойстве pin="circle-circle", пытается отрисовать квадратную кнопку при нажатии

Документация на Storybook для компонента Popup имеет неточность

Здравствуйте! Документация на Storybook для компонента Popup имеет неточность:

Не работает свойство directions, которое отвечает за направление раскрытия блока. Вместо него за это отвечает свойство direction, которое в документации отвечает за направление хвостика. И при этом свойство direction имеет другие допустимые значения, чем те, которые указаны в документации.

Благодарю вас за вашу работу и за то, что предоставляете возможность пользоваться вашей библиотекой бесплатно!