Merge pull request #5969 from IgniteUI/fix-carousel-shadow-8.2

fix(carousel): fix carousel buttons shadow

Author: kdinev

projects/igniteui-angular/migrations/migration-collection.json

@@ -50,6 +50,11 @@
             "version": "8.2.0",
             "description": "Updates Ignite UI for Angular from v8.1.x to v8.2.0",
             "factory": "./update-8_2_0"
+        },
+        "migration-11": {
+            "version": "8.2.3",
+            "description": "Updates Ignite UI for Angular from v8.2.0 to v8.2.3",
+            "factory": "./update-8_2_3"
         }
     }
 }

projects/igniteui-angular/migrations/update-8_2_0/changes/theme-props.json

@@ -1,8 +1,9 @@
 {
     "$schema": "../../common/schema/theme-props.schema.json",
     "changes": [{
-        "name": "$disable-shadow",
-        "remove": true,
-        "owner": "igx-badge-theme"
-    }]
+            "name": "$disable-shadow",
+            "remove": true,
+            "owner": "igx-badge-theme"
+        }
+    ]
 }

projects/igniteui-angular/migrations/update-8_2_3/changes/theme-props.json

@@ -0,0 +1,9 @@
+{
+    "$schema": "../../common/schema/theme-props.schema.json",
+    "changes": [{
+            "name": "$disable-button-shadow",
+            "replaceWith": "$button-shadow",
+            "owner": "igx-carousel-theme"
+        },
+    ]
+}

projects/igniteui-angular/migrations/update-8_2_3/index.ts

@@ -0,0 +1,17 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '8.2.3';
+
+export default function(): Rule {
+    return (host: Tree, context: SchematicContext) => {
+        context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+        const update = new UpdateChanges(__dirname, host, context);
+        update.applyChanges();
+    };
+}

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -14,7 +14,7 @@
 /// @param {Color} $indicator-dot-color [null] - The active indicator dot color.
 /// @param {Color} $indicator-border-color [null] - The idle indicator border color.
 /// @param {Color} $indicator-active-border-color [null] - The active indicator border color.
-/// @param {Bool} $disable-button-shadow [true] - Show shadow underneath the previous/next buttons.
+/// @param {box-shadow} $button-shadow [null] - Shadow underneath the previous/next buttons.
 ///
 /// @param {border-radius} $border-radius [null] - The border radius used for carousel component.
 ///
@@ -37,8 +37,10 @@
 @function igx-carousel-theme(
     $palette: $default-palette,
     $schema: $light-schema,
+    $elevations: $elevations,
 
     $border-radius: null,
+    $button-shadow: null,
 
     $button-background: null,
     $button-hover-background: null,
@@ -48,8 +50,6 @@
     $indicator-dot-color: null,
     $indicator-border-color: null,
     $indicator-active-border-color: null,
-
-    $disable-button-shadow: true
 ){
     $name: 'igx-carousel';
     $carousel-schema: map-get($schema, $name);
@@ -59,7 +59,10 @@
         if($border-radius, $border-radius, map-get($carousel-schema, 'border-radius')),0 ,36px
     );
 
-    $button-shadow: if($disable-button-shadow == true, none, igx-elevation($elevations, 1));
+    @if not($button-shadow) {
+        $button-elevation: map-get($carousel-schema, 'button-elevation');
+        $button-shadow: igx-elevation($elevations, $button-elevation);
+    }
 
     @if not($button-arrow-color) and $button-background {
         $button-arrow-color: text-contrast($button-background);
@@ -72,18 +75,18 @@
     @return extend($theme, (
         name: $name,
         palette: $palette,
+
         border-radius: $border-radius,
+        button-shadow: $button-shadow,
+
         button-background: $button-background,
         button-hover-background: $button-hover-background,
         button-arrow-color: $button-arrow-color,
         button-hover-arrow-color: $button-hover-arrow-color,
-        button-shadow: $button-shadow,
 
         indicator-dot-color: $indicator-dot-color,
         indicator-border-color: $indicator-border-color,
         indicator-active-border-color: $indicator-active-border-color,
-
-        disable-button-shadow: $disable-button-shadow
     ));
 }
 

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -193,7 +193,7 @@
             $palette,
             $schema,
             $border-radius: $roundness,
-            $disable-button-shadow: if($elevation == false, 0, true),
+            $button-shadow: if($elevation == false, 0, null),
         ));
     }
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_carousel.scss

@@ -0,0 +1,12 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+$_default-elevation-carousel: (
+    button-elevation: 1,
+);
+
+$_fluent-elevation-carousel: (
+    button-elevation: 0,
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_carousel.scss

@@ -1,4 +1,5 @@
 @import '../shape/carousel';
+@import '../elevation/carousel';
 
 ////
 /// @group schemas
@@ -19,8 +20,10 @@
 ///
 /// @requires {function} extend
 /// @requires {map} $_default-shape-carousel
+/// @requires {map} $_default-elevation-carousel
 $_light-carousel: extend(
     $_default-shape-carousel,
+    $_default-elevation-carousel,
     (
         button-background: #fff,
         button-hover-background: #fff,
@@ -43,5 +46,7 @@ $_light-carousel: extend(
 /// @type {Map}
 /// @requires {function} extend
 /// @requires {map} $_light-carousel
+/// @requires {map} $_fluent-shape-carousel
+/// @requires {map} $_fluent-elevation-carousel
 /// @see $default-palette
-$_fluent-carousel: extend($_light-carousel, $_fluent-shape-carousel);
+$_fluent-carousel: extend($_light-carousel, $_fluent-shape-carousel, $_fluent-elevation-carousel);