fix(button): no pressed effect on firefox

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Breaking Changes
 
 - `n-date-picker`'s `clearable` will control visibility of clear button is no `action` is set, closes [#1196](https://github.com/TuSimple/naive-ui/issues/1196).
+- `n-button`'s `native-focus-behavior` prop default value is changed to 'not on Safari'.
 
 ### Fixes
 
@@ -23,6 +24,7 @@
 - Fix `n-input`'s separator may have line wrap.
 - Fix all components' `user-select` style prop's effect on Safari.
 - Fix `n-data-table` will prevent page scroll in virtual scroll mode.
+- Fix `n-button` doesn't have pressed effect on Firefox.
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Breaking Changes
 
 - `n-date-picker` 的 `clearable` 属性在 `action` 属性没有设置时，会控面板清空按钮的显隐，关闭 [#1196](https://github.com/TuSimple/naive-ui/issues/1196)
+- `n-button` 的 `native-focus-behavior` 属性默认值改为“不是 Safari”
 
 ### Fixes
 
@@ -23,6 +24,7 @@
 - 修复 `n-input` 的分割符可能折行
 - 修复所有组件的 `user-select` 样式属性在 Safari 的效果
 - 修复 `n-data-table` 在虚拟滚动模式下会阻止页面滚动
+- 修复 `n-button` 在 Firefox 下没有按下的效果
 
 ### Feats
 

src/_mixins/use-rtl.ts

@@ -7,7 +7,7 @@ import {
 } from '../config-provider/src/internal-interface'
 import { cssrAnchorMetaName } from './common'
 
-export default function useRtl (
+export function useRtl (
   mountId: string,
   rtlStateRef: Ref<RtlEnabledState | undefined> | undefined,
   clsPrefixRef: Ref<string>

src/_utils/env/browser.ts

@@ -0,0 +1,5 @@
+import { isBrowser } from './is-browser'
+export const isChrome = isBrowser && 'chrome' in window
+export const isFirefox = isBrowser && navigator.userAgent.includes('Firefox')
+export const isSafari =
+  isBrowser && navigator.userAgent.includes('Safari') && !isChrome

src/alert/src/Alert.tsx

@@ -16,7 +16,7 @@ import {
   ErrorIcon
 } from '../../_internal/icons'
 import { NFadeInExpandTransition, NBaseClose, NBaseIcon } from '../../_internal'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import {

src/avatar-group/src/AvatarGroup.tsx

@@ -13,7 +13,7 @@ import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import style from './styles/avatar-group.cssr'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import { avatarGroupLight, AvatarGroupTheme } from '../styles'
 
 export interface AvatarGroupInjection {

src/badge/src/Badge.tsx

@@ -22,7 +22,7 @@ import type { ExtractPublicPropTypes } from '../../_utils'
 import { badgeLight } from '../styles'
 import type { BadgeTheme } from '../styles'
 import style from './styles/index.cssr'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 
 export const badgeProps = {
   ...(useTheme.props as ThemeProps<BadgeTheme>),

src/button-group/src/ButtonGroup.tsx

@@ -1,6 +1,6 @@
 import { h, PropType, defineComponent, provide } from 'vue'
 import type { Size } from '../../button/src/interface'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import { useConfig, useStyle } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { buttonGroupInjectionKey } from './context'

src/button/demos/enUS/index.demo-entry.md

@@ -40,7 +40,7 @@ popover.vue
 | disabled | `boolean` | `false` | Whether the button is disabled. |  |
 | focusable | `boolean` | `true` | Whether the button is focusable. |  |
 | ghost | `boolean` | `false` | Whether the button is ghost. |  |
-| native-focus-behavior | `boolean` | `false` | Whether to follow button's native focus behavior. Since safari's button can't be focused by click, naive-ui uses some tricks to make it focusable on safari. If you don't need the behavior or need the button to be draggable, you can enable the prop. | 2.28.3 |
+| native-focus-behavior | `boolean` | Browser is not Safari | Whether to follow button's native focus behavior. Since safari's button can't be focused by click, naive-ui uses some tricks to make it focusable on safari. If you don't need the behavior or need the button to be draggable, you can enable the prop. | 2.28.3 |
 | icon-placement | `'left' \| 'right'` | `'left'` | The position of the icon in the button. |  |
 | keyboard | `boolean` | `true` | Whether is supports keyboard operation. |  |
 | quaternary | `boolean` | `false` | Whether the button is quaternary button. |  |

src/button/demos/zhCN/index.demo-entry.md

@@ -42,7 +42,7 @@ debug.vue
 | disabled | `boolean` | `false` | 按钮是否禁用 |  |
 | focusable | `boolean` | `true` | 按钮是否可以被聚焦 |  |
 | ghost | `boolean` | `false` | 按钮是否透明 |  |
-| native-focus-behavior | `boolean` | `false` | 按钮是否遵循原生的 focus 行为。Safari 原生的 button 无法通过点击被聚焦，所以默认情况下 naive-ui 做了一些处理使它可以被聚焦，如果你不需要这种行为，或者发现你需要让按钮可被拖动，可以开启这个属性 | 2.28.3 |
+| native-focus-behavior | `boolean` | 浏览器不是 Safari | 按钮是否遵循原生的 focus 行为。Safari 原生的 button 无法通过点击被聚焦，所以默认情况下 naive-ui 做了一些处理使它可以被聚焦，如果你不需要这种行为，或者发现你需要让按钮可被拖动，可以开启这个属性 | 2.28.3 |
 | icon-placement | `'left' \| 'right'` | `'left'` | 按钮中图标的位置 |  |
 | keyboard | `boolean` | `true` | 是否支持键盘操作 |  |
 | loading | `boolean` | `false` | 按钮是否显示加载状态 |  |

src/button/src/Button.tsx

@@ -13,6 +13,9 @@ import {
 import { useMemo } from 'vooks'
 import { changeColor } from 'seemly'
 import { createHoverColor, createPressedColor } from '../../_utils/color/index'
+import { buttonGroupInjectionKey } from '../../button-group/src/context'
+import { useRtl } from '../../_mixins/use-rtl'
+import { isSafari } from '../../_utils/env/browser'
 import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import {
@@ -33,10 +36,8 @@ import {
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import { buttonLight } from '../styles'
 import type { ButtonTheme } from '../styles'
-import { buttonGroupInjectionKey } from '../../button-group/src/context'
 import type { Type, Size } from './interface'
 import style from './styles/index.cssr'
-import useRtl from '../../_mixins/use-rtl'
 
 export const buttonProps = {
   ...(useTheme.props as ThemeProps<ButtonTheme>),
@@ -84,7 +85,10 @@ export const buttonProps = {
     default: true
   },
   onClick: [Function, Array] as PropType<MaybeArray<(e: MouseEvent) => void>>,
-  nativeFocusBehavior: Boolean
+  nativeFocusBehavior: {
+    Boolean,
+    default: !isSafari
+  }
 } as const
 
 export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>

src/card/src/Card.tsx

@@ -1,6 +1,6 @@
 import { h, defineComponent, computed, PropType, CSSProperties } from 'vue'
 import { getPadding } from 'seemly'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { call, createKey, keysOf, resolveWrappedSlot } from '../../_utils'

src/checkbox/src/Checkbox.tsx

@@ -33,7 +33,7 @@ import type {
   CheckboxInst
 } from './interface'
 import style from './styles/index.cssr'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 
 export const checkboxProps = {
   ...(useTheme.props as ThemeProps<CheckboxTheme>),

src/collapse-transition/src/CollapseTransition.tsx

@@ -7,7 +7,7 @@ import {
   watchEffect
 } from 'vue'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { warnOnce } from '../../_utils'

src/collapse/src/Collapse.tsx

@@ -22,7 +22,7 @@ import {
 import type { MaybeArray } from '../../_utils'
 import { collapseLight, CollapseTheme } from '../styles'
 import style from './styles/index.cssr'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import {
   OnItemHeaderClick,
   OnUpdateExpandedNames,

src/collapse/src/CollapseItem.tsx

@@ -9,7 +9,7 @@ import { NBaseIcon } from '../../_internal'
 import { ExtractPublicPropTypes, throwError } from '../../_utils'
 import { collapseInjectionKey } from './Collapse'
 import NCollapseItemContent from './CollapseItemContent'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import { useConfig } from '../../_mixins'
 
 export const collapseItemProps = {

src/dynamic-input/src/DynamicInput.tsx

@@ -36,7 +36,7 @@ import NDynamicInputPairPreset from './PairPreset'
 import { dynamicInputInjectionKey } from './interface'
 import type { OnUpdateValue } from './interface'
 import style from './styles/index.cssr'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 
 const globalDataKeyMap = new WeakMap()
 

src/input-number/src/InputNumber.tsx

@@ -33,7 +33,7 @@ import type { InputNumberTheme } from '../styles'
 import { parse, validator, format, parseNumber, isWipValue } from './utils'
 import type { OnUpdateValue, InputNumberInst } from './interface'
 import style from './styles/input-number.cssr'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 
 const HOLDING_CHANGE_THRESHOLD = 800
 const HOLDING_CHANGE_INTERVAL = 100

src/input/src/Input.tsx

@@ -24,7 +24,7 @@ import { VResizeObserver } from 'vueuc'
 import { off, on } from 'evtd'
 import type { FormValidationStatus } from '../../form/src/interface'
 import { EyeIcon, EyeOffIcon } from '../../_internal/icons'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import {
   NBaseClear,
   NBaseIcon,

src/notification/src/Notification.tsx

@@ -14,7 +14,7 @@ import {
   WarningIcon,
   ErrorIcon
 } from '../../_internal/icons'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import { createKey, keysOf, render } from '../../_utils'
 import { NBaseIcon, NBaseClose } from '../../_internal'
 import { useConfig, useThemeClass } from '../../_mixins'

src/page-header/src/PageHeader.tsx

@@ -8,7 +8,7 @@ import style from './styles/index.cssr'
 import { ArrowBackIcon } from '../../_internal/icons'
 import { NBaseIcon } from '../../_internal'
 import type { ExtractPublicPropTypes } from '../../_utils'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 
 export const pageHeaderProps = {
   ...(useTheme.props as ThemeProps<PageHeaderTheme>),

src/pagination/src/Pagination.tsx

@@ -50,7 +50,7 @@ import {
   RenderSuffix,
   Size
 } from './interface'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 
 export const paginationProps = {
   ...(useTheme.props as ThemeProps<PaginationTheme>),

src/radio/src/Radio.tsx

@@ -6,7 +6,7 @@ import type { ExtractPublicPropTypes } from '../../_utils'
 import { radioLight, RadioTheme } from '../styles'
 import useRadio from './use-radio'
 import style from './styles/radio.cssr'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 
 export const radioProps = useRadio.props
 export type RadioProps = ExtractPublicPropTypes<typeof useRadio.props>

src/radio/src/RadioGroup.tsx

@@ -21,7 +21,7 @@ import type { RadioProps } from './use-radio'
 import { radioGroupInjectionKey } from './use-radio'
 import style from './styles/radio-group.cssr'
 import { OnUpdateValue, OnUpdateValueImpl } from './interface'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 
 function mapSlot (
   defaultSlot: VNode[],

src/space/src/Space.tsx

@@ -6,7 +6,7 @@ import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { spaceLight } from '../styles'
 import type { SpaceTheme } from '../styles'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import { ensureSupportFlexGap } from './utils'
 
 type Align =

src/table/src/Table.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, computed, h, PropType, CSSProperties } from 'vue'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import type { ThemeProps } from '../../_mixins'
 import { createKey } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'

src/tag/src/Tag.tsx

@@ -9,7 +9,7 @@ import {
   provide,
   toRef
 } from 'vue'
-import useRtl from '../../_mixins/use-rtl'
+import { useRtl } from '../../_mixins/use-rtl'
 import { NBaseClose } from '../../_internal/close'
 import { useConfig, useThemeClass, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'