feat: add valuePrefix and valueSuffix properties as replacements for deprecated prefix and suffix

src/components/circular-progress/circular-progress.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Prop, Watch } from '@stencil/core';
 import { CircularProgressSize } from '../circular-progress/circular-progress.types';
 import { abbreviate } from '../badge/format';
 
@@ -47,17 +47,33 @@ export class CircularProgress {
     public maxValue: number = PERCENT;
 
     /**
-     * The prefix which is displayed before the `value`, must be a few characters characters long.
+     * The prefix which is displayed before the `value`, must be a few characters long.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public prefix?: string = null;
 
     /**
      * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     @Prop()
     public suffix: string = '%';
 
+    /**
+     * The prefix which is displayed before the `value`, must be a few characters long.
+     */
+    @Prop({ reflect: true })
+    public valuePrefix?: string = null;
+
+    /**
+     * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+     *
+     * @todo Change default value to `'%'` once the deprecated `suffix` property is removed.
+     */
+    @Prop({ reflect: true })
+    public valueSuffix?: string = null;
+
     /**
      * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
      */
@@ -70,6 +86,33 @@ export class CircularProgress {
     @Prop({ reflect: true })
     public size: CircularProgressSize;
 
+    public componentWillLoad() {
+        this.warnIfDeprecatedPrefix();
+        this.warnIfDeprecatedSuffix();
+    }
+
+    @Watch('prefix')
+    private warnIfDeprecatedPrefix() {
+        if (this.prefix !== null && this.prefix !== undefined) {
+            console.warn(
+                'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+    }
+
+    @Watch('suffix')
+    private warnIfDeprecatedSuffix() {
+        if (
+            this.suffix !== '%' &&
+            this.suffix !== null &&
+            this.suffix !== undefined
+        ) {
+            console.warn(
+                'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+    }
+
     public render() {
         const classList = {
             'lime-circular-progress': true,
@@ -79,27 +122,38 @@ export class CircularProgress {
         const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
         const value = Math.round(this.value * 10) / 10;
 
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+
+        const ariaValueText = [
+            effectivePrefix,
+            abbreviate(value),
+            effectiveSuffix,
+        ]
+            .filter(Boolean)
+            .join('');
+
         return (
             <div
                 role="progressbar"
                 class={classList}
-                aria-label="%"
+                aria-valuetext={ariaValueText}
                 aria-valuemin="0"
                 aria-valuemax={this.maxValue}
                 aria-valuenow={this.value}
                 style={{ '--percentage': currentPercentage }}
             >
-                {this.renderPrefix()}
+                {this.renderPrefix(effectivePrefix)}
                 <span class="value">
                     {abbreviate(value)}
-                    <span class="suffix">{this.suffix}</span>
+                    <span class="suffix">{effectiveSuffix}</span>
                 </span>
             </div>
         );
     }
-    private renderPrefix = () => {
-        if (this.prefix) {
-            return <span class="prefix">{this.prefix}</span>;
+    private renderPrefix = (prefix?: string) => {
+        if (prefix) {
+            return <span class="prefix">{prefix}</span>;
         }
     };
 }

src/components/circular-progress/examples/circular-progress-css-variables.tsx

@@ -24,6 +24,6 @@ export class CircularProgressCssVariablesExample {
     private value = 90;
 
     public render() {
-        return <limel-circular-progress prefix="↗" value={this.value} />;
+        return <limel-circular-progress valuePrefix="↗" value={this.value} />;
     }
 }

src/components/circular-progress/examples/circular-progress-props.tsx

@@ -37,26 +37,26 @@ export class CircularProgressPropsExample {
                 size="x-large"
                 value={this.degree}
                 maxValue={this.maxDegrees}
-                suffix={this.degrees}
+                valueSuffix={this.degrees}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.second}
                 maxValue={this.maxSeconds}
-                suffix={this.seconds}
+                valueSuffix={this.seconds}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.star}
                 maxValue={this.maxStars}
-                suffix={this.stars}
+                valueSuffix={this.stars}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.budget}
                 maxValue={this.maxBudget}
-                suffix={this.currency}
-                prefix={this.increase}
+                valueSuffix={this.currency}
+                valuePrefix={this.increase}
             />,
         ];
     }

src/components/info-tile/examples/info-tile-badge.tsx

@@ -32,7 +32,7 @@ export class InfoTileBadgeExample {
                 icon="water"
                 label="Average weekly usage"
                 value={this.StringValue}
-                suffix="L"
+                valueSuffix="L"
                 badge={this.StringBadge}
                 link={{ href: '#' }}
             />,

src/components/info-tile/examples/info-tile-loading.tsx

@@ -37,9 +37,9 @@ export class InfoTileLoadingExample {
             <limel-info-tile
                 icon="partly_cloudy_rain"
                 label="Partly cloudy with a risk of rain"
-                prefix="temp"
+                valuePrefix="temp"
                 value="23"
-                suffix="°C"
+                valueSuffix="°C"
                 link={link}
                 loading={this.loading}
             />,

src/components/info-tile/examples/info-tile-primary-slot.tsx

@@ -37,7 +37,7 @@ export class InfoTilePrimarySlotExample {
                     icon="cloud_storage"
                     label="Cloud storage usage"
                     value="215"
-                    suffix="GB"
+                    valueSuffix="GB"
                     link={link}
                     progress={progress} // won't be rendered
                 >

src/components/info-tile/examples/info-tile-progress.tsx

@@ -30,7 +30,7 @@ export class InfoTileProgressExample {
     @State()
     private progress: InfoTileProgress = {
         value: 76,
-        prefix: '↑',
+        valuePrefix: '↑',
         displayPercentageColors: true,
     };
 
@@ -39,9 +39,9 @@ export class InfoTileProgressExample {
             <limel-info-tile
                 label="Won deals this month"
                 icon="money"
-                prefix="Total value"
+                valuePrefix="Total value"
                 value="70,659"
-                suffix="EUR"
+                valueSuffix="EUR"
                 link={{ href: '#' }}
                 progress={this.progress}
             />,

src/components/info-tile/examples/info-tile-styling.tsx

@@ -21,7 +21,7 @@ export class InfoTileStylingExample {
     private progress: InfoTileProgress = {
         value: 12,
         maxValue: 100,
-        suffix: '%',
+        valueSuffix: '%',
         displayPercentageColors: false,
     };
 
@@ -31,16 +31,16 @@ export class InfoTileStylingExample {
                 icon="electricity"
                 label="Average weekly usage"
                 value={this.value}
-                suffix="kWh"
+                valueSuffix="kWh"
                 badge={this.badge}
             />,
             <limel-info-tile
                 label="Average weekly usage"
                 icon="electricity"
                 value={this.value}
-                suffix="kWh"
+                valueSuffix="kWh"
                 progress={this.progress}
-                prefix="↑"
+                valuePrefix="↑"
             />,
         ];
     }

src/components/info-tile/examples/info-tile.tsx

@@ -41,9 +41,9 @@ export class InfoTileExample {
                 <limel-info-tile
                     icon="partly_cloudy_rain"
                     label="Partly cloudy with a risk of rain"
-                    prefix="temp"
+                    valuePrefix="temp"
                     value="23"
-                    suffix="°C"
+                    valueSuffix="°C"
                     link={link}
                 />
             </div>