feat(navdrawer): allow setting border radius for navdrawer items

Closes #4964
IgniteUI · Jun 19, 2019 · 01c90ed · 01c90ed
1 parent d9523d1
commit 01c90ed
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
@@ -21,7 +21,8 @@
 /// @param {Color} $item-hover-text-color [null] - The item's hover text color.
 /// @param {Color} $item-hover-icon-color [null] - The item's hover icon color.
 /// @param {Color} $shadow [null] - Sets a custom shadow to be used by the drawer.
-/// @param {border-radius} $border-radius [null] - The border radius used for navdrawer item.
+/// @param {border-radius} $border-radius [null] - The border radius used for the navdrawer.
+/// @param {item-border-radius} $item-border-radius [null] - The border radius used for the navdrawer items.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
@@ -46,6 +47,7 @@
     $elevations: $elevations,
 
     $border-radius: null,
+    $item-border-radius: null,
 
     $background: null,
     $border-color: null,
@@ -71,6 +73,10 @@
         if($border-radius, $border-radius, map-get($navdrawer-schema, 'border-radius')), 0, 36px
     );
 
+    $item-border-radius: round-borders(
+        if($item-border-radius, $item-border-radius, map-get($navdrawer-schema, 'item-border-radius')), 0, 24px
+    );
+
     @if not($item-header-text-color) and $background {
         $item-header-text-color: text-contrast($background);
     }
@@ -116,6 +122,7 @@
         name: $name,
         palette: $palette,
         border-radius: $border-radius,
+        item-border-radius: $item-border-radius,
         background: $background,
         border-color: $border-color,
         item-text-color:$item-text-color,
@@ -246,23 +253,23 @@
         display: flex;
         flex-flow: row nowrap;
         color: --var($theme, 'item-text-color');
-        max-height: 48px;
-        padding: 12px 16px;
+        max-height: rem(48px);
+        padding: rem(12px) rem(16px);
         cursor: pointer;
         align-items: center;
         user-select: none;
         outline: transparent;
         white-space: nowrap;
-        border-radius: 4px;
-        margin: 8px;
+        border-radius: --var($theme, 'item-border-radius');
+        margin: rem(8px);
 
         > igx-icon + span {
-            margin-left: 32px;
+            margin-left: rem(32px);
         }
 
         &[dir='rtl'] {
             > igx-icon + span {
-                margin-right: 32px;
+                margin-right: rem(32px);
             }
         }
 
@@ -303,7 +310,7 @@
 
     %item--header {
         display: block;
-        padding: 12px 16px;
+        padding: rem(12px) rem(16px);
         white-space: nowrap;
         color: --var($theme, 'item-header-text-color');
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss
@@ -20,6 +20,7 @@
 /// @prop {map} item-hover-icon-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The item's hover icon color.
 /// @prop {map} elevation [16] - The elevation level of the drawer, between 0 - 24.
 /// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for navdrawer component.
+/// @prop {Number} item-border-radius [0] - The border radius fraction, between 0-1 to be used for navdrawer items.
 ///
 /// @see $default-palette
 
@@ -30,6 +31,8 @@ $_light-navdrawer: (
 
     border-radius: 0,
 
+    item-border-radius: .16667,
+
     border-color: rgba(0, 0, 0, .14),
 
     item-header-text-color: (