feat(rating): small style tweaks

adevinta · Oct 24, 2023 · 4b3c305 · 4b3c305
1 parent 4a7858e
commit 4b3c305
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/components/rating/src/Rating.stories.tsx b/packages/components/rating/src/Rating.stories.tsx
@@ -9,4 +9,8 @@ const meta: Meta<typeof Rating> = {
 
 export default meta
 
-export const Default: StoryFn = _args => <Rating value={4.5} />
+export const Default: StoryFn = _args => (
+  <div className="w-fit">
+    <Rating value={4.5} />
+  </div>
+)
diff --git a/packages/components/rating/src/Rating.styles.ts b/packages/components/rating/src/Rating.styles.ts
@@ -1,12 +1,12 @@
 import { cx } from 'class-variance-authority'
 
 export const ratingStyles = cx(
-  'inline-flex',
+  'flex',
   'peer-[[data-part=input][data-clicked]]:shadow-none peer-focus-visible:u-ring',
   '[&_[data-part=star]:hover_~_[data-part=star]_>_div]:!w-none' /* 1 */
 )
 
 /**
  * 1. Display the remaining stars as outlined.
- * By 'remaining,' we mean the stars located to the right of the cursor
+ * By 'remaining', we mean the stars located to the right of the cursor
  */
diff --git a/packages/components/rating/src/Rating.tsx b/packages/components/rating/src/Rating.tsx
@@ -30,8 +30,6 @@ export interface RatingProps extends PropsWithChildren<ComponentPropsWithoutRef<
   disabled?: boolean
 }
 
-// + intent, size
-
 export const Rating = forwardRef<HTMLDivElement, RatingProps>(({ value, ...rest }, ref) => {
   const [ratingValue, setRatingValue] = useState(value)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -74,11 +72,17 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(({ value, ...rest
   }
 
   return (
-    <div ref={ref} data-spark-component="rating" {...rest} onMouseLeave={resetDataPartStarAttr}>
+    <div
+      className="relative"
+      ref={ref}
+      data-spark-component="rating"
+      {...rest}
+      onMouseLeave={resetDataPartStarAttr}
+    >
       <input
         ref={inputRef}
         data-part="input"
-        className="peer absolute opacity-0"
+        className="peer absolute inset-none opacity-0"
         type="range"
         min="0"
         max="5"
@@ -100,8 +104,6 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(({ value, ...rest
           />
         ))}
       </div>
-
-      <span className="ml-xl">{ratingValue}</span>
     </div>
   )
 })