@xhsreds/reds-rn-next 0.8.3 → 0.8.4-beta202510231402

package/src/components/Button/demo/index.tsx

@@ -115,47 +115,37 @@ export default function App() {
         // iconLeft={<Icon icon={Mail} fill={themeColor.Title} size={22} />}
         // iconRight={<Icon icon={Close} fill={themeColor.Title} size={22} />}
       >
-        xLarge 超大 {themeColor.Title}
+        xLarge
       </Button>
 
       <Button onClick={onClick} size="large">
-        large 大
+        large
       </Button>
 
       <Button onClick={onClick} size="medium">
-        medium 中等
+        mid
       </Button>
 
       <Button onClick={onClick} size="small" variant="outline">
-        small 小
+        small
       </Button>
 
       <Button onClick={onClick} size="mini">
-        mini 极小
+        mini
       </Button>
 
       <Button onClick={onClick} size="micro">
-        micro 微型
+        mic
       </Button>
 
       <Button
         onClick={onClick}
         size="xLarge"
         shape="circle"
-        // iconLeft={<Icon icon={Close} fill="black" size={22} />}
+        iconLeft={<Text>🚀</Text>}
         // iconRight={<Icon icon={Close} />}
       ></Button>
 
-      <Button
-        onClick={onClick}
-        size="large"
-        shape="circle"
-        // iconLeft={<Icon icon={Close} size={20} />}
-        // iconRight={<Icon icon={Close} />}
-      >
-        large 大
-      </Button>
-
       <Button onClick={onClick} size="medium" shape="circle" iconLeft={<Text>🚀</Text>} iconRight={<Text>🚀</Text>}>
         中
       </Button>
@@ -185,7 +175,7 @@ export default function App() {
       </Button>
 
       <Button onClick={onClick} variant="ghost">
-        ghost 幽灵
+        ghost
       </Button>
 
       <Button onClick={onClick} variant="outline">
@@ -210,8 +200,8 @@ export default function App() {
         fill 填满 primary
       </Button>
 
-      <Button onClick={onClick} type="primary" variant="ghost">
-        ghost 幽灵 primary
+      <Button onClick={onClick} variant="ghost">
+        ghost
       </Button>
 
       <Button onClick={onClick} type="primary" variant="outline">
@@ -222,6 +212,10 @@ export default function App() {
         text 文本 primary
       </Button>
 
+      <Button onClick={onClick} type="fill" variant="text">
+        text 文本
+      </Button>
+
       <View style={{ ...styles.item, ...styles.block }}>
         <Button onClick={onClick} type="primary" variant="fill" block>
           占满整行

package/src/components/Button/styleMap.ts

@@ -9,6 +9,7 @@ export const getStyles = (props: RedsButton) => {
   return StyleSheet.create({
     button: {
       borderRadius: borderRadius as unknown as number,
+      boxSizing: "border-box",
       ...(props.outlineType === "shadow"
         ? {
             border: "none",
@@ -55,7 +56,7 @@ export const getStyles = (props: RedsButton) => {
         : {}),
     },
     block: {
-      // alignSelf: "stretch",
+      alignSelf: "stretch",
       width: "100%",
     },
   });
@@ -66,7 +67,6 @@ export const getSizeStyles = (props: RedsButton) => {
   const styles = {
     xLarge: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle
           ? { width: 48 }
           : {
@@ -82,13 +82,13 @@ export const getSizeStyles = (props: RedsButton) => {
       text: {
         fontSize: typography.T2FontSize,
         fontWeight: typography.T2FontWeight,
+        textAlign: "center",
       },
     }),
     large: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle
-          ? { width: 40 }
+          ? { width: 44 }
           : {
               minWidth: 96,
               display: "flex",
@@ -100,50 +100,51 @@ export const getSizeStyles = (props: RedsButton) => {
       text: {
         fontSize: typography.T2FontSize,
         fontWeight: typography.T2FontWeight,
+        textAlign: "center",
       },
     }),
     medium: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle ? { width: 36 } : { minWidth: 82, paddingHorizontal: 20 }),
         height: 36,
       },
       text: {
         fontSize: typography.T3FontSize,
         fontWeight: typography.T3FontWeight,
+        textAlign: "center",
       },
     }),
     small: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle ? { width: 28 } : { minWidth: 63, paddingHorizontal: 12 }),
         height: 28,
       },
       text: {
         fontSize: typography.C1FontSize,
         fontWeight: typography.T3FontWeight,
+        textAlign: "center",
       },
     }),
     mini: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle ? { width: 24 } : { minWidth: 52, paddingHorizontal: 8 }),
         height: 24,
       },
       text: {
         fontSize: typography.C2FontSize,
         fontWeight: typography.T3FontWeight,
+        textAlign: "center",
       },
     }),
     micro: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle ? { width: 20 } : { minWidth: 40, paddingHorizontal: 8 }),
         height: 20,
       },
       text: {
         fontSize: typography.C3FontSize,
         fontWeight: typography.T3FontWeight,
+        textAlign: "center",
       },
     }),
   };
@@ -174,8 +175,8 @@ export const getVariantStyles = (props: RedsButton) => {
     }),
     ghost: StyleSheet.create({
       button: {
-        borderColor: props.type === "primary" ? themeColor.Primary : themeColor.Paragraph,
-        backgroundColor: props.outlineType === "none" ? themeColor.Fill2 : alwaysColor.LightFill2,
+        borderColor: alwaysColor.LightParagraph,
+        backgroundColor: alwaysColor.LightFill2,
       },
       text: {
         color: props.type === "primary" ? themeColor.Primary : themeColor.Paragraph,
@@ -185,7 +186,6 @@ export const getVariantStyles = (props: RedsButton) => {
       button: {
         borderColor: props.type === "primary" ? themeColor.Primary : themeColor.Separator2,
         backgroundColor: "transparent",
-        boxSizing: "border-box",
       },
       text: {
         color: props.type === "primary" ? themeColor.Primary : themeColor.Title,