fix(progress): fix style & support icon demo (#2729)

* chore: support icon demo * chore: support icon demo * chore: support icon demo * chore: update * chore: update * fix: 修改背景色 * fix: 修改背景色 --------- Co-authored-by: xiaoyatong <[email protected]> Co-authored-by: hanyuxinting <[email protected]>
jdf2e · Nov 20, 2024 · aeabe98 · aeabe98
1 parent 5bcca3b
commit aeabe98
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 44 deletions.
diff --git a/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap b/src/packages/progress/__tests__/__snapshots__/progress.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`should render progress when use props 1`] = `
     >
       <div
         class="nut-progress-inner"
-        style="width: 100%; background-color: #FF0F23;"
+        style="width: 100%; background: #FF0F23;"
       />
     </div>
   </div>

diff --git a/src/packages/progress/__tests__/progress.spec.tsx b/src/packages/progress/__tests__/progress.spec.tsx
@@ -13,9 +13,7 @@ test('should render different height and color when use color height props', asy
     <Progress percent={50} color="blue" strokeWidth="20" />
   )
   const inner = container.querySelector('.nut-progress-inner')
-  expect(inner?.getAttribute('style')).toBe(
-    'width: 50%; background-color: blue;'
-  )
+  expect(inner?.getAttribute('style')).toBe('width: 50%; background: blue;')
 })
 
 test('should show percent when use showText props', () => {

diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/demo.taro.tsx
@@ -56,12 +56,8 @@ const ProgressDemo = () => {
         <Demo2 />
         <View className="h2">{translated.noShowPercentage}</View>
         <Demo3 />
-        {!harmonyAndRn() && (
-          <>
-            <View className="h2">{translated.customContent}</View>
-            <Demo4 />
-          </>
-        )}
+        <View className="h2">{translated.customContent}</View>
+        <Demo4 />
         <View className="h2">{translated.customSize}</View>
         <Demo5 />
         <View className="h2">{translated.statusDisplay}</View>

diff --git a/src/packages/progress/demos/h5/demo4.tsx b/src/packages/progress/demos/h5/demo4.tsx
@@ -6,9 +6,9 @@ const Demo4 = () => {
     <Cell>
       <Progress percent={60} showText>
         <Image
-          width="30px"
-          height="30px"
-          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+          width="20"
+          height="20"
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
         />
       </Progress>
     </Cell>

diff --git a/src/packages/progress/demos/h5/demo6.tsx b/src/packages/progress/demos/h5/demo6.tsx
@@ -8,7 +8,7 @@ const Demo6 = () => {
       <Cell>
         <Progress
           percent={30}
-          color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
+          color="linear-gradient(270deg, rgb(18, 126, 255) 0%, rgb(32, 147, 255) 32.8156%, rgb(13, 242, 204) 100%)"
           animated
         />
       </Cell>

diff --git a/src/packages/progress/demos/taro/demo4.tsx b/src/packages/progress/demos/taro/demo4.tsx
@@ -6,8 +6,8 @@ const Demo4 = () => {
     <Cell>
       <Progress percent={60} showText>
         <Image
-          width="30px"
-          height="30px"
+          width={20}
+          height={20}
           src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
         />
       </Progress>

diff --git a/src/packages/progress/demos/taro/demo6.tsx b/src/packages/progress/demos/taro/demo6.tsx
@@ -1,40 +1,34 @@
 import React from 'react'
 import { Progress, Cell } from '@nutui/nutui-react-taro'
 import { Checked, Tips } from '@nutui/icons-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo6 = () => {
+  const iconStyle = {
+    marginTop: 0,
+    marginLeft: pxTransform(5),
+    marginRight: pxTransform(5),
+  }
   return (
     <>
       <Cell>
         <Progress
           percent={30}
-          color={
-            harmonyAndRn()
-              ? 'blue'
-              : 'linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)'
-          }
+          color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
           animated
         />
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
-        {!harmonyAndRn() && (
-          <Checked color="green" style={{ margin: '0 5px' }} />
-        )}
+        <Checked color="green" style={iconStyle} />
       </Cell>
       <Cell align="center">
-        <Progress percent={100} color="#AAFF00" strokeWidth="15" />
-        {!harmonyAndRn() && (
-          <Tips
-            color={
-              harmonyAndRn()
-                ? 'red'
-                : 'linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)'
-            }
-            style={{ margin: '0 5px' }}
-          />
-        )}
+        <Progress
+          percent={100}
+          color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
+          strokeWidth="15"
+        />
+        <Tips color="#FF0000" style={iconStyle} />
       </Cell>
     </>
   )

diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss
@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background-color: $progress-color;
+    background: $progress-color;
   }
 
   &-text {
@@ -39,7 +39,7 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    // transform: translate(-50%);
+    transform: translate(-50%);
 
     &-inner {
       display: flex;

diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
@@ -65,7 +65,7 @@ export const Progress: FunctionComponent<
 
   const stylesInner: React.CSSProperties = {
     width: `${displayPercent}%`,
-    backgroundColor: color || '#FF0F23',
+    background: color || '#FF0F23',
   }
 
   if (strokeWidth) {
@@ -160,8 +160,7 @@ export const Progress: FunctionComponent<
     }
   }, [])
   const getTextStyle = () => {
-    const value = harmony() ? '93%' : '99%'
-    return rtl ? { right: value } : { left: value }
+    return rtl ? { right: '100%' } : { left: '100%' }
   }
   const computeRight = () => {
     if (children) {

diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx
@@ -61,7 +61,7 @@ export const Progress: FunctionComponent<
 
   const stylesInner: React.CSSProperties = {
     width: `${displayPercent}%`,
-    backgroundColor: color || '#FF0F23',
+    background: color || '#FF0F23',
   }
 
   useEffect(() => {

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1637,7 +1637,10 @@ $popover-menu-item-padding: var(
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;
-$progress-color: var(--nutui-progress-color, #ff0f23) !default;
+$progress-color: var(
+  --nutui-progress-color,
+  $color-primary-gradient-1
+) !default;
 $progress-background: var(
   --nutui-progress-background,
   $color-background
@@ -1649,7 +1652,7 @@ $progress-text-color: var(
 ) !default;
 $progress-text-background: var(
   --nutui-progress-text-background,
-  #ff0f23
+  $color-primary-gradient-1
 ) !default;
 $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
 $progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ exports[`should render progress when use props 1`] = ` @@
         >
           <div
             class="nut-progress-inner"
-            style="width: 100%; background-color: #FF0F23;"
+            style="width: 100%; background: #FF0F23;"
           />
         </div>
       </div>
@@ Expand Down @@