Merge pull request #227 from Safelite/BRM-button-bug-fix

Fix bug with button loader/spinner.

src/common-components/button-question/button-question.vue

@@ -22,7 +22,6 @@
               :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
-              :sizeInRem="sizeInRem"
               :isWide="isWide"
               :isRequired="isRequired"
               :buttonImage="answer.AnswerImageUrl"
@@ -74,10 +73,6 @@ export default {
       type: String,
       default: "right",
     },
-    sizeInRem: {
-      type: [String, Number],
-      default: 1.5,
-    },
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,

src/common-components/funnel-footer/funnel-footer.vue

@@ -21,7 +21,6 @@
             isPrimary
             :buttonText="buttonText"
             loaderColor="white"
-            sizeInRem="1"
             :class="isDisabled && 'form-test-invalid'"
             :aria-disabled="isDisabled"
             :isDisabled="isDisabled"

src/layouts/component-test/component-test.vue

@@ -75,7 +75,7 @@
           isPrimary
           buttonText="Primary"
           loaderColor="white"
-          sizeInRem="1"
+
           />
         </div>
       </div>
@@ -85,7 +85,7 @@
           isPrimary
           buttonText="Primary Disabled"
           loaderColor="white"
-          sizeInRem="1"
+
           disabled
           />
         </div>
@@ -95,7 +95,7 @@
           <buttonMain
           buttonText="Secondary"
           loaderColor="white"
-          sizeInRem="1"
+
           />
         </div>
       </div>
@@ -104,7 +104,7 @@
           <buttonMain
           buttonText="Secondary Disabled"
           loaderColor="white"
-          sizeInRem="1"
+
           disabled
           />
         </div>
@@ -390,7 +390,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
         <listButton
@@ -403,7 +402,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
         <listButton
@@ -416,7 +414,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
         <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
@@ -431,7 +428,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         hasError
         />
@@ -456,7 +452,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -468,7 +463,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -480,7 +474,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
@@ -494,7 +487,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       hasError
       />
@@ -525,7 +517,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -538,7 +529,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -551,7 +541,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
@@ -576,7 +565,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -588,7 +576,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -600,7 +587,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
@@ -633,7 +619,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
     <listButton
@@ -646,7 +631,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
     <listButton
@@ -659,7 +643,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
   </div>
@@ -684,7 +667,6 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -696,7 +678,6 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -708,7 +689,6 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
@@ -738,7 +718,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -752,7 +731,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -766,7 +744,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -793,7 +770,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -808,7 +784,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -823,7 +798,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -850,7 +824,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -864,7 +837,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -878,7 +850,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -905,7 +876,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -920,7 +890,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -935,7 +904,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"

src/ux-components/button-main/button-main.spec.js

@@ -76,26 +76,4 @@ describe("buttonMain.vue", () => {
 
     expect(loader.attributes("class")).toContain("right");
   });
-
-  it("Should return loader size in rem", async () => {
-    // Act
-    const wrapper = shallowMount(buttonMain, {
-      propsData: {
-        sizeInRem: 1,
-        loaderEnabled: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.clicked();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("style")).toContain("1rem");
-  });
 });

src/ux-components/button-main/button-main.vue

@@ -9,7 +9,6 @@
     <loader
       class="ms-2"
       v-if="isLoaderDisplayed"
-      v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
       v-bind:class="[this.loaderColor, this.loaderPosition]"
     />
   </button>
@@ -25,7 +24,6 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number, String],
     isFloat: Boolean,
   },
   data() {

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -155,29 +155,6 @@ describe("list-button-horizontal.vue", () => {
     expect(loader.attributes("class")).toContain("right");
   });
 
-  it("Should return loader size in rem", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        sizeInRem: 1,
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.handleClick();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("style")).toContain("1rem");
-  });
-
   it("Should emit button value on click", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -39,7 +39,6 @@
       </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
-        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
         :class="[loaderColor, loaderPosition]"
       />
     </label>
@@ -64,7 +63,6 @@ export default {
     selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number, String],
     isRequired: Boolean,
     value: {
       // Field initial value

src/ux-components/list-button/list-button.spec.js

@@ -153,29 +153,6 @@ describe("list-button.vue", () => {
     expect(loader.attributes("class")).toContain("right");
   });
 
-  it("Should return loader size in rem", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        sizeInRem: 1,
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.handleClick();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("style")).toContain("1rem");
-  });
-
   it("Should emit button value on click", async () => {
     // Act
     const wrapper = shallowMount(listButton, {

src/ux-components/list-button/list-button.vue

@@ -42,7 +42,6 @@
       </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
-        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
         :class="[this.loaderColor, this.loaderPosition]"
       />
     </label>
@@ -67,7 +66,6 @@ export default {
     selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number,String],
     value: {
     // Field initial value
       type: [String, Number],

src/ux-components/loader/loader.vue

@@ -3,7 +3,6 @@
     class="loader"
     role="alert"
     aria-label="Loading new page"
-    v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
     v-bind:class="[this.loaderColor, this.loaderPosition]"
   ></div>
 </template>
@@ -13,10 +12,6 @@ export default {
   name: "loader",
   /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
   props: {
-    sizeInRem: {
-      type: Number,
-      default: 1,
-    },
     /* Color options: red, green, blue, white, black */
     loaderColor: {
       type: String,
@@ -50,8 +45,8 @@ export default {
     mask: url(../../assets/img/icons/spinner.svg);
     mask-size: cover;
     position: relative;
-    width: 100%;
+    width: 1rem;
-    height: 100%;
+    height: 1rem;
     animation: rotation 1s infinite linear;
     @keyframes rotation {
       100% {