TEHIK-EE / tedi-design-system

TEDI is TEHIK design system
3 stars 11 forks source link

Vertikaalne stepper: uus komponent #101

Open karolin-kivisikk opened 3 months ago

karolin-kivisikk commented 3 months ago

Luua uus komponent - vertikaalne stepper

Vajadus kirjeldatud siin: https://tehikustiilijuhis.slack.com/archives/C074KHG111T/p1720781902726609 Disainikatsetused:

Communitys selline komponent puudub, hetkel on kasutatud table of contents komponenti: https://github.tehik.ee/tedi-design-system/main/?path=/docs/community-components-tableofcontents--docs Communitys on olemas horisontaalne stepper: https://github.tehik.ee/tedi-design-system/main/?path=/docs/community-components-stepper--docs

karolin-kivisikk commented 3 months ago

Liisa Tammeorg 4 days ago Hei, @Kärolin Kivisikk @Elisabeth Raidma ! Kuna teil on ilmselt kõige põhjalikum ülevaade, milliseid komponente erinevates TEHIKu projektides kasututakse, siis uurin teilt sisukorra komponendi kohta. 9 replies

Liisa Tammeorg 4 days ago Kasutame TAH projekti hindamisinstrumendis sisukorra kompat põhimõtteliselt küljemenüüna. Kasutajatel on oluline teada, kas valdkond (nt Vaimne tervis, Elukeskkond jne) on juba täidetud või mitte (neil on kohustuslik iga valdkonna kõikidele küsimustele vastata). Praeguse TableOfContents komponendi juures on saanud probleemiks nii WCAG osas kui kasutajate tagasisidena, et roheline ja hall linnuke on omavahel vaevu eristatavad. Vaatasime korra UIX sünkil lahendusideid ja arutasime ka oma projektisiseselt kliendiga ja hetkel oleme jõudnud sellise variandini - https://www.figma.com/design/zIjNywzeVktsD4VJBL1acs/STAR-TAH?node-id=14349-43177&t=qPiv1RCXIbWVIV10-0 Kuidas teile tundub, kas see võiks komponendi uuendusena sobida? Või ettepanekuid? On teil ehk kohe tuua välja ka teisi kohti, kus see kompa kasutuses ?

Liisa Tammeorg 4 days ago Hetkel meil veel sisukorras kasutuses staatuse mummud, aga need võtame üldse sisukorrast ära

Kärolin Kivisikk 21 hours ago Hetkel on silma jäänud kasutus siin: https://www.figma.com/design/vkcvISaaYkZJVQU8VFw9kC/STAR---Iglu?node-id=18291-1028 mujal pole silmanud veel kuna pole ise selle komponendini veel jõudnud. Küll aga näen et peaks sisukorra ja vormi stepperi eraldama tulevikus. Sest need katavad erinevaid vajadusi, sisukorral pole staatuseid (ainuke erisus oleks aktiivne link ja mitteaktiivne). Sisukorral ei kasutaks ka ikoone. Stepperil oleks võimalik disabled oleks, error, success, active, klikatav samm aga mitte hetkel aktiivne jne. Kasutusel tõenäoliselt ikoonid. See 'check' ikoon hetkel olemasoleva komponendis ees pole selge millal kasutatakse, sest ma ise läheneks nii et kui midagi pole täidetud siis pole mitte hall check vaid siis polegi checki. Check ikoon tekib siis kui samm on täidetud. Nõus et hetkel selle halli ja rohelise erisus ei tule esile. Teie tehtud uue komponendi puhul mul tekkisid küsimused: Kas see noolega '>' ja seest värvimata mummuke tähendab et lingil on alamlingid ning teda saab avada? Sest see chevron indikaator asub lingi lõpus samuti. Või tähistab ta lihtsalt mitte-aktiivset kuid klikatavat sammu? Sinise ja rohelise täidetud värvi üksteisest eristamine nii väiksel pinnal on samuti keeruline, seal on küll nooleke sees kuid seegi üsna taoline check ikooniga ehk et tegu on samuti üsna sarnaste komponentidega. Pakun välja ka variandi: Check ikooni ega ühtegi teist ikooni pole lingil üldse ees kui samm pole täidetud/erroris/aktiivne Chevron lingi lõpus näitab kas samm omab alamsamme Aktiivne link on eristatud siis kas mingi ikooniga mis on checkist eristuv või omab muud indikatsiooni, nt border left/rectangle ja/või on boldim Erroriga samm on eristatud siis errori ikooniga Mitte-aktiivsed, mitte-erroriga ja mitte-tehtud sammud võiks olla veelgi tagasihoidlikumad äkki? Tegin siia teie faili ise ka mõned katsetused: https://www.figma.com/design/zIjNywzeVktsD4VJBL1acs/STAR-TAH?node-id=14557-25208&t=hRKt66QUjJz1LvzK-4 :raised_hands: 1

Liisa Tammeorg 6 hours ago Aitäh, @Kärolin Kivisikk ! Hetkel see noolega '>' ja seest värvimata mummuke ja noolega sinine mummuke tulenesidki sellest pöördumise loomise vaatest, Mõtlesime kasutada ühtset loogikat, et roheline check tähendab täidetud, hall nooleke täitmata ja sinine nooleke oleks praegune samm. Aga olen nõus, et nooleke indikeerib pigem seda, et sealt alt avaneb veel midagi, mis ei täida meie eesmärki. Mulle väga meeldib see sinu tehtud puu versioon, kus täitmata elemendid pigem tühjad ja kogu sisu joontega ühendatud, see näeb visuaalselt palju hoomatavam ja ilusam välja.

Liisa Tammeorg 6 hours ago Samuti nõus, et pigem oleks mõistlik tulevikus stepper ja sisukord lahku lüüa (edited)

Kärolin Kivisikk 4 hours ago Mu silmis oleks ka see puu loogiline lahendus ja see on üsna levinud vertikaalse stepperi stiil samuti, seega kasutajale arusaadav. Kus maal teil hetkel prototüüpimine on? Ehk et millal need vaated arendusse lähevad? Ma uurin üle mis ajal teiste disainerite puhkused lõppevad ja võiks lähiajal siis selle komponendi korra suuremas ringis üle vaadata. Selle puhul oleks tegu uue komponendiga ning siis tahaks teiste projektide vajadusi samuti teada. Kuigi ma pole kindel võib-olla STAR ainsana kasutabki seda stepperina? Ja siis ma teeks selle Figmas korrektselt ära TEDI-Readysse, arendaja meil endal puhkab kuni augustini ja enne seda see arendusse minna ei saaks. Lisaks sellele on sõltuvus lingist siis peame TEDI-s eelnevalt ka lingi ära arendama.

Liisa Tammeorg 3 hours ago Meil praegune arendusprojekt tegelikult juba lõppeb kuu aja pärast 16. augustil. Algselt oli mõte sisukord veel enne projekti lõppu TAH tiimi poolt ära uuendada (k.a. arendus), aga praegu puhkuste ajal tundub see suht ebarealistlik juba, ma ise ka puhkan 22.07-11.08. Aga kui see uuendus jääks nüüd TEDI tiimile, siis kas sa oskad kasvõi roughly ennustada, millal see umbes valmis arenduseni jõuaks? Variant on ka, et TAH tiim saaks selle äkki jätkuprojektis ette võtta (aga seda peaks siis veidi projektijuhtidega ka läbi rääkima)

Kärolin Kivisikk 3 hours ago Ma ise hetkel ei oska kindlalt ennustada kuna arendajalt küsida ei saa, aga ma arvan et enne augusti lõppu ei saaks ja pigem septembris isegi. Sest sellele komponendil võivad olla muud sõltuvused ja siis tuleb veel need komponendid enne ära arendada (lisaks lingile vaatan et accordion on ka mis siis alam-samme avab/sulgeb) (edited) :+1: 1

Liisa Tammeorg 3 hours ago Olgu, aga siis oleks väga hea, kui saaks selle arutelu pärast puhkuseid ära teha millalgi ja vaatame siis sealt edasi