feat(chip): align atom with design system by andresito87 · Pull Request #98 · Stack-and-Flow/design-system

andresito87 · 2025-08-23T19:11:40Z

Summary

Completa el componente Chip y lo alinea con los patrones actuales del Design System.
Corrige accesibilidad, contraste light/dark, interacción clickable/closable y publicación del componente en la API pública.
Añade stories y tests para cubrir variantes, estados y regresiones del componente.

Closes #19

Type of change

Component checklist (skip if not applicable)

Follows the 5-file structure (types.ts, use*.ts, Component.tsx, index.ts, *.stories.tsx)
CVA variants defined in types.ts, not inline
No hardcoded colors — uses tokens from theme.css
No any types — TypeScript strict
ARIA attributes present and correct
Keyboard navigable (Tab, Enter, Escape where applicable)
Dark mode works correctly
Storybook stories cover: default, variants, states (hover, focus, disabled)
Tests added or updated

How to test

pnpm run storybook
Navegar a Atoms/Chip
Validar variantes, tamaños, estados interactivos y dark mode:
- Size
- Color
- Variant
- Clickable
- Closable And Clickable
- Disabled And Closable
- Dot With Text
Confirmar que el addon de accessibility no reporte problemas reales del componente.
Ejecutar pnpm test -- src/components/atoms/chip/Chip.test.tsx

Screenshots / recordings (if applicable)

Se validó visualmente durante la corrección iterativa en Storybook para light y dark mode.

Notes for reviewer

Cuando closable se combina con interacción (onClick/selectable), el componente usa un patrón de split-actions para evitar controles interactivos anidados.
Se añadió export público en src/index.ts.
El issue [ATOMS] Chip #19 actualmente no muestra label de aprobación; si el workflow exige aprobación explícita del issue, puede bloquear checks hasta que se añada.

netlify · 2025-08-23T19:12:16Z

✅ Deploy Preview for egdev6-design-system ready!

Name	Link
🔨 Latest commit	`6f35ebc`
🔍 Latest deploy log	https://app.netlify.com/projects/egdev6-design-system/deploys/68c85e9e9d5bf00008290440
😎 Deploy Preview	https://deploy-preview-98--egdev6-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

egdev6 · 2025-08-25T09:41:42Z

@andresito87 varias cosas:

VISUALIZACIÓN

1- La variante shadow me queda rara con esa sombra en light mode

2-Asegúrate que los elementos cojan los colores correctos en light mode

3-Me queda raro que el icono de close sea tan pequeño (sin hover queda como muy separado) quizás sobreescribir los estilos para que no añada ese padding y el círculo en el hover)

4-El list lo eliminaría para hacerlo molécula en el futuro (aunque es un buen aporte), ya que lo veo más propio de una combinación de varias cosas (noi sólo el chip)

5-Le quitaría los efectos de hover a todas las variantes no interactuables con click ya que el componente en sí queda raro que tenga ese fecto hover cuando sólo es un componente visual e informativo.

6-Revisa errores de accesibilidad:

Lo demás lo veo guay. Buen trabajo!

andresito87 · 2025-08-29T14:39:03Z

@egdev6 He corregido lo fallos que has propuesto. El único que no me termina de convencer es cuando usamos el componente icon que no se como reescribir sus estilos para que use color claro u oscuro y que no cree hover ni cambios de colores. El problema del punto 2:

Lo demás puntos lo he corregido y subido los cambios.
Te quería comentar, ¿tú le ves sentido a la opción con un punto y sin texto?:

Sino eso, la quito.
Gracias.

egdev6 · 2025-09-05T09:15:44Z

@andresito87

1- Revisa los paddings, me quedan muy grandes cuando el chip es un componente que debe ocupar poco espacio. Revisa HeroUI u otras librerías para ajustar

2-Me sigue quedando rara la variante shadow. Prueba a hacerla menos extensa...mira componente button x ej

3- El end content sigue añadiendo fondo de un color diferente

4- los iconos de close me siguen quedando muy pequeños...quizás cambiando los padding (punto1) pueda quedar mejor. Si no ajusta tamaño

5-tienes problemas de accesibilidad con las variantes. Si es el rojo prueba a usar el accent en dark mode o revisa contrastes

Lo demás lo veo guay! dale caña!

…se icon in chip component

… elements

Copilot

Pull request overview

Adds the new Chip atom and wires it into the public API, aiming to match current Design System interaction + accessibility patterns, with Storybook and Vitest coverage.

Changes:

Introduces Chip component implementation (Chip.tsx) with split-actions markup when closable + interactive are combined.
Adds styling/variants via CVA (types.ts) and interaction/a11y logic via a hook (useChip.ts).
Publishes Chip from src/index.ts and adds Storybook stories + behavior tests.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
src/index.ts	Exposes `Chip` through the public entrypoint.
src/components/atoms/chip/Chip.tsx	Implements Chip rendering (single vs split-actions) and close button UI.
src/components/atoms/chip/useChip.ts	Centralizes interaction, selection state, and accessibility props.
src/components/atoms/chip/types.ts	Defines CVA variants and public prop types for the component.
src/components/atoms/chip/index.ts	Barrel export for the chip module.
src/components/atoms/chip/Chip.stories.tsx	Adds Storybook documentation and examples for variants/states.
src/components/atoms/chip/Chip.test.tsx	Adds Vitest coverage for a11y/interaction/selection/disabled behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

andresito87 · 2026-04-24T05:21:05Z

Applied a final pass to address the remaining review feedback and align the Chip atom with current project conventions.

What was updated

replaced the local cn helper in useChip.ts with the shared utility from @/lib/utils
removed the extra gap-0.5 override so spacing continues to come from the size variants
replaced ring-accent usages with token-based Tailwind classes consistent with the rest of the component
removed the misleading leftover comment in types.ts
fixed the Stress story so Icon is no longer passed unsupported DOM/ARIA props directly
updated the avatar scale utility to the canonical Tailwind v4 CSS variable syntax to avoid IDE warnings and keep the codebase aligned with modern Tailwind conventions
removed the previous ref as any approach and tightened the root typing around the button / div render paths

Validation

pnpm exec tsc --noEmit ✅
pnpm test -- src/components/atoms/chip/Chip.test.tsx ✅

Notes

public export remains correctly exposed through src/index.ts and the local chip barrel export
split-actions behavior for closable + interactive was preserved so we still avoid nested interactive controls

This should leave the PR in a cleaner state both for review and for long-term maintainability.

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

egdev6 mentioned this pull request Sep 21, 2025

[ATOMS] Chip #19

Closed

12 tasks

andresito87 added 7 commits April 23, 2026 20:20

[ADD] Chip component

850490a

[FIX] Chip component Shadow Variant

c35957b

[FIX] Deleting Chip adding list component and giving more size to clo…

252861f

…se icon in chip component

[FIX] Chip Component -Deleting hover effect in every non-interactable…

8a13274

… elements

[FIX] Chip component - fixing accessibility problems

ace8965

[FIX]: Chip variants styles

df1e490

fix(chip): align accessibility, variants, and stories

eb39426

andresito87 force-pushed the feature/chip branch from 6f35ebc to eb39426 Compare April 23, 2026 20:41

andresito87 requested a review from egdev6 as a code owner April 23, 2026 20:41

andresito87 changed the title ~~[ADD] Chip component~~ feat(chip): align atom with design system Apr 23, 2026

egdev6 requested a review from Copilot April 23, 2026 22:24

Copilot started reviewing on behalf of egdev6 April 23, 2026 22:24 View session

Copilot AI reviewed Apr 23, 2026

View reviewed changes

fix(chip): address review feedback

f3fbd08

egdev6 requested a review from Copilot April 24, 2026 06:46

Copilot started reviewing on behalf of egdev6 April 24, 2026 06:47 View session

Copilot AI reviewed Apr 24, 2026

View reviewed changes

Comment thread src/components/atoms/chip/Chip.tsx

Comment thread src/components/atoms/chip/useChip.ts

Comment thread src/components/atoms/chip/useChip.ts

egdev6 added 2 commits April 26, 2026 02:03

fix(chip): address final audit issues

880377e

fix(a11y): resolve storybook audit failures

5ba6c63

egdev6 approved these changes Apr 26, 2026

View reviewed changes

egdev6 merged commit 173f8f7 into main Apr 26, 2026
6 checks passed

Conversation

andresito87 commented Aug 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Type of change

Component checklist (skip if not applicable)

How to test

Screenshots / recordings (if applicable)

Notes for reviewer

Uh oh!

netlify Bot commented Aug 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for egdev6-design-system ready!

Uh oh!

egdev6 commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andresito87 commented Aug 29, 2025

Uh oh!

egdev6 commented Sep 5, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andresito87 commented Apr 24, 2026

What was updated

Validation

Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

andresito87 commented Aug 23, 2025 •

edited

Loading

netlify Bot commented Aug 23, 2025 •

edited

Loading

egdev6 commented Aug 25, 2025 •

edited

Loading