refactor(ui5-progress-indicator): remove disabled property (#8683)

Removes the `disabled` property of the `ui5-progress-indicator`. The Progress Indicator isn't an interactive element, therefore the disabled property make no sense. Also aria-disabled is deprecated on the `progressbar` role since ARIA 1.2 . BREAKING CHANGE: The `disabled` property of the `ui5-progress-indicator` is removed. If you have previously used the `disabled` property, it won't take effect: ```html <ui5-progress-indicator disabled value="60"></ui5-progress-indicator> ``` Related to #8461, #7887
SAP · Apr 8, 2024 · 5e5c40a · 5e5c40a
1 parent 98052e1
commit 5e5c40a
Show file tree

Hide file tree

Showing 7 changed files with 1 addition and 28 deletions.
diff --git a/packages/main/src/ProgressIndicator.hbs b/packages/main/src/ProgressIndicator.hbs
@@ -4,7 +4,6 @@
      aria-valuenow="{{validatedValue}}"
      aria-valuemax="100"
      aria-valuetext="{{valueStateText}}"
-     aria-disabled="{{_ariaDisabled}}"
      aria-label="{{accessibleName}}"
 >
     <div class="ui5-progress-indicator-bar" part="bar" style="{{styles.bar}}">

diff --git a/packages/main/src/ProgressIndicator.ts b/packages/main/src/ProgressIndicator.ts
@@ -60,14 +60,6 @@ class ProgressIndicator extends UI5Element {
 	@property()
 	accessibleName!: string;
 
-	/**
-	 * Defines whether component is in disabled state.
-	 * @default false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	disabled!: boolean;
-
 	/**
 	 * Defines whether the component value is shown.
 	 * @default false
@@ -195,10 +187,6 @@ class ProgressIndicator extends UI5Element {
 		return this.valueStateIconMappings()[this.valueState];
 	}
 
-	get _ariaDisabled() {
-		return this.disabled || undefined;
-	}
-
 	static async onDefine() {
 		ProgressIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

diff --git a/packages/main/src/themes/ProgressIndicator.css b/packages/main/src/themes/ProgressIndicator.css
@@ -157,10 +157,6 @@
 	border-color: var(--_ui5_progress_indicator_border_color_information);
 }
 
-:host([disabled]) .ui5-progress-indicator-root {
-	opacity: 0.4;
-}
-
 /* Start and End points - Horizon */
 
 .ui5-progress-indicator-remaining-bar::before,

diff --git a/packages/main/test/pages/ProgressIndicator.html b/packages/main/test/pages/ProgressIndicator.html
@@ -61,10 +61,6 @@
 	<br />
 	<ui5-progress-indicator value-state="Information" value="25"></ui5-progress-indicator>
 	<br />
-	Disabled
-	<br />
-	<ui5-progress-indicator disabled value="25"></ui5-progress-indicator>
-	<br />
 	ValueState.None
 	<br />
 	<ui5-progress-indicator value-state="None" value="60"></ui5-progress-indicator>
@@ -85,10 +81,6 @@
 	<br />
 	<ui5-progress-indicator value-state="Information" value="60"></ui5-progress-indicator>
 	<br />
-	Disabled
-	<br />
-	<ui5-progress-indicator disabled value="60"></ui5-progress-indicator>
-	<br />
 	AccessibleName added
 	<ui5-progress-indicator id="PI" value="100" accessible-name="Hello world"></ui5-progress-indicator>
 	<br />

diff --git a/packages/playground/_stories/main/ProgressIndicator/ProgressIndicator.stories.ts b/packages/playground/_stories/main/ProgressIndicator/ProgressIndicator.stories.ts
@@ -15,7 +15,6 @@ export default {
 
 const Template: UI5StoryArgs<ProgressIndicator, StoryArgsSlots> = (args) =>
     html`<ui5-progress-indicator
-        ?disabled="${ifDefined(args.disabled)}"
         ?hide-value="${ifDefined(args.hideValue)}"
         value="${ifDefined(args.value)}"
         display-value="${ifDefined(args.displayValue)}"

diff --git a/packages/website/docs/_components_pages/main/ProgressIndicator.mdx b/packages/website/docs/_components_pages/main/ProgressIndicator.mdx
@@ -21,6 +21,6 @@ Use the <b>displayValue</b> property to define an alternative of the value, that
 <DisplayValue />
 
 ### States
-ProgressIndicator supports several semantic value states, disabled, etc.
+ProgressIndicator supports several semantic value states.
 
 <States />
diff --git a/packages/website/docs/_samples/main/ProgressIndicator/States/sample.html b/packages/website/docs/_samples/main/ProgressIndicator/States/sample.html
@@ -15,7 +15,6 @@
     <ui5-progress-indicator value="45" value-state="Information"></ui5-progress-indicator>
     <ui5-progress-indicator value="15" value-state="Warning"></ui5-progress-indicator>
     <ui5-progress-indicator value="65" value-state="Error"></ui5-progress-indicator>
-    <ui5-progress-indicator value="65" disabled></ui5-progress-indicator>
 
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>