Merge pull request #7926 from IgniteUI/didimmova/document-shapes-sassdoc-7907

docs(sassdoc): document component shapes

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss

@@ -52,13 +52,6 @@
     ));
 }
 
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
-////
-
 /// Column hiding Theme
 /// The function is deprecated and will be removed in future versions. Use igx-column-actions-theme instead.
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.

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

@@ -1,13 +1,17 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
+
+/// @type Map
+/// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
 $_default-elevation-badge: (
     elevation: 1
 );
 
 /// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the badge shadow.
 $_bootstrap-elevation-badge: (
     elevation: 0
 );

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

@@ -1,20 +1,23 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// @type Map
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the bottom nav.
 $_default-elevation-bottom-nav: (
     elevation: 8
 );
 
 /// @type Map
+/// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the bottom nav.
 $_fluent-elevation-bottom-nav: (
     elevation: 1
 );
 
 /// @type Map
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the bottom nav.
 $_indigo-elevation-bottom-nav: (
     elevation: 4
 );

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

@@ -1,30 +1,38 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
 $_flat-button-group: (
     elevation: 0
 );
 
 /// @type Map
+/// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow.
 $_default-elevation-button-group: (
     elevation: 2
 );
 
 /// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-button-group
 $_fluent-elevation-button-group: extend(
     $_flat-button-group
 );
 
 /// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-button-group
 $_bootstrap-elevation-button-group: extend(
     $_flat-button-group
 );
 
 /// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-button-group
 $_indigo-elevation-button-group: extend(
     $_flat-button-group
 );

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

@@ -1,10 +1,16 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// @type Map
+/// @prop {Number} raised-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} raised-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} raised-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} fab-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} fab-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} fab-focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
 $_flat-button: (
     raised-resting-elevation: 0,
     raised-hover-elevation: 0,
@@ -16,6 +22,12 @@ $_flat-button: (
 );
 
 /// @type Map
+/// @prop {Number} raised-resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} raised-hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} raised-focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} fab-resting-elevation [6] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} fab-hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} fab-focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
 $_default-elevation-button: (
     raised-resting-elevation: 2,
     raised-hover-elevation: 4,
@@ -27,10 +39,16 @@ $_default-elevation-button: (
 );
 
 /// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-button
 $_fluent-elevation-button: extend($_flat-button);
 
 /// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-button
 $_bootstrap-elevation-button: extend($_flat-button);
 
 /// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-button
 $_indigo-elevation-button: extend($_flat-button);

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

@@ -1,28 +1,38 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// @type Map
+/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state.
 $_default-elevation-card: (
     resting-elevation: 2,
     hover-elevation: 8
 );
 
 /// @type Map
+/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
 $_flat-card: (
     resting-elevation: 0,
     hover-elevation: 0
 );
 
 /// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-card
 $_fluent-elevation-card: extend($_flat-card);
 
 /// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-card
 $_bootstrap-elevation-card: extend($_flat-card);
 
 /// @type Map
+/// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
 $_indigo-elevation-card: (
     resting-elevation: 4,
     hover-elevation: 6

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

@@ -1,26 +1,33 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
 /// @type Map
+/// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons.
 $_default-elevation-carousel: (
     button-elevation: 1,
 );
 
 /// @type Map
-$_fluent-elevation-carousel: (
+/// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
+$_flat-carousel: (
     button-elevation: 0,
 );
 
 /// @type Map
-$_bootstrap-elevation-carousel: (
-    button-elevation: 0,
-);
+/// @requires {function} extend
+/// @requires {Map} $_flat-carousel
+$_fluent-elevation-carousel: extend($_flat-carousel);
 
 /// @type Map
-$_indigo-elevation-carousel: (
-    button-elevation: 0,
-);
+/// @requires {function} extend
+/// @requires {Map} $_flat-carousel
+$_bootstrap-elevation-carousel: extend($_flat-carousel);
+
+/// @type Map
+/// @requires {function} extend
+/// @requires {Map} $_flat-carousel
+$_indigo-elevation-carousel: extend($_flat-carousel);
 

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

@@ -1,25 +1,29 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
 /// @type Map
+/// @prop {Number} ghost-elevation [8] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 $_default-elevation-chip: (
     ghost-elevation: 8
 );
 
 /// @type Map
+/// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 $_fluent-elevation-chip: (
     ghost-elevation: 2
 );
 
 /// @type Map
+/// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 $_bootstrap-elevation-chip: (
     ghost-elevation: 0
 );
 
 /// @type Map
+/// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 $_indigo-elevation-chip: (
     ghost-elevation: 0
 );

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

@@ -1,14 +1,17 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// @type Map
+/// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
 $_default-elevation-dialog: (
     elevation: 24
 );
 
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the dialog.
 $_bootstrap-elevation-dialog: (
     elevation: 0
 );

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

@@ -1,23 +1,29 @@
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// @type Map
+/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
 $_default-elevation-drop-down: (
     elevation: 8
 );
 
 /// @type Map
+/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the drop-down shadow.
 $_fluent-elevation-drop-down: (
     elevation: 4
 );
 
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the drop-down shadow.
 $_bootstrap-elevation-drop-down: (
     elevation: 0
 );
 
+/// @type Map
+/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the drop-down shadow.
 $_indigo-elevation-drop-down: (
     elevation: 3
 );