feat(docs): tabs examples (#DS-2907) #329

sk8knut · 2024-09-29T20:54:24Z

Задача
Обновить статью про вкладки в доках

Макет статьи и спека для примеров
https://www.figma.com/design/ummbIOg2HomaEvnBMepIF2/koobiq-guides?node-id=4623-2661&node-type=frame&t=F0eSYS74hIjDL5Uj-11

Спека по вкладкам
https://www.figma.com/design/9Gwb4QiZUL4T96DNLRs7Yf/Tabs-Undelined?node-id=65-95672&node-type=frame&t=3XzLtboc7jXWCyL2-11

github-actions · 2024-09-29T21:00:11Z

Visit the preview URL for this PR (updated for commit 34dab6d):

https://koobiq-next--prs-329-hebkjio9.web.app

_{(expires Mon, 14 Oct 2024 09:27:16 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

* main: fix(docs): menu tab icon fixed (#DS-2926) (#331) feat(tabs): new bordered tabs (#DS-2904) (#328) feat(tooltip): migrated to standalone (#334) feat(icon): migrated to standalone (#333) fix(tree): mouse click selection generates extra event (#DS-2900) (#332) feat(tooltip): added parameter kbqRelativeToPointer (#DS-2864) (#326) fix: sandbox polyfills and tsconfigs (#330) # Conflicts: # packages/components/tabs/tabs.md

artembelik · 2024-10-02T13:10:04Z

packages/components/tabs/tabs.md

+
+<!-- example(tabs-stretch) -->
+
+[//]: # '#### Кнопки в строке вкладок'


почему бы просто не удалить?

artembelik · 2024-10-02T13:13:37Z

сперва подумал, что пример сломан, оказалась пустая вкладка

artembelik · 2024-10-02T13:19:16Z

packages/docs-examples/components/tabs/index.ts

    TabsVerticalExample,
+    TabsVerticalIconsExample,


почему сразу не писать standalone? меньше же потом рефакторить прийдется

artembelik · 2024-10-02T13:21:13Z

packages/components/tabs/tabs.md

+
+Используйте для навигации по контенту на странице, когда важно дать быстрый доступ его к отдельным частям.
+
+По внешним признакам вкладки похожи на навигационное меню или на шаги формы-мастера. Дизайнеру стоит избегать этой путаницы, поэтому стилизовать эти элементы нужно по-разному. В нестандартных случаях лучше оставлять для фронтендера примечания, например: обрати внимание, это не вкладки, а шаги формы.


Suggested change

По внешним признакам вкладки похожи на навигационное меню или на шаги формы-мастера. Дизайнеру стоит избегать этой путаницы, поэтому стилизовать эти элементы нужно по-разному. В нестандартных случаях лучше оставлять для фронтендера примечания, например: обрати внимание, это не вкладки, а шаги формы.

По внешним признакам вкладки похожи на навигационное меню или на шаги формы-мастера. Дизайнеру стоит избегать этой путаницы, поэтому стилизовать эти элементы нужно по-разному. В нестандартных случаях лучше оставлять примечания для разработчика, например: обрати внимание, это не вкладки, а шаги формы.

lskramarov · 2024-10-02T13:32:33Z

@sk8knut в ревьюеры нужно добавить ребят из UX

cm4fan · 2024-10-03T09:59:11Z

@rmnturov @sk8knut привет!

Не про вкладки с полоской мелочь. В этом примере написано "Добавляйте тултип иконкам, чтобы пояснить название раздела", но в примере тултипов нет. Предлагаю добавить, без них и правда непонятно, еще и иконки все одинаковые.

Стрелки при листании вкладок с полоской.
Вроде бы надо скрывать стрелку с той стороны, где край, да Ром?

А по ссылке стрелка видна:

* main: chore(docs): fixed markdown styles in examples tab (#DS-2947) (#342) chore(docs): added tag input validation example (#DS-2939) (#340) fix(hint): password hints fixes (#DS-2914) (#339) fix(input): fractional value not displayed after initialization (#DS-2633) (#337) chore: fixed components-dev styles (#DS-2925) (#338)

vitalyozza · 2024-10-03T12:32:37Z

@sk8knut заметил, что при наведении на пункты “влево”/“вправо” не реагируют кнопочки.

Оригинал: тут

vitalyozza · 2024-10-03T12:48:40Z

@sk8knut можешь вот этот текст использовать для разных вкладок:

Потому воспользоваться или разъясню некоей бы возжаждал умеет истину некоей, такого - немалое возникают наслаждение равно или наслаждение нет избегает когда такие. С которое представление приносило тех людей отвергает собой: тех примером порицающих такие зодчим перед - такие. Назвал, предпочел неприятностей - поняли зодчим за возжаждал нас восхваляющих никого немалое eсли. И великие возникает именно открывший, что было что из откуда зодчим. Если некое чтобы некоей: того или было когда отвергает ни открывший само боль, откуда что. Того по действительно а не открывший собой отвергает перед было или постигают, того говорил человек.
Eсли которого, наслаждений какими отвергает предпочел: что человек когда некое порицающих - такие раскрою наслаждения счастливой наслаждения - если что говорил. Никто возлюбил бы справедливости порицающих всю кто несло: наслаждению, стал нас неприятностей некоей только я не. По когда вами было возлюбил, картину eсли из-за обстоятельства, чтобы никаких истину примером. Нас какими отвергает человек никакого возлюбил стал, обстоятельства разумно отвергает нас людей за: что умеет упрекнуть обстоятельства но примером порицающих. Умеет я примером истину eсли приносят, некое, открывший картину обстоятельства возникают. Разъясню никаких, было наслаждений или перед из справедливости истину стремящегося всю несло пользы если когда наслаждение только наслаждения eсли я никаких избегает. Приносят eсли, умеет и только тех восхваляющих и из-за картину, лишь вы.
Возникает раскрою возлюбил потому: нет, тех возжаждал, никакого счастливой тех с, всю справедливости никаких некоей предпочел физическими великие мог как избегал иной. Назвал именно как, страдания наслаждений ни, наслаждению физическими возникает физическими счастливой из, нет, действительно, это eсли избегает разумно которого такого если, физическими, поняли. Людей немалое потому не если некое обстоятельства, такого чтобы если наслаждения по, воспользоваться.
Пользы некоей физическими само было собой назвал но я - картину или стал перед не разъясню людей не именно такие, ни равно умеет, избегал не, представление. Умеет откуда наслаждение, примером страдание из восхваляющих не само предаваться приносят несло, из возникает которого возжаждал как вами. Открывший - такие картину - неприятностей никто несло упражнениями вы представление такого упражнениями вами но когда, возникает приносят наслаждению кто картину мог упражнениями из - возлюбил, жизни. Возжаждал зодчим некоей всю упрекнуть именно презирает именно страдания никаких по некоей не и предаваться некоей избегает.

In produces pursues born has idea because rejects pain because and anyone who: produces from the can those: physical resultant pursues fault loves. How rejects born which, born explorer explain avoids circumstances, the consequences that actual or physical no. Actual but, how trivial, chooses loves man one us, or loves example ever, and but toil will desires. Explain, how except take annoying some which, to explain again encounter explain, physical a complete praising know which master trivial how extremely which happiness. Expound praising this trivial circumstances consequences, procure chooses, annoying pain denouncing how - it who born procure born. Because of - will encounter with produces system a right except has all.
Denouncing rationally undertakes take explain ever resultant all will idea explain - praising occur of there. Has ever mistaken human take loves consequences with take that do right encounter born denouncing painful obtain happiness right except actual except because. Pursues: because some explorer pain actual fault, which rejects teachings truth explain. Mistaken toil builder who happiness dislikes, itself produces was from a loves mistaken account human again explorer expound will praising ever. Truth advantage us denouncing obtain pursues exercise can has to dislikes trivial has to circumstances denouncing - not - human how: system fault from. Occur has complete, right but pursue, will again desires again resultant.
Man pleasure it except a explain is enjoy idea expound - one find consequences teachings avoids any happiness pain and, which because right ever painful actual. Trivial human occasionally annoying pursue will annoying, loves to expound example master advantage or rationally you was there chooses dislikes, those. Dislikes those - not physical builder because explain, nor those laborious man can exercise master that which all great procure trivial, fault. Him can trivial are the loves obtain occur obtain can has ever or some there you explorer nor which has: in truth.
Consequences who take avoids occasionally which us undertakes enjoy builder, find are, how the, with is in this, was. From there complete some was give loves, occasionally painful example physical there again it physical builder teachings, undertakes do obtain nor pain you ever.

vitalyozza · 2024-10-03T12:51:34Z

@sk8knut вот тут ссылочку упустили:

sk8knut · 2024-10-03T14:48:27Z

@vitalyozza Виталь, а можно плиз ссылку на кнопку-меню? я не вставил, потому что не понял, на что там должна быть ссылка)

vitalyozza · 2024-10-04T08:52:20Z

@vitalyozza Виталь, а можно плиз ссылку на кнопку-меню? я не вставил, потому что не понял, на что там должна быть ссылка)

По ссылке не могу точно сказать, нужно будет уточнить.
Еще заметил странность у вертикальных вкладок (скрин ниже)

sk8knut · 2024-10-05T10:31:45Z

@vitalyozza тогда жду ссылку на ожидаемый раздел) второй пункт не воспроизводится, можно плиз поподробней, какой браузер и какая версия?

rmnturov · 2024-10-08T04:57:29Z

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

https://www.figma.com/design/ummbIOg2HomaEvnBMepIF2/koobiq-guides?node-id=4623-2661&node-type=frame&t=F0eSYS74hIjDL5Uj-11

rmnturov · 2024-10-08T05:00:07Z

@sk8knut добавь плиз тултип для примера с пустой вкладкой
https://www.figma.com/design/ummbIOg2HomaEvnBMepIF2/koobiq-guides?node-id=4623-13711&node-type=frame&t=F0eSYS74hIjDL5Uj-11

rmnturov · 2024-10-08T05:03:21Z

@vitalyozza Виталь, а можно плиз ссылку на кнопку-меню? я не вставил, потому что не понял, на что там должна быть ссылка)

https://koobiq.io/components/dropdown/overview

rmnturov · 2024-10-08T05:48:45Z

Пример с кнопками в панели со вкладками рассыпается на маленькой ширине. Предлагаю добавить прокрутку по горизонтали
https://www.figma.com/design/ummbIOg2HomaEvnBMepIF2/koobiq-guides?node-id=4852-14885&node-type=section&t=F0eSYS74hIjDL5Uj-11

* main: fix(typography): added .text-big-medium, .text-normal-medium and .text-compact-medium (#345)

sk8knut · 2024-10-08T19:58:19Z

@rmnturov добавил empty цвета табов, которые были потеряны

rmnturov · 2024-10-09T03:17:15Z

@sk8knut чет прокрутка криво сработала. кнопки справа вылетели за пределы нижнего подчеркивания

* main: feat(docs): tabs examples (#DS-2907) (#329) fix(docs): corrected system-dependent theme selection on startup (#DS-2952) (#349) fix(stackblitz): corrected styles of examples (#DS-2933) (#348) chore(ci): added latest npm dist tag chore(cli): set npm dist tag (#350) fix(typography): added .text-big-medium, .text-normal-medium and .text-compact-medium (#345) chore(docs): fixed markdown styles in examples tab (#DS-2947) (#342) chore(docs): added tag input validation example (#DS-2939) (#340) # Conflicts: # packages/components/tabs/_tabs-common.scss

tabs new docs

5516aee

sk8knut self-assigned this Sep 29, 2024

sk8knut added 11 commits September 30, 2024 00:02

cspell

8adcac3

linter fix

735a049

overview, vertical and disabled examples

a63c38a

linter fixes + empty example + styles

922fe97

all examples done

946b32e

text fixes

eef3c12

style fixes

ecef192

closed empty tags

0a413a5

styles fixes

c0e7293

first underlined tabs example

2171360

sk8knut requested review from pimenovoleg, lskramarov and artembelik October 2, 2024 10:46

artembelik reviewed Oct 2, 2024

View reviewed changes

artembelik approved these changes Oct 2, 2024

View reviewed changes

added actionbar example + refactor + review

2bf6f8a

sk8knut requested a review from vitalyozza October 2, 2024 19:33

actionbar cspell

b4d8647

tooltip work in vetical icons example + added tab text to all tabs

4f0b382

koobiq deleted a comment from vitalyozza Oct 3, 2024

fixes md file head

eba779f

different text for tabs

2d30918

sk8knut requested review from rmnturov and removed request for vitalyozza October 7, 2024 08:36

sk8knut added 5 commits October 8, 2024 11:27

Merge branch 'main' into feat/DS-2907

e5fb00f

* main: fix(typography): added .text-big-medium, .text-normal-medium and .text-compact-medium (#345)

vetical icons example tooltips placement

0281e2e

more review fixes

777bb82

prettier fix

22156ea

added empty label color

9a141f0

crazy attemts to fix right padding when scroll example container

732bedc

new review fixes

dcda352

rmnturov approved these changes Oct 9, 2024

View reviewed changes

tabs actionbar with scroll WIN

34dab6d

pimenovoleg approved these changes Oct 9, 2024

View reviewed changes

lskramarov approved these changes Oct 9, 2024

View reviewed changes

sk8knut merged commit f4e8bad into main Oct 9, 2024
3 checks passed

sk8knut deleted the feat/DS-2907 branch October 9, 2024 09:33


		<!-- example(tabs-stretch) -->

		[//]: # '#### Кнопки в строке вкладок'


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

		По внешним признакам вкладки похожи на навигационное меню или на шаги формы-мастера. Дизайнеру стоит избегать этой путаницы, поэтому стилизовать эти элементы нужно по-разному. В нестандартных случаях лучше оставлять для фронтендера примечания, например: обрати внимание, это не вкладки, а шаги формы.

feat(docs): tabs examples (#DS-2907) #329

feat(docs): tabs examples (#DS-2907) #329

Uh oh!

Conversation

sk8knut commented Sep 29, 2024 • edited by rmnturov Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

artembelik Oct 2, 2024

Choose a reason for hiding this comment

Uh oh!

artembelik commented Oct 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

artembelik Oct 2, 2024

Choose a reason for hiding this comment

Uh oh!

artembelik Oct 2, 2024

Choose a reason for hiding this comment

Uh oh!

lskramarov commented Oct 2, 2024

Uh oh!

cm4fan commented Oct 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vitalyozza commented Oct 3, 2024

Uh oh!

vitalyozza commented Oct 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vitalyozza commented Oct 3, 2024

Uh oh!

sk8knut commented Oct 3, 2024

Uh oh!

vitalyozza commented Oct 4, 2024

Uh oh!

sk8knut commented Oct 5, 2024

Uh oh!

rmnturov commented Oct 8, 2024

Uh oh!

rmnturov commented Oct 8, 2024

Uh oh!

rmnturov commented Oct 8, 2024

Uh oh!

rmnturov commented Oct 8, 2024

Uh oh!

sk8knut commented Oct 8, 2024

Uh oh!

rmnturov commented Oct 9, 2024

Uh oh!

Uh oh!

Uh oh!

sk8knut commented Sep 29, 2024 •

edited by rmnturov

Loading

github-actions bot commented Sep 29, 2024 •

edited

Loading

artembelik commented Oct 2, 2024 •

edited

Loading

cm4fan commented Oct 3, 2024 •

edited

Loading

vitalyozza commented Oct 3, 2024 •

edited

Loading