Component - Inline Edit Text Input

keboola / indigo-ui

Indigo UI library, its CSS and React components. Also Styleguide app showing usages of this library.

https://indigo.keboola.com

MIT License

5 stars 0 forks source link

Component - Inline Edit Text Input #271

Closed natocTo closed 5 years ago

natocTo commented 5 years ago

related: #266

rozdělil jsem to do více commitů:

převedena komponenta, dále jsem mazal docela dost věcí, tak doufám že nic důležitého
API by mělo zůstat stejné, to jsem neměnil
základní snapshot testy
upravil jsem trochu i CSS (samostatný commit, nevím zda to mám dělat)
přidal jsem komponentu do výpisu Storybook (teď si uvědomuji že jsem to tam nějak dal ani moc neřešil kam, tak bude asi potřeba upravit umístění v menu případně).
zkusil jsem to v KBC-UI a vypadalo že to funguje stejně dobře

Nevím zda ikonky se budou převádět na SVG, v icons jsem nenašel ty co jsou tu použity.

natocTo commented 5 years ago

Možná bude lepší přidat formu třídu (kbc-inline-edit-form třeba) a odkazovat se na ní v CSS místo obyč form selektoru.

ujovlado commented 5 years ago

Ja som ti vlastne nenapisal, ze kludne mozu vzniknut aj nove csska pre tu komponentu - mozno ak sa inspirujes niecim novsim, co robil Jan (zachovat podobnu strukturu a asi jeho styl), tak by si ich mohol pridat.

Asi kludne pridaj novy file, kde budu tie nove csska. Stare mozu a vlastne musia ostat nedotknute, kvoli spatnej kompatibilite (kym zacneme pouzivat novu komponentu, musia tam ostat).

A kludne sa moze malicko zmenit aj markup - proste nech je to nova komponenta s podobnym alebo vylepsenym API.

natocTo commented 5 years ago

Dobře tak css dám bokem nové. Html (strukturu) už jsem právě zjednodušil. Ale ještě mrknu.

janmichek commented 5 years ago

Fajn, diky ze jsi to zmodularizoval. Mam k tomu par vyhrad, ale to jsem mel uz predtim a tykaji se vizualu. To bych v dalsim PR pripadne prebrousil. Nevim jestli to ma nejaky historicky duvody ale rozciluje me:

pozicovani "X" a "Save" buttonu
obly styl tlacitek - jinde v aplikaci je nemame
talcitko "Describe ..." a jeho pozicovani (text zacina az o radku niz)

Nevypada to dobre ani jednotne a vyzaduje to pomerne hodne stylu. Ted na to nemam konretni reseni, ale s necim bych prisel pred implementaci.

janmichek commented 5 years ago

@natocTo Nasazel jsem ti sem par commentu, spis informativniho charakteru. V tom 3. zadam o fix. Pokud mas nejaky predchozi zkusenosti s css systemy, budeme radi, kdyz se podelis. Proberem spis na Slacku.

natocTo commented 5 years ago

Díky za info. Na to css ještě mrknu.

Jinak nějaké hlubší zkušenosti nemám. Tři roky jsem dělal weby od toho že jsem dostal PSD a dělal jsme HTML + CSS + JS + PHP. Takže jsem rešil i CSS ale nebyl nikdo kdo to kontrolovat nebo řešil se mnout. Neměl jsme v tom nějaký pořádek, moc na to nebyl čas. Používal jsem dlouho less, později sass (kvůli bootstrap 4). Když jsem si dělal nějaký svůj vlastní projekt tak jsem zkoušel i jiné jako Bulma. Ještě se mi to líbil framework Tailwindcss. Ale nic nepřidává té struktuře. V Bootstrap 4 je fajn že existují taky utility class. právě třeba na obyč margin-left apod, aby člověk nemusel stylovat přímo nějakou ikonku nebo tak.

natocTo commented 5 years ago

Tak jsem poslal update. Komponenta přejmenována + přidána nová třída a stylována ta.

janmichek commented 5 years ago

Superfajn, koukam zes jsi i trochu fixnu styly (tlacitka vertikalne vystredeny). Jedine dobre. Ja bych to jeste po nasazeni prebrousil, zminimalizoval pouziti css.

ujovlado commented 5 years ago

inline-edit-input je nova class, takze csska mozu byt v pohode nasadene skor.