refactor: rate style (#6254)

Author: songsong0707

components/rate/index.tsx

@@ -16,6 +16,8 @@ import { useInjectFormItemContext } from '../form/FormItemContext';
 import type { Direction } from '../config-provider';
 import type { FocusEventHandler, KeyboardEventHandler } from '../_util/EventInterface';
 
+import useStyle from './style';
+
 export const rateProps = () => ({
   prefixCls: String,
   count: Number,
@@ -54,6 +56,7 @@ const Rate = defineComponent({
   // emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'],
   setup(props, { slots, attrs, emit, expose }) {
     const { prefixCls, direction } = useConfigInject('rate', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const formItemContext = useInjectFormItemContext();
     const rateRef = ref();
     const [setRef, starRefs] = useRefs();
@@ -224,9 +227,10 @@ const Rate = defineComponent({
         );
       }
       const rateClassName = classNames(prefixCls.value, disabledClass, className, {
+        [hashId.value]: true,
         [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
       });
-      return (
+      return wrapSSR(
         <ul
           {...attrs}
           id={id}
@@ -241,7 +245,7 @@ const Rate = defineComponent({
           role="radiogroup"
         >
           {stars}
-        </ul>
+        </ul>,
       );
     };
   },

components/rate/style/index.less

@@ -0,0 +1,135 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { resetComponent } from '../../_style';
+
+export type ComponentToken = {};
+
+interface RateToken extends FullToken<'Rate'> {
+  rateStarColor: string;
+  rateStarSize: number;
+  rateStarHoverScale: CSSObject['transform'];
+  defaultColor: string;
+}
+
+const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-star`]: {
+      position: 'relative',
+      display: 'inline-block',
+      color: 'inherit',
+      cursor: 'pointer',
+
+      '&:not(:last-child)': {
+        marginInlineEnd: token.marginXS,
+      },
+
+      '> div': {
+        transition: `all ${token.motionDurationMid}, outline 0s`,
+
+        '&:hover': {
+          transform: token.rateStarHoverScale,
+        },
+
+        '&:focus': {
+          outline: 0,
+        },
+
+        '&:focus-visible': {
+          outline: `${token.lineWidth}px dashed ${token.rateStarColor}`,
+          transform: token.rateStarHoverScale,
+        },
+      },
+
+      '&-first, &-second': {
+        color: token.defaultColor,
+        transition: `all ${token.motionDurationMid}`,
+        userSelect: 'none',
+
+        [token.iconCls]: {
+          verticalAlign: 'middle',
+        },
+      },
+
+      '&-first': {
+        position: 'absolute',
+        top: 0,
+        insetInlineStart: 0,
+        width: '50%',
+        height: '100%',
+        overflow: 'hidden',
+        opacity: 0,
+      },
+
+      [`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
+        opacity: 1,
+      },
+
+      [`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
+        color: 'inherit',
+      },
+    },
+  };
+};
+
+const genRateRtlStyle = (token: RateToken): CSSObject => ({
+  [`&-rtl${token.componentCls}`]: {
+    direction: 'rtl',
+  },
+});
+
+const genRateStyle: GenerateStyle<RateToken> = token => {
+  const { componentCls } = token;
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+
+      display: 'inline-block',
+      margin: 0,
+      padding: 0,
+      color: token.rateStarColor,
+      fontSize: token.rateStarSize,
+      lineHeight: 'unset',
+      listStyle: 'none',
+      outline: 'none',
+
+      // disable styles
+      [`&-disabled${componentCls} ${componentCls}-star`]: {
+        cursor: 'default',
+
+        '&:hover': {
+          transform: 'scale(1)',
+        },
+      },
+
+      // star styles
+      ...genRateStarStyle(token),
+
+      // text styles
+      [`+ ${componentCls}-text`]: {
+        display: 'inline-block',
+        marginInlineStart: token.marginXS,
+        fontSize: token.fontSize,
+      },
+
+      // rtl styles
+      ...genRateRtlStyle(token),
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Rate', token => {
+  const { colorFillContent } = token;
+
+  const rateToken = mergeToken<RateToken>(token, {
+    rateStarColor: token['yellow-6'],
+    rateStarSize: token.controlHeightLG * 0.5,
+    rateStarHoverScale: 'scale(1.1)',
+    defaultColor: colorFillContent,
+  });
+  return [genRateStyle(rateToken)];
+});

components/rate/style/index.ts

@@ -4,7 +4,7 @@ import './radio/style';
 import './checkbox/style';
 // import './grid/style';
 // import './tag/style';
-import './rate/style';
+// import './rate/style';
 import './pagination/style';
 // import './avatar/style';
 // import './badge/style';

components/rate/style/index.tsx

@@ -28,7 +28,7 @@ import type { ComponentToken as PopconfirmComponentToken } from '../../popconfir
 import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
 import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
 // import type { ComponentToken as RadioComponentToken } from '../../radio/style';
-// import type { ComponentToken as RateComponentToken } from '../../rate/style';
+import type { ComponentToken as RateComponentToken } from '../../rate/style';
 // import type { ComponentToken as ResultComponentToken } from '../../result/style';
 // import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
 // import type { ComponentToken as SelectComponentToken } from '../../select/style';
@@ -85,7 +85,7 @@ export interface ComponentTokenMap {
   Pagination?: {};
   Popover?: PopoverComponentToken;
   Popconfirm?: PopconfirmComponentToken;
-  //   Rate?: RateComponentToken;
+  Rate?: RateComponentToken;
   //   Radio?: RadioComponentToken;
   //   Result?: ResultComponentToken;
   //   Segmented?: SegmentedComponentToken;