feat(comp:rate): add color prop for rate (#1420)

* feat(comp:rate): add color prop for rate * test(comp:rate): update snapshot
IDuxFE · Feb 27, 2023 · 31c29e0 · 31c29e0
1 parent 3e053d3
commit 31c29e0
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/packages/components/rate/__tests__/__snapshots__/rate.spec.ts.snap b/packages/components/rate/__tests__/__snapshots__/rate.spec.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`Rate > render work 1`] = `
 "<ul class=\\"ix-rate ix-rate-md\\" role=\\"radiogroup\\">
-  <li class=\\"ix-rate-item ix-rate-item-full\\"><span aria-checked=\\"true\\" aria-posinset=\\"1\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
-  <li class=\\"ix-rate-item ix-rate-item-full\\"><span aria-checked=\\"true\\" aria-posinset=\\"2\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
-  <li class=\\"ix-rate-item ix-rate-item-full\\"><span aria-checked=\\"true\\" aria-posinset=\\"3\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
-  <li class=\\"ix-rate-item ix-rate-item-zero\\"><span aria-checked=\\"false\\" aria-posinset=\\"4\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
-  <li class=\\"ix-rate-item ix-rate-item-zero\\"><span aria-checked=\\"false\\" aria-posinset=\\"5\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
+  <li class=\\"ix-rate-item ix-rate-item-full\\" style=\\"\\"><span aria-checked=\\"true\\" aria-posinset=\\"1\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
+  <li class=\\"ix-rate-item ix-rate-item-full\\" style=\\"\\"><span aria-checked=\\"true\\" aria-posinset=\\"2\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
+  <li class=\\"ix-rate-item ix-rate-item-full\\" style=\\"\\"><span aria-checked=\\"true\\" aria-posinset=\\"3\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
+  <li class=\\"ix-rate-item ix-rate-item-zero\\" style=\\"\\"><span aria-checked=\\"false\\" aria-posinset=\\"4\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
+  <li class=\\"ix-rate-item ix-rate-item-zero\\" style=\\"\\"><span aria-checked=\\"false\\" aria-posinset=\\"5\\" aria-setsize=\\"5\\" role=\\"radio\\" tabindex=\\"0\\"><span class=\\"ix-rate-item-first\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span><span class=\\"ix-rate-item-second\\"><i class=\\"ix-icon ix-icon-star-filled\\" role=\\"img\\" aria-label=\\"star-filled\\"></i></span></span></li>
 </ul>"
 `;
 

diff --git a/packages/components/rate/docs/Api.zh.md b/packages/components/rate/docs/Api.zh.md
@@ -13,5 +13,6 @@
 | `disabled` | 禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
 | `icon` | 自定义图标 | `string \| #icon={disabled, focused, index}` | `'star-filled'` | ✅ | - |
 | `size` | 设置大小 | `'sm' \| 'md' \| 'lg'` | `'md'` | ✅ | - |
+| `color` | 高亮图标的颜色 | `string` | undefined | - | - |
 | `tooltips` | 悬浮提示信息数组 | `string[]` | `[]` | - | - |
 | `onChange` | 值发生改变时的回调 | `(value: number) => void` | - | - | - |
diff --git a/packages/components/rate/src/Rate.tsx b/packages/components/rate/src/Rate.tsx
@@ -125,7 +125,7 @@ export default defineComponent({
       const itemValue = convertNumber(hoverValue.value ?? accessor.value)
       const itemPrefixCls = `${mergedPrefixCls.value}-item`
 
-      const { tooltips } = props
+      const { tooltips, color } = props
       const children = []
       for (let index = 0; index < count; index++) {
         children.push(
@@ -137,6 +137,7 @@ export default defineComponent({
             index={index}
             prefixCls={itemPrefixCls}
             tooltip={tooltips[index]}
+            color={color}
             value={itemValue}
             onClick={handleItemClick}
             onMouseMove={handleItemMouseMove}

diff --git a/packages/components/rate/src/RateItem.tsx b/packages/components/rate/src/RateItem.tsx
@@ -43,11 +43,11 @@ export default defineComponent({
     })
 
     return () => {
-      const { count, disabled, index, prefixCls, tooltip, value } = props
+      const { count, disabled, index, prefixCls, tooltip, value, color } = props
 
       const iconNode = slots.default!()
       const itemNode = (
-        <li ref={liRef} class={classes.value}>
+        <li ref={liRef} class={classes.value} style={`color: ${color}`}>
           <span
             aria-checked={value > index}
             aria-posinset={index + 1}

diff --git a/packages/components/rate/src/types.ts b/packages/components/rate/src/types.ts
@@ -33,6 +33,10 @@ export const rateProps = {
     default: (): string[] => [],
   },
   size: String as PropType<FormSize>,
+  color: {
+    type: String,
+    default: undefined,
+  },
 
   // events
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<(value: number) => void>>,
@@ -78,6 +82,7 @@ export const rateItemProps = {
     type: Number,
     required: true,
   },
+  color: String,
 
   // events
   onClick: {