Avatar Dot indicator does't follow figma spec

Abierto
#1,509 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, storybook, tailwindcss, typescript
Área
design, frontend

Línea de trabajo

Comienza con la entrada de Storybook del componente Avatar en la historia default-avatar vinculada y reproduce la posición del estado en la esquina superior derecha con avatares grandes y extragrandes redondeados. Compara el punto renderizado con el diseño de Figma vinculado y ajusta el posicionamiento dependiente del tamaño para que cada estado permanezca correctamente colocado; verifica las variantes afectadas de Avatar en Storybook.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

  • I have searched the Issues to see if this bug has already been reported
  • I have tested the latest version

Steps to reproduce

  1. Go to https://storybook.flowbite-react.com/?path=/story/components-avatar--default-avatar&args=status:online;rounded:!true
  2. Set the controls as screenshot
  • rounded: true
  • size: "lg" or "xl"
  • status: one of the statuses
  • statusPosition: "top-right"
截圖 2024-11-18 下午4 28 48
  1. You can see the dot indicator with incorrect position

Current behavior

截圖 2024-11-18 下午4 32 05

Expected behavior

https://www.figma.com/design/BwJpLnMEFPsqLDaSgylB0V/flowbite-pro-figma-v2.10.0?node-id=535-231&node-type=frame&t=78Sn0Hz6cMadUTJO-0
截圖 2024-11-18 下午4 28 03

Context

The statusPosition does not change when the size changed

Lenguaje dominante
TypeScript
Estrellas
2.1k
Forks
502
Merge medio
19 h 16 min
PR fusionados (30 d)
2

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de themesberg/flowbite-react

Todos los issues de themesberg/flowbite-react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.