Merge pull request #174 from lana/fix-carousel-scroll-for-systems-usi…

…ng-display-scaling

Fix Carousel behavior for system using display scaling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lana/b2c-mapp-ui",
-  "version": "8.32.1",
+  "version": "8.32.2",
   "description": "Shared custom libraries for building µapps.",
   "bugs": {
     "url": "https://github.com/lana/b2c-mapp-ui/issues"

src/components/ActionItem/ActionItem.stories.js

@@ -5,7 +5,7 @@ import ActionItem from './ActionItem.vue';
 import RenderString from '../../lib/renderString';
 import { createDeviceDecorator } from '../../lib/storybookHelpers';
 
-const deviceDecorator = createDeviceDecorator('<strong>ContentRadioList:</strong> A control that allows a user to select an option by showing all available options as a list of radio buttons.');
+const deviceDecorator = createDeviceDecorator('<strong>ActionItem:</strong>&nbsp;A list item which takes the user to perform an action in another screen.');
 
 const ActionItemStories = {
   component: ActionItem,

src/components/Carousel/Carousel.js

@@ -123,8 +123,8 @@ const methods = {
   },
   handleScroll(event) {
     const { scrollLeft, clientLeft } = event.target;
-    const roundedScrollLeft = Math.round(scrollLeft) + clientLeft;
-    const index = this.items.findIndex(({ offsetLeft: itemOffsetLeft }) => (itemOffsetLeft === roundedScrollLeft));
+    const correctedScrollLeft = scrollLeft + clientLeft;
+    const index = this.items.findIndex(({ offsetLeft: itemOffsetLeft }) => (Math.abs(itemOffsetLeft - correctedScrollLeft) < 1));
     if (index < 0) { return; }
     if (this.destinationScrollLeft !== null && this.items[index].offsetLeft !== this.destinationScrollLeft) { return; }
     this.destinationScrollLeft = null;

src/components/ToggleSwitch/ToggleSwitch.scss

@@ -56,15 +56,15 @@
   margin-right: 16px;
 }
 
-.toggle-button ::v-deep {
+.button.toggle-button {
   color: $black-700;
   font-weight: 500;
   font-size: 16px;
   border: 1px solid $black-300;
   border-radius: 8px;
-}
 
-.focused ::v-deep {
-  border: 1px solid $blue-600;
+  &.focused {
+    border: 1px solid $blue-600;
+  }
 }