Algemene todo: Webcomponenten 3 .vl- eruit krijgen

[Wolfr]

.vl- namespaced componenten uit het project krijgen.

We kunnen dit best methodisch aanpakken: stukje bij beetje. Je kan best het hele project afzoeken op de gebruikte selectors.

Bv. eerst zorgen dat we 1 component eruit halen, een eenvoudig voorbeeld is de CSS van _description_data.scss. De vervangern hiervoor is _auk-key-value.scss.

Lijstje van .vl (afchecken als we deze eruit hebben gekregen)

• 'govflanders/components/_accordion';

  • Accordion heeft voorlopig geen zin om te refactoren. We gaan deze vervangen door eigen component zie Accordion component #801

• 'govflanders/components/_action-group';

  • Kan er volledig uit: vervangen door goede logica button toolbar t.o.v. gewone toolbar - depends on Button groups vs Button toolbars #765

• 'govflanders/components/_alert';

  • Moeilijker: want werkt met alert stack, later te bekijken als alert component iets volwassener is - depends on Alert volwassener maken #768

• 'govflanders/components/_badge';

  • Wakker blijven: dit is een avatar component, geen “pill” ofzo - original docs - deze component wordt ook gebruikt binnen de originele alert; en in de document widget. Lijkt moeilijker om er zomaar uit te gooien.

• 'govflanders/components/_button';

  • Er zijn nog 600 instanties.... dit is de moeilijkste om eruit te krijgen denk ik
    

• 'govflanders/components/_checkbox';

• 'govflanders/components/_data-table';

• 'govflanders/components/_datepicker';

  • De moeite om nu te refactoren (qua classes)? Nieuw au-component is beschikbaar, maar gebruikt dezelfde (brand) styling (styles/govflanders/components/_datepicker.scss) als het legacy component.

• 'govflanders/components/_description-data';

  • Is al aan gewerkt

• 'govflanders/components/_document';

  • Code komt nooit voor dus kan eruit gezwierd worden
  • Komt één maal voor als vl-document__metadata child. Wordt bekeken.

• 'govflanders/components/_form-message';

• 'govflanders/components/_form-structure';

• 'govflanders/components/_icon';

• 'govflanders/components/_input-addon';

  • Enige instantie van deze classes is enkel nog binnen datepicker. Gewoon vervangen veroorzaakt andere issues dus lijkt me interessant om even aan de kant te laten. (zie ook _input-group)

• 'govflanders/components/_input-field';

• 'govflanders/components/_input-group';

  • Enige instantie van deze classes is enkel nog binnen datepicker. Gewoon vervangen veroorzaakt andere issues dus lijkt me interessant om even aan de kant te laten. (zie ook _input-addon)

• 'govflanders/components/_link';

• 'govflanders/components/_loader';

• 'govflanders/components/_modal';

• 'govflanders/components/_pager';

• 'govflanders/components/_pill';

• 'govflanders/components/_radio';

• 'govflanders/components/_tabs';

• 'govflanders/components/_textarea';

• 'govflanders/components/_titles';

• 'govflanders/components/_typography';

• 'govflanders/components/_upload';

  • Mag nog even aan de kant gelaten worden.

Belangrijk: rekening houden met unit tests

Er zijn unit testen met Cypress die rekenen op het feit dat deze selectors bestaan.

Voorbeeld: https://github.com/kanselarij-vlaanderen/kaleidos-frontend/blob/development/cypress/support/commands/subcase-commands.js#L95-L99 deze test rekent op het bestaan van een bepaalde markup structuur.

[brenner-company]

Aanpassingen op de volgende branch: DES/enhancement/#705-vl-refactor

[Wolfr]

Ik zou persoonlijk precies niet bij die accordions beginnen. Dat is te belangrijk dat het goed blijft werken en te fragiel.

In de initiële ticket tekst staat advies ;)

[brenner-company]

Was je tip sporadisch of had je mijn commit van deze namiddag gezien?

De accordion was namelijk de eerste waarmee ik begonnen ben 😅

[Wolfr]

Het was op basis van de commit

…

Sent from my iPhone

On 23 Feb 2021, at 20:00, Karel Persoons ***@***.***> wrote:  Was je tip sporadisch of had je mijn commit van deze namiddag gezien? De accordion was namelijk de eerste waarmee ik begonnen ben 😅 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[brenner-company]

Opmerking mbt refactoring per component zal ik hieronder wat onderhouden (iets makkelijk dan nog extra tussen de checklist bovenaan de issue te plaatsen).

Typography

• vl-typography bevat ook styling voor verscheidene andere elementen (e.g. ol, table, hr, blockquote, links, etc.) maar komt nog niet voor binnen auk-content. Misschien dat die ook moeten vertaald worden naar auk-content?
• styles/custom-application/extra-fonts.scss: vl-typography met '&--definite' modifier vervangen en daarbinnen enkele rules verwijderd. Maar zijn deze nog steeds nodig (met verwijdering van alle serif font styling)?
• components/newsletter/newsletter-item/item-content/component.js: zelfde als hierboven.
• styles/fixes/_fix-pre.scss: vl-typography vervangen maar weet niet of die pre/code classes nog effectief nodig zijn of gebruikt worden.
• styles/govflanders/components/_titles.scss: code mbt styling van titels binnen vl-typography verwijderd.

Titles

• Classes vervangen veroorzaakt op sommige plaatsen bijkomende spacing rond de titel (meestal onderaan). Dit zal nog manueel aangepast moeten worden (waar nodig).
• Element tag (h2, h3, h4, etc.) komt niet overeen met de classes (auk-h2, auk-h3, etc.) in de meeste gevallen, maar dat was sowieso niet het geval voor de refactoring.
• Mbt testing: testen die gebruik maakten van vl-title classes zijn nu aangepast naar de corresponderende auk class, maar zouden op termijn eens door een dev onder handen genomen moeten worden.

Tabs

• Zowel tabs binnen main navigation, search page als settings page lopen qua styling (vooral mbt de parent elements) nog niet 100% gelijk met de prototypes. Dit zal dus achteraf ook even bekeken moeten worden (waar nodig).
• Aangepaste testen (binnen agenda-item) check ik ook nog even af met @ValenberghsSven. Zo weet ik ook van de eerste keer of mijn methodiek op dat vlak ok is.

Radio

• Binnen alle locaties waar vl-radio nog gebruikt werd was een refactor naar het meest recente radio component mogelijk. Enkel binnen /utils/radio-dropdown-combo-select waren de aanpassingen iets ingrijpender, maar @MikiDi zal deze nog even reviewen om te zien of alles ok zit.

Textarea

• De max-width: 100%; die binnen de legacy CSS aanwezig zit zal ook aanwezig zijn binnen .auk-textarea als er een nieuwe versie van de package gepublished wordt (vermoedelijk na alle vl-refactoring).

Pill

• De pill binnen de subcase.overview pagina moet hoogstwaarschijnlijk ook de aanpassingen binnen Dossier detail: success pill mag een gewone pill worden #709 reflecteren. Deze kan nadien aangepast worden (indien nodig) en dan kan de achterliggende functionaliteit verwijderd worden.

Pager

• vl-pager component kwam éénmaal voor (binnen case-search modal) en is, omwille van het feit dat de vlc variant verschillende is qua parameters, intern gerefactored nagelang de statische HTML code binnen auk-styleguide. Nadien wordt deze best uit het component gehaald of, zelfs beter, binnen een nieuw au-pagination component gestoken.

Modal

Niet de meest makkelijke om te refactoren.

• Om issues rond functionaliteit en testing te vermijden is het vl-modal component intern gerefactored qua classes en structuur. Voor de rest heb ik geprobeerd om alle bijkomende aanpassingen tot een minimum te beperken.
• Omwille van de opbouw van vl-modal met daarbinnen enkele 'oudere' Ember component zijn nu overbodige .ember-view wrappers aanwezig binnen de opbouw waardoor styling soms niet helemaal correct toegepast wordt. Hiervoor heb ik een tijdelijke override voorzien binnen au-kaleidos-css/_auk-modal.scss. Deze zou nog moeten verwijderd worden door af te checken met een dev hoe ik dit correct kan oplossen.
• Enkele modals gebruiken momenteel nog een .vlc-navbar om de footer te tonen. Dit veroorzaakt een transparante footer en bevat tevens ook verkeerde buttons (die vermoedelijk gecorrigeerd worden met de button refactor). Dit zal dus achteraf ook even bekeken moeten worden.

Loader

Niet de meest makkelijke om te refactoren. Veel aangepaste (niet conforme) structuren waarbinnen het component en elementen (met die class) gebruikt worden.

• De meeste loaders zijn na de aanpassingen vlug visueel getest geweest, maar enkelen kan ik niet terug vinden/triggeren.

Link

(geen opmerkingen)

Input field

• Enkel nog twee vl-input-field--inline modellen (input + search button) binnen agendaitem/create-agendaitem en utils/add-existing-piece zouden omgevormd moeten worden naar structuren/componenten, maar die moeten eerst nog even uitgeklaard worden.

Code binnen bron/bestanden zijn nog niet verwijderd

Icon

• components/agenda/agenda-overview/agenda-overview-item/template.hbs: legacy pill had een vlc-agenda-items__icons class dus kon niet direct overgezet worden naar een au-component.

Form structure & message

(geen opmerkingen)

Description Data

(geen opmerkingen)

Data table

• Geen alternatief voor volgende styling (nog te bespreken):
  • vl-data-table--no-scroll
  • vl-data-table--hover
  • vl-data-table__header-title (sortable)

Checkbox

• Er is nog geen disabled styling aanwezig.
• De toggle/switch versie van de checkbox is momenteel nog niet verwijderd, maar heeft een meer correcte naam gekregen (zie volgend item). Dit lijkt me interessanter om gewoon met de meer algemene refactor/redesign er uit te laten gaan.

Toggle

Overblijvende toggle styling (gekoppeld aan checkbox) is nu hernoemd of verplaatst met als nieuwe, meer correcte, naam: vl-toggle.

Action group

(geen opmerkingen)

Button

Zoals aangegeven, inderdaad de meest intensieve/substantiële om te refactoren.

• Om met de refactor visueel geen changes te veroorzaken heb ik een aantal tijdelijke overrides voorzien (zoals --muted-borderless, --warning-borderless, disabled states, etc.) binnen au-kaleidos-css/_auk-button.scss (sowieso nog eens af te checken of dit wel de correcte locatie is hiervoor). Na het herwerken van de pagina's (met nieuwe designs) zou er wel nog opnieuw afgechecked moeten worden of deze verwijderd mogen worden.

Badge

(geen opmerkingen)

[brenner-company]

Alle onderdelen die ik binnen de refactor kon opnemen zijn afgewerkt. Daarnaast heb ik nog op elk scherm visueel issues en grote verschillen gefixed/recht getrokken.

Morgen breng ik alles dan in orde voor een PR 👏

[Wolfr]

Als we nog leftover -vl tegenkomen, individueel eruit halen.

Deze issue gaan we closen als het gemerged is, en concentreren op volgende werken o.a. #732 en #802 .