Giter Club home page Giter Club logo

komponentkartan's Introduction

Komponentkartan

npm npm npm

Grafiska komponenter för ersättningssystem inom VGR, implementerade i Angular. Supportade webbläsare är IE, Chrome och Edge.

Komma igång

0. Förutsättningar

Se Demoprojektet för en exempeluppsättning.

1. Installera vgr-komponentkartan via npm

npm install vgr-komponentkartan

2. Uppsättning av vgr-komponentkartan

Importera komponentkartanmodule i användande module.

import { KomponentkartanModule } from 'vgr-komponentkartan';
@NgModule({
    imports: [
        KomponentkartanModule
    ],
    ...
})

Lägg till sökvägar till scss filen i angular.json filen, som är beroenden för komponentkartan

"styles": [
    "../node_modules/vgr-komponentkartan/assets/komponentkartan.scss",
    "styles.css"
],

Ange dependency för ngx-scrollbar i package.json. Om du använder npm v3 - v6 så måste detta göras manuellt. Mer förklaring:https://github.com/npm/npm/releases/tag/v3.0.0

Följande behöver installeras för att använda komponentkartan (version angular 12):

npm uninstall @fortawesome/angular-fontawesome && npm install @fortawesome/angular-fontawesom@latest
npm uninstall ngx-scrollbar && npm install [email protected]
npm uninstall @fortawesome/fontawesome-svg-core && npm install @fortawesome/fontawesome-svg-core@latest
npm uninstall @fortawesome/free-regular-svg-icons && npm install @fortawesome/free-regular-svg-icons@latest
npm uninstall @fortawesome/free-solid-svg-icons && npm install @fortawesome/free-solid-svg-icons@latest
npm uninstall @angular/cdk && npm install @angular/cdk@v12-lts

Börja använda komponenterna t.ex.

<vgr-header></vgr-header>

Kod

Skriven i html, typescript och Sass.

Namngivning av komponenter och dess egenskaper

...

Tester

Samtliga komponenter är och ska vara täckta av tester via Jasmine.

Testerna är uppdelade i två typer, tester med Angular och tester utan Angular. Tester med Angular benämns komponent.angular.spec.ts. Tester utan Angular namnges endast med komponent.spec.ts

Byggt med

Versioner

Vi använder SemVer för versionering. Ändringar mellan versioner noteras i vår Changelog, som följer riktlinjer från keepachangelog.com. Changelog för stabil version (se nedan) innehåller alltid ändringar utifrån föregående stabila version.

Senaste stabila version

Efter godkännande av demo från produktägare skapas en ny stabil version.

Den senaste stabila versionen hämtas automatiskt via.

npm install vgr-komponentkartan

Samtliga versioner som släppts kan ses på NPM

Senaste demoversion

Under utveckling av nya features publiceras en demoversion. Den används internt av teamet och används vid demo för produktägare. Den namnges som releasekandidat med kommande-version-rc.nummer. T.ex

  • 1.2.0-rc1
  • 1.2.0-rc2
  • osv..

En demoversion publiceras av teamet med hjälp av

npm publish --tag demo

För att hämta ner den senaste demoversionen OBS! Ej för produktion

npm install vgr-komponentkartan@demo

Författare

VGR IT

Licens

TODO

komponentkartan's People

Contributors

alex-eliasson avatar aljlo2 avatar alphaplusplus avatar aronssonfredrik avatar athid avatar brustablett avatar crestthefury avatar feliciaringblom avatar frosthage avatar herrklaseen avatar jbraaf avatar kebarvid avatar kinbode avatar marnor105 avatar mijokoletic avatar mizan83 avatar nihreborn avatar olgak2 avatar perakerberg avatar perut1 avatar shahidhazoor avatar sheriffenjohn avatar sigmajohn avatar sofiahejdenberg avatar synne1 avatar zoewall11 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

komponentkartan's Issues

Button borde alltid ta samma utrymme, idag "hoppar" det pga knappen blir mindre i nedtryckt läge

Beskrivning

Om button trycks ned blir den mindre vilket kan innebära att layouten "hoppar".
Button borde ha samma höjd hela tiden.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.2.0
  • Angular version: 4.2.4
  • Browsers: Chrome, Edge

Steg för att påvisa problemet

Lägg ut knappen, klicka på den

Förväntat beteende

Knappen har samma storlek även när man klickar på den.

Faktiskt beteende

Knappen blir mindre vilket leder till att layouten "hoppar"

Övrig information, kodexempel och motivering till förändring

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Sekundärfärg i kant i menyn försvinner

Beskrivning

Sekundärfärgen försvinner längst ner i menyn. Detta gäller båda storlekarna

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc21
  • Angular version: version
  • Browsers: Mac Chrome

Steg för att påvisa problemet

http://vgwb0399.vgregion.se:4500/start -> Klicka på
"komponenter" -> Scrolla längst ner -> Stäng komponenter igen

Förväntat beteende

Menymarkeringens sekundärfärg ska ligga kvar hela tiden

Faktiskt beteende

Menymarkeringens sekundärfärg försvinner när man stänger "komponenter"

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

liten
stor

Lägg till error och successfärgerna under färgkarta i demo-appen

Beskrivning

Visa success och error färger i färgkartan

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: version
  • Angular version: version
  • Browsers: Browser1, Browser2

Steg för att påvisa problemet

Beskriv hur man kan återskapa problemet.

Förväntat beteende

Success och errorfärger visas i färgkartan

Faktiskt beteende

Success och errorfärger visas inte i färgkartan

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Kalender klipps av i komponent Monthpicker

Beskrivning

Monthpicker klipps av när man har fällt ihop alla övriga kolumner.

Typ av ärende (kryssa i en med "x")

  • [x ] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: version
  • Angular version: version
  • Browsers: Chrome

Steg för att påvisa problemet

*Gå till BMM sidan. Lägg till en ny enhet. Stäng alla fält förutom Enhetsinformationsfältet.
Öppna kalender. *

Förväntat beteende

Hela kalendern visas

Faktiskt beteende

Kalendern visar bara översta raden

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller ö
enhetssidankalenderklippsav
vrig information

Kunna använda lista utan header och kolumner

Beskrivning

Vi har en lista där vi inte önskar ha kolumner utan enbart en lista. Men verkar som man måste ange vgr-list-header, även om man inte vill använda den

Typ av ärende (kryssa i en med "x")

  • [ x] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.2.1-rc18
  • Angular version: 4.4.6
  • Browsers: chrome

Steg för att påvisa problemet

Om man inte anger vgr-list-header så kommer man få fel i consolen

Förväntat beteende

Inga fel och det fungerar utan att ange vgr-list-header för listan

Monthpicker kastar fel om man sätter min och maxdatum före innevarande år

Beskrivning

Om man ställen [minDate] och [maxDate] med värden som båda ligger före innevarande år så kastas ett fel.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.2.0
  • Angular version: 4.2.4
  • Browsers: Chrome, Edge

Steg för att påvisa problemet

Sätt minDate och maxDate före dagens datum

Förväntat beteende

Monthpicker ställs på innevarande år, med samtliga datum "utgråade"

Faktiskt beteende

Ett fel kastas, monthpicker blir tom

Övrig information, kodexempel och motivering till förändring

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Ändring i en dropdown påverkar en annan dropdown (Komponent dropdown)

Beskrivning

Ändrar värdet i tex dropdown 8 items till "jättelångt namn 1" (jättelångt namn 3 är förvalt) och öppnar disabled dropdown och den visar samma värde "jättelångt namn 1" som den första menyn fast den visade ett annat värde innan "jättelångt namn 3".

Typ av ärende (kryssa i en med "x")

  • [x ] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: **0.3.1-rc8 **
  • Angular version: version
  • Browsers: IE

Steg för att påvisa problemet

*Ändrar värdet i tex dropdown "8 items(förvalt)" till jättelångt namn 1 (jättelångt namn 3 är förvalt). Öppnar "disabled" dropdown och jättelångt namn 1 är markerad medans tootip visar "jättelångt namn 3" *

Förväntat beteende

Borde inte påverkan en annan meny

Faktiskt beteende

En ändring i en meny påverkar en annan meny

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Kalenderikon syns ett kort ögonblick första gången du öppnar ett kort i Edge och IE

Beskrivning

Kalenderikon syns ett kort ögonblick första gången du öppnar ett kort i Edge och IE

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc4
  • Angular version: version
  • Browsers: Edge, IE11 (ser bra ut i Chrome)

Steg för att påvisa problemet

Gå in på BMM-sidan under menyalternativet enhet och öppna sedan en enhet. Då blinkar kalender ikonerna en gång innan de försvinner.

Förväntat beteende

Kalenderikonerna skall inte synas när man öppnar ett kort

Faktiskt beteende

Se steg för att påvisa problemet

Övrig information, kodexempel och motivering till förändring

Skärmdumpar mm

Sista raden i en vgr-list har extra utrymme under sig

Beskrivning

När man lägger en lista på en sida så blir det ett extra utrymme under sista raden. Se bifogad bild.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.1-rc14
  • Angular version: 4.3.1
  • Browsers: Chrome, IE, Edge

Steg för att påvisa problemet

Lägg ut en vgr-list på en sida

Förväntat beteende

Inget extra utrymme under sista elementet

Faktiskt beteende

Extra utrymme under sista elementet

Övrig information, kodexempel och motivering till förändring

Förslag till fix: I _components.list.scss, under .list__items, lägg till: .list-item:last-child() { &.list-item--expanded { margin-bottom: 0; } }

Skärmdumpar mm

image

Infoga skärmdumpar eller övrig information

Komponenter klipps av i Card

Beskrivning

I exempel i komponentkartan så klipps kalender och dropdown i sektionen.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 2.0.1-rc9
  • Angular version: ** 5.1.2**
  • Browsers: Browser1, Browser2

Steg för att påvisa problemet

Komponentkartan -> Komponenter -> Card ->Exempel två kolumner -> Öppna kort -> Klicka på kalender och/eller dropdown

Förväntat beteende

Kalender och dropdown öppnas över kortet.

Faktiskt beteende

Kalender och dropdown klipps av av sektionen nedanför.

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skär
skarmavbild 2018-01-16 kl 10 00 28
mdumpar eller övrig information

Fel storlek valideringsrutan för dropdown/dropdownmulti, och calendar

Beskrivning

Röda valideringsrutan har fel storlek

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc21
  • Angular version: 4.4.4
  • Browsers: Chrome, IE, EDGE

Steg för att påvisa problemet

Triggra så att valideringen blir ej valid på nämna komponenter.

Förväntat beteende

Felmeddelande är inte enligt detaljdesign/skiss.

Faktiskt beteende

Felmeddelande enligt detaljdesign/skiss.

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

_error_fel_1

Titlle-value-layout, dropdown tar för stort utrymme i "slim"

Beskrivning

Om man lägger en dropdown i en title-value-layout och anger slim, så tar den för mycket utrymme i höjd.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc5
  • Angular version: 4.3.1
  • Browsers: Chrome

Steg för att påvisa problemet

Lägg en dropdown i en title-value-layout, sätt slim=true.
Lägg en vgr-input ovanför och under, sätt slim true.

Förväntat beteende

Avstånd mellan dropdown och komponent under skall vara samma som mellan dropdown och komponent över.

Faktiskt beteende

Större avstånd till komponent under

Skärmdumpar mm

slim for mycket avstand dropdown

vgr-list renderas felaktigt när man håller musknappen nere utan att släppa.

Beskrivning

vgr-list renderas felaktigt när man håller musknappen nere utan att släppa.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc4
  • Angular version: 4.4.4
  • Browsers: chrome

Steg för att påvisa problemet

  • Visa först en tom vgr-lista
  • Klicka på en vgr-button (där clickeventet populerar lista) och håller musknappen i några sekunder och sen släpper du den.

Förväntat beteende

headerkolumnerna och listkolumnerna ska ha samma storlek

Faktiskt beteende

headerkolumnerna och listkolumnerna har inte samma storlek

Övrig information, kodexempel och motivering till förändring

finns återskapad exempel på buggen i komponentkartan "demo/app/lists/lists"

Skärmdumpar mm

lista_halla_nere_musklicket

Hover som täcker hela bredden i kort

Beskrivning

Vid hover i lista i lista ska den strecka sig över hela bredden av listan. Idag lägger den sig med marginal till kanterna som går med brytgränsen.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: version
  • Angular version: version
  • Browsers: Browser1, Browser2

Steg för att påvisa problemet

Beskriv hur man kan återskapa problemet.

Förväntat beteende

Beskriv vad du förväntar dig skall hända

Faktiskt beteende

Beskriv vad som händer

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Rubrik på menyn krymper i höjd när man minskar fönstret

Beskrivning

Rubriken på menyn skall ha samma höjd hela tiden. Nu minskar den om man minskar fönstrets storlek.

Typ av ärende

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.2.0-rc9
  • Angular version: 4.2.4
  • Browser: Chrome, Edge

Steg för att påvisa problemet

Öppna en sida med menyn, minska fönstrets storlek i höjd

Förväntat beteende

Titeln behåller samma höjd

Faktiskt beteende

Titeln krymper dynamiskt

Övrig information, kodexempel och motivering till förändring

--

Skärmdumpar mm

Full storlek
image

Minskad storlek
image

Komponent datepicker går inte att stänga när man klickar på kalender utan att välja dag

Beskrivning

När man öppnar en kalender så går det inte att stänga när man klickar på kalender utan att välja dag

Typ av ärende (kryssa i en med "x")

  • Bugg
  • [x ] Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc50
  • Angular version: version
  • Browsers: Chrome, IE11

Steg för att påvisa problemet

1.Gå till komponent Datepicker
2. Öppna en kalender
3. Klicka på kalender för att stänga utan att välja datum

Förväntat beteende

Kalender stänger när man klickar på kalender

Faktiskt beteende

Kalender är fortfarande öppen

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Valideringsrutan runt en dropdown växer för stor

Beskrivning

Om man har en dropdown med valideringsfel så växer valideringsrutan sig för stor om layouten tillåter det. Exempel finns på demo-appens valideringssida.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.1-rc14
  • Angular version: 4.3.1
  • Browsers: Chrome, IE11, Edge

Steg för att påvisa problemet

Öppna demo-appen, navigera till validering, klicka i och ur dropdown.

Förväntat beteende

Valideringsfel visas som en ruta med 10px padding runt dropdown

Faktiskt beteende

Valideringsruta tar upp allt tillgängligt utrymme

Övrig information, kodexempel och motivering till förändring

Fix: Ta bort display:block.validation

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Inte tvinga konsumenter att importera Routing (Menu komponenten)

Man är i nulägget tvingad att använda angular-router, samt att importera RouterModule för att Menu komponenten ska fungera. Efterfrågar en bättre hantering av Menu komponenten med avseende på routing så menu komponenten fortfarande fungerar även om man inte använder angular-router.

Komponent Reactive Forms: Kalender "Välj dag" visar inget Obligatoriskt meddelande när man klickar ur utan att välja dag i Chrome

Beskrivning

Kalender "Välj dag" visar inget Obligatoriskt meddelande när man klickar ur utan att välja i Chrome

Typ av ärende (kryssa i en med "x")

  • [x ] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc64
  • Angular version: version
  • Browsers: Chrome

Steg för att påvisa problemet

*1. Öppna med Chrome
2. Klicka på "Välj dag"
3. Klicka ur utan att välja dag. *

Förväntat beteende

Borde visa felmeddelande "Obligatoriskt".*

Faktiskt beteende

Visar inget felmeddelande "Obligatoriskt"

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

[Edge] När man trycker "snabbt" i kalendern så stängs den efter 3:dje klicket

Beskrivning

När man är i datepicker och går "snabbt" mellan månaderna så stängs kalendern

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: v0.3.3-rc67
  • Angular version: version
  • Browsers: Endast i Edge

Steg för att påvisa problemet

Tryck snabbt på Nästa eller Föregående pil i en datepicker

Förväntat beteende

Den skall fortfarande vara öppen

Faktiskt beteende

Den stänger sig vid 3:dje snabba klicket

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Komponentkarta-demo, land-dropdown skall vara enabled

Beskrivning

http://vgwb0399.vgregion.se:4500-> Validering -> Dropdown "Land" är inaktiv. Det funkar dåligt med validering, då valideringen kräver ifylld dropdown.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.1-rc14
  • Angular version: ?
  • Browsers: Chrome, Safari

Steg för att påvisa problemet

Gå in på http://vgwb0399.vgregion.se:4500 -> validering -> se inaktiv dropdown.

Förväntat beteende

Dropdown ska vara öppen och redigerbar

Faktiskt beteende

Dropdown är inaktiv

Övrig information, kodexempel och motivering till förändring

Skärmdumpar mm

skarmavbild 2017-11-22 kl 13 29 01

Avverka användning av Providers i komponenter

Providers bör ligga i modulen inte i komponenterna. Ligger providers i en komponent blir dessa lokala (Dvs en ny per instans av komponenten). I dom flesta fallen är inte detta önskvärt.

Deleted-event på VgrListItem

Beskrivning

Lägg till deleted-event på VgrListItem som triggas när animationen för borttagning är klar.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Går inte bygga Angular-projekt med AOT

Beskrivning

Kompileringsfel när man försöker bygga ett Angular-projekt som använder sig av komponentkartan i AOT-läge.

Typ av ärende (kryssa i en med "x")

  • [ x] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 2.0.1-rc5
  • Angular version: 5.0.0
  • Browsers: N/A

Steg för att påvisa problemet

Kör kommandot "ng build -prod"

Förväntat beteende

Kompilerar utan fel

Faktiskt beteende

ERROR in : Unexpected value 'undefined' exported by the module 'KomponentkartanModule in C:/Repos/vgr/APP/node_modules/vgr-komponentkartan/vgr-komponentkartan.d.ts'

Övrig information, kodexempel och motivering till förändring

Kunna kompilera Angular-projekt med AOT

VgrList kraschar i test med NgFor

Beskrivning

Test i Karma/Jasmine av komponenter med VgrList kraschar om NgFor används för att loopa ListItem. Detta fungerade i 0.3.3-rc22 men fungerar inte längre i 0.3.3-rc36. Det är oklart när det slutade fungera.

Typ av ärende (kryssa i en med "x")

  • [ x] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc36
  • Angular version: 4.4.6
  • Browsers: Karma/Jasmine

Steg för att påvisa problemet

Se kodexempel.

Förväntat beteende

Det kraschar inte i test.

Faktiskt beteende

Det kraschar i test.

Övrig information, kodexempel och motivering till förändring

Explicit deklaration av ListItem fungerar:

<vgr-list>
  <vgr-list-header></vgr-list-header>
  <vgr-list-item></vgr-list-item>
</vgr-list>

Tom loop över ListItem fungerar:

<vgr-list>
  <vgr-list-header></vgr-list-header>
  <vgr-list-item *ngFor="let x of []"></vgr-list-item>
</vgr-list>

Icke tom loop över ListItem fungerar inte:

<vgr-list>
  <vgr-list-header></vgr-list-header>
  <vgr-list-item *ngFor="let x of [{}]"></vgr-list-item>
</vgr-list>

Byt ut div-taggar med klasser i komponenter mot riktiga komponenter

Beskrivning

I flera komponenter används ng-content för att lägga ut dynamiskt innehåll. I de fall man har flera ng-content så behöver man selektera ut innehållet i varje ng-content med en css-klass annan selektor.
När vi använder css-klasser blir det förvirrande för användaren som då måste veta onödigt mycket om vår underliggande struktur. Därför bör vi byta ut selektorer på css-klass mot riktiga taggar / komponenter.
Exempel: .list-item__header -> <vgr-list-item-header>, .list-item__content -> <vgr-list-item-content>

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 3.3
  • Angular version: 4.3.1
  • Browsers: Alla

Övrig information, kodexempel och motivering till förändring

Gör det enklare att förstå komponentkartan och gör den mer konsekvent

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Scrollbar på fel sida i Dropdown & Dropdown multi

Beskrivning

Scrollbar visas på fel sida av dropdown enkel & multi och visas även när det inte går att scrolla.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 2.0.1-rc7
  • Angular version: 5.1.2
  • Browsers: IE(demodator), Chrome(Mac

Steg för att påvisa problemet

Gå in på komponentkartan -> Komponenter -> Dropdown & Dropdown Multiselect -> Välj exempel och öppna dropdown

Förväntat beteende

Scrollbaren visas på höger sida och endast när den behövs.

Faktiskt beteende

Scrollbaren visas på vänster sida och när den inte behövs.

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

*Infoga skär
dropdownmulti
dropdownenkel

mdumpar eller övrig information*

Skapa riktig Library bundle

Beskrivning

Skapa en bundle för komponentkartan-biblioteket som publiceras till NPM

Typ av ärende (kryssa i en med "x")

  • Bugg
  • [X ] Förbättringsförslag

Din miljö

Steg för att påvisa problemet

Förväntat beteende

Mindre slimmat bundle +typings och CSS

Faktiskt beteende

Just nu så publiceras all källkod till NPM

Övrig information, kodexempel och motivering till förändring

Få ner storleken på komponentkartan och göra den mer library-aktig

Skärmdumpar mm

Se https://www.npmjs.com/package/ng-packagr för skapa en library-bundle

Menyval under åker långsammare än menyval över öppnas

Beskrivning

I komponentkartan(demoappen) åker menyval under komponenter långsammare ner än vad komponenter öppnas.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc21
  • Angular version: version
  • Browsers: Mac Chrome

Steg för att påvisa problemet

http://vgwb0399.vgregion.se:4500/start ->klicka på "komponenter" -> Se att kodexempel tar längre tid på sig att åka ner än undermenyvalen i komponenter.

Förväntat beteende

Kodexempel följer med öppnandet i komponenter

Faktiskt beteende

Kodexempel är långsammare än öppnandet i komponenter

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Pilen på list-item visas inte i IE

Beskrivning

I IE11 visas det ingen pil på list-item.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.1-rc14
  • Angular version: 4.3.1
  • Browsers: IE11

Steg för att påvisa problemet

Visa en lista

Förväntat beteende

Varje listrad skall ha en pil som visar om den är expanderad eller inte

Faktiskt beteende

Ingen pil visas i IE11

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Möjlighet att visa tema och storlek i header

Beskrivning

Möjlighet att visa tema och storlek i header

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: version
  • Angular version: version
  • Browsers: Browser1, Browser2

Steg för att påvisa problemet

Beskriv hur man kan återskapa problemet.

Förväntat beteende

I demo-appen möjlighet att visa temat i headern.

Faktiskt beteende

Beskriv vad som händer

Övrig information, kodexempel och motivering till förändring

Man kan med CSS visa både tema och storlek i header, se https://pastebin.com/fBySnwQZ

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Det går att tabba utanför komponent modal dialog

Beskrivning

*Öppna "Modal dialog" och tabba. *

Typ av ärende (kryssa i en med "x")

  • [ x] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: **0.3.1-rc8 **
  • Angular version: version
  • Browsers: Chrome, IE

Steg för att påvisa problemet

Öppna "Modal dialog" och tabba.

Förväntat beteende

Man kan enbart tabba inne i komponenten och inte utanför

Faktiskt beteende

Det går även att tabba utanför komponenten.

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Calibri-font finns inte default på mac

Beskrivning

Calibri-fontent finns inte på mac per default

Typ av ärende (kryssa i en med "x")

  • [X ] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.2.1-rc4
  • Angular version: 4
  • Browsers: Safari*

Steg för att påvisa problemet

Surfa in med safari på en macintosh

Förväntat beteende

se bra ut

Faktiskt beteende

ser fult ut

Övrig information, kodexempel och motivering till förändring

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Komponent checkbox, radiogroup och lockbutton blir inte fokuserad i IE och Edge

Beskrivning

Checkboxen, radiogroup och lockbutton blir inte fokuserad när man klickar på den

Typ av ärende (kryssa i en med "x")

  • [x ] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: **0.3.3-rc16 **
  • Angular version: version
  • Browsers: Edge, IE, chrome

Steg för att påvisa problemet

*Öppna edge eller IE browser. Markera en checkbox. *

Förväntat beteende

Checkbox, radiogroup och lockbutton borde bli fokuserad

Faktiskt beteende

  • De inaktiva blir inte fokuserade för checkbox, radiogroup och lockbutton.
    De aktiva visar ingen tydlig fokusering för komponent checkbox.

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Monthpicker visar bara månad

Beskrivning

Monthpicker visar bara månad och inte månad och år

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: **0.3.1-rc8 **
  • Angular version: version
  • Browsers: IE

Steg för att påvisa problemet

Gå till komponent "Monthpicker. Visar fel datum enligt bifogad bild. Gäller även komponenten som är i disable läge.
monthpickervisarintear
".

Förväntat beteende

Borde visa månad och år

Faktiskt beteende

Visar endast månad

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Komponentkartan-demo, hovring över knapp påverkar annat innehåll

Beskrivning

I IE på Button sidan under Exempel så hoppar Sekundärknapparna ner lite när man hovrar över en primärknapp. Sker endast första gången. Stänger du Exempel och öppnar igen så hoppar den på nytt vid hovring.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc32
  • Angular version: XX
  • Browsers: IE (edgemode samt 11mode

Steg för att påvisa problemet

  1. Gå in på Button
  2. Öppna exempel
  3. Hovra över OK knappen, då hoppar allt ner lite samt så blir exempelrutan lite större

Förväntat beteende

Rutan skall inte ändra storlek för att man hovrar över en knapp.

Faktiskt beteende

Rutan ändrar storlek för att man hovrar över en knapp, samt så hoppar knapparna under ner lite grann

Övrig information, kodexempel och motivering till förändring

Skärmdumpar mm

iebuttonbug

Går inte att tabba eller navigera med pilartangenter (Komponent dropdown)

Beskrivning

Går inte att tabba i dropdown eller navigera med piltangenter

Typ av ärende (kryssa i en med "x")

  • [x ] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: **0.3.1-rc8 **
  • Angular version: version
  • Browsers: IE

Steg för att påvisa problemet

Gå till komponent "Dropdown". Tabba inne i dropdown menyer eller navigera med pilar fungerar inte bra

Förväntat beteende

Borde gå att tabba och navigera med pilarna

Faktiskt beteende

Går inte att tabba eller navigera med pilar

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Collapible i Collapsible (card-section)

Vi vill gruppera items i lister, konstigt beteende när vi lägger card-section i card-section

*I Ksv får vi in Claims som har Visits. Dessa Visits kan vara med eller utan Warnings. Detta är högsta nivån i Claims. *

Typ av ärende (kryssa i en med "x")

  • [x ] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.3-rc22*
  • Angular version: ^4.4.1
  • Browsers: Chrome, Firefox

Steg för att påvisa problemet

Lägger vgr-card-section i vgr-card-section. Då får vi problem med överlappande linjer (bottom/top) och expandera/kollaps pilen går åt fel håll

Förväntat beteende

Enkla linjer mellan varje card-section och att expand/kollaps fungerar oberoende av varandra

Faktiskt beteende

Lägger vgr-card-section i vgr-card-section. Då får vi problem med överlappande linjer (bottom/top) och expandera/kollaps pilen går åt fel håll

Övrig information, kodexempel och motivering till förändring

expanded
expanded
collpased

<vgr-card> 
<vgr-card-column>
    <!-- Visits -->
    <vgr-card-section [title]="'Besök med varningar'">
          <vgr-card-section *ngFor="let visit of visitsWithWarnings" [expanded]="false" 
                                     [title]="visit.patientIdentity" [subtitle]="visit.healthcareVisitDate">
         ........................................................................... 
         </vgr-card-section>
    <vgr-card-section [title]="'Övriga besök'">
      <vgr-card-section>
      </vgr-card-section>
    </vgr-card-section>
  </vgr-card-column>
</vgr-card>

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Det går att editera i en stängd dropdown (Komponent dropdown multiselect)

Beskrivning

*Det går att editera i en stängd dropdown multiselect *

Typ av ärende (kryssa i en med "x")

  • [ x] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: ** 0.3.1-rc8 **
  • Angular version: version
  • Browsers: IE

Steg för att påvisa problemet

Gå till komponent Dropdown multiselect. Lås upp och välj dropdown där det står "disabled" och välj alla. Fäll inte tillbaka dropdown. Spara med hänglås. Editera i den låsta dropdownen

Förväntat beteende

Efter stängning med hänglås ska det inte gå att editera i dropdown

Faktiskt beteende

Det går att editera

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

[IE] Pilen för kontextmenyn ligger för långt ner

Beskrivning

Pilen för kontextmenyn ligger för långt ner i IE

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: v0.3.3-rc67
  • Angular version: version
  • Browsers: Endast IE

Steg för att påvisa problemet

Se utv-appen

Förväntat beteende

Pilen skall vara linjerad med texten

Faktiskt beteende

Pilen ligger under texten¨

Övrig information, kodexempel och motivering till förändring

I bilden så visas följande browsers

  1. IE
  2. Edge
  3. Chrome

Skärmdumpar mm

image

Dimmer stannar kvar när man filtrerar i dropdown

Beskrivning

Dimmer stannar kvar i dropdown och i multi även om man filtrerar ner listan.
Både IE och Chrome.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.1-rc14
  • Angular version: 4.3.1
  • Browsers: IE, Chrome

Steg för att påvisa problemet

Öppna en drop down / multi med 25 items. Filtrera så att det blir färre items.

Förväntat beteende

Listan blir kortare

Faktiskt beteende

Listan blir kortare men dimmern ligger kvar, långt nedanför listan

Skärmdumpar mm

[Exempel] (https://media.giphy.com/media/l2QE9rbL2AP1ppqda/giphy.gif)

En vgr-dropdown i en vgr-cardsection visas "halv" vid expandering i IE och Edge

Beskrivning

Om man lägger en dropdown inuti en kortsektion döljs "pilen" när man expanderar kortsektionen. Gäller endast i IE 11 och Edge, i stora storleken.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.1-rc14
  • Angular version: 4.3.1
  • Browsers: IE11, Edge

Steg för att påvisa problemet

*Lägg en vgr-dropdown i en card-section. Visa UI i Stora storleken. Stäng sektionen, expandera den. *

Förväntat beteende

Dropdown visas korrekt

Faktiskt beteende

Högersidan på dropdown försvinner

Övrig information, kodexempel och motivering till förändring

Det här verkar vara relaterat till rendering av animerat innehåll i IE och Edge. Om man minskar/ökar storlek på fönstret och får en uppdatering så rättas felet till. Om man öppnar developer tools, och försöker markera elementet så rättas det till

Skärmdumpar mm

Infoga skärmdumpar eller övrig information
Exempel

Partiell route-matching i Menu

Beskrivning

Menyalternativ blir markerade även om de endast partiellt matchar route.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.1-rc14
  • Angular version: 4.4.6
  • Browsers: Chrome

Steg för att påvisa problemet

Sätt URL på ett menyalternativ till en partiell route av ett annat menyalternativs URL.

Förväntat beteende

Endast det menyval som helt matchar routen markeras och endast gruppen det tillhör expanderas.

Faktiskt beteende

Samtliga partiellt matchande menyval markeras och expanderas.

Övrig information, kodexempel och motivering till förändring

Exempel på meny där problemet uppstår.

this.menus = [{
      title: 'Min meny',
      groups: [{
        menuItems: [
          { title: 'Hem', url: '/' },
          { title: 'Val 1', url: '/a' },
          { title: 'Val 2', url: '/a/b' },
          { title: 'Grupp', menuItems: [
            { title: 'Val 3', url: '/a/b/c' }
          ] }
        ]
      }]
    } as IMenu];

Skärmdumpar mm

menu

Komponent back to top knapp försvinner vid zoom

Beskrivning

Back to top knapp försvinner när man zoomar upp

Typ av ärende (kryssa i en med "x")

  • [x ] Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: **0.3.3-rc9 **
  • Angular version: version
  • Browsers: Chrome, IE

Steg för att påvisa problemet

1.Gå till "Back to top" och scrolla ner så att knappen visas.
2. Zomma in 150%

Förväntat beteende

Knappen borde visas

Faktiskt beteende

Knappen försvinner

Övrig information, kodexempel och motivering till förändring

Text här

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Card-section som initieras med expanded = false blir öppen

Beskrivning

Om man skapar en vgr-card-section med [expanded]="false" så är den öppen vid initiering. Om jag istället inte anger expanded alls så förblir den stängd.

Typ av ärende (kryssa i en med "x")

  • Bugg
  • Förbättringsförslag

Din miljö

  • Version av vgr-komponentkartan: 0.3.1-rc12
  • Angular version: 4.3.1
  • Browsers: Chrome

Steg för att påvisa problemet

Lägg ut en vgr-card-section i ett vgr-card. Sätt [expanded]="false".

Förväntat beteende

Sektionen är stängd när kortet öppnas

Faktiskt beteende

Sektionen är öppen

Övrig information, kodexempel och motivering till förändring

Beror på att slideToggle används och att ingen hänsyn tas till vad expanded sätts till i settern för expanded

Skärmdumpar mm

Infoga skärmdumpar eller övrig information

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.