Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(button): Fix n-button's style is overwritten when using other style library #1820

Merged
merged 3 commits into from
Dec 12, 2021
Merged

fix(button): Fix n-button's style is overwritten when using other style library #1820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c176732
fix(button): Fix n-button's color is overwritten when using other sty…
XieZongChen Dec 11, 2021
7396a6c
feat: optimization
XieZongChen Dec 11, 2021
da957f0
Merge branch 'main' into fix-NButton-color-overwritten
07akioni Dec 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
206 changes: 103 additions & 103 deletions src/button/src/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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'
Expand All @@ -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)]
}
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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,
Expand Down
Loading