refactor: rate style (#6254)

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

@@ -1,91 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@rate-prefix-cls: ~'@{ant-prefix}-rate';
-
-.@{rate-prefix-cls} {
-  .reset-component();
-
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  color: @rate-star-color;
-  font-size: @rate-star-size;
-  line-height: unset;
-  list-style: none;
-  outline: none;
-
-  &-disabled &-star {
-    cursor: default;
-
-    > div:hover {
-      transform: scale(1);
-    }
-  }
-
-  &-star {
-    position: relative;
-    display: inline-block;
-    color: inherit;
-    cursor: pointer;
-
-    &:not(:last-child) {
-      margin-right: 8px;
-    }
-
-    > div {
-      transition: all 0.3s, outline 0s;
-
-      &:hover {
-        transform: @rate-star-hover-scale;
-      }
-
-      &:focus {
-        outline: 0;
-      }
-
-      &:focus-visible {
-        outline: 1px dashed @rate-star-color;
-        transform: @rate-star-hover-scale;
-      }
-    }
-
-    &-first,
-    &-second {
-      color: @rate-star-bg;
-      transition: all 0.3s;
-      user-select: none;
-      .@{iconfont-css-prefix} {
-        vertical-align: middle;
-      }
-    }
-
-    &-first {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 50%;
-      height: 100%;
-      overflow: hidden;
-      opacity: 0;
-    }
-
-    &-half &-first,
-    &-half &-second {
-      opacity: 1;
-    }
-
-    &-half &-first,
-    &-full &-second {
-      color: inherit;
-    }
-  }
-
-  &-text {
-    display: inline-block;
-    margin: 0 8px;
-    font-size: @font-size-base;
-  }
-}
-
-@import './rtl';

components/rate/style/index.ts

@@ -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.tsx

@@ -1,5 +0,0 @@
-import '../../style/index.less';
-import './index.less';
-
-// style dependencies
-import '../../tooltip/style';

components/rate/style/rtl.less

@@ -1,21 +0,0 @@
-.@{rate-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-
-  &-star {
-    &:not(:last-child) {
-      .@{rate-prefix-cls}-rtl & {
-        margin-right: 0;
-        margin-left: 8px;
-      }
-    }
-
-    &-first {
-      .@{rate-prefix-cls}-rtl & {
-        right: 0;
-        left: auto;
-      }
-    }
-  }
-}

components/style.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/theme/interface/components.ts

@@ -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;