From 7f01c94a5e25762704e2d2ed3525a2f778e100dc Mon Sep 17 00:00:00 2001 From: XieZongChen <46394163+amadeus711@users.noreply.github.com> Date: Mon, 13 Dec 2021 01:32:05 +0800 Subject: [PATCH] feat(button): let css vars prefixed with `n` (#1820) * fix(button): Fix n-button's color is overwritten when using other style library * feat: optimization Co-authored-by: 07akioni <07akioni2@gmail.com> --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + src/button/src/Button.tsx | 206 +++++++++--------- src/button/src/styles/button.cssr.ts | 159 +++++++------- src/button/tests/Button.spec.tsx | 29 +-- .../tests/__snapshots__/Button.spec.tsx.snap | 12 +- 6 files changed, 207 insertions(+), 201 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 867d408440d..7d7ec6367c5 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -6,6 +6,7 @@ - Fix `n-alert`'s `header` slot unable to display normally. - Fix `n-data-table`'s pagination `onUpdatePageSize` prop does't trigger, closes [#1774](https://github.com/TuSimple/naive-ui/issues/1774). +- Fix `n-button`'s style is overwritten when using other style library, closes [#1808](https://github.com/TuSimple/naive-ui/issues/1808). - Fix `n-tag` line-height is too low that clamps the content. - Fix `n-select` displays with mistake in input if `filterable` is `true`, closes [#1823](https://github.com/TuSimple/naive-ui/issues/1823). - Fix `n-data-table` uncheck all if indeterminate header checkbox is clicked, closes [#1827](https://github.com/TuSimple/naive-ui/issues/1827). diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index d56c5a5a03a..8375f9bbafd 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -6,6 +6,7 @@ - 修复 `n-alert` 的 `header` slot 无法正常显示 - 修复 `n-data-table` 的分页器 `onUpdatePageSize` 属性未被触发, 关闭 [#1774](https://github.com/TuSimple/naive-ui/issues/1774) +- 修复 `n-button` 的样式在使用其他样式框架时被覆盖, 关闭 [#1808](https://github.com/TuSimple/naive-ui/issues/1808) - 修复 `n-tag` 行高过低导致内容截断 - 修复 `n-select` 设定 `filterable` 后选项过长显示出错，关闭 [#1823](https://github.com/TuSimple/naive-ui/issues/1823) - 修复 `n-data-table` 点击表头半选的勾选框之后没有全选，关闭 [#1827](https://github.com/TuSimple/naive-ui/issues/1827) diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx index 4da0b869c08..39b5074d85c 100644 --- a/src/button/src/Button.tsx +++ b/src/button/src/Button.tsx @@ -211,11 +211,11 @@ const Button = defineComponent({ if (!color) return null const hoverColor = createHoverColor(color) return { - '--border-color': color, - '--border-color-hover': hoverColor, - '--border-color-pressed': createPressedColor(color), - '--border-color-focus': hoverColor, - '--border-color-disabled': color + '--n-border-color': color, + '--n-border-color-hover': hoverColor, + '--n-border-color-pressed': createPressedColor(color), + '--n-border-color-focus': hoverColor, + '--n-border-color-disabled': color } }), cssVars: computed(() => { @@ -251,17 +251,17 @@ const Button = defineComponent({ } // color let colorProps = { - '--color': 'initial', - '--color-hover': 'initial', - '--color-pressed': 'initial', - '--color-focus': 'initial', - '--color-disabled': 'initial', - '--ripple-color': 'initial', - '--text-color': 'initial', - '--text-color-hover': 'initial', - '--text-color-pressed': 'initial', - '--text-color-focus': 'initial', - '--text-color-disabled': 'initial' + '--n-color': 'initial', + '--n-color-hover': 'initial', + '--n-color-pressed': 'initial', + '--n-color-focus': 'initial', + '--n-color-disabled': 'initial', + '--n-ripple-color': 'initial', + '--n-text-color': 'initial', + '--n-text-color-hover': 'initial', + '--n-text-color-pressed': 'initial', + '--n-text-color-focus': 'initial', + '--n-text-color-disabled': 'initial' } const typeIsTertiary = type === 'tertiary' const typeIsDefault = type === 'default' @@ -271,48 +271,48 @@ const Button = defineComponent({ const mergedTextColor = propTextColor || self[createKey('textColorText', mergedType)] colorProps = { - '--color': '#0000', - '--color-hover': '#0000', - '--color-pressed': '#0000', - '--color-focus': '#0000', - '--color-disabled': '#0000', - '--ripple-color': '#0000', - '--text-color': mergedTextColor, - '--text-color-hover': propTextColor + '--n-color': '#0000', + '--n-color-hover': '#0000', + '--n-color-pressed': '#0000', + '--n-color-focus': '#0000', + '--n-color-disabled': '#0000', + '--n-ripple-color': '#0000', + '--n-text-color': mergedTextColor, + '--n-text-color-hover': propTextColor ? createHoverColor(propTextColor) : self[createKey('textColorTextHover', mergedType)], - '--text-color-pressed': propTextColor + '--n-text-color-pressed': propTextColor ? createPressedColor(propTextColor) : self[createKey('textColorTextPressed', mergedType)], - '--text-color-focus': propTextColor + '--n-text-color-focus': propTextColor ? createHoverColor(propTextColor) : self[createKey('textColorTextHover', mergedType)], - '--text-color-disabled': + '--n-text-color-disabled': propTextColor || self[createKey('textColorTextDisabled', mergedType)] } } else if (ghost || dashed) { const mergedTextColor = textColor || color colorProps = { - '--color': '#0000', - '--color-hover': '#0000', - '--color-pressed': '#0000', - '--color-focus': '#0000', - '--color-disabled': '#0000', - '--ripple-color': + '--n-color': '#0000', + '--n-color-hover': '#0000', + '--n-color-pressed': '#0000', + '--n-color-focus': '#0000', + '--n-color-disabled': '#0000', + '--n-ripple-color': color || self[createKey('rippleColor', mergedType)], - '--text-color': + '--n-text-color': mergedTextColor || self[createKey('textColorGhost', mergedType)], - '--text-color-hover': mergedTextColor + '--n-text-color-hover': mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey('textColorGhostHover', mergedType)], - '--text-color-pressed': mergedTextColor + '--n-text-color-pressed': mergedTextColor ? createPressedColor(mergedTextColor) : self[createKey('textColorGhostPressed', mergedType)], - '--text-color-focus': mergedTextColor + '--n-text-color-focus': mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey('textColorGhostHover', mergedType)], - '--text-color-disabled': + '--n-text-color-disabled': mergedTextColor || self[createKey('textColorGhostDisabled', mergedType)] } @@ -325,33 +325,33 @@ const Button = defineComponent({ const mergedTextColor = color || typeTextColor const isColoredType = type !== 'default' && type !== 'tertiary' colorProps = { - '--color': isColoredType + '--n-color': isColoredType ? changeColor(mergedTextColor, { alpha: Number(self.colorOpacitySecondary) }) : self.colorSecondary, - '--color-hover': isColoredType + '--n-color-hover': isColoredType ? changeColor(mergedTextColor, { alpha: Number(self.colorOpacitySecondaryHover) }) : self.colorSecondaryHover, - '--color-pressed': isColoredType + '--n-color-pressed': isColoredType ? changeColor(mergedTextColor, { alpha: Number(self.colorOpacitySecondaryPressed) }) : self.colorSecondaryPressed, - '--color-focus': isColoredType + '--n-color-focus': isColoredType ? changeColor(mergedTextColor, { alpha: Number(self.colorOpacitySecondaryHover) }) : self.colorSecondaryHover, - '--color-disabled': self.colorSecondary, - '--ripple-color': '#0000', - '--text-color': mergedTextColor, - '--text-color-hover': mergedTextColor, - '--text-color-pressed': mergedTextColor, - '--text-color-focus': mergedTextColor, - '--text-color-disabled': mergedTextColor + '--n-color-disabled': self.colorSecondary, + '--n-ripple-color': '#0000', + '--n-text-color': mergedTextColor, + '--n-text-color-hover': mergedTextColor, + '--n-text-color-pressed': mergedTextColor, + '--n-text-color-focus': mergedTextColor, + '--n-text-color-disabled': mergedTextColor } } else if (tertiary || quaternary) { const typeColor = typeIsDefault @@ -361,63 +361,63 @@ const Button = defineComponent({ : self[createKey('color', mergedType)] const mergedColor = color || typeColor if (tertiary) { - colorProps['--color'] = self.colorTertiary - colorProps['--color-hover'] = self.colorTertiaryHover - colorProps['--color-pressed'] = self.colorTertiaryPressed - colorProps['--color-focus'] = self.colorSecondaryHover - colorProps['--color-disabled'] = self.colorTertiary + colorProps['--n-color'] = self.colorTertiary + colorProps['--n-color-hover'] = self.colorTertiaryHover + colorProps['--n-color-pressed'] = self.colorTertiaryPressed + colorProps['--n-color-focus'] = self.colorSecondaryHover + colorProps['--n-color-disabled'] = self.colorTertiary } else { - colorProps['--color'] = self.colorQuaternary - colorProps['--color-hover'] = self.colorQuaternaryHover - colorProps['--color-pressed'] = self.colorQuaternaryPressed - colorProps['--color-focus'] = self.colorQuaternaryHover - colorProps['--color-disabled'] = self.colorQuaternary + colorProps['--n-color'] = self.colorQuaternary + colorProps['--n-color-hover'] = self.colorQuaternaryHover + colorProps['--n-color-pressed'] = self.colorQuaternaryPressed + colorProps['--n-color-focus'] = self.colorQuaternaryHover + colorProps['--n-color-disabled'] = self.colorQuaternary } - colorProps['--ripple-color'] = '#0000' - colorProps['--text-color'] = mergedColor - colorProps['--text-color-hover'] = mergedColor - colorProps['--text-color-pressed'] = mergedColor - colorProps['--text-color-focus'] = mergedColor - colorProps['--text-color-disabled'] = mergedColor + colorProps['--n-ripple-color'] = '#0000' + colorProps['--n-text-color'] = mergedColor + colorProps['--n-text-color-hover'] = mergedColor + colorProps['--n-text-color-pressed'] = mergedColor + colorProps['--n-text-color-focus'] = mergedColor + colorProps['--n-text-color-disabled'] = mergedColor } else { colorProps = { - '--color': color || self[createKey('color', mergedType)], - '--color-hover': color + '--n-color': color || self[createKey('color', mergedType)], + '--n-color-hover': color ? createHoverColor(color) : self[createKey('colorHover', mergedType)], - '--color-pressed': color + '--n-color-pressed': color ? createPressedColor(color) : self[createKey('colorPressed', mergedType)], - '--color-focus': color + '--n-color-focus': color ? createHoverColor(color) : self[createKey('colorFocus', mergedType)], - '--color-disabled': + '--n-color-disabled': color || self[createKey('colorDisabled', mergedType)], - '--ripple-color': + '--n-ripple-color': color || self[createKey('rippleColor', mergedType)], - '--text-color': + '--n-text-color': textColor || (color ? self.textColorPrimary : typeIsTertiary ? self.textColorTertiary : self[createKey('textColor', mergedType)]), - '--text-color-hover': + '--n-text-color-hover': textColor || (color ? self.textColorHoverPrimary : self[createKey('textColorHover', mergedType)]), - '--text-color-pressed': + '--n-text-color-pressed': textColor || (color ? self.textColorPressedPrimary : self[createKey('textColorPressed', mergedType)]), - '--text-color-focus': + '--n-text-color-focus': textColor || (color ? self.textColorFocusPrimary : self[createKey('textColorFocus', mergedType)]), - '--text-color-disabled': + '--n-text-color-disabled': textColor || (color ? self.textColorDisabledPrimary @@ -426,27 +426,27 @@ const Button = defineComponent({ } // border let borderProps = { - '--border': 'initial', - '--border-hover': 'initial', - '--border-pressed': 'initial', - '--border-focus': 'initial', - '--border-disabled': 'initial' + '--n-border': 'initial', + '--n-border-hover': 'initial', + '--n-border-pressed': 'initial', + '--n-border-focus': 'initial', + '--n-border-disabled': 'initial' } if (text) { borderProps = { - '--border': 'none', - '--border-hover': 'none', - '--border-pressed': 'none', - '--border-focus': 'none', - '--border-disabled': 'none' + '--n-border': 'none', + '--n-border-hover': 'none', + '--n-border-pressed': 'none', + '--n-border-focus': 'none', + '--n-border-disabled': 'none' } } else { borderProps = { - '--border': self[createKey('border', mergedType)], - '--border-hover': self[createKey('borderHover', mergedType)], - '--border-pressed': self[createKey('borderPressed', mergedType)], - '--border-focus': self[createKey('borderFocus', mergedType)], - '--border-disabled': self[createKey('borderDisabled', mergedType)] + '--n-border': self[createKey('border', mergedType)], + '--n-border-hover': self[createKey('borderHover', mergedType)], + '--n-border-pressed': self[createKey('borderPressed', mergedType)], + '--n-border-focus': self[createKey('borderFocus', mergedType)], + '--n-border-disabled': self[createKey('borderDisabled', mergedType)] } } // size @@ -461,30 +461,30 @@ const Button = defineComponent({ waveOpacity } = self const sizeProps = { - '--width': circle && !text ? height : 'initial', - '--height': text ? 'initial' : height, - '--font-size': fontSize, - '--padding': circle + '--n-width': circle && !text ? height : 'initial', + '--n-height': text ? 'initial' : height, + '--n-font-size': fontSize, + '--n-padding': circle ? 'initial' : text ? 'initial' : round ? paddingRound : padding, - '--icon-size': iconSize, - '--icon-margin': iconMargin, - '--border-radius': text + '--n-icon-size': iconSize, + '--n-icon-margin': iconMargin, + '--n-border-radius': text ? 'initial' : circle || round ? height : borderRadius } return { - '--bezier': cubicBezierEaseInOut, - '--bezier-ease-out': cubicBezierEaseOut, - '--ripple-duration': rippleDuration, - '--opacity-disabled': opacityDisabled, - '--wave-opacity': waveOpacity, + '--n-bezier': cubicBezierEaseInOut, + '--n-bezier-ease-out': cubicBezierEaseOut, + '--n-ripple-duration': rippleDuration, + '--n-opacity-disabled': opacityDisabled, + '--n-wave-opacity': waveOpacity, ...fontProps, ...colorProps, ...borderProps, diff --git a/src/button/src/styles/button.cssr.ts b/src/button/src/styles/button.cssr.ts index d7d92ad917a..8222a1dfdf3 100644 --- a/src/button/src/styles/button.cssr.ts +++ b/src/button/src/styles/button.cssr.ts @@ -3,49 +3,50 @@ import fadeInWidthExpandTransition from '../../../_styles/transitions/fade-in-wi import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr' // vars: -// --bezier -// --ripple-duration -// --opacity-disabled -// --text-color -// --text-color-hover -// --text-color-pressed -// --text-color-focus -// --text-color-disabled -// --color -// --color-hover -// --color-pressed -// --color-focus -// --color-disabled -// --border -// --border-hover -// --border-pressed -// --border-focus -// --border-disabled -// --ripple-color -// --border-radius -// --height -// --width -// --font-size -// --padding -// --icon-size -// --icon-margin -// --wave-opacity -// --font-weight +// --n-bezier +// --n-bezier-ease-out +// --n-ripple-duration +// --n-opacity-disabled +// --n-text-color +// --n-text-color-hover +// --n-text-color-pressed +// --n-text-color-focus +// --n-text-color-disabled +// --n-color +// --n-color-hover +// --n-color-pressed +// --n-color-focus +// --n-color-disabled +// --n-border +// --n-border-hover +// --n-border-pressed +// --n-border-focus +// --n-border-disabled +// --n-ripple-color +// --n-border-radius +// --n-height +// --n-width +// --n-font-size +// --n-padding +// --n-icon-size +// --n-icon-margin +// --n-wave-opacity +// --n-font-weight // // private-vars: -// --border-color-xxx, used for custom color +// --n-border-color-xxx, used for custom color export default c([ cB('button', ` - font-weight: var(--font-weight); + font-weight: var(--n-font-weight); line-height: 1; font-family: inherit; - padding: var(--padding); - height: var(--height); - font-size: var(--font-size); - border-radius: var(--border-radius); - color: var(--text-color); - background-color: var(--color); - width: var(--width); + padding: var(--n-padding); + height: var(--n-height); + font-size: var(--n-font-size); + border-radius: var(--n-border-radius); + color: var(--n-text-color); + background-color: var(--n-color); + width: var(--n-width); white-space: nowrap; outline: none; position: relative; @@ -61,82 +62,82 @@ export default c([ cursor: pointer; text-decoration: none; transition: - color .3s var(--bezier), - background-color .3s var(--bezier), - opacity .3s var(--bezier), - border-color .3s var(--bezier); + color .3s var(--n-bezier), + background-color .3s var(--n-bezier), + opacity .3s var(--n-bezier), + border-color .3s var(--n-bezier); `, [ cM('color', [ cE('border', { - borderColor: 'var(--border-color)' + borderColor: 'var(--n-border-color)' }), cM('disabled', [ cE('border', { - borderColor: 'var(--border-color-disabled)' + borderColor: 'var(--n-border-color-disabled)' }) ]), cNotM('disabled', [ c('&:focus', [ cE('state-border', { - borderColor: 'var(--border-color-focus)' + borderColor: 'var(--n-border-color-focus)' }) ]), c('&:hover', [ cE('state-border', { - borderColor: 'var(--border-color-hover)' + borderColor: 'var(--n-border-color-hover)' }) ]), c('&:active', [ cE('state-border', { - borderColor: 'var(--border-color-pressed)' + borderColor: 'var(--n-border-color-pressed)' }) ]), cM('pressed', [ cE('state-border', { - borderColor: 'var(--border-color-pressed)' + borderColor: 'var(--n-border-color-pressed)' }) ]) ]) ]), cM('disabled', { - backgroundColor: 'var(--color-disabled)', - color: 'var(--text-color-disabled)' + backgroundColor: 'var(--n-color-disabled)', + color: 'var(--n-text-color-disabled)' }, [ cE('border', { - border: 'var(--border-disabled)' + border: 'var(--n-border-disabled)' }) ]), cNotM('disabled', [ c('&:focus', { - backgroundColor: 'var(--color-focus)', - color: 'var(--text-color-focus)' + backgroundColor: 'var(--n-color-focus)', + color: 'var(--n-text-color-focus)' }, [ cE('state-border', { - border: 'var(--border-focus)' + border: 'var(--n-border-focus)' }) ]), c('&:hover', { - backgroundColor: 'var(--color-hover)', - color: 'var(--text-color-hover)' + backgroundColor: 'var(--n-color-hover)', + color: 'var(--n-text-color-hover)' }, [ cE('state-border', { - border: 'var(--border-hover)' + border: 'var(--n-border-hover)' }) ]), c('&:active', { - backgroundColor: 'var(--color-pressed)', - color: 'var(--text-color-pressed)' + backgroundColor: 'var(--n-color-pressed)', + color: 'var(--n-text-color-pressed)' }, [ cE('state-border', { - border: 'var(--border-pressed)' + border: 'var(--n-border-pressed)' }) ]), cM('pressed', { - backgroundColor: 'var(--color-pressed)', - color: 'var(--text-color-pressed)' + backgroundColor: 'var(--n-color-pressed)', + color: 'var(--n-text-color-pressed)' }, [ cE('state-border', { - border: 'var(--border-pressed)' + border: 'var(--n-border-pressed)' }) ]) ]), @@ -147,8 +148,8 @@ export default c([ bottom: 0; left: 0; animation-iteration-count: 1; - animation-duration: var(--ripple-duration); - animation-timing-function: var(--bezier-ease-out), var(--bezier-ease-out); + animation-duration: var(--n-ripple-duration); + animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out); `, [ cM('active', { zIndex: 1, @@ -167,30 +168,30 @@ export default c([ right: 0; bottom: 0; border-radius: inherit; - transition: border-color .3s var(--bezier); + transition: border-color .3s var(--n-bezier); pointer-events: none; `), cE('border', { - border: 'var(--border)' + border: 'var(--n-border)' }), cE('state-border', { - border: 'var(--border)', + border: 'var(--n-border)', borderColor: '#0000', zIndex: 1 }), cE('icon', ` - margin: var(--icon-margin); + margin: var(--n-icon-margin); margin-left: 0; - height: var(--icon-size); - width: var(--icon-size); - max-width: var(--icon-size); - font-size: var(--icon-size); + height: var(--n-icon-size); + width: var(--n-icon-size); + max-width: var(--n-icon-size); + font-size: var(--n-icon-size); position: relative; flex-shrink: 0; `, [ cB('icon-slot', ` - height: var(--icon-size); - width: var(--icon-size); + height: var(--n-icon-size); + width: var(--n-icon-size); position: absolute; left: 0; top: 50%; @@ -211,7 +212,7 @@ export default c([ `, [ c('~', [ cE('icon', { - margin: 'var(--icon-margin)', + margin: 'var(--n-icon-margin)', marginRight: 0 }) ]) @@ -227,21 +228,21 @@ export default c([ ]), cM('disabled', { cursor: 'not-allowed', - opacity: 'var(--opacity-disabled)' + opacity: 'var(--n-opacity-disabled)' }) ]), c('@keyframes button-wave-spread', { from: { - boxShadow: '0 0 0.5px 0 var(--ripple-color)' + boxShadow: '0 0 0.5px 0 var(--n-ripple-color)' }, to: { // don't use exact 5px since chrome will display the animation with glitches - boxShadow: '0 0 0.5px 4.5px var(--ripple-color)' + boxShadow: '0 0 0.5px 4.5px var(--n-ripple-color)' } }), c('@keyframes button-wave-opacity', { from: { - opacity: 'var(--wave-opacity)' + opacity: 'var(--n-wave-opacity)' }, to: { opacity: 0 diff --git a/src/button/tests/Button.spec.tsx b/src/button/tests/Button.spec.tsx index 6061d91ca95..ea774698770 100644 --- a/src/button/tests/Button.spec.tsx +++ b/src/button/tests/Button.spec.tsx @@ -174,27 +174,27 @@ describe('n-button', () => { } }) const circleStyle = [ - '--width: 34px;', - '--padding: initial;', - '--border-radius: 34px;' + '--n-width: 34px;', + '--n-padding: initial;', + '--n-border-radius: 34px;' ] let buttonStyle = wrapper.find('button').attributes('style') expect(circleStyle.every((i) => buttonStyle.includes(i))).toBe(true) await wrapper.setProps({ circle: false, round: true }) const roundStyle = [ - '--width: initial;', - '--padding: 0 18px;', - '--border-radius: 34px;' + '--n-width: initial;', + '--n-padding: 0 18px;', + '--n-border-radius: 34px;' ] buttonStyle = wrapper.find('button').attributes('style') expect(roundStyle.every((i) => buttonStyle.includes(i))).toBe(true) await wrapper.setProps({ circle: false, round: false }) const defaultStyle = [ - '--width: initial;', - '--padding: 0 14px;', - '--border-radius: 3px;' + '--n-width: initial;', + '--n-padding: 0 14px;', + '--n-border-radius: 3px;' ] buttonStyle = wrapper.find('button').attributes('style') expect(defaultStyle.every((i) => buttonStyle.includes(i))).toBe(true) @@ -241,9 +241,9 @@ describe('n-button', () => { expect(wrapper.find('button').classes()).toContain('n-button--color') const colorStyle = [ - '--color: #8a2be2;', - '--color-disabled: #8a2be2;', - '--ripple-color: #8a2be2;' + '--n-color: #8a2be2;', + '--n-color-disabled: #8a2be2;', + '--n-ripple-color: #8a2be2;' ] const buttonStyle = wrapper.find('button').attributes('style') expect(colorStyle.every((i) => buttonStyle.includes(i))).toBe(true) @@ -262,7 +262,10 @@ describe('n-button', () => { const buttonStyle = wrapper.find('button').attributes('style') expect( ( - ['--text-color: #8a2be2;', '--text-color-disabled: #8a2be2;'] as const + [ + '--n-text-color: #8a2be2;', + '--n-text-color-disabled: #8a2be2;' + ] as const ).every((i) => buttonStyle.includes(i)) ).toBe(true) }) diff --git a/src/button/tests/__snapshots__/Button.spec.tsx.snap b/src/button/tests/__snapshots__/Button.spec.tsx.snap index 5ef6b8872e8..3594170be67 100644 --- a/src/button/tests/__snapshots__/Button.spec.tsx.snap +++ b/src/button/tests/__snapshots__/Button.spec.tsx.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`n-button should work with \`size\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #18a058; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-pressed: 1px solid #0c7a43; --border-focus: 1px solid #36ad6a; --border-disabled: 1px solid rgb(224, 224, 230); --width: initial; --height: 22px; --font-size: 12px; --padding: 0 6px; --icon-size: 14px; --icon-margin: 6px; --border-radius: 3px;"`; +exports[`n-button should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 22px; --n-font-size: 12px; --n-padding: 0 6px; --n-icon-size: 14px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; -exports[`n-button should work with \`size\` prop 2`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #18a058; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-pressed: 1px solid #0c7a43; --border-focus: 1px solid #36ad6a; --border-disabled: 1px solid rgb(224, 224, 230); --width: initial; --height: 28px; --font-size: 14px; --padding: 0 10px; --icon-size: 18px; --icon-margin: 6px; --border-radius: 3px;"`; +exports[`n-button should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 28px; --n-font-size: 14px; --n-padding: 0 10px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; -exports[`n-button should work with \`size\` prop 3`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #18a058; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-pressed: 1px solid #0c7a43; --border-focus: 1px solid #36ad6a; --border-disabled: 1px solid rgb(224, 224, 230); --width: initial; --height: 34px; --font-size: 14px; --padding: 0 14px; --icon-size: 18px; --icon-margin: 6px; --border-radius: 3px;"`; +exports[`n-button should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 34px; --n-font-size: 14px; --n-padding: 0 14px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; -exports[`n-button should work with \`size\` prop 4`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #18a058; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-pressed: 1px solid #0c7a43; --border-focus: 1px solid #36ad6a; --border-disabled: 1px solid rgb(224, 224, 230); --width: initial; --height: 40px; --font-size: 15px; --padding: 0 18px; --icon-size: 20px; --icon-margin: 6px; --border-radius: 3px;"`; +exports[`n-button should work with \`size\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 40px; --n-font-size: 15px; --n-padding: 0 18px; --n-icon-size: 20px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; -exports[`n-button should work with \`tag\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #0000; --text-color: #18a058; --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: none; --border-hover: none; --border-pressed: none; --border-focus: none; --border-disabled: none; --width: initial; --height: initial; --font-size: 14px; --padding: initial; --icon-size: 18px; --icon-margin: 6px; --border-radius: initial;"`; +exports[`n-button should work with \`tag\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #0000; --n-text-color: #18a058; --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: none; --n-border-hover: none; --n-border-pressed: none; --n-border-focus: none; --n-border-disabled: none; --n-width: initial; --n-height: initial; --n-font-size: 14px; --n-padding: initial; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: initial;"`; -exports[`n-button should work with \`text\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --bezier-ease-out: cubic-bezier(0, 0, .2, 1); --ripple-duration: .6s; --opacity-disabled: 0.5; --wave-opacity: 0.6; font-weight: 400; --color: #0000; --color-hover: #0000; --color-pressed: #0000; --color-focus: #0000; --color-disabled: #0000; --ripple-color: #0000; --text-color: rgb(51, 54, 57); --text-color-hover: #36ad6a; --text-color-pressed: #0c7a43; --text-color-focus: #36ad6a; --text-color-disabled: rgb(51, 54, 57); --border: none; --border-hover: none; --border-pressed: none; --border-focus: none; --border-disabled: none; --width: initial; --height: initial; --font-size: 14px; --padding: initial; --icon-size: 18px; --icon-margin: 6px; --border-radius: initial;"`; +exports[`n-button should work with \`text\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #0000; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: none; --n-border-hover: none; --n-border-pressed: none; --n-border-focus: none; --n-border-disabled: none; --n-width: initial; --n-height: initial; --n-font-size: 14px; --n-padding: initial; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: initial;"`;