Merge branch 'DES/enhancement/705-vl-refactor/input-field' into DES/e…

…nhancement/#705-vl-refactor
kanselarij-vlaanderen · Mar 8, 2021 · a76bfac · a76bfac
2 parents 97ba61c + 0ce4d2c
commit a76bfac
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 38 deletions.
diff --git a/app/pods/agendas/overview/template.hbs b/app/pods/agendas/overview/template.hbs
@@ -41,7 +41,7 @@
                     type="text"
                     id=id
                     data-test-agendas-filter-input=true
-                    class="vl-input-field"
+                    class="auk-input"
                     value=dateFilter
                     placeholder="bv. 01/2020"
                   }}

diff --git a/app/pods/components/agenda/agendaitem-search/template.hbs b/app/pods/components/agenda/agendaitem-search/template.hbs
@@ -3,25 +3,17 @@
     <div class="vlc-toolbar vlc-toolbar--auto">
       <div class="vlc-toolbar__justified">
         <div class="vlc-toolbar__item vlc-u-box-model-maximize-width">
-          <div class="vl-input-field--inline auk-u-flex auk-u-flex--vertical-center auk-u-flex--justify-between">
-            <WebComponents::AuInput @icon="search"
-                   class="auk-input--block"
-                   type="text"
-                   data-test-trigger-search-input
-                   id="defaultInput"
-                   @placeholder={{t "search-placeholder"}}
-                   @value={{this.searchText}}
-                   {{on "input" this.debouncedSearch}}
-                   @enter={{this.search}}
+          <div class="auk-form-group">
+            <WebComponents::AuInput
+              @icon="search"
+              type="text"
+              @block="true"
+              @placeholder={{t "search-placeholder"}}
+              @value={{this.searchText}}
+              {{on "input" this.debouncedSearch}}
+              @enter={{this.search}}
+              data-test-trigger-search-input
             />
-            <button
-              type="button"
-              data-test-trigger-search-input-trigger
-              class="vl-input-field__submit vl-button"
-              {{on "click" this.search}}
-            >
-              <i class="ki-search"></i>
-            </button>
           </div>
         </div>
         {{#if this.debouncedSearchTask.isRunning}}

diff --git a/app/pods/components/cases/new-subcase/template.hbs b/app/pods/components/cases/new-subcase/template.hbs
@@ -67,7 +67,7 @@
           {{input
             type="text"
             id="subcaseNameId"
-            class="vl-input-field vl-input-field--block"
+            class="auk-input auk-input--block"
             value=subcaseName
           }}
           <button class="vl-button vl-button--secondary vl-button--icon"

diff --git a/app/pods/components/documents/document-card/template.hbs b/app/pods/components/documents/document-card/template.hbs
@@ -95,7 +95,7 @@
             {{#if this.isEditingPiece}}
               <div class="auk-u-flex auk-u-flex--vertical-center">
                 <Input
-                  class="vl-input-field vl-input-field--block"
+                  class="auk-input auk-input--block"
                   @type="text"
                   @value={{this.pieceNameBuffer}}
                 />

diff --git a/app/pods/components/utils/case-search/template.hbs b/app/pods/components/utils/case-search/template.hbs
@@ -4,7 +4,7 @@
       <Input
         @value={{searchText}}
         @placeholder={{t "search-placeholder"}}
-        @class="vl-input-field vl-input-field__input vlc-u-box-model-maximize-width"
+        @class="auk-input vlc-u-box-model-maximize-width"
         @input={{action "updateSearchText"}} />
     </div>
 

diff --git a/app/pods/components/web-components/vl-datepicker/template.hbs b/app/pods/components/web-components/vl-datepicker/template.hbs
@@ -1,7 +1,7 @@
 {{#if (not await dateObjectsToEnable)}}
   {{ember-flatpickr
     data-test-vl-datepicker-input
-    classNames="vl-input-field vl-input-field--block"
+    classNames="auk-input auk-input--block"
     locale="nl"
     enableTime=enableTime
     time_24hr=true
@@ -24,7 +24,7 @@
 {{else}}
   {{ember-flatpickr
     data-test-vl-datepicker-input
-    classNames="vl-input-field vl-input-field--block"
+    classNames="auk-input auk-input--block"
     locale="nl"
     enable=datesToEnable
     enableTime=enableTime

diff --git a/app/pods/components/web-components/vl-form-input/template.hbs b/app/pods/components/web-components/vl-form-input/template.hbs
@@ -3,7 +3,7 @@
     data-test-vl-input
     type=type
     id=id
-    class="vl-input-field vl-input-field--block"
+    class="auk-input auk-input--block"
     value=value
   }}
 </div>
diff --git a/app/pods/search/template.hbs b/app/pods/search/template.hbs
@@ -43,7 +43,7 @@
         </div>
         <Input
           data-test-searchfield
-          class="vl-input-field vl-input-field--block"
+          class="auk-input auk-input--block"
           type="text"
           id="dossierId"
           @placeholder={{t "search-placeholder"}}
@@ -90,7 +90,7 @@
         </label>
         <Input
           type="text"
-          class="vl-input-field vl-input-field--block"
+          class="auk-input auk-input--block"
           id="ministerName"
           @value={{this.mandateesBuffer}}
           @enter={{fn this.search}}

diff --git a/app/pods/settings/users/index/template.hbs b/app/pods/settings/users/index/template.hbs
@@ -10,7 +10,7 @@
       <div class="vlc-toolbar__left">
         <Input
           data-test-user-search-input
-          class="vl-input-field"
+          class="auk-input"
           type="search"
           @value={{this.filter}}
         />

diff --git a/app/styles/custom-components/_vlc-input-field-block.scss b/app/styles/custom-components/_vlc-input-field-block.scss
@@ -42,7 +42,7 @@
 
   .vlc-input-field-group--grow {
     flex: 1 0 auto;
-    .vl-input-field {
+    .auk-input {
       width: 100%; // Why is this not a default?
     }
   }

diff --git a/cypress/integration/unit/cancel-editing-document.spec.js b/cypress/integration/unit/cancel-editing-document.spec.js
@@ -185,13 +185,13 @@ context('Tests for cancelling CRUD operations on document and pieces', () => {
       cy.get('.auk-h4').as('documentName');
       cy.get('@documentName').contains(fileName)
         .click();
-      cy.get('.vl-input-field--block').click()
+      cy.get('.auk-input--block').click()
         .type(extraName);
       cy.get('.ki-cross').click();
       // assert old value is back
       cy.get('@documentName').contains(fileName)
         .click();
-      cy.get('.vl-input-field--block').click()
+      cy.get('.auk-input--block').click()
         .type(extraName);
       cy.get('.ki-check').click();
       // TODO patch happens

diff --git a/cypress/integration/unit/click-table.spec.js b/cypress/integration/unit/click-table.spec.js
@@ -62,7 +62,7 @@ context('Table Row Click tests', () => {
     cy.wait('@getMeetings', {
       timeout: 12000,
     });
-    cy.get('.vl-input-field').as('inputField')
+    cy.get('.auk-input').as('inputField')
       .click()
       .type('02/2019');
     cy.get('.vl-button.vl-button--secondary.vl-button--icon').as('searchButton')

diff --git a/cypress/support/commands/agenda-commands.js b/cypress/support/commands/agenda-commands.js
@@ -76,13 +76,13 @@ function createAgenda(kind, date, location, meetingNumber, meetingNumberVisualRe
   cy.get('@newAgendaForm').eq(2)
     .within(() => {
       if (meetingNumber) {
-        cy.get('.vl-input-field').click({
+        cy.get('.auk-input').click({
           force: true,
         })
           .clear()
           .type(meetingNumber);
       } else {
-        cy.get('.vl-input-field').click({
+        cy.get('.auk-input').click({
           force: true,
         })
           .invoke('val')
@@ -119,7 +119,7 @@ function createAgenda(kind, date, location, meetingNumber, meetingNumberVisualRe
   // Set the location
   cy.get('@newAgendaForm').eq(3)
     .within(() => {
-      cy.get('.vl-input-field').click({
+      cy.get('.auk-input').click({
         force: true,
       })
         .type(location);
@@ -473,7 +473,7 @@ function addAgendaitemToAgenda(caseTitle, postponed) {
         timeout: 12000,
       }).should('not.exist');
       if (caseTitle) {
-        cy.get('.vl-input-field').clear()
+        cy.get('.auk-input').clear()
           .type(caseTitle, {
             force: true,
           });

diff --git a/cypress/support/commands/document-commands.js b/cypress/support/commands/document-commands.js
@@ -35,7 +35,7 @@ function addNewDocumentsInUploadModal(files, model) {
           if (file.newFileName) {
             cy.get('.vlc-input-field-block').eq(0)
               .within(() => {
-                cy.get('.vl-input-field').clear()
+                cy.get('.auk-input').clear()
                   .type(file.newFileName);
               });
           }

diff --git a/cypress/support/commands/publication-commands.js b/cypress/support/commands/publication-commands.js
@@ -93,7 +93,7 @@ function addPublicationDocuments(files) {
           if (file.newFileName) {
             cy.get('.vlc-input-field-block').eq(0)
               .within(() => {
-                cy.get('.vl-input-field').clear()
+                cy.get('.auk-input').clear()
                   .type(file.newFileName);
               });
           }