Open Wolfr opened 3 years ago
Aanpassingen op de volgende branch: DES/enhancement/#705-vl-refactor
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 ;)
Was je tip sporadisch of had je mijn commit van deze namiddag gezien?
De accordion was namelijk de eerste waarmee ik begonnen ben 😅
Het was op basis van de commit
Sent from my iPhone
On 23 Feb 2021, at 20:00, Karel Persoons notifications@github.com 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.
Opmerking mbt refactoring per component zal ik hieronder wat onderhouden (iets makkelijk dan nog extra tussen de checklist bovenaan de issue te plaatsen).
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.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.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).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.Niet de meest makkelijke om te refactoren.
vl-modal
component intern gerefactored qua classes en structuur. Voor de rest heb ik geprobeerd om alle bijkomende aanpassingen tot een minimum te beperken.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..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.Niet de meest makkelijke om te refactoren. Veel aangepaste (niet conforme) structuren waarbinnen het component en elementen (met die class) gebruikt worden.
(geen opmerkingen)
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
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.(geen opmerkingen)
(geen opmerkingen)
vl-data-table--no-scroll
vl-data-table--hover
vl-data-table__header-title
(sortable)Overblijvende toggle styling (gekoppeld aan checkbox) is nu hernoemd of verplaatst met als nieuwe, meer correcte, naam: vl-toggle
.
(geen opmerkingen)
Zoals aangegeven, inderdaad de meest intensieve/substantiële om te refactoren.
--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.(geen opmerkingen)
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 👏
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 .
.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)
[x] 'govflanders/components/_accordion';
[x] 'govflanders/components/_action-group';
[x] 'govflanders/components/_alert';
[x] 'govflanders/components/_badge';
[x] 'govflanders/components/_button';
[x] 'govflanders/components/_checkbox';
[x] 'govflanders/components/_data-table';
[x] 'govflanders/components/_datepicker';
styles/govflanders/components/_datepicker.scss
) als het legacy component.[x] 'govflanders/components/_description-data';
[x] 'govflanders/components/_document';
Code komt nooit voor dus kan eruit gezwierd wordenvl-document__metadata
child. Wordt bekeken.[x] 'govflanders/components/_form-message';
[x] 'govflanders/components/_form-structure';
[x] 'govflanders/components/_icon';
[x] 'govflanders/components/_input-addon';
_input-group
)[x] 'govflanders/components/_input-field';
[x] 'govflanders/components/_input-group';
_input-addon
)[x] 'govflanders/components/_link';
[x] 'govflanders/components/_loader';
[x] 'govflanders/components/_modal';
[x] 'govflanders/components/_pager';
[x] 'govflanders/components/_pill';
[x] 'govflanders/components/_radio';
[x] 'govflanders/components/_tabs';
[x] 'govflanders/components/_textarea';
[x] 'govflanders/components/_titles';
[x] 'govflanders/components/_typography';
[ ] 'govflanders/components/_upload';
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.