Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

дизайн блока BasicSelect, Combobox и `multiCombobox #143

Closed
gizeasy opened this issue May 20, 2020 · 8 comments
Closed

дизайн блока BasicSelect, Combobox и `multiCombobox #143

gizeasy opened this issue May 20, 2020 · 8 comments
Assignees
Labels
Projects

Comments

@gizeasy
Copy link
Collaborator

gizeasy commented May 20, 2020

No description provided.

@gizeasy gizeasy changed the title компонент Select дизайн блока Select May 20, 2020
@fooontic fooontic self-assigned this May 26, 2020
@fooontic fooontic added this to inProgress in Consta May 26, 2020
@fooontic
Copy link
Contributor

Мысли по поводу вариаций селекта.

SimpleSelect

  • Выбор одного элемента списка.
  • Нет плейсхолдера, но есть дефолтное значение.

SelectWithSearch

  • Выбор одного элемента списка
  • Есть плейсхолдер.
  • Может быть предвыбранное значение.
  • Есть поиск по списку. Походу набора список фильтруется по введённому значению.
  • Опциональная опция «Добавить своё значение».

MultiSelect

  • Выбор нескольких элементов списка.
  • Есть плейсхолдер.
  • Может быть предвыбранное значение.
  • Есть поиск по списку. Походу набора список фильтруется по введённому значению.
  • Поле ввода сдвигается каждый раз походу добавления элементов.
  • Мультристрочный. Будет ограничение по высоте (пока не определено).
  • Опциональная опция «Добавить своё значение».

@tsvetta
Copy link

tsvetta commented May 26, 2020

Созвон с Вадимом и Олегом

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

https://github.com/gpn-prototypes/ui-kit/blob/master/src/components/Select/index.tsx

В миро будет блоксхема с поведением компонента в зависимости от разных условий

У нас точно будет простой тупейший селект, где будет просто выбор одного пункта из списка значений, не будет плейсхолдера

Хотят целиком и полностью свое. Олег предлагает фреймворк для селектов, есть работа с клавиатуры, нет дизайна: https://www.downshift-js.com/ 
Поле ввода селекта должно быть основано на TextField из ДС.

Выпадашка должна быть отдельным компонентом.

Мобильную версию не закладываем пока.

Попробовать использовать нативные теги select и options, скрывая их.

Варианты селектов:

  • мультиселект с деревом/без дерева

@fooontic
Copy link
Contributor

fooontic commented May 26, 2020

Ссылка на блоксхему https://miro.com/app/board/o9J_kya0n8I=/?moveToWidget=3074457348145252676&cot=13 Будет скорее всего дополняться.

@fooontic
Copy link
Contributor

Обсудили внимательно с @Miocene. Решили, что вариант с деревом излишний. Делать его не будем. Завтра ещё с командой это обсудим и точно напишу.

@fooontic
Copy link
Contributor

@fooontic
Copy link
Contributor

У нас весь UI-kit в Фигме переехал в другой общедоступный репозиторий и заодно мы его теперь оформляем сразу во всех трёх темах разом, а не как раньше.

Новый макеты теперь здесь. На данным момент получилось разбить селект на такое количество компонентов:

  1. SimpleSelect https://www.figma.com/file/v9Jkm2GrymD277dIGpRBSH/GPN-UI-Kit?node-id=366%3A0
  2. Combobox https://www.figma.com/file/v9Jkm2GrymD277dIGpRBSH/GPN-UI-Kit?node-id=366%3A1392
  3. MultiCombobox https://www.figma.com/file/v9Jkm2GrymD277dIGpRBSH/GPN-UI-Kit?node-id=367%3A0
  4. UserSelect (он пока не доделан во всех темах и не расписаны различные кейсы, но общее представление есть) https://www.figma.com/file/v9Jkm2GrymD277dIGpRBSH/GPN-UI-Kit?node-id=367%3A5636

В каждом компоненте описаны узкие кейсы использования, возможно, какие-то не не учёл, если надо будет — буду по возможности дополнять.

@fooontic
Copy link
Contributor

^ @tsvetta

@fooontic
Copy link
Contributor

Для компонента MultiCombobox предварительно нужно будет сделать компонент Tag https://www.figma.com/file/v9Jkm2GrymD277dIGpRBSH/GPN-UI-Kit?node-id=123%3A0 надо будет это учесть и запланировать разработку его параллельно или заранее.

@fooontic fooontic changed the title дизайн блока Select дизайн блока BasicSelect, Combobox и `multiCombobox Aug 31, 2020
@fooontic fooontic moved this from inProgress to Done in Consta Aug 31, 2020
@gizeasy gizeasy closed this as completed Sep 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Development

No branches or pull requests

3 participants