search

michelada / design_system

Design System running Tailwind underneath, by michelada.io for everyone.
https://michelada.github.io/design_system/site/
Apache License 2.0
1 stars 0 forks source link

Tabs component #56

Open sandrely2611-zz opened 2 years ago

sandrely2611-zz commented 2 years ago

Description

Based on the Ctrl project needs, we detect some inconsistencies in the tabs component. Our goal with this ticket is to fix how this component looks, remove the unnecessary code from Ctrl. And be able to consume the component from the DS without adding extra css or js to make it work in Ctrl.

Narrative

Design System: https://www.figma.com/file/c1SBfQGUU3twlW3YjeL8Sx/michelada_DS?node-id=0%3A1 Control project: https://www.figma.com/file/TmTjBO1Ua93cm6B978ErDw/ControlMocks_21-0ct-2020?node-id=3456%3A0

Video explanation https://michelada.slack.com/archives/C0279KDU485/p1643668727799009?thread_ts=1643666990.610879&cid=C0279KDU485

Related issues from Gitlab Ctrl project

https://git.michelada.io/products/ctrl/-/issues/375 https://git.michelada.io/products/ctrl/-/issues/273

Definition of done

  1. Code review approved
  2. Remove CSS/JS/HTML code related to the component from Ctrl
  3. Deployed to production
  4. Deployed to NPM library

Acceptance criteria

  1. Support mobile, tablet and desktop breakpoints.
  2. In mobile and tablet versions the behavior is the same.
    • full-width
  3. Fix clickable area
  4. Update palette color when the status are: hover, active, selected and focus.
sandrely2611-zz commented 2 years ago

Issue # 1 en Ctrl

Current result: Only the text of the tab has the link to redirect to the correct tab.

Evidence https://user-images.githubusercontent.com/9082790/154122930-53f02be6-1a07-4aa4-8629-f022b6056cb8.mov

Expect result In My profile and Team Directory views, "Personal" and "Professional" buttons should be clickable anywhere in the button, not only in the text.

image image