feat(progressbar): expose k-progressbar-value class

BREAKING CHANGE: The following changes are introduced:

* added `k-progressbar-value` class

* renamed css variable name from `--kendo-progressbar-progress` to `--kendo-progressbar-value`

packages/bootstrap/scss/progressbar/_variables.scss

@@ -12,15 +12,17 @@ $progressbar-text: k-contrast-color( $gray-200 ) !default;
 $progressbar-border: null !default;
 $progressbar-gradient: null !default;
 
-$progressbar-fill-bg: $selected-bg !default;
-$progressbar-fill-text: $selected-text !default;
-$progressbar-fill-border: null !default;
-$progressbar-fill-gradient: null !default;
+/// Progress background color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-bg: $selected-bg !default;
 
-$progressbar-indeterminate-bg: $progressbar-bg !default;
-$progressbar-indeterminate-text: $progressbar-text !default;
-$progressbar-indeterminate-border: $progressbar-border !default;
-$progressbar-indeterminate-gradient: null !default;
+$kendo-progressbar-value-text: $selected-text !default;
+/// Progress text color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-border: null !default;
+/// Progress background gradient of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-gradient: null !default;
 
 $progressbar-chunk-border: $body-bg !default;
 

packages/classic/scss/progressbar/_variables.scss

@@ -12,10 +12,18 @@ $progressbar-text: $component-text !default;
 $progressbar-border: $component-border !default;
 $progressbar-gradient: null !default;
 
-$progressbar-fill-bg: $primary !default;
-$progressbar-fill-text: contrast-wcag( $progressbar-fill-bg ) !default;
-$progressbar-fill-border: k-try-shade( $progressbar-fill-bg ) !default;
-$progressbar-fill-gradient: null !default;
+/// Progress background color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-bg: $primary !default;
+/// Progress text color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-text: contrast-wcag( $kendo-progressbar-value-bg ) !default;
+/// Progress border color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
+/// Progress background gradient of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-gradient: null !default;
 
 $progressbar-indeterminate-bg: $progressbar-bg !default;
 $progressbar-indeterminate-text: $progressbar-text !default;

packages/default/scss/progressbar/_layout.scss

@@ -3,8 +3,8 @@
     // Base
     .k-progressbar {
         @include border-radius( $kendo-border-radius );
-        --kendo-progressbar-progress: 0;
-        border-width: $progressbar-border-width;
+        --kendo-progressbar-value: 0;
+        border-width: $kendo-progressbar-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -26,7 +26,7 @@
 
 
         // Selection
-        > .k-selected {
+        > .k-progressbar-value {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -93,12 +93,12 @@
             flex-direction: row;
         }
 
-        > .k-selected {
-            width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+        > .k-progressbar-value {
+            width: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: row;
 
             > .k-progress-status-wrap {
-                width: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) );
+                width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
             }
         }
 
@@ -111,7 +111,7 @@
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-selected {
+            > .k-progressbar-value {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
             }
@@ -138,14 +138,14 @@
             writing-mode: vertical-lr;
         }
 
-        > .k-selected {
-            height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+        > .k-progressbar-value {
+            height: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: column-reverse;
             align-self: flex-end;
             align-items: flex-end;
 
             > .k-progress-status-wrap {
-                height: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
+                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
             }
         }
 
@@ -159,7 +159,7 @@
         &.k-progressbar-reverse {
             flex-direction: column;
 
-            > .k-selected {
+            > .k-progressbar-value {
                 flex-direction: column;
                 align-self: flex-start;
             }
@@ -174,7 +174,7 @@
     // Indeterminate
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
-        .k-selected,
+        .k-progressbar-value,
         .k-progressbar-chunk {
             display: none;
         }
@@ -184,8 +184,8 @@
     // Blazor specific
     .telerik-blazor.k-progressbar-horizontal {
 
-        > .k-selected,
-        > .k-selected > .k-progress-status-wrap {
+        > .k-progressbar-value,
+        > .k-progressbar-value > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
     }
@@ -213,7 +213,7 @@
         display: -ms-inline-grid;
 
         > .k-progress-status-wrap,
-        > .k-selected {
+        > .k-progressbar-value {
             -ms-grid-column: 1;
             -ms-grid-row: 1;
         }
@@ -222,19 +222,19 @@
         -ms-grid-columns: 1fr;
         -ms-grid-rows: $progressbar-height;
 
-        &.k-progressbar-reverse > .k-selected {
+        &.k-progressbar-reverse > .k-progressbar-value {
             -ms-grid-column-align: end;
         }
     }
     .k-progressbar-vertical {
         -ms-grid-columns: $progressbar-height;
         -ms-grid-rows: 1fr;
 
-        > .k-selected {
+        > .k-progressbar-value {
             -ms-grid-row-align: end;
         }
 
-        &.k-progressbar-reverse > .k-selected {
+        &.k-progressbar-reverse > .k-progressbar-value {
             -ms-grid-row-align: start;
         }
     }

packages/default/scss/progressbar/_theme.scss

@@ -9,7 +9,7 @@
         @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
 
         .k-selected {
-            @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
+            @include fill( $kendo-progressbar-value-text, $kendo-progressbar-value-bg, $kendo-progressbar-value-border, $kendo-progressbar-value-gradient );
         }
     }
 
@@ -23,7 +23,7 @@
         background-color: $progressbar-bg;
 
         .k-selected {
-            background-color: $progressbar-fill-bg;
+            background-color: $kendo-progressbar-value-bg;
         }
     }
 

packages/default/scss/progressbar/_variables.scss

@@ -12,10 +12,18 @@ $progressbar-text: $component-text !default;
 $progressbar-border: $component-border !default;
 $progressbar-gradient: null !default;
 
-$progressbar-fill-bg: $primary !default;
-$progressbar-fill-text: contrast-wcag( $progressbar-fill-bg ) !default;
-$progressbar-fill-border: try-shade( $progressbar-fill-bg ) !default;
-$progressbar-fill-gradient: null !default;
+/// Progress background color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-bg: $primary !default;
+/// Progress text color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-text: contrast-wcag( $kendo-progressbar-value-bg ) !default;
+/// Progress border color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-border: try-shade( $kendo-progressbar-value-bg ) !default;
+/// Progress background gradient of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-gradient: null !default;
 
 $progressbar-indeterminate-bg: $progressbar-bg !default;
 $progressbar-indeterminate-text: $progressbar-text !default;

packages/fluent/scss/progressbar/_layout.scss

@@ -7,7 +7,7 @@
     // Base
     .k-progressbar {
         @include border-radius( var( --kendo-progressbar-border-radius, #{$kendo-progressbar-border-radius} ) );
-        --kendo-progressbar-progress: 0;
+        --kendo-progressbar-value: 0;
         border-width: var( --kendo-progressbar-border-width, #{$kendo-progressbar-border-width} );
         border-style: solid;
         box-sizing: border-box;
@@ -29,7 +29,7 @@
 
 
         // Selection
-        > .k-selected {
+        > .k-progressbar-value {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -96,13 +96,13 @@
             margin-block-start: var( --kendo-progressbar-offset-y, #{$kendo-progressbar-offset-y} );
         }
 
-        > .k-selected {
+        > .k-progressbar-value {
             width: 0;
-            width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+            width: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: row;
 
             > .k-progress-status-wrap {
-                width: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) );
+                width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
             }
         }
 
@@ -115,7 +115,7 @@
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-selected {
+            > .k-progressbar-value {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
             }
@@ -146,14 +146,14 @@
             writing-mode: vertical-lr;
         }
 
-        > .k-selected {
-            height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+        > .k-progressbar-value {
+            height: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: column-reverse;
             align-self: flex-end;
             align-items: flex-end;
 
             > .k-progress-status-wrap {
-                height: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
+                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
             }
 
             .k-progress-status {
@@ -174,7 +174,7 @@
                 flex-direction: column-reverse;
             }
 
-            > .k-selected {
+            > .k-progressbar-value {
                 flex-direction: column;
                 align-self: flex-start;
             }
@@ -212,7 +212,7 @@
 
         .k-reset,
         .k-progress-status-wrap,
-        .k-selected,
+        .k-progressbar-value,
         .k-progress-chunk {
             display: none;
         }
@@ -225,8 +225,8 @@
     // Blazor specific
     .telerik-blazor.k-progressbar-horizontal {
 
-        > .k-selected,
-        > .k-selected > .k-progress-status-wrap {
+        > .k-progressbar-value,
+        > .k-progressbar-value > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
     }

packages/fluent/scss/progressbar/_theme.scss

@@ -33,10 +33,10 @@
 
             .k-selected {
                 @include fill(
-                    var( --kendo-progressbar-fill-text, #{$kendo-progressbar-fill-text} ),
-                    var( --kendo-progressbar-fill-bg, #{$kendo-progressbar-fill-bg} ),
-                    var( --kendo-progressbar-fill-border, #{$kendo-progressbar-fill-border} ),
-                    var( --kendo-progressbar-fill-gradient, #{$kendo-progressbar-fill-gradient} )
+                    var( --kendo-progressbar-value-text, #{$kendo-progressbar-value-text} ),
+                    var( --kendo-progressbar-value-bg, #{$kendo-progressbar-value-bg} ),
+                    var( --kendo-progressbar-value-border, #{$kendo-progressbar-value-border} ),
+                    var( --kendo-progressbar-value-gradient, #{$kendo-progressbar-value-gradient} )
                 );
             }
 
@@ -50,7 +50,7 @@
                 );
 
                 .k-selected {
-                    background-color: var( --kendo-progressbar-fill-disabled-bg, #{$kendo-progressbar-fill-disabled-bg} );
+                    background-color: var( --kendo-progressbar-value-disabled-bg, #{$kendo-progressbar-value-disabled-bg} );
                 }
             }
         }
@@ -63,7 +63,7 @@
         background-color: var( --kendo-progressbar-bg, #{$kendo-progressbar-bg} );
 
         .k-selected {
-            background-color: var( --kendo-progressbar-fill-bg, #{$kendo-progressbar-fill-bg} );
+            background-color: var( --kendo-progressbar-value-bg, #{$kendo-progressbar-value-bg} );
         }
     }
 

packages/fluent/scss/progressbar/_variables.scss

@@ -59,16 +59,16 @@ $kendo-progressbar-disabled-border: $kendo-progressbar-disabled-bg !default;
 
 /// Progress background color of the progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-bg: get-theme-color-var( primary-100 ) !default;
+$kendo-progressbar-value-bg: get-theme-color-var( primary-100 ) !default;
 /// Progress text color of the progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-text: var( --kendo-component-text, initial ) !default;
+$kendo-progressbar-value-text: var( --kendo-component-text, initial ) !default;
 /// Progress border color of the progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-border: $kendo-progressbar-fill-bg !default;
+$kendo-progressbar-value-border: $kendo-progressbar-value-bg !default;
 /// Progress background gradient of the progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-gradient: null !default;
+$kendo-progressbar-value-gradient: null !default;
 
 /// Progress status offset of the progressbar.
 /// @group progressbar
@@ -79,7 +79,7 @@ $kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size
 
 /// Progress background color of the disabled progressbar.
 /// @group progressbar
-$kendo-progressbar-fill-disabled-bg: get-theme-color-var( primary-30 ) !default;
+$kendo-progressbar-value-disabled-bg: get-theme-color-var( primary-30 ) !default;
 
 /// Chunk order color of the progressbar.
 /// @group progressbar

packages/html/src/progressbar/progressbar.tsx

@@ -53,7 +53,7 @@ export class ProgressBar extends React.Component<ProgressBarProps> {
                         'k-progressbar-reverse': reverse,
                         'k-disabled': disabled
                     },
-                )} style={ orientation === "horizontal" ? { "--kendo-progressbar-progress": value, height: height } as React.CSSProperties : { "--kendo-progressbar-progress": value, width: width } as React.CSSProperties } >
+                )} style={ orientation === "horizontal" ? { "--kendo-progressbar-value": value, height: height } as React.CSSProperties : { "--kendo-progressbar-value": value, width: width } as React.CSSProperties } >
                 <span className={classNames(
                     'k-progress-status-wrap',
                     {
@@ -63,7 +63,7 @@ export class ProgressBar extends React.Component<ProgressBarProps> {
                     {label && <span className="k-progress-status">{this.props.value}%</span>}
                 </span>
                 {!indeterminate &&
-                <div className="k-selected">
+                <div className="k-progressbar-value k-selected">
                     <span className={classNames(
                         'k-progress-status-wrap',
                         {

packages/material/scss/progressbar/_layout.scss

@@ -40,7 +40,6 @@
             display: block;
             width: 100%;
             height: 100%;
-            background: $progressbar-fill-bg;
             position: absolute;
             transform-origin: 0 0;
         }