From 92a67b9992e838f2597aa221c4c06cc6cbc1470f Mon Sep 17 00:00:00 2001
From: MIchaelZablianov <michaelza@wix.com>
Date: Tue, 30 Dec 2025 18:12:41 +0200
Subject: [PATCH 1/6] MADS-4930 Progress Bar corner radius

---
 .../componentScreens/ProgressBarScreen.tsx    | 31 +++++++------------
 .../src/components/progressBar/index.tsx      | 20 +++++++++---
 .../progressBar/progressBar.api.json          |  8 ++---
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/demo/src/screens/componentScreens/ProgressBarScreen.tsx b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
index 1a861dbe46..b31b400f4a 100644
--- a/demo/src/screens/componentScreens/ProgressBarScreen.tsx
+++ b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
@@ -1,10 +1,8 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib';//eslint-disable-line
-
+import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib';
 
 export default class ProgressBarScreen extends Component {
-
   state = {
     progresses: [0, 0, 0, 0]
   };
@@ -31,9 +29,7 @@ export default class ProgressBarScreen extends Component {
   }
 
   get customElement() {
-    return (
-      <View style={{backgroundColor: Colors.green30, borderWidth: 0.5, borderRadius: 4}}/>
-    );
+    return <View style={{backgroundColor: Colors.green30, borderWidth: 0.5, borderRadius: 4}}/>;
   }
 
   render() {
@@ -51,17 +47,15 @@ export default class ProgressBarScreen extends Component {
           <Text $textDefault text70 style={styles.text}>
             Default
           </Text>
-          <ProgressBar
-            progress={progresses[0]}
-            style={styles.progressBar}
-          />
+          <ProgressBar progress={progresses[0]} style={styles.progressBar}/>
 
           <Text $textDefault text70 style={styles.text}>
             FullWidth
           </Text>
           <ProgressBar
-            progress={progresses[1]}
+            progress={50}
             style={styles.fullWidthProgressBar}
+            progressStyle={{borderTopEndRadius: 0, borderBottomEndRadius: 0}}
             fullWidth
           />
 
@@ -69,19 +63,15 @@ export default class ProgressBarScreen extends Component {
             Styled
           </Text>
           <ProgressBar
-            progress={progresses[2]}
-            style={[styles.progressBar, styles.styledProgressBar]}
-            progressColor={Colors.purple70}
+            progress={50}
+            progressStyle={{borderRadius: 0, backgroundColor: Colors.purple70}}
+            style={[styles.progressBar, styles.styledProgressBar, {borderRadius: 0}]}
           />
 
           <Text $textDefault text70 style={styles.text}>
             Custom Element
           </Text>
-          <ProgressBar
-            progress={progresses[0]}
-            style={styles.progressBar}
-            customElement={this.customElement}
-          />
+          <ProgressBar progress={progresses[0]} style={styles.progressBar} customElement={this.customElement}/>
         </View>
       </ScrollView>
     );
@@ -103,6 +93,7 @@ const styles = StyleSheet.create({
     height: 30
   },
   fullWidthProgressBar: {
-    marginBottom: 10
+    marginBottom: 10,
+    height: 20
   }
 });
diff --git a/packages/react-native-ui-lib/src/components/progressBar/index.tsx b/packages/react-native-ui-lib/src/components/progressBar/index.tsx
index 86021500bd..814cba1a03 100644
--- a/packages/react-native-ui-lib/src/components/progressBar/index.tsx
+++ b/packages/react-native-ui-lib/src/components/progressBar/index.tsx
@@ -27,10 +27,20 @@ interface Props {
   fullWidth?: boolean;
   /**
    * Override container style
+   * @deprecated Use containerStyle instead
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Progress color
+   * Override container style
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Override progress style
+   */
+  progressStyle?: StyleProp<ViewStyle>;
+  /**
+   * @deprecated
+   * Use progressStyle.backgroundColor instead
    */
   progressColor?: string;
   /**
@@ -136,7 +146,7 @@ class ProgressBar extends PureComponent<Props, State> {
   }
 
   render() {
-    const {style, testID} = this.props;
+    const {style, containerStyle, testID, progressStyle} = this.props;
     const {containerWidth = 0} = this.state;
     const outputRange = Constants.isRTL ? [containerWidth, 0] : [0, containerWidth];
     const newProgress = this.progressAnimation.interpolate({
@@ -144,15 +154,17 @@ class ProgressBar extends PureComponent<Props, State> {
       outputRange
     });
 
+    const animatedStyle = {transform: [{translateX: newProgress}]};
+
     return (
       <View
         onLayout={this.getContainerWidth}
-        style={[styles.container, this.getContainerStyle(), style]}
+        style={[styles.container, this.getContainerStyle(), style, containerStyle]}
         {...this.getAccessibilityProps()}
         testID={testID}
       >
         {!!containerWidth && (
-          <Animated.View style={[styles.progress, this.getProgressStyle(), {transform: [{translateX: newProgress}]}]}>
+          <Animated.View style={[styles.progress, this.getProgressStyle(), progressStyle, animatedStyle]}>
             {this.renderCustomElement()}
           </Animated.View>
         )}
diff --git a/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json b/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
index 23cb723e03..bef408fdee 100644
--- a/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
+++ b/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
@@ -16,14 +16,14 @@
       "description": "FullWidth Ui preset"
     },
     {
-      "name": "style",
+      "name": "containerStyle",
       "type": "ViewStyle",
       "description": "Override container style"
     },
     {
-      "name": "progressColor",
-      "type": "string",
-      "description": "Progress color"
+      "name": "progressStyle",
+      "type": "ViewStyle",
+      "description": "Override progress style"
     },
     {
       "name": "customElement",

From dec495a70f93dc6a3a6d7bef0816e9fc59a6ce94 Mon Sep 17 00:00:00 2001
From: MIchaelZablianov <michaelza@wix.com>
Date: Wed, 31 Dec 2025 14:11:39 +0200
Subject: [PATCH 2/6] Update
 packages/react-native-ui-lib/src/components/progressBar/index.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../react-native-ui-lib/src/components/progressBar/index.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-native-ui-lib/src/components/progressBar/index.tsx b/packages/react-native-ui-lib/src/components/progressBar/index.tsx
index 814cba1a03..11ac9be1b3 100644
--- a/packages/react-native-ui-lib/src/components/progressBar/index.tsx
+++ b/packages/react-native-ui-lib/src/components/progressBar/index.tsx
@@ -39,8 +39,7 @@ interface Props {
    */
   progressStyle?: StyleProp<ViewStyle>;
   /**
-   * @deprecated
-   * Use progressStyle.backgroundColor instead
+   * @deprecated Use progressStyle.backgroundColor instead
    */
   progressColor?: string;
   /**

From 399683a6b186dae9252f6eebec62c259e09c142d Mon Sep 17 00:00:00 2001
From: MIchaelZablianov <michaelza@wix.com>
Date: Wed, 31 Dec 2025 14:12:00 +0200
Subject: [PATCH 3/6] Update
 demo/src/screens/componentScreens/ProgressBarScreen.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 demo/src/screens/componentScreens/ProgressBarScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/screens/componentScreens/ProgressBarScreen.tsx b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
index b31b400f4a..d478aea9e8 100644
--- a/demo/src/screens/componentScreens/ProgressBarScreen.tsx
+++ b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
@@ -53,7 +53,7 @@ export default class ProgressBarScreen extends Component {
             FullWidth
           </Text>
           <ProgressBar
-            progress={50}
+            progress={progresses[1]}
             style={styles.fullWidthProgressBar}
             progressStyle={{borderTopEndRadius: 0, borderBottomEndRadius: 0}}
             fullWidth

From 8dd7676f138fe7ead1374860cc12c4731b7af8c9 Mon Sep 17 00:00:00 2001
From: MIchaelZablianov <michaelza@wix.com>
Date: Wed, 31 Dec 2025 14:12:11 +0200
Subject: [PATCH 4/6] Update
 demo/src/screens/componentScreens/ProgressBarScreen.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 demo/src/screens/componentScreens/ProgressBarScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/screens/componentScreens/ProgressBarScreen.tsx b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
index d478aea9e8..101333302a 100644
--- a/demo/src/screens/componentScreens/ProgressBarScreen.tsx
+++ b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
@@ -63,7 +63,7 @@ export default class ProgressBarScreen extends Component {
             Styled
           </Text>
           <ProgressBar
-            progress={50}
+            progress={progresses[2]}
             progressStyle={{borderRadius: 0, backgroundColor: Colors.purple70}}
             style={[styles.progressBar, styles.styledProgressBar, {borderRadius: 0}]}
           />

From ef59e6b2d65285285bb633d33ddd8004410fd937 Mon Sep 17 00:00:00 2001
From: MIchaelZablianov <michaelza@wix.com>
Date: Wed, 31 Dec 2025 14:41:02 +0200
Subject: [PATCH 5/6] applied comments

---
 .../componentScreens/ProgressBarScreen.tsx    | 36 +++++++++++++------
 .../src/components/progressBar/index.tsx      |  2 +-
 .../progressBar/progressBar.api.json          |  5 +++
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/demo/src/screens/componentScreens/ProgressBarScreen.tsx b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
index 101333302a..9b6617e451 100644
--- a/demo/src/screens/componentScreens/ProgressBarScreen.tsx
+++ b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib';
+import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib';//eslint-disable-line
 
 export default class ProgressBarScreen extends Component {
   state = {
@@ -29,7 +29,9 @@ export default class ProgressBarScreen extends Component {
   }
 
   get customElement() {
-    return <View style={{backgroundColor: Colors.green30, borderWidth: 0.5, borderRadius: 4}}/>;
+    return (
+      <View style={{backgroundColor: Colors.green30, borderWidth: 0.5, borderRadius: 4}}/>
+    );
   }
 
   render() {
@@ -47,15 +49,17 @@ export default class ProgressBarScreen extends Component {
           <Text $textDefault text70 style={styles.text}>
             Default
           </Text>
-          <ProgressBar progress={progresses[0]} style={styles.progressBar}/>
+          <ProgressBar
+            progress={progresses[0]}
+            containerStyle={styles.progressBar}
+          />
 
           <Text $textDefault text70 style={styles.text}>
             FullWidth
           </Text>
           <ProgressBar
             progress={progresses[1]}
-            style={styles.fullWidthProgressBar}
-            progressStyle={{borderTopEndRadius: 0, borderBottomEndRadius: 0}}
+            containerStyle={styles.fullWidthProgressBar}
             fullWidth
           />
 
@@ -64,14 +68,27 @@ export default class ProgressBarScreen extends Component {
           </Text>
           <ProgressBar
             progress={progresses[2]}
-            progressStyle={{borderRadius: 0, backgroundColor: Colors.purple70}}
-            style={[styles.progressBar, styles.styledProgressBar, {borderRadius: 0}]}
+            containerStyle={[styles.progressBar, styles.styledProgressBar]}
+            progressColor={Colors.purple70}
           />
 
           <Text $textDefault text70 style={styles.text}>
             Custom Element
           </Text>
-          <ProgressBar progress={progresses[0]} style={styles.progressBar} customElement={this.customElement}/>
+          <ProgressBar
+            progress={progresses[0]}
+            containerStyle={styles.progressBar}
+            customElement={this.customElement}
+          />
+
+          <Text $textDefault text70 style={styles.text}>
+            Progress Style - Border Radius 0, 50% progress
+          </Text>
+          <ProgressBar
+            progress={50}
+            containerStyle={[styles.progressBar, styles.styledProgressBar, {borderRadius: 0}]}
+            progressStyle={{borderRadius: 0, backgroundColor: Colors.purple70}}
+          />
         </View>
       </ScrollView>
     );
@@ -93,7 +110,6 @@ const styles = StyleSheet.create({
     height: 30
   },
   fullWidthProgressBar: {
-    marginBottom: 10,
-    height: 20
+    marginBottom: 10
   }
 });
diff --git a/packages/react-native-ui-lib/src/components/progressBar/index.tsx b/packages/react-native-ui-lib/src/components/progressBar/index.tsx
index 11ac9be1b3..27f3e5b117 100644
--- a/packages/react-native-ui-lib/src/components/progressBar/index.tsx
+++ b/packages/react-native-ui-lib/src/components/progressBar/index.tsx
@@ -39,7 +39,7 @@ interface Props {
    */
   progressStyle?: StyleProp<ViewStyle>;
   /**
-   * @deprecated Use progressStyle.backgroundColor instead
+   * Progress color
    */
   progressColor?: string;
   /**
diff --git a/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json b/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
index bef408fdee..1700eeb553 100644
--- a/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
+++ b/packages/react-native-ui-lib/src/components/progressBar/progressBar.api.json
@@ -25,6 +25,11 @@
       "type": "ViewStyle",
       "description": "Override progress style"
     },
+    {
+      "name": "progressColor",
+      "type": "string",
+      "description": "Progress color"
+    },
     {
       "name": "customElement",
       "type": "JSX.Element",

From 5d12d2073d48ac3326cd939512ff586906d78d83 Mon Sep 17 00:00:00 2001
From: MIchaelZablianov <michaelza@wix.com>
Date: Wed, 31 Dec 2025 14:48:05 +0200
Subject: [PATCH 6/6] Update
 demo/src/screens/componentScreens/ProgressBarScreen.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 demo/src/screens/componentScreens/ProgressBarScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/screens/componentScreens/ProgressBarScreen.tsx b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
index 9b6617e451..bc87b6bbdb 100644
--- a/demo/src/screens/componentScreens/ProgressBarScreen.tsx
+++ b/demo/src/screens/componentScreens/ProgressBarScreen.tsx
@@ -82,7 +82,7 @@ export default class ProgressBarScreen extends Component {
           />
 
           <Text $textDefault text70 style={styles.text}>
-            Progress Style - Border Radius 0, 50% progress
+            Custom Style - No Border Radius, 50% progress
           </Text>
           <ProgressBar
             progress={50}