From dc39b979d6dbea63d2031cc6ea33b197fe6b6b5a Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 28 Nov 2024 15:51:18 +0800 Subject: [PATCH 01/14] fix: update marking --- src/config.json | 3 ++- src/styles/variables.scss | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/config.json b/src/config.json index 1ba789e265..c8f0955e7a 100644 --- a/src/config.json +++ b/src/config.json @@ -724,6 +724,7 @@ "sort": 4, "show": true, "taro": true, + "v14": true, "author": "lzz" }, { @@ -1244,4 +1245,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index d471a05575..441a227dd7 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1602,7 +1602,7 @@ $badge-content-transform: var( translateX(100%) ) !default; $badge-z-index: var(--nutui-badge-z-index, 1) !default; -$badge-dot-width: var(--nutui-badge-dot-width, 7px) !default; +$badge-dot-width: var(--nutui-badge-dot-width, 6px) !default; $badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary-text); //popover（✅） From 8a1dad145cc24f40bf8dd9d102bc86e8d7e085dc Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 3 Dec 2024 19:35:08 +0800 Subject: [PATCH 02/14] =?UTF-8?q?fix:=20v14=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/badge/badge.scss | 64 ++++++++++++++--------- src/packages/badge/badge.taro.tsx | 54 ++++++++------------ src/packages/badge/badge.tsx | 49 +++++++++--------- src/packages/badge/demos/h5/demo1.tsx | 58 +++++++++++++++------ src/packages/badge/demos/h5/demo2.tsx | 8 +-- src/packages/badge/demos/h5/demo3.tsx | 20 ++------ src/packages/badge/demos/h5/demo4.tsx | 17 ++----- src/packages/badge/demos/h5/demo5.tsx | 22 +++----- src/packages/badge/demos/h5/demo6.tsx | 14 +++--- src/packages/badge/demos/h5/demo7.tsx | 8 +-- src/packages/badge/demos/h5/demo8.tsx | 13 ++--- src/packages/badge/demos/taro/demo1.tsx | 67 ++++++++++++++++--------- src/packages/badge/demos/taro/demo2.tsx | 25 +++------ src/packages/badge/demos/taro/demo3.tsx | 39 ++++++-------- src/packages/badge/demos/taro/demo4.tsx | 47 ++++------------- src/packages/badge/demos/taro/demo5.tsx | 34 ++++--------- src/packages/badge/demos/taro/demo6.tsx | 23 +++------ src/packages/badge/demos/taro/demo7.tsx | 14 ++---- src/packages/badge/demos/taro/demo8.tsx | 25 +++------ src/packages/badge/doc.md | 4 +- src/packages/badge/types.ts | 15 ++++++ src/styles/variables.scss | 23 ++++----- 22 files changed, 297 insertions(+), 346 deletions(-) create mode 100644 src/packages/badge/types.ts diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss index b320fffc1a..fcd35c0822 100644 --- a/src/packages/badge/badge.scss +++ b/src/packages/badge/badge.scss @@ -2,14 +2,7 @@ position: relative; display: inline-flex; width: auto; - /* #ifdef harmony */ - min-width: 1px; - /* #endif */ - /* #ifndef harmony */ - min-width: auto; - /* #endif */ &-icon { - position: absolute; display: flex; justify-content: center; align-items: center; @@ -29,46 +22,69 @@ &-sup { height: $badge-height; - position: absolute; - display: flex; - justify-content: center; - align-items: center; + display: inline-flex; + vertical-align: middle; + border: $badge-border; + color: $badge-color; + box-sizing: border-box; + min-width: $badge-min-width; + padding: $badge-padding; + font-size: $badge-font-size; /* #ifdef harmony */ - background: $color-primary; + line-height: 12px; /* #endif */ /* #ifndef harmony */ - background: $badge-background-color; + line-height: 11px; /* #endif */ - color: $badge-color; - padding: $badge-padding; - font-size: $badge-font-size; + white-space: nowrap; font-weight: normal; text-align: center; - border: $badge-border; + background: $badge-background-color; border-radius: $badge-border-radius; - min-width: $badge-min-width; - white-space: nowrap; z-index: 1; } + &-outline { + /* #ifdef harmony */ + line-height: 1; + /* #endif */ + } + + &-number { + font-family: 'JD'; + line-height: 12px; + } + &-one { height: $badge-height; width: $badge-height; - padding: 0; + justify-content: center; } &-content { - /* #ifndef rn */ + position: absolute; transform: $badge-content-transform; - /* #endif */ } &-dot { - width: $badge-dot-width; - height: $badge-dot-width; border: $badge-dot-border; border-radius: $badge-dot-width; padding: 0; + &-normal { + min-width: $badge-dot-width; + width: $badge-dot-width; + height: $badge-dot-width; + } + &-small { + min-width: $badge-dot-small-width; + width: $badge-dot-small-width; + height: $badge-dot-small-width; + } + &-large { + min-width: $badge-dot-large-width; + width: $badge-dot-large-width; + height: $badge-dot-large-width; + } } &-outline { diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx index 339a6254c6..3c95cd57c7 100644 --- a/src/packages/badge/badge.taro.tsx +++ b/src/packages/badge/badge.taro.tsx @@ -1,38 +1,28 @@ import React, { CSSProperties, FunctionComponent, - ReactNode, useEffect, useRef, useState, } from 'react' import classNames from 'classnames' import { View } from '@tarojs/components' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' import pxTransform from '@/utils/px-transform' -import { getRectByTaro } from '@/utils/get-rect-by-taro' -import { harmony, rn } from '@/utils/platform-taro' +import { harmony } from '@/utils/platform-taro' +import { BadgeProps } from './types' -export type BadgeFill = 'solid' | 'outline' -export interface BadgeProps extends BasicComponent { - value: ReactNode - dot: boolean - max: number - top: string | number - right: string | number - color: string - fill: BadgeFill -} const defaultProps = { ...ComponentDefaults, value: '', dot: false, max: 99, - top: '4', - right: '8', + top: 0, + right: 0, color: '', fill: 'solid', + size: 'large', } as BadgeProps export const Badge: FunctionComponent> = (props) => { const rtl = useRtl() @@ -47,6 +37,7 @@ export const Badge: FunctionComponent> = (props) => { right, color, fill, + size, } = { ...defaultProps, ...props, @@ -77,12 +68,15 @@ export const Badge: FunctionComponent> = (props) => { if (typeof value === 'string' && value) return value } - const contentClasses = classNames(`${classPrefix}-content`, { + const contentClasses = classNames({ [`${classPrefix}-sup`]: isNumber() || isString() || dot, + [`${classPrefix}-number`]: isNumber(), [`${classPrefix}-one`]: typeof content() === 'string' && `${content()}`?.length === 1, [`${classPrefix}-dot`]: dot, + [`${classPrefix}-dot-${size}`]: dot, [`${classPrefix}-${fill}`]: fill === 'outline', + [`${classPrefix}-content`]: children, }) useEffect(() => { @@ -92,30 +86,22 @@ export const Badge: FunctionComponent> = (props) => { }, []) const getPositionStyle = async () => { const style: CSSProperties = {} - style.top = pxTransform(-Number(top) || 0) - if (rn()) { - const reacts = await getRectByTaro(badgeRef.current) - style.left = - reacts?.width && reacts?.width > Number(right) - ? pxTransform(reacts.width - Number(right)) - : 0 - } else { - const dir = rtl ? 'left' : 'right' - style[dir] = isHarmony - ? pxTransform(Number(right)) - : `${Number(right) || parseFloat(String(right)) || 0}px` - } + style.top = pxTransform(Number(top) || 0) + const dir = rtl ? 'left' : 'right' + style[dir] = isHarmony + ? pxTransform(Number(right)) + : `${Number(right) || 0}px` setContentStyle(style) } - const getStyle = () => { + const getCustomStyle = () => { const style: CSSProperties = {} if (color) { if (fill === 'outline') { style.color = color isHarmony - ? (style.backgroundColor = '#fff') - : (style.background = '#fff') + ? (style.backgroundColor = '#FFFFFF') + : (style.background = '#FFFFFF') if (!color?.includes('gradient')) { style.borderColor = color } @@ -144,7 +130,7 @@ export const Badge: FunctionComponent> = (props) => { {!isIcon() && ( {content()} diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx index a49031bc24..7affde6f4a 100644 --- a/src/packages/badge/badge.tsx +++ b/src/packages/badge/badge.tsx @@ -1,28 +1,19 @@ -import React, { CSSProperties, FunctionComponent, ReactNode } from 'react' +import React, { CSSProperties, FunctionComponent } from 'react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider' +import { BadgeProps } from './types' -export type BadgeFill = 'solid' | 'outline' - -export interface BadgeProps extends BasicComponent { - value: ReactNode - dot: boolean - max: number - top: string | number - right: string | number - color: string - fill: BadgeFill -} const defaultProps = { ...ComponentDefaults, value: '', dot: false, max: 99, - top: '4', - right: '8', + top: 0, + right: 0, color: '', fill: 'solid', + size: 'large', } as BadgeProps export const Badge: FunctionComponent> = (props) => { const rtl = useRtl() @@ -37,14 +28,13 @@ export const Badge: FunctionComponent> = (props) => { right, color, fill, + size, } = { ...defaultProps, ...props, } const classPrefix = 'nut-badge' - const classes = classNames(classPrefix, className, { - [`${classPrefix}-${fill}`]: fill === 'outline', - }) + const classes = classNames(classPrefix, className) function content() { if (dot || typeof value === 'object' || value === 0) return null @@ -66,28 +56,35 @@ export const Badge: FunctionComponent> = (props) => { if (typeof value === 'string' && value) return value } - const contentClasses = classNames(`${classPrefix}-content`, { + const contentClasses = classNames({ [`${classPrefix}-sup`]: isNumber() || isString() || dot, + [`${classPrefix}-number`]: isNumber(), [`${classPrefix}-one`]: typeof content() === 'string' && `${content()}`?.length === 1, [`${classPrefix}-dot`]: dot, + [`${classPrefix}-dot-${size}`]: dot, [`${classPrefix}-${fill}`]: fill === 'outline', + [`${classPrefix}-content`]: children, }) - const getStyle = () => { + const getPositionStyle = () => { const style: CSSProperties = {} - style.top = `${Number(-top) || parseFloat(String(-top)) || 0}px` + style.top = `${Number(top) || 0}px` const dir = rtl ? 'left' : 'right' style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px` + return style + } + const getCustomStyle = () => { + const style: CSSProperties = {} if (color) { if (fill === 'outline') { style.color = color - style.background = '#fff' + style.background = '#FFFFFF' if (!color?.includes('gradient')) { style.border = `1px solid ${color}` } } else { - style.color = '#fff' + style.color = '#FFFFFF' style.background = color } } @@ -101,13 +98,17 @@ export const Badge: FunctionComponent> = (props) => { [`${classPrefix}-icon`]: true, [`${classPrefix}-icon-rtl`]: rtl, })} + style={getPositionStyle()} > {value} )} {children} {!isIcon() && ( -
+
{content()}
)} diff --git a/src/packages/badge/demos/h5/demo1.tsx b/src/packages/badge/demos/h5/demo1.tsx index 8e542d0e10..f627259e76 100644 --- a/src/packages/badge/demos/h5/demo1.tsx +++ b/src/packages/badge/demos/h5/demo1.tsx @@ -1,23 +1,51 @@ -import { User } from '@nutui/icons-react' +import { Dongdong, User } from '@nutui/icons-react' import { Avatar, Badge, Cell } from '@nutui/nutui-react' import React from 'react' const Demo1 = () => { + const renderText = () => { + return ( + + 文字内容 + + ) + } return ( - - - } shape="square" /> - - - } shape="square" /> - - - } shape="square" /> - - - } shape="square" /> - - + <> + + {renderText()} + + + + + } shape="square" /> + + + + {renderText()} + + + + + } shape="square" /> + + + + + {renderText()} + + + + + + } shape="square" /> + + + ) } export default Demo1 diff --git a/src/packages/badge/demos/h5/demo2.tsx b/src/packages/badge/demos/h5/demo2.tsx index 12d6101cf3..b7e93fdf47 100644 --- a/src/packages/badge/demos/h5/demo2.tsx +++ b/src/packages/badge/demos/h5/demo2.tsx @@ -4,14 +4,14 @@ import { User } from '@nutui/icons-react' const Demo2 = () => { return ( - - + + } shape="square" /> - + } shape="square" /> - + } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo3.tsx b/src/packages/badge/demos/h5/demo3.tsx index e173df2f4d..4377398801 100644 --- a/src/packages/badge/demos/h5/demo3.tsx +++ b/src/packages/badge/demos/h5/demo3.tsx @@ -4,33 +4,21 @@ import { User } from '@nutui/icons-react' const Demo3 = () => { return ( - + - } shape="square" /> - - } shape="square" /> } shape="square" /> } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo4.tsx b/src/packages/badge/demos/h5/demo4.tsx index 38eb81691b..29b41b1695 100644 --- a/src/packages/badge/demos/h5/demo4.tsx +++ b/src/packages/badge/demos/h5/demo4.tsx @@ -4,23 +4,14 @@ import { User, Checklist, Link as LinkIcon, Download } from '@nutui/icons-react' const Demo4 = () => { return ( - - } - > + + }> } shape="square" /> - } - > + }> } shape="square" /> - } - > + }> } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo5.tsx b/src/packages/badge/demos/h5/demo5.tsx index 034634ddd4..02114f4892 100644 --- a/src/packages/badge/demos/h5/demo5.tsx +++ b/src/packages/badge/demos/h5/demo5.tsx @@ -6,23 +6,17 @@ const customTheme = { nutuiBadgeBorderRadius: '12px 12px 12px 0', } -const customTheme2 = { - nutuiBadgeDotWidth: '14px', - nutuiBadgeDotHeight: '14px', - nutuiBadgeBorder: '2px solid #fff', -} - const Demo5 = () => { return ( - + + + } shape="square" /> + + + } shape="square" /> + - - } shape="square" /> - - - - - + } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo6.tsx b/src/packages/badge/demos/h5/demo6.tsx index c933a73c3a..66f7e37bbe 100644 --- a/src/packages/badge/demos/h5/demo6.tsx +++ b/src/packages/badge/demos/h5/demo6.tsx @@ -4,15 +4,15 @@ import React from 'react' const Demo6 = () => { return ( - - - } shape="square" /> + + + } /> - - } shape="square" /> + + } /> - - } shape="square" /> + + } /> ) diff --git a/src/packages/badge/demos/h5/demo7.tsx b/src/packages/badge/demos/h5/demo7.tsx index d8b63f6d54..7ec29a60e7 100644 --- a/src/packages/badge/demos/h5/demo7.tsx +++ b/src/packages/badge/demos/h5/demo7.tsx @@ -3,10 +3,10 @@ import React from 'react' const Demo7 = () => { return ( - - - - + + + + ) } diff --git a/src/packages/badge/demos/h5/demo8.tsx b/src/packages/badge/demos/h5/demo8.tsx index 6124b11036..7c1e2f0f90 100644 --- a/src/packages/badge/demos/h5/demo8.tsx +++ b/src/packages/badge/demos/h5/demo8.tsx @@ -4,19 +4,14 @@ import React from 'react' const Demo8 = () => { return ( - - + + } shape="square" /> - + } shape="square" /> - + } shape="square" /> diff --git a/src/packages/badge/demos/taro/demo1.tsx b/src/packages/badge/demos/taro/demo1.tsx index 7f51d295ee..cdb42f65e3 100644 --- a/src/packages/badge/demos/taro/demo1.tsx +++ b/src/packages/badge/demos/taro/demo1.tsx @@ -1,32 +1,53 @@ -import { User } from '@nutui/icons-react-taro' -import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' import React from 'react' +import { Dongdong, User } from '@nutui/icons-react-taro' +import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' +import { Text } from '@tarojs/components' import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo1 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> + const renderText = () => { + return ( + + 文字内容 + + ) } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} - - - {renderChildren()} - - - {renderChildren()} - - - {renderChildren()} - - + <> + + {renderText()} + + + + + } shape="square" /> + + + + {renderText()} + + + + + } shape="square" /> + + + + + {renderText()} + + + + + + } shape="square" /> + + + ) } export default Demo1 diff --git a/src/packages/badge/demos/taro/demo2.tsx b/src/packages/badge/demos/taro/demo2.tsx index 1bb5941275..2764308982 100644 --- a/src/packages/badge/demos/taro/demo2.tsx +++ b/src/packages/badge/demos/taro/demo2.tsx @@ -1,27 +1,18 @@ +import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' -import React from 'react' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo2 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} + + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> ) diff --git a/src/packages/badge/demos/taro/demo3.tsx b/src/packages/badge/demos/taro/demo3.tsx index 1eafbbf3f6..7dde11160b 100644 --- a/src/packages/badge/demos/taro/demo3.tsx +++ b/src/packages/badge/demos/taro/demo3.tsx @@ -1,36 +1,27 @@ +import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' -import React from 'react' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo3 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} - - - {renderChildren()} + + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> - {renderChildren()} + } shape="square" /> ) diff --git a/src/packages/badge/demos/taro/demo4.tsx b/src/packages/badge/demos/taro/demo4.tsx index e52bf7a2cd..fd4442e772 100644 --- a/src/packages/badge/demos/taro/demo4.tsx +++ b/src/packages/badge/demos/taro/demo4.tsx @@ -1,46 +1,19 @@ -import { Checklist, User } from '@nutui/icons-react-taro' -import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' import React from 'react' -import { Icon } from '@tarojs/components' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' +import { Checklist, User, Dongdong, Download } from '@nutui/icons-react-taro' +import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' const Demo4 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } - const renderIcon = () => { - return ( - <> - {isRnAndHarmony ? ( - - ) : ( - - )} - - ) - } return ( - - - {renderChildren()} + + }> + } shape="square" /> + + }> + } shape="square" /> - {/* } - > - {renderChildren()} + }> + } shape="square" /> - } - > - {renderChildren()} - */} ) } diff --git a/src/packages/badge/demos/taro/demo5.tsx b/src/packages/badge/demos/taro/demo5.tsx index 1bab589954..06feb167d1 100644 --- a/src/packages/badge/demos/taro/demo5.tsx +++ b/src/packages/badge/demos/taro/demo5.tsx @@ -1,38 +1,24 @@ +import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell, ConfigProvider } from '@nutui/nutui-react-taro' -import React from 'react' import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const customTheme = { nutuiBadgeBorderRadius: `${pxTransform(12)} ${pxTransform(12)} ${pxTransform(12)} 0`, } -const customTheme2 = { - nutuiBadgeDotWidth: pxTransform(14), - nutuiBadgeDotHeight: pxTransform(14), - nutuiBadgeBorder: `${pxTransform(2)} solid #000`, -} - const Demo5 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - + + + } shape="square" /> + + + } shape="square" /> + - - {renderChildren()} - - - - - - {renderChildren()} + + } shape="square" /> diff --git a/src/packages/badge/demos/taro/demo6.tsx b/src/packages/badge/demos/taro/demo6.tsx index bfaf5b92ea..a245e37280 100644 --- a/src/packages/badge/demos/taro/demo6.tsx +++ b/src/packages/badge/demos/taro/demo6.tsx @@ -1,27 +1,18 @@ import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' import React from 'react' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo6 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} + + + } /> - - {renderChildren()} + + } /> - - {renderChildren()} + + } /> ) diff --git a/src/packages/badge/demos/taro/demo7.tsx b/src/packages/badge/demos/taro/demo7.tsx index 2aecef14b1..089388c9ae 100644 --- a/src/packages/badge/demos/taro/demo7.tsx +++ b/src/packages/badge/demos/taro/demo7.tsx @@ -1,18 +1,12 @@ import React from 'react' import { Badge, Cell } from '@nutui/nutui-react-taro' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo7 = () => { - const isRnAndHarmony = harmonyAndRn() - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - - + + + + ) } diff --git a/src/packages/badge/demos/taro/demo8.tsx b/src/packages/badge/demos/taro/demo8.tsx index 75f1be594f..2259c09c08 100644 --- a/src/packages/badge/demos/taro/demo8.tsx +++ b/src/packages/badge/demos/taro/demo8.tsx @@ -1,27 +1,18 @@ +import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' -import React from 'react' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo8 = () => { - const isRnAndHarmony = harmonyAndRn() - const renderChildren = () => { - return } shape="square" /> - } - const marginStyles = isRnAndHarmony - ? { marginRight: pxTransform(40) } - : { marginInlineEnd: '40px' } return ( - - - {renderChildren()} + + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> - - {renderChildren()} + + } shape="square" /> ) diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md index a6643dfebb..acdd4dc3d3 100644 --- a/src/packages/badge/doc.md +++ b/src/packages/badge/doc.md @@ -83,8 +83,8 @@ import { Badge } from '@nutui/nutui-react' | value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` | -| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` | -| right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` | +| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `0` | +| right | 左右偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `0` | | color | 徽标背景颜色,默认值为当前主题色 | `string` | `-` | | fill | 填充模式 | `solid` \| `outline` | `solid` | diff --git a/src/packages/badge/types.ts b/src/packages/badge/types.ts new file mode 100644 index 0000000000..58d1dc6750 --- /dev/null +++ b/src/packages/badge/types.ts @@ -0,0 +1,15 @@ +import { BasicComponent } from '@/utils/typings' + +export type BadgeFill = 'solid' | 'outline' +export type BadgeDotSize = 'small' | 'normal' | 'large' + +export interface BadgeProps extends BasicComponent { + value: React.ReactNode + dot: boolean + max: number + top: string | number + right: string | number + color: string + fill: BadgeFill + size: BadgeDotSize +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 825b69709b..3cf39b826e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1584,26 +1584,25 @@ $tag-mark-border-radius: var( $badge-height: var(--nutui-badge-height, 14px) !default; $badge-background-color: var( --nutui-badge-background-color, - $color-primary-gradient-1 + $color-primary ) !default; -$badge-color: var(--nutui-badge-color, #fff) !default; +$badge-color: var(--nutui-badge-color, $color-primary-text) !default; $badge-font-size: var(--nutui-badge-font-size, $font-size-xxs) !default; -$badge-border: var( - --nutui-badge-border, - 0px solid $color-primary-text -) !default; +$badge-border: var(--nutui-badge-border, 0px solid $color-primary) !default; $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default; -$badge-min-width: var(--nutui-badge-min-width, 5px) !default; -$badge-padding: var(--nutui-badge-padding, 0 4px) !default; -$badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default; -$badge-icon-size: var(--nutui-badge-icon-size, 12px) !default; +$badge-min-width: var(--nutui-badge-min-width, 6px) !default; +$badge-padding: var(--nutui-badge-padding, 1px 4px) !default; +$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default; +$badge-icon-size: var(--nutui-badge-icon-size, 10px) !default; $badge-content-transform: var( --nutui-badge-content-transform, - translateX(100%) + translate(50%, -50%) ) !default; $badge-z-index: var(--nutui-badge-z-index, 1) !default; $badge-dot-width: var(--nutui-badge-dot-width, 6px) !default; -$badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary-text); +$badge-dot-small-width: var(--nutui-badge-dot-width, 4px) !default; +$badge-dot-large-width: var(--nutui-badge-dot-width, 8px) !default; +$badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary); //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default; From da57a853828939261908fe221ed5108e25a065cd Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 3 Dec 2024 20:19:23 +0800 Subject: [PATCH 03/14] fix: update docs --- migrate-from-v2.md | 1 + src/packages/badge/doc.en-US.md | 30 +++++++++++++++++------------- src/packages/badge/doc.md | 19 +++++++++++-------- src/packages/badge/doc.taro.md | 19 +++++++++++-------- src/packages/badge/doc.zh-TW.md | 19 +++++++++++-------- 5 files changed, 51 insertions(+), 37 deletions(-) diff --git a/migrate-from-v2.md b/migrate-from-v2.md index 5bd3f8ec5e..fbfd69b780 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -670,6 +670,7 @@ plugins: [ - 修改 `max` 的最大值为99（之前为10000），比较贴合实际场景。 - 主题定制的 `css` 变量中，去掉和 `dot` 有关的其他值，只保留 `width`。其他值由 `width` 计算而来. - 主题定制，增加包含 icon 情况下的样式变量。 +- 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效 #### CircleProgress diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md index 90f1f32589..c830611451 100644 --- a/src/packages/badge/doc.en-US.md +++ b/src/packages/badge/doc.en-US.md @@ -83,6 +83,8 @@ import { Badge } from '@nutui/nutui-react' | value | value to show, eg number、charctor and custom content | `ReactNode` | `-` | | max | when value is number, it's the max size | `number` | `99` | | dot | Is dotted, When `value` is a custom content, dot does not take effect | `boolean` | `false` | + +| size | dot size, effective when dot is equal to `true` | `small` \| `normal` \| `large` | `large` | | top | Up and down offset, support unit setting, can be set to: "0" or 0, etc. | `string` \| `number` | `"0"` | | right | Left and right offset, support unit setting, can be set to: "5" or 5, etc. | `string` \| `number` | `"5"` | | color | background color,the default value is the theme primary color | `string` | `-` | @@ -96,17 +98,19 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-badge-height | badge height | `14px` | -| \--nutui-badge-background-color | badge background color | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | -| \--nutui-badge-color | badge content color | `#fff` | -| \--nutui-badge-font-size | badge content font size | `$font-size-s` | +| \--nutui-badge-height | The height of the badge | `14px` | +| \--nutui-badge-background-color | badge background color | `$color-primary` | +| \--nutui-badge-color | badge content color value | `$color-primary-text)` | +| \--nutui-badge-font-size | badge content font size | `$font-size-xxs` | | \--nutui-badge-border | badge border | `0px solid $color-primary-text` | -| \--nutui-badge-border-radius | badge border-radius | `14px` | -| \--nutui-badge-min-width | badge min-width | `5px` | -| \--nutui-badge-padding | badge padding value | `0 5px` | -| \--nutui-badge-icon-padding | when badge is icon,badge padding | `2px` | -| \--nutui-badge-icon-size | when badge is icon,badge size | `12px` | -| \--nutui-badge-content-transform | badge content transform | `translateY(-50%) translateX(100%)` | -| \--nutui-badge-z-index | when badge is icon, badge z-index | `1` | -| \--nutui-badge-dot-width | when badge is dot, the dot width,height and border radius | `7px` | -| \--nutui-badge-dot-border | when badge is dot, the dot border | `0px solid $color-primary-text` | +| \--nutui-badge-border-radius | badge border rounded corners | `14px` | +| \--nutui-badge-min-width | badge minimum width | `6px` | +| \--nutui-badge-padding | badge’s padding value | `1px 4px` | +| \--nutui-badge-icon-padding | The padding value when badge is a custom icon | `2px` | +| \--nutui-badge-icon-size | The size of badge when it is a custom icon | `10px` | +| \--nutui-badge-content-transform | badge content position | `translate(50%, -50%)` | +| \--nutui-badge-z-index | badge z-index when customizing the icon | `1` | +| \--nutui-badge-dot-width | When the badge is a dot, size is equal to the width, height, and rounded corners of normal | `6px` | +| \--nutui-badge-dot-small-width | When badge is a dot, size is equal to the width, height, and rounded corners of small | `4px` | +| \--nutui-badge-dot-large-width | When badge is a dot, size is equal to the width, height, and rounded corners of large | `8px` | +| \--nutui-badge-dot-border | The border when the badge is a dot | `0px solid $color-primary-text` | diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md index acdd4dc3d3..6a1d8ac7bb 100644 --- a/src/packages/badge/doc.md +++ b/src/packages/badge/doc.md @@ -83,6 +83,7 @@ import { Badge } from '@nutui/nutui-react' | value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` | +| size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` | | top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `0` | | right | 左右偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `0` | | color | 徽标背景颜色,默认值为当前主题色 | `string` | `-` | @@ -97,16 +98,18 @@ import { Badge } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-badge-height | badge 的高度 | `14px` | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | -| \--nutui-badge-color | badge 内容色值 | `#fff` | -| \--nutui-badge-font-size | badge 内容字号 | `$font-size-s` | +| \--nutui-badge-background-color | badge 背景色 | `$color-primary` | +| \--nutui-badge-color | badge 内容色值 | `$color-primary-text)` | +| \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` | | \--nutui-badge-border | badge 边框 | `0px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | -| \--nutui-badge-min-width | badge 最小宽度 | `5px` | -| \--nutui-badge-padding | badge 的padding值 | `0 5px` | +| \--nutui-badge-min-width | badge 最小宽度 | `6px` | +| \--nutui-badge-padding | badge 的padding值 | `1px 4px` | | \--nutui-badge-icon-padding | badge 为自定义icon时 的 padding值 | `2px` | -| \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `12px` | -| \--nutui-badge-content-transform | badge 内容位置 | `translateY(-50%) translateX(100%)` | +| \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `10px` | +| \--nutui-badge-content-transform | badge 内容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定义icon时的z-index | `1` | -| \--nutui-badge-dot-width | badge 为圆点时的宽度、高度、圆角 | `7px` | +| \--nutui-badge-dot-width | badge 为圆点时，size 等于 normal 的宽度、高度、圆角 | `6px` | +| \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽度、高度、圆角 | `4px` | +| \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽度、高度、圆角 | `8px` | | \--nutui-badge-dot-border | badge 为圆点时的边框 | `0px solid $color-primary-text` | diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md index c1eb009cb6..71dd951447 100644 --- a/src/packages/badge/doc.taro.md +++ b/src/packages/badge/doc.taro.md @@ -83,6 +83,7 @@ import { Badge } from '@nutui/nutui-react-taro' | value | 显示的内容，支持数字、字符和自定义内容 | `ReactNode` | `-` | | max | value 为数值时，最大值 | `number` | `99` | | dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` | +| size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` | | top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` | | right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` | | color | 徽标背景颜色 | `string` | `-` | @@ -97,16 +98,18 @@ import { Badge } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-badge-height | badge 的高度 | `14px` | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | -| \--nutui-badge-color | badge 内容色值 | `#fff` | -| \--nutui-badge-font-size | badge 内容字号 | `$font-size-s` | +| \--nutui-badge-background-color | badge 背景色 | `$color-primary` | +| \--nutui-badge-color | badge 内容色值 | `$color-primary-text)` | +| \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` | | \--nutui-badge-border | badge 边框 | `0px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | -| \--nutui-badge-min-width | badge 最小宽度 | `5px` | -| \--nutui-badge-padding | badge 的padding值 | `0 5px` | +| \--nutui-badge-min-width | badge 最小宽度 | `6px` | +| \--nutui-badge-padding | badge 的padding值 | `1px 4px` | | \--nutui-badge-icon-padding | badge 为自定义icon时 的 padding值 | `2px` | -| \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `12px` | -| \--nutui-badge-content-transform | badge 内容位置 | `translateY(-50%) translateX(100%)` | +| \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `10px` | +| \--nutui-badge-content-transform | badge 内容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定义icon时的z-index | `1` | -| \--nutui-badge-dot-width | badge 为圆点时的宽度、高度、圆角 | `7px` | +| \--nutui-badge-dot-width | badge 为圆点时，size 等于 normal 的宽度、高度、圆角 | `6px` | +| \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽度、高度、圆角 | `4px` | +| \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽度、高度、圆角 | `8px` | | \--nutui-badge-dot-border | badge 为圆点时的边框 | `0px solid $color-primary-text` | diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md index 8637392947..758111c4ce 100644 --- a/src/packages/badge/doc.zh-TW.md +++ b/src/packages/badge/doc.zh-TW.md @@ -83,6 +83,7 @@ import { Badge } from '@nutui/nutui-react' | value | 顯示的內容，支持數字、字符和自定義內容 | `ReactNode` | `-` | | max | value 為數值時，最大值 | `number` | `99` | | dot | 是否為小點，當`value`值為自定義內容時，dot不生效 | `boolean` | `false` | +| size | dot 尺寸，當 dot 等於 `true` 時生效 | `small` \| `normal` \| `large` | `large` | | top | 上下偏移量，支持單位設置，可設置為："0"或0 等 | `string` \| `number` | `"0"` | | right | 左右偏移量，支持單位設置，可設置為："5"或5 等 | `string` \| `number` | `"5"` | | color | 徽標背景顏色,默認值為當前主題色 | `string` | `-` | @@ -97,16 +98,18 @@ import { Badge } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-badge-height | badge 的高度 | `14px` | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | -| \--nutui-badge-color | badge 內容色值 | `#fff` | -| \--nutui-badge-font-size | badge 內容字號 | `$font-size-s` | +| \--nutui-badge-background-color | badge 背景色 | `$color-primary` | +| \--nutui-badge-color | badge 內容色值 | `$color-primary-text)` | +| \--nutui-badge-font-size | badge 內容字號 | `$font-size-xxs` | | \--nutui-badge-border | badge 邊框 | `0px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 邊框圓角 | `14px` | -| \--nutui-badge-min-width | badge 最小寬度 | `5px` | -| \--nutui-badge-padding | badge 的padding值 | `0 5px` | +| \--nutui-badge-min-width | badge 最小寬度 | `6px` | +| \--nutui-badge-padding | badge 的padding值 | `1px 4px` | | \--nutui-badge-icon-padding | badge 為自定義icon時 的 padding值 | `2px` | -| \--nutui-badge-icon-size | badge 為自定義icon時 的 size | `12px` | -| \--nutui-badge-content-transform | badge 內容位置 | `translateY(-50%) translateX(100%)` | +| \--nutui-badge-icon-size | badge 為自定義icon時 的 size | `10px` | +| \--nutui-badge-content-transform | badge 內容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定義icon時的z-index | `1` | -| \--nutui-badge-dot-width | badge 為圓點時的寬度、高度、圓角 | `7px` | +| \--nutui-badge-dot-width | badge 為圓點時，size 等於 normal 的寬度、高度、圓角 | `6px` | +| \--nutui-badge-dot-small-width | badge 為圓點時，size 等於 small 的寬度、高度、圓角 | `4px` | +| \--nutui-badge-dot-large-width | badge 為圓點時，size 等於 large 的寬度、高度、圓角 | `8px` | | \--nutui-badge-dot-border | badge 為圓點時的邊框 | `0px solid $color-primary-text` | From 2a9b009c2d969342959c9f16791064d19aaddc98 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 4 Dec 2024 11:50:39 +0800 Subject: [PATCH 04/14] =?UTF-8?q?feat:=200.5px=E8=BE=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/badge/badge.scss | 49 +++++++++++++++---------- src/packages/badge/badge.taro.tsx | 3 -- src/packages/badge/badge.tsx | 3 -- src/packages/badge/demos/h5/demo8.tsx | 9 ++++- src/packages/badge/demos/taro/demo8.tsx | 16 ++++++-- src/packages/badge/doc.en-US.md | 11 +++--- src/packages/badge/doc.md | 11 +++--- src/packages/badge/doc.taro.md | 11 +++--- src/packages/badge/doc.zh-TW.md | 11 +++--- src/styles/variables.scss | 11 +++++- 10 files changed, 84 insertions(+), 51 deletions(-) diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss index fcd35c0822..2b13d1ee76 100644 --- a/src/packages/badge/badge.scss +++ b/src/packages/badge/badge.scss @@ -2,6 +2,7 @@ position: relative; display: inline-flex; width: auto; + &-icon { display: flex; justify-content: center; @@ -9,8 +10,6 @@ background: $badge-background-color; padding: $badge-icon-padding; text-align: center; - border: $badge-border; - border-radius: $badge-border-radius; z-index: $badge-z-index; .nut-icon { @@ -20,15 +19,30 @@ } } + &-sup, + &-icon { + border-radius: $badge-border-radius; + &::after { + content: ''; + position: absolute; + top: -50%; + bottom: -50%; + left: -50%; + right: -50%; + transform: scale(0.5); + border: $badge-border; + border-radius: $badge-border-radius; + } + } + &-sup { - height: $badge-height; display: inline-flex; - vertical-align: middle; - border: $badge-border; - color: $badge-color; - box-sizing: border-box; + justify-content: center; + height: $badge-height; min-width: $badge-min-width; padding: $badge-padding; + box-sizing: border-box; + color: $badge-color; font-size: $badge-font-size; /* #ifdef harmony */ line-height: 12px; @@ -38,18 +52,11 @@ /* #endif */ white-space: nowrap; font-weight: normal; - text-align: center; + vertical-align: middle; background: $badge-background-color; - border-radius: $badge-border-radius; z-index: 1; } - &-outline { - /* #ifdef harmony */ - line-height: 1; - /* #endif */ - } - &-number { font-family: 'JD'; line-height: 12px; @@ -58,7 +65,6 @@ &-one { height: $badge-height; width: $badge-height; - justify-content: center; } &-content { @@ -67,9 +73,12 @@ } &-dot { - border: $badge-dot-border; - border-radius: $badge-dot-width; padding: 0; + border-radius: 50%; + &::after { + border: $badge-dot-border; + border-radius: 50%; + } &-normal { min-width: $badge-dot-width; width: $badge-dot-width; @@ -89,7 +98,9 @@ &-outline { background: $color-primary-text; - border: 1px solid $color-primary; color: $color-primary; + &::after { + border: $badge-outline-border; + } } } diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx index 3c95cd57c7..27f9410325 100644 --- a/src/packages/badge/badge.taro.tsx +++ b/src/packages/badge/badge.taro.tsx @@ -102,9 +102,6 @@ export const Badge: FunctionComponent> = (props) => { isHarmony ? (style.backgroundColor = '#FFFFFF') : (style.background = '#FFFFFF') - if (!color?.includes('gradient')) { - style.borderColor = color - } } else { style.color = '#fff' isHarmony ? (style.backgroundColor = color) : (style.background = color) diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx index 7affde6f4a..2d5c6f5446 100644 --- a/src/packages/badge/badge.tsx +++ b/src/packages/badge/badge.tsx @@ -80,9 +80,6 @@ export const Badge: FunctionComponent> = (props) => { if (fill === 'outline') { style.color = color style.background = '#FFFFFF' - if (!color?.includes('gradient')) { - style.border = `1px solid ${color}` - } } else { style.color = '#FFFFFF' style.background = color diff --git a/src/packages/badge/demos/h5/demo8.tsx b/src/packages/badge/demos/h5/demo8.tsx index 7c1e2f0f90..d9960f397e 100644 --- a/src/packages/badge/demos/h5/demo8.tsx +++ b/src/packages/badge/demos/h5/demo8.tsx @@ -11,7 +11,14 @@ const Demo8 = () => { } shape="square" /> - + } shape="square" /> diff --git a/src/packages/badge/demos/taro/demo8.tsx b/src/packages/badge/demos/taro/demo8.tsx index 2259c09c08..fc56d6c6c7 100644 --- a/src/packages/badge/demos/taro/demo8.tsx +++ b/src/packages/badge/demos/taro/demo8.tsx @@ -1,6 +1,7 @@ import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' +import { harmony } from '@/utils/platform-taro' const Demo8 = () => { return ( @@ -11,9 +12,18 @@ const Demo8 = () => { } shape="square" /> - - } shape="square" /> - + {harmony() ? null : ( + + } shape="square" /> + + )} ) } diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md index c830611451..67561a7152 100644 --- a/src/packages/badge/doc.en-US.md +++ b/src/packages/badge/doc.en-US.md @@ -102,7 +102,7 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-badge-background-color | badge background color | `$color-primary` | | \--nutui-badge-color | badge content color value | `$color-primary-text)` | | \--nutui-badge-font-size | badge content font size | `$font-size-xxs` | -| \--nutui-badge-border | badge border | `0px solid $color-primary-text` | +| \--nutui-badge-border | badge border | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge border rounded corners | `14px` | | \--nutui-badge-min-width | badge minimum width | `6px` | | \--nutui-badge-padding | badge’s padding value | `1px 4px` | @@ -110,7 +110,8 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-badge-icon-size | The size of badge when it is a custom icon | `10px` | | \--nutui-badge-content-transform | badge content position | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge z-index when customizing the icon | `1` | -| \--nutui-badge-dot-width | When the badge is a dot, size is equal to the width, height, and rounded corners of normal | `6px` | -| \--nutui-badge-dot-small-width | When badge is a dot, size is equal to the width, height, and rounded corners of small | `4px` | -| \--nutui-badge-dot-large-width | When badge is a dot, size is equal to the width, height, and rounded corners of large | `8px` | -| \--nutui-badge-dot-border | The border when the badge is a dot | `0px solid $color-primary-text` | +| \--nutui-badge-dot-width | When the badge is a dot, the size is equal to the width and height of normal | `6px` | +| \--nutui-badge-dot-small-width | When badge is a dot, size is equal to the width and height of small | `4px` | +| \--nutui-badge-dot-large-width | When the badge is a dot, size is equal to the width and height of large | `8px` | +| \--nutui-badge-dot-border | The border when the badge is a dot | `1px solid $color-primary-text` | +| \--nutui-badge-outline-border | The border when badge is outline fill mode | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md index 6a1d8ac7bb..b1d98cbcc4 100644 --- a/src/packages/badge/doc.md +++ b/src/packages/badge/doc.md @@ -101,7 +101,7 @@ import { Badge } from '@nutui/nutui-react' | \--nutui-badge-background-color | badge 背景色 | `$color-primary` | | \--nutui-badge-color | badge 内容色值 | `$color-primary-text)` | | \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` | -| \--nutui-badge-border | badge 边框 | `0px solid $color-primary-text` | +| \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | | \--nutui-badge-min-width | badge 最小宽度 | `6px` | | \--nutui-badge-padding | badge 的padding值 | `1px 4px` | @@ -109,7 +109,8 @@ import { Badge } from '@nutui/nutui-react' | \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `10px` | | \--nutui-badge-content-transform | badge 内容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定义icon时的z-index | `1` | -| \--nutui-badge-dot-width | badge 为圆点时，size 等于 normal 的宽度、高度、圆角 | `6px` | -| \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽度、高度、圆角 | `4px` | -| \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽度、高度、圆角 | `8px` | -| \--nutui-badge-dot-border | badge 为圆点时的边框 | `0px solid $color-primary-text` | +| \--nutui-badge-dot-width | badge 为圆点时，size 等于 normal 的宽高 | `6px` | +| \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽高 | `4px` | +| \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽高 | `8px` | +| \--nutui-badge-dot-border | badge 为圆点时的边框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-border | badge 为 outline 填充模式时的边框 | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md index 71dd951447..09dc9e63be 100644 --- a/src/packages/badge/doc.taro.md +++ b/src/packages/badge/doc.taro.md @@ -101,7 +101,7 @@ import { Badge } from '@nutui/nutui-react-taro' | \--nutui-badge-background-color | badge 背景色 | `$color-primary` | | \--nutui-badge-color | badge 内容色值 | `$color-primary-text)` | | \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` | -| \--nutui-badge-border | badge 边框 | `0px solid $color-primary-text` | +| \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | | \--nutui-badge-min-width | badge 最小宽度 | `6px` | | \--nutui-badge-padding | badge 的padding值 | `1px 4px` | @@ -109,7 +109,8 @@ import { Badge } from '@nutui/nutui-react-taro' | \--nutui-badge-icon-size | badge 为自定义icon时 的 size | `10px` | | \--nutui-badge-content-transform | badge 内容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定义icon时的z-index | `1` | -| \--nutui-badge-dot-width | badge 为圆点时，size 等于 normal 的宽度、高度、圆角 | `6px` | -| \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽度、高度、圆角 | `4px` | -| \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽度、高度、圆角 | `8px` | -| \--nutui-badge-dot-border | badge 为圆点时的边框 | `0px solid $color-primary-text` | +| \--nutui-badge-dot-width | badge 为圆点时，size 等于 normal 的宽高 | `6px` | +| \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽高 | `4px` | +| \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽高 | `8px` | +| \--nutui-badge-dot-border | badge 为圆点时的边框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-border | badge 为 outline 填充模式时的边框 | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md index 758111c4ce..beeb795d22 100644 --- a/src/packages/badge/doc.zh-TW.md +++ b/src/packages/badge/doc.zh-TW.md @@ -101,7 +101,7 @@ import { Badge } from '@nutui/nutui-react' | \--nutui-badge-background-color | badge 背景色 | `$color-primary` | | \--nutui-badge-color | badge 內容色值 | `$color-primary-text)` | | \--nutui-badge-font-size | badge 內容字號 | `$font-size-xxs` | -| \--nutui-badge-border | badge 邊框 | `0px solid $color-primary-text` | +| \--nutui-badge-border | badge 邊框 | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 邊框圓角 | `14px` | | \--nutui-badge-min-width | badge 最小寬度 | `6px` | | \--nutui-badge-padding | badge 的padding值 | `1px 4px` | @@ -109,7 +109,8 @@ import { Badge } from '@nutui/nutui-react' | \--nutui-badge-icon-size | badge 為自定義icon時 的 size | `10px` | | \--nutui-badge-content-transform | badge 內容位置 | `translate(50%, -50%)` | | \--nutui-badge-z-index | badge 自定義icon時的z-index | `1` | -| \--nutui-badge-dot-width | badge 為圓點時，size 等於 normal 的寬度、高度、圓角 | `6px` | -| \--nutui-badge-dot-small-width | badge 為圓點時，size 等於 small 的寬度、高度、圓角 | `4px` | -| \--nutui-badge-dot-large-width | badge 為圓點時，size 等於 large 的寬度、高度、圓角 | `8px` | -| \--nutui-badge-dot-border | badge 為圓點時的邊框 | `0px solid $color-primary-text` | +| \--nutui-badge-dot-width | badge 為圓點時，size 等於 normal 的寬高 | `6px` | +| \--nutui-badge-dot-small-width | badge 為圓點時，size 等於 small 的寬高 | `4px` | +| \--nutui-badge-dot-large-width | badge 為圓點時，size 等於 large 的寬高 | `8px` | +| \--nutui-badge-dot-border | badge 為圓點時的邊框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-border | badge 為 outline 填充模式時的邊框 | `1px solid $color-primary-text` | diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 3cf39b826e..80a922ab8e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1588,7 +1588,10 @@ $badge-background-color: var( ) !default; $badge-color: var(--nutui-badge-color, $color-primary-text) !default; $badge-font-size: var(--nutui-badge-font-size, $font-size-xxs) !default; -$badge-border: var(--nutui-badge-border, 0px solid $color-primary) !default; +$badge-border: var( + --nutui-badge-border, + 1px solid $color-primary-text +) !default; $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default; $badge-min-width: var(--nutui-badge-min-width, 6px) !default; $badge-padding: var(--nutui-badge-padding, 1px 4px) !default; @@ -1602,7 +1605,11 @@ $badge-z-index: var(--nutui-badge-z-index, 1) !default; $badge-dot-width: var(--nutui-badge-dot-width, 6px) !default; $badge-dot-small-width: var(--nutui-badge-dot-width, 4px) !default; $badge-dot-large-width: var(--nutui-badge-dot-width, 8px) !default; -$badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary); +$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text); +$badge-outline-border: var( + --nutui-badge-outline-border, + 1px solid $color-primary +); //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default; From c93596678944de610bd3481c647480aac2c1bfaf Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 4 Dec 2024 17:38:50 +0800 Subject: [PATCH 05/14] fix: update types --- src/packages/badge/index.taro.ts | 2 +- src/packages/badge/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/badge/index.taro.ts b/src/packages/badge/index.taro.ts index 3191faeb66..3ce5d6af76 100644 --- a/src/packages/badge/index.taro.ts +++ b/src/packages/badge/index.taro.ts @@ -1,4 +1,4 @@ import { Badge } from './badge.taro' -export type { BadgeFill, BadgeProps } from './badge.taro' +export type { BadgeFill, BadgeDotSize, BadgeProps } from './types' export default Badge diff --git a/src/packages/badge/index.ts b/src/packages/badge/index.ts index 89062c5a6d..77131479f3 100644 --- a/src/packages/badge/index.ts +++ b/src/packages/badge/index.ts @@ -1,4 +1,4 @@ import { Badge } from './badge' -export type { BadgeFill, BadgeProps } from './badge' +export type { BadgeFill, BadgeDotSize, BadgeProps } from './types' export default Badge From f702a335ff8608ecb15b8d98318bcad173c855fa Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 4 Dec 2024 17:57:46 +0800 Subject: [PATCH 06/14] fix: update test and docs --- .../__snapshots__/badge.spec.tsx.snap | 5 ++-- src/packages/badge/__test__/badge.spec.tsx | 27 +++++++------------ src/packages/badge/doc.en-US.md | 4 +-- src/packages/badge/doc.md | 4 +-- src/packages/badge/doc.taro.md | 4 +-- src/packages/badge/doc.zh-TW.md | 4 +-- 6 files changed, 21 insertions(+), 27 deletions(-) diff --git a/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap b/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap index 4ed86572f6..35c4685cbf 100644 --- a/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap +++ b/src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap @@ -7,6 +7,7 @@ exports[`should match custom icon 1`] = ` >
8
diff --git a/src/packages/badge/__test__/badge.spec.tsx b/src/packages/badge/__test__/badge.spec.tsx index 8f38b2578a..26141ca679 100644 --- a/src/packages/badge/__test__/badge.spec.tsx +++ b/src/packages/badge/__test__/badge.spec.tsx @@ -12,13 +12,13 @@ test('should match snapshot', () => { test('should match value is string', () => { const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] expect(badgeContent).toHaveTextContent('new') }) test('should match max size', () => { const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] expect(badgeContent.textContent).toBe('9+') }) @@ -29,26 +29,20 @@ test('should match dot', () => { }) test('should match top、right: bad number', () => { - const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] - expect(badgeContent).toHaveStyle({ top: '0px' }) -}) - -test('should match top、right: have px', () => { - const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] - expect(badgeContent).toHaveStyle({ top: '10px', right: '0px' }) + const { container } = render() + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] + expect(badgeContent).toHaveStyle({ top: '10px' }) }) test('should match top、right: float', () => { - const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] + const { container } = render() + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] expect(badgeContent).toHaveStyle({ top: '10.8px', right: '0.5px' }) }) test('should match custom color', () => { const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] + const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] expect(badgeContent).toHaveStyle({ 'background-color': 'orange' }) }) @@ -61,10 +55,9 @@ test('should match custom color when fill = outline', () => { const { container } = render( ) - const badgeContent = container.querySelectorAll('.nut-badge-content')[0] + const badgeContent = container.querySelectorAll('.nut-badge-outline')[0] expect(badgeContent).toHaveStyle({ - border: '1px solid orange', color: 'orange', - background: '#fff', + background: '#FFFFFF', }) }) diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md index 67561a7152..fd52a558f9 100644 --- a/src/packages/badge/doc.en-US.md +++ b/src/packages/badge/doc.en-US.md @@ -85,8 +85,8 @@ import { Badge } from '@nutui/nutui-react' | dot | Is dotted, When `value` is a custom content, dot does not take effect | `boolean` | `false` | | size | dot size, effective when dot is equal to `true` | `small` \| `normal` \| `large` | `large` | -| top | Up and down offset, support unit setting, can be set to: "0" or 0, etc. | `string` \| `number` | `"0"` | -| right | Left and right offset, support unit setting, can be set to: "5" or 5, etc. | `string` \| `number` | `"5"` | +| top | Up and down offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` | +| right | Left and right offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` | | color | background color,the default value is the theme primary color | `string` | `-` | | fill | Fill Mode | `solid` \| `outline` | `solid` | diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md index b1d98cbcc4..a00f800f06 100644 --- a/src/packages/badge/doc.md +++ b/src/packages/badge/doc.md @@ -84,8 +84,8 @@ import { Badge } from '@nutui/nutui-react' | max | value 为数值时，最大值 | `number` | `99` | | dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` | | size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` | -| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `0` | -| right | 左右偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `0` | +| top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` | +| right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` | | color | 徽标背景颜色,默认值为当前主题色 | `string` | `-` | | fill | 填充模式 | `solid` \| `outline` | `solid` | diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md index 09dc9e63be..bd302c03a1 100644 --- a/src/packages/badge/doc.taro.md +++ b/src/packages/badge/doc.taro.md @@ -84,8 +84,8 @@ import { Badge } from '@nutui/nutui-react-taro' | max | value 为数值时，最大值 | `number` | `99` | | dot | 是否为小点，当`value`值为自定义内容时，dot不生效 | `boolean` | `false` | | size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` | -| top | 上下偏移量，支持单位设置，可设置为："0"或0 等 | `string` \| `number` | `"0"` | -| right | 左右偏移量，支持单位设置，可设置为："5"或5 等 | `string` \| `number` | `"5"` | +| top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` | +| right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` | | color | 徽标背景颜色 | `string` | `-` | | fill | 填充模式 | `solid` \| `outline` | `solid` | diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md index beeb795d22..8c6811eba4 100644 --- a/src/packages/badge/doc.zh-TW.md +++ b/src/packages/badge/doc.zh-TW.md @@ -84,8 +84,8 @@ import { Badge } from '@nutui/nutui-react' | max | value 為數值時，最大值 | `number` | `99` | | dot | 是否為小點，當`value`值為自定義內容時，dot不生效 | `boolean` | `false` | | size | dot 尺寸，當 dot 等於 `true` 時生效 | `small` \| `normal` \| `large` | `large` | -| top | 上下偏移量，支持單位設置，可設置為："0"或0 等 | `string` \| `number` | `"0"` | -| right | 左右偏移量，支持單位設置，可設置為："5"或5 等 | `string` \| `number` | `"5"` | +| top | 上下偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` | +| right | 左右偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` | | color | 徽標背景顏色,默認值為當前主題色 | `string` | `-` | | fill | 填充模式 | `solid` \| `outline` | `solid` | From efd7e263148f144efd00cd811eecbfb8b06d11f9 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 4 Dec 2024 18:05:57 +0800 Subject: [PATCH 07/14] =?UTF-8?q?fix:=20tabbar=20test=20=E6=9C=89=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap index 2c1b62f27f..aa4aede5d8 100644 --- a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap +++ b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`should only render title 1`] = `"
首页
11
分类
发现
"`; +exports[`should only render title 1`] = `"
首页
11
分类
发现
"`; exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; From 27d62bb7d809760d3e60143061bf0a4e63c37018 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Fri, 6 Dec 2024 15:19:50 +0800 Subject: [PATCH 08/14] fix: update doc --- src/packages/badge/doc.md | 2 +- src/packages/badge/doc.taro.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md index a00f800f06..c74c65749e 100644 --- a/src/packages/badge/doc.md +++ b/src/packages/badge/doc.md @@ -99,7 +99,7 @@ import { Badge } from '@nutui/nutui-react' | --- | --- | --- | | \--nutui-badge-height | badge 的高度 | `14px` | | \--nutui-badge-background-color | badge 背景色 | `$color-primary` | -| \--nutui-badge-color | badge 内容色值 | `$color-primary-text)` | +| \--nutui-badge-color | badge 内容色值 | `$color-primary-text` | | \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` | | \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md index bd302c03a1..c56832cb93 100644 --- a/src/packages/badge/doc.taro.md +++ b/src/packages/badge/doc.taro.md @@ -99,7 +99,7 @@ import { Badge } from '@nutui/nutui-react-taro' | --- | --- | --- | | \--nutui-badge-height | badge 的高度 | `14px` | | \--nutui-badge-background-color | badge 背景色 | `$color-primary` | -| \--nutui-badge-color | badge 内容色值 | `$color-primary-text)` | +| \--nutui-badge-color | badge 内容色值 | `$color-primary-text` | | \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` | | \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | From d025d25d9b7d76b81f5b30ef4d6ef2b30ea59abb Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 10 Dec 2024 11:08:37 +0800 Subject: [PATCH 09/14] fix: modify style --- src/packages/badge/badge.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss index 2b13d1ee76..3049269ab7 100644 --- a/src/packages/badge/badge.scss +++ b/src/packages/badge/badge.scss @@ -44,12 +44,7 @@ box-sizing: border-box; color: $badge-color; font-size: $badge-font-size; - /* #ifdef harmony */ line-height: 12px; - /* #endif */ - /* #ifndef harmony */ - line-height: 11px; - /* #endif */ white-space: nowrap; font-weight: normal; vertical-align: middle; @@ -59,7 +54,12 @@ &-number { font-family: 'JD'; + /* #ifdef harmony */ line-height: 12px; + /* #endif */ + /* #ifndef harmony */ + line-height: 13px; + /* #endif */ } &-one { From 82e6f35ece3a50b9ea4cb1d0da7ed63ac9a34de4 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 11 Dec 2024 14:30:29 +0800 Subject: [PATCH 10/14] =?UTF-8?q?fix:=20=E5=8D=87=E7=BA=A7=E6=96=87?= =?UTF-8?q?=E6=A1=A3pr=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- migrate-from-v2.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/migrate-from-v2.md b/migrate-from-v2.md index fbfd69b780..af50bb230c 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -665,11 +665,6 @@ plugins: [ #### Badge -- 移除 `zIndex`，目前没有用到，也不生效，直接去掉。 -- 移除 `icon`，自定义 `icon` 可放在 `value` 中实现，扩充了 `value` 的类型。 -- 修改 `max` 的最大值为99（之前为10000），比较贴合实际场景。 -- 主题定制的 `css` 变量中，去掉和 `dot` 有关的其他值，只保留 `width`。其他值由 `width` 计算而来. -- 主题定制，增加包含 icon 情况下的样式变量。 - 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效 #### CircleProgress From 8d371acf2c9a840ffdf3c12e452c961fdb2da6eb Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 11 Dec 2024 15:12:10 +0800 Subject: [PATCH 11/14] fix: removing the color property is done using a css variable --- migrate-from-v2.md | 1 + src/packages/badge/badge.scss | 2 +- src/packages/badge/badge.taro.tsx | 23 +---------------------- src/packages/badge/badge.tsx | 7 +------ src/packages/badge/demos/h5/demo3.tsx | 15 ++++++++++++--- src/packages/badge/demos/h5/demo8.tsx | 2 +- src/packages/badge/demos/taro/demo3.tsx | 15 ++++++++++++--- src/packages/badge/demos/taro/demo8.tsx | 23 ++++++++++------------- src/packages/badge/doc.en-US.md | 2 +- src/packages/badge/doc.md | 2 +- src/packages/badge/doc.taro.md | 2 +- src/packages/badge/doc.zh-TW.md | 2 +- src/packages/badge/types.ts | 1 - src/styles/variables.scss | 1 + 14 files changed, 44 insertions(+), 54 deletions(-) diff --git a/migrate-from-v2.md b/migrate-from-v2.md index af50bb230c..dc72bd98b0 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -666,6 +666,7 @@ plugins: [ #### Badge - 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效 +- 移除 `徽标背景颜色`，通过css变量`--nutui-badge-background-color`实现 #### CircleProgress diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss index 3049269ab7..5f904fd2f7 100644 --- a/src/packages/badge/badge.scss +++ b/src/packages/badge/badge.scss @@ -98,7 +98,7 @@ &-outline { background: $color-primary-text; - color: $color-primary; + color: $badge-outline-color; &::after { border: $badge-outline-border; } diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx index 27f9410325..31a1d8cf10 100644 --- a/src/packages/badge/badge.taro.tsx +++ b/src/packages/badge/badge.taro.tsx @@ -20,7 +20,6 @@ const defaultProps = { max: 99, top: 0, right: 0, - color: '', fill: 'solid', size: 'large', } as BadgeProps @@ -35,7 +34,6 @@ export const Badge: FunctionComponent> = (props) => { dot, top, right, - color, fill, size, } = { @@ -94,22 +92,6 @@ export const Badge: FunctionComponent> = (props) => { setContentStyle(style) } - const getCustomStyle = () => { - const style: CSSProperties = {} - if (color) { - if (fill === 'outline') { - style.color = color - isHarmony - ? (style.backgroundColor = '#FFFFFF') - : (style.background = '#FFFFFF') - } else { - style.color = '#fff' - isHarmony ? (style.backgroundColor = color) : (style.background = color) - } - } - return style - } - return ( {isIcon() && ( @@ -125,10 +107,7 @@ export const Badge: FunctionComponent> = (props) => { )} {children} {!isIcon() && ( - + {content()} )} diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx index 2d5c6f5446..6c7d8d6d52 100644 --- a/src/packages/badge/badge.tsx +++ b/src/packages/badge/badge.tsx @@ -11,7 +11,6 @@ const defaultProps = { max: 99, top: 0, right: 0, - color: '', fill: 'solid', size: 'large', } as BadgeProps @@ -26,7 +25,6 @@ export const Badge: FunctionComponent> = (props) => { dot, top, right, - color, fill, size, } = { @@ -102,10 +100,7 @@ export const Badge: FunctionComponent> = (props) => { )} {children} {!isIcon() && ( -
+
{content()}
)} diff --git a/src/packages/badge/demos/h5/demo3.tsx b/src/packages/badge/demos/h5/demo3.tsx index 4377398801..d6be8764c5 100644 --- a/src/packages/badge/demos/h5/demo3.tsx +++ b/src/packages/badge/demos/h5/demo3.tsx @@ -7,19 +7,28 @@ const Demo3 = () => { } shape="square" /> } shape="square" /> } shape="square" /> diff --git a/src/packages/badge/demos/h5/demo8.tsx b/src/packages/badge/demos/h5/demo8.tsx index d9960f397e..548d9b12dc 100644 --- a/src/packages/badge/demos/h5/demo8.tsx +++ b/src/packages/badge/demos/h5/demo8.tsx @@ -13,10 +13,10 @@ const Demo8 = () => { } shape="square" /> diff --git a/src/packages/badge/demos/taro/demo3.tsx b/src/packages/badge/demos/taro/demo3.tsx index 7dde11160b..4148dbb84c 100644 --- a/src/packages/badge/demos/taro/demo3.tsx +++ b/src/packages/badge/demos/taro/demo3.tsx @@ -7,19 +7,28 @@ const Demo3 = () => { } shape="square" /> } shape="square" /> } shape="square" /> diff --git a/src/packages/badge/demos/taro/demo8.tsx b/src/packages/badge/demos/taro/demo8.tsx index fc56d6c6c7..48bfc0d3c5 100644 --- a/src/packages/badge/demos/taro/demo8.tsx +++ b/src/packages/badge/demos/taro/demo8.tsx @@ -1,7 +1,6 @@ import React from 'react' import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' -import { harmony } from '@/utils/platform-taro' const Demo8 = () => { return ( @@ -12,18 +11,16 @@ const Demo8 = () => { } shape="square" /> - {harmony() ? null : ( - - } shape="square" /> - - )} + + } shape="square" /> + ) } diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md index fd52a558f9..ca72b96ac2 100644 --- a/src/packages/badge/doc.en-US.md +++ b/src/packages/badge/doc.en-US.md @@ -87,7 +87,6 @@ import { Badge } from '@nutui/nutui-react' | size | dot size, effective when dot is equal to `true` | `small` \| `normal` \| `large` | `large` | | top | Up and down offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` | | right | Left and right offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` | -| color | background color,the default value is the theme primary color | `string` | `-` | | fill | Fill Mode | `solid` \| `outline` | `solid` | ## Theming @@ -114,4 +113,5 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-badge-dot-small-width | When badge is a dot, size is equal to the width and height of small | `4px` | | \--nutui-badge-dot-large-width | When the badge is a dot, size is equal to the width and height of large | `8px` | | \--nutui-badge-dot-border | The border when the badge is a dot | `1px solid $color-primary-text` | +| \--nutui-badge-outline-color | The border when badge is outline text color value | `$color-primary` | | \--nutui-badge-outline-border | The border when badge is outline fill mode | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md index c74c65749e..17d94c954c 100644 --- a/src/packages/badge/doc.md +++ b/src/packages/badge/doc.md @@ -86,7 +86,6 @@ import { Badge } from '@nutui/nutui-react' | size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` | | top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` | | right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` | -| color | 徽标背景颜色,默认值为当前主题色 | `string` | `-` | | fill | 填充模式 | `solid` \| `outline` | `solid` | ## 主题定制 @@ -113,4 +112,5 @@ import { Badge } from '@nutui/nutui-react' | \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽高 | `4px` | | \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽高 | `8px` | | \--nutui-badge-dot-border | badge 为圆点时的边框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-color | badge 为 outline 文字色值 | `$color-primary` | | \--nutui-badge-outline-border | badge 为 outline 填充模式时的边框 | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md index c56832cb93..c7aaed3911 100644 --- a/src/packages/badge/doc.taro.md +++ b/src/packages/badge/doc.taro.md @@ -86,7 +86,6 @@ import { Badge } from '@nutui/nutui-react-taro' | size | dot 尺寸，当 dot 等于 `true` 时生效 | `small` \| `normal` \| `large` | `large` | | top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` | | right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` | -| color | 徽标背景颜色 | `string` | `-` | | fill | 填充模式 | `solid` \| `outline` | `solid` | ## 主题定制 @@ -113,4 +112,5 @@ import { Badge } from '@nutui/nutui-react-taro' | \--nutui-badge-dot-small-width | badge 为圆点时，size 等于 small 的宽高 | `4px` | | \--nutui-badge-dot-large-width | badge 为圆点时，size 等于 large 的宽高 | `8px` | | \--nutui-badge-dot-border | badge 为圆点时的边框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-color | badge 为 outline 文字色值 | `$color-primary` | | \--nutui-badge-outline-border | badge 为 outline 填充模式时的边框 | `1px solid $color-primary-text` | diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md index 8c6811eba4..947d9ef103 100644 --- a/src/packages/badge/doc.zh-TW.md +++ b/src/packages/badge/doc.zh-TW.md @@ -86,7 +86,6 @@ import { Badge } from '@nutui/nutui-react' | size | dot 尺寸，當 dot 等於 `true` 時生效 | `small` \| `normal` \| `large` | `large` | | top | 上下偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` | | right | 左右偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` | -| color | 徽標背景顏色,默認值為當前主題色 | `string` | `-` | | fill | 填充模式 | `solid` \| `outline` | `solid` | ## 主題定制 @@ -113,4 +112,5 @@ import { Badge } from '@nutui/nutui-react' | \--nutui-badge-dot-small-width | badge 為圓點時，size 等於 small 的寬高 | `4px` | | \--nutui-badge-dot-large-width | badge 為圓點時，size 等於 large 的寬高 | `8px` | | \--nutui-badge-dot-border | badge 為圓點時的邊框 | `1px solid $color-primary-text` | +| \--nutui-badge-outline-color | badge 為 outline 文字色值 | `$color-primary` | | \--nutui-badge-outline-border | badge 為 outline 填充模式時的邊框 | `1px solid $color-primary-text` | diff --git a/src/packages/badge/types.ts b/src/packages/badge/types.ts index 58d1dc6750..473b24078d 100644 --- a/src/packages/badge/types.ts +++ b/src/packages/badge/types.ts @@ -9,7 +9,6 @@ export interface BadgeProps extends BasicComponent { max: number top: string | number right: string | number - color: string fill: BadgeFill size: BadgeDotSize } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 80a922ab8e..7be3dd28eb 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1606,6 +1606,7 @@ $badge-dot-width: var(--nutui-badge-dot-width, 6px) !default; $badge-dot-small-width: var(--nutui-badge-dot-width, 4px) !default; $badge-dot-large-width: var(--nutui-badge-dot-width, 8px) !default; $badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text); +$badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default; $badge-outline-border: var( --nutui-badge-outline-border, 1px solid $color-primary From 2e9f628a4e131d13f830ca8de674fb2f1e8d8430 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 11 Dec 2024 15:38:16 +0800 Subject: [PATCH 12/14] fix: update test --- src/packages/badge/__test__/badge.spec.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/packages/badge/__test__/badge.spec.tsx b/src/packages/badge/__test__/badge.spec.tsx index 26141ca679..6a9919e66c 100644 --- a/src/packages/badge/__test__/badge.spec.tsx +++ b/src/packages/badge/__test__/badge.spec.tsx @@ -40,24 +40,7 @@ test('should match top、right: float', () => { expect(badgeContent).toHaveStyle({ top: '10.8px', right: '0.5px' }) }) -test('should match custom color', () => { - const { container } = render() - const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] - expect(badgeContent).toHaveStyle({ 'background-color': 'orange' }) -}) - test('should match custom icon', () => { const { asFragment } = render(} />) expect(asFragment()).toMatchSnapshot() }) - -test('should match custom color when fill = outline', () => { - const { container } = render( - - ) - const badgeContent = container.querySelectorAll('.nut-badge-outline')[0] - expect(badgeContent).toHaveStyle({ - color: 'orange', - background: '#FFFFFF', - }) -}) From a59a2e525ef19b68c751ad4f57a81a6a1db5b7d1 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 11 Dec 2024 15:41:25 +0800 Subject: [PATCH 13/14] fix: update test --- src/packages/badge/badge.tsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx index 6c7d8d6d52..edc527ec87 100644 --- a/src/packages/badge/badge.tsx +++ b/src/packages/badge/badge.tsx @@ -72,19 +72,6 @@ export const Badge: FunctionComponent> = (props) => { return style } - const getCustomStyle = () => { - const style: CSSProperties = {} - if (color) { - if (fill === 'outline') { - style.color = color - style.background = '#FFFFFF' - } else { - style.color = '#FFFFFF' - style.background = color - } - } - return style - } return (
{isIcon() && ( From 01f083c3d951a424c354a62a94c73e7fe0f0eaa9 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Tue, 17 Dec 2024 11:39:41 +0800 Subject: [PATCH 14/14] fix: update test --- .../tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap index aa4aede5d8..e09c341b1f 100644 --- a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap +++ b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`should only render title 1`] = `"
首页
11
分类
发现
"`; +exports[`should only render title 1`] = `"
首页
11
分类
发现
"`; exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`;