feat(float-button): make it work

jahnli · Feb 20, 2024 · 7feb3b3 · 7feb3b3
1 parent 3b28b67
commit 7feb3b3
Show file tree

Hide file tree

Showing 26 changed files with 731 additions and 433 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -14,6 +14,7 @@
 - Fix `n-form-item`'s feedback may hide and show again, closes [#5583](https://github.com/tusen-ai/naive-ui/issues/5583).
 - Fix `n-popselect`'s header make inner input unavailable, closes [#5494](https://github.com/tusen-ai/naive-ui/pull/5494).
 - Fix `n-qr-code`'s style of size.
+- Fix `n-badge` affects child elements' text color.
 
 ### Features
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -14,6 +14,7 @@
 - 修复 `n-form-item` 校验结果可能会闪烁的问题，关闭 [#5583](https://github.com/tusen-ai/naive-ui/issues/5583)
 - 修复 `n-popselect` 组件的 header 插槽里 input 无法输入，关闭 [#5494](https://github.com/tusen-ai/naive-ui/pull/5494)
 - 修复 `n-qr-code` 大小样式问题
+- 修复 `n-badge` 会影响子元素的文字颜色
 
 ### Features
 
@@ -28,6 +29,10 @@
 
 - 新增 `etEE` locale
 
+### TODO
+
+menu indent...
+
 ## 2.37.3
 
 ### Fixes

diff --git a/src/badge/src/styles/index.cssr.ts b/src/badge/src/styles/index.cssr.ts
@@ -24,7 +24,6 @@ export default c([
     display: inline-flex;
     position: relative;
     vertical-align: middle;
-    color: var(--n-color);
     font-family: var(--n-font-family);
   `, [
     cM('as-is', [

diff --git a/src/float-button-group/src/FloatButtonGroup.tsx b/src/float-button-group/src/FloatButtonGroup.tsx
@@ -3,64 +3,54 @@ import {
   type PropType,
   defineComponent,
   computed,
-  type CSSProperties
+  type CSSProperties,
+  provide,
+  type Ref,
+  toRef
 } from 'vue'
-import type { Size } from '../../button/src/interface'
 import { type ThemeProps, useConfig, useTheme } from '../../_mixins'
-import type { ExtractPublicPropTypes } from '../../_utils'
+import {
+  createInjectionKey,
+  formatLength,
+  type ExtractPublicPropTypes
+} from '../../_utils'
 import style from './styles/index.cssr'
 import floatButtonGroupLight, {
   type FloatButtonGroupTheme
 } from '../styles/light'
 
 export interface ButtonGroupInjection {
-  size?: Size | undefined
+  shapeRef: Ref<'circle' | 'square'>
 }
 
 export const floatButtonGroupProps = {
   ...(useTheme.props as ThemeProps<FloatButtonGroupTheme>),
-  width: {
-    type: [Number, String] as PropType<string | number>,
-    default: 'auto'
-  },
-  height: {
-    type: [Number, String] as PropType<string | number>,
-    default: 'auto'
-  },
-  left: {
-    type: [Number, String] as PropType<string | number>,
-    default: undefined
-  },
-  right: {
-    type: [Number, String] as PropType<string | number>,
-    default: 40
-  },
-  top: {
-    type: [Number, String] as PropType<string | number>,
-    default: undefined
-  },
-  bottom: {
-    type: [Number, String] as PropType<string | number>,
-    default: 40
-  },
-  radius: {
-    type: [Number, String] as PropType<string | number>,
-    default: 22
+  left: [Number, String] as PropType<string | number>,
+  right: [Number, String] as PropType<string | number>,
+  top: [Number, String] as PropType<string | number>,
+  bottom: [Number, String] as PropType<string | number>,
+  shape: {
+    type: String as PropType<'square' | 'circle'>,
+    default: 'circle'
   },
-  backgroundColor: String,
-  vertical: Boolean
+  position: {
+    type: String as PropType<'relative' | 'absolute' | 'fixed'>,
+    default: 'fixed'
+  }
 } as const
 
 export type FloatButtonGroupProps = ExtractPublicPropTypes<
   typeof floatButtonGroupProps
 >
 
+export const floatButtonGroupInjectionKey =
+  createInjectionKey<ButtonGroupInjection>('n-float-button-group')
+
 export default defineComponent({
   name: 'FloatButtonGroup',
   props: floatButtonGroupProps,
   setup (props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
-
     const themeRef = useTheme(
       'FloatButtonGroup',
       '-float-button-group',
@@ -69,50 +59,40 @@ export default defineComponent({
       props,
       mergedClsPrefixRef
     )
-
     const cssVarsRef = computed(() => {
       const {
-        self: { color, textColor, boxShadow, boxShadowHover, boxShadowPressed },
+        self: { color, boxShadow, buttonBorderColor },
         common: { cubicBezierEaseInOut }
       } = themeRef.value
       return {
         '--n-bezier': cubicBezierEaseInOut,
         '--n-box-shadow': boxShadow,
-        '--n-box-shadow-hover': boxShadowHover,
-        '--n-box-shadow-pressed': boxShadowPressed,
         '--n-color': color,
-        '--n-text-color': textColor,
-        left: formatNumber(props.left),
-        right: formatNumber(props.right),
-        top: formatNumber(props.top),
-        bottom: formatNumber(props.bottom),
-        width: formatNumber(props.width),
-        height: formatNumber(props.height),
-        borderRadius: formatNumber(props.radius),
-        backgroundColor: props.backgroundColor
+        '--n-button-border-color': buttonBorderColor,
+        position: props.position,
+        left: formatLength(props.left),
+        right: formatLength(props.right),
+        top: formatLength(props.top),
+        bottom: formatLength(props.bottom)
       }
     })
 
-    const formatNumber = (
-      value: number | string | undefined
-    ): string | undefined => {
-      if (typeof value === 'number') return `${value}px`
-      return value
-    }
+    provide(floatButtonGroupInjectionKey, {
+      shapeRef: toRef(props, 'shape')
+    })
 
     return {
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
-      mergedClsPrefix: mergedClsPrefixRef,
-      formatNumber
+      mergedClsPrefix: mergedClsPrefixRef
     }
   },
   render () {
-    const { mergedClsPrefix, cssVars } = this
+    const { mergedClsPrefix, cssVars, shape } = this
     return (
       <div
         class={[
           `${mergedClsPrefix}-float-button-group`,
-          this.vertical && `${mergedClsPrefix}-float-button-group--vertical`
+          `${mergedClsPrefix}-float-button-group--${shape}-shape`
         ]}
         style={cssVars as CSSProperties}
         role="group"

diff --git a/src/float-button-group/src/styles/index.cssr.ts b/src/float-button-group/src/styles/index.cssr.ts
@@ -1,24 +1,47 @@
-import { cB, cM, cNotM } from '../../../_utils/cssr/index'
-
-export default cB('float-button-group', `
-  position: fixed;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--n-text-color);
-  transition:
-    color .3s var(--n-bezier),
-    box-shadow .3s var(--n-bezier),
-    background-color .3s var(--n-bezier);
-`, [
-  cNotM('vertical', {
-    flexDirection: 'row'
-  }, [
+import { c, cB, cE, cM } from '../../../_utils/cssr/index'
 
+export default cB('float-button-group', [
+  cB('float-button', `
+    position: relative;
+  `),
+  cM('square-shape', `
+    background-color: var(--n-color);
+    cursor: pointer;
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    flex-direction: column;
+    box-shadow: var(--n-box-shadow);
+    transition:
+      color .3s var(--n-bezier),
+      box-shadow .3s var(--n-bezier),
+      background-color .3s var(--n-bezier);
+  `, [
+    cB('float-button', `
+      background-color: unset;
+      border-radius: 0;
+      box-shadow: none;
+      box-sizing: content-box;
+    `, [
+      c('&:not(:last-child)', `
+        border-bottom: 1px solid var(--n-button-border-color);    
+      `),
+      c('&:first-child', `
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      `),
+      c('&:last-child', `
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      `),
+      cE('hover-background', 'inset: 4px; border-radius: 4px;')
+    ])
   ]),
-  cM('vertical', {
-    flexDirection: 'column'
-  }, [
+  cM('circle-shape', [
+    c('>:not(:last-child)', `
+      margin-bottom: 16px;
+    `)
   ])
 ])
diff --git a/src/float-button-group/styles/dark.ts b/src/float-button-group/styles/dark.ts
@@ -5,13 +5,11 @@ const floatButtonGroupDark: FloatButtonGroupTheme = {
   name: 'FloatButtonGroup',
   common: commonDark,
   self (vars) {
-    const { popoverColor, textColor2 } = vars
+    const { popoverColor, dividerColor } = vars
     return {
       color: popoverColor,
-      textColor: textColor2,
-      boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
-      boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)',
-      boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)'
+      buttonBorderColor: dividerColor,
+      boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)'
     }
   }
 }

diff --git a/src/float-button-group/styles/light.ts b/src/float-button-group/styles/light.ts
@@ -3,13 +3,11 @@ import { type ThemeCommonVars } from '../../config-provider'
 import { commonLight } from '../../styles'
 
 const self = (vars: ThemeCommonVars) => {
-  const { popoverColor, textColor2 } = vars
+  const { popoverColor, dividerColor } = vars
   return {
     color: popoverColor,
-    textColor: textColor2,
-    boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
-    boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)',
-    boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)'
+    buttonBorderColor: dividerColor,
+    boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)'
   }
 }
 

diff --git a/src/float-button/demos/enUS/badge.demo.vue b/src/float-button/demos/enUS/badge.demo.vue
@@ -9,42 +9,42 @@
   <div style="height: 200px; transform: translate(0)">
     <n-float-button :right="0" :bottom="0">
       <n-badge :value="9" :offset="[6, -8]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="70" :bottom="0">
       <n-badge :value="100" :max="99" :offset="[6, -8]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="142" :bottom="0">
       <n-badge dot :offset="[4, -4]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="142" :bottom="0">
       <n-badge dot :offset="[4, -4]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="0" :bottom="60">
       <n-badge value="New" :offset="[10, -10]">
-        <n-icon :size="22" color="grey">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>
     </n-float-button>
     <n-float-button :right="70" :bottom="60">
-      <n-badge :value="9" :offset="[6, -8]" color="grey">
-        <n-icon :size="22" color="grey">
+      <n-badge :value="9" :offset="[6, -8]">
+        <n-icon :size="22">
           <alarm-outline-icon />
         </n-icon>
       </n-badge>

diff --git a/src/float-button/demos/enUS/basic.demo.vue b/src/float-button/demos/enUS/basic.demo.vue
@@ -4,23 +4,23 @@
 
 <template>
   <div style="height: 200px; transform: translate(0)">
-    <n-float-button :right="0" :bottom="0">
-      <n-icon :size="24">
+    <n-float-button :right="0" :bottom="0" shape="square">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
-    <n-float-button :left="0" :bottom="0">
-      <n-icon :size="24">
+    <n-float-button :left="0" :bottom="0" shape="square">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
     <n-float-button :right="0" :top="0">
-      <n-icon :size="24">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>
     <n-float-button :left="0" :top="0">
-      <n-icon :size="24">
+      <n-icon>
         <cash-icon />
       </n-icon>
     </n-float-button>