fix: button v15 调整 (#2893)

jdf2e · Dec 27, 2024 · 436eff4 · 436eff4
1 parent a91e0e2
commit 436eff4
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 139 deletions.
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
@@ -102,7 +102,10 @@
   &-round {
     border-radius: $button-border-radius;
 
-    &-xlarge,
+    &-xlarge {
+      border-radius: $button-xlarge-border-radius;
+    }
+
     &-large {
       border-radius: $button-large-border-radius;
     }
@@ -178,7 +181,7 @@
     padding: $button-large-padding;
     font-size: $button-large-font-size;
     font-weight: $button-large-font-weight;
-    border-radius: $radius-base;
+    border-radius: $radius-s;
 
     .nut-button-text {
       margin-left: $button-xlarge-text-icon-margin;
@@ -203,7 +206,7 @@
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
-    border-radius: $radius-s;
+    border-radius: $radius-xs;
 
     .nut-icon {
       font-size: $button-small-font-size;
@@ -220,7 +223,7 @@
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
-    border-radius: $radius-s;
+    border-radius: $radius-xs;
 
     .nut-icon {
       font-size: $button-mini-font-size;
@@ -246,6 +249,11 @@
       background: $button-primary-background-color;
       color: $button-primary-color;
       border-color: transparent;
+      font-weight: $font-weight-bold;
+      &.nut-button-small,
+      &.nut-button-mini {
+        font-weight: $font-weight;
+      }
     }
 
     &-disabled,
@@ -283,6 +291,9 @@
       }
     }
   }
+  &-primary.nut-button-solid.nut-button-normal {
+    font-weight: $font-weight-bold;
+  }
 
   &-success {
     color: $button-success-color;

diff --git a/src/packages/button/demos/h5/demo8.tsx b/src/packages/button/demos/h5/demo8.tsx
@@ -3,11 +3,9 @@ import { Button } from '@nutui/nutui-react'
 
 const Demo8 = () => {
   return (
-    <>
-      <Button block type="primary">
-        Block Button
-      </Button>
-    </>
+    <Button block type="primary">
+      Block Button
+    </Button>
   )
 }
 export default Demo8
diff --git a/src/packages/button/demos/taro/demo10.tsx b/src/packages/button/demos/taro/demo10.tsx
@@ -1,23 +1,13 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const App = () => {
-  const marginStyle = harmonyAndRn()
-    ? {
-        width: pxTransform(120),
-        marginRight: pxTransform(8),
-        marginTop: pxTransform(8),
-        marginLeft: pxTransform(8),
-        marginBottom: pxTransform(8),
-      }
-    : {
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
-      }
+  const marginStyle = {
+    width: harmony() ? 120 : 'auto',
+    margin: 8,
+  }
+
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button color="blue" style={marginStyle}>

diff --git a/src/packages/button/demos/taro/demo2.tsx b/src/packages/button/demos/taro/demo2.tsx
@@ -1,23 +1,10 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmony } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
-  const marginStyle = harmony()
-    ? {
-        width: pxTransform(90),
-        marginRight: pxTransform(8),
-        marginTop: pxTransform(8),
-        marginLeft: pxTransform(8),
-        marginBottom: pxTransform(8),
-      }
-    : {
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
-      }
+  const marginStyle = {
+    margin: 8,
+  }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" style={marginStyle}>

diff --git a/src/packages/button/demos/taro/demo3.tsx b/src/packages/button/demos/taro/demo3.tsx
@@ -1,14 +1,9 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   const marginStyle = {
-    width: pxTransform(80),
-    marginRight: pxTransform(8),
-    marginTop: pxTransform(8),
-    marginLeft: pxTransform(8),
-    marginBottom: pxTransform(8),
+    margin: 8,
   }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>

diff --git a/src/packages/button/demos/taro/demo4.tsx b/src/packages/button/demos/taro/demo4.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
 import { Plus, Star } from '@nutui/icons-react-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo4 = () => {
   const marginStyle = {
-    marginRight: pxTransform(8),
-    marginTop: pxTransform(8),
-    marginLeft: pxTransform(8),
-    marginBottom: pxTransform(8),
+    width: harmony() ? 140 : 'auto',
+    margin: 8,
   }
   return (
     <>
@@ -44,6 +42,7 @@ const Demo4 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-color-primary-light-pressed)`,
             borderColor: `var(--nutui-color-primary)`,
             color: `var(--nutui-color-primary)`,
@@ -58,6 +57,7 @@ const Demo4 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-gray-3)`,
             color: `var(--nutui-gray-7)`,
           }}
@@ -71,6 +71,7 @@ const Demo4 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-gray-1)`,
             color: `var(--nutui-gray-7)`,
           }}
@@ -81,30 +82,34 @@ const Demo4 = () => {
           type="default"
           icon={<Star />}
           rightIcon={<Star />}
-          style={{
-            margin: 8,
-          }}
+          style={marginStyle}
         >
           Button
         </Button>
         <Button
           shape="square"
           fill="outline"
           type="primary"
-          icon={<Plus />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           fill="outline"
           type="primary"
-          icon={<Plus />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           type="primary"
           fill="dashed"
-          icon={<Plus />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           shape="round"

diff --git a/src/packages/button/demos/taro/demo5.tsx b/src/packages/button/demos/taro/demo5.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
 import { Plus, Star } from '@nutui/icons-react-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo5 = () => {
   const marginStyle = {
-    marginRight: pxTransform(8),
-    marginTop: pxTransform(8),
-    marginLeft: pxTransform(8),
-    marginBottom: pxTransform(8),
+    width: harmony() ? 140 : 'auto',
+    margin: 8,
   }
   return (
     <>
@@ -59,6 +57,7 @@ const Demo5 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-gray-3)`,
             color: `var(--nutui-gray-5)`,
           }}
@@ -73,6 +72,7 @@ const Demo5 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-gray-1)`,
             color: `var(--nutui-gray-5)`,
           }}
@@ -83,9 +83,7 @@ const Demo5 = () => {
           disabled
           icon={<Star />}
           rightIcon={<Star />}
-          style={{
-            margin: 8,
-          }}
+          style={marginStyle}
         >
           Disabled
         </Button>
@@ -94,21 +92,27 @@ const Demo5 = () => {
           shape="square"
           fill="outline"
           type="primary"
-          icon={<Plus size="20" />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           disabled
           type="primary"
-          icon={<Plus size="20" />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           disabled
           type="primary"
           fill="dashed"
-          icon={<Plus />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           disabled

diff --git a/src/packages/button/demos/taro/demo6.tsx b/src/packages/button/demos/taro/demo6.tsx
@@ -1,23 +1,12 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmonyAndRn, rn } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo6 = () => {
-  const marginStyle = harmonyAndRn()
-    ? {
-        width: pxTransform(rn() ? 120 : 150),
-        marginRight: pxTransform(8),
-        marginTop: pxTransform(8),
-        marginLeft: pxTransform(8),
-        marginBottom: pxTransform(8),
-      }
-    : {
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
-      }
+  const marginStyle = {
+    width: harmony() ? 120 : 'auto',
+    margin: 8,
+  }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button shape="square" type="primary" style={marginStyle}>

diff --git a/src/packages/button/demos/taro/demo7.tsx b/src/packages/button/demos/taro/demo7.tsx
@@ -1,16 +1,12 @@
 import React, { useState } from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { rn } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo7 = () => {
   const [loading, setLoading] = useState(false)
   const marginStyle = {
-    width: pxTransform(rn() ? 90 : 120),
-    marginRight: pxTransform(8),
-    marginTop: pxTransform(8),
-    marginLeft: pxTransform(8),
-    marginBottom: pxTransform(8),
+    width: harmony() ? 120 : 'auto',
+    margin: 8,
   }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>