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

Input component #59

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 INPUT 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/p1643667745441619?thread_ts=1643666990.610879&cid=C0279KDU485

Related issues from Gitlab Ctrl project

https://git.michelada.io/products/ctrl/-/issues/274

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 multiple behavior of an input
    • Normal
    • Hover
    • Active
  2. Update placeholder, value text and label colors to match de DS.
  3. Support mobile, tablet and desktop breakpoints.
  4. In mobile and tablet versions the behavior is the same.
    • full-width
sandrely2611-zz commented 2 years ago

THIS TICKET IS PART OF THE IMPROVEMENTS FOR THE DESIGN SYSTEM PROJECT

This ticket covers the improvements of the input fields color palette. In staging we have some inconsistencies with the value and placeholder text colors. The modifications should be applied to all different fields that are presented in a form.

Inputs that have color issues:

  1. Text area
  2. Type=tel

Description

The inputs:

Have a different text value color than the mockup in Figma.

And the input Phone number in Personal information has a different color for the placeholder.

Pre-requirements:

Steps to reproduce

  1. Go to https://ctrl-staging.herokuapp.com/user-name This link change with each user
  2. Open the inspector tool.
  3. Click the edit icon next to "Work Information" (it's the pencil drawing)
  4. Inspect the input "Primary tech skills"
  5. Verify the color of the text values in the inputs is: #15162F
  6. Inspect the input "Secondary tech skills"
  7. Verify the color of the text values in the inputs is: #15162F
  8. Click the plus icon next to " My projects at michelada"
  9. Inspect the input "Summary"
  10. Verify the color of the text values in the input is: #15162F
  11. Go to https://ctrl-staging.herokuapp.com/profile
  12. Click the edit icon next to "Personal Information" (it's the pencil drawing)
  13. Inspect the input "Phone Number"
  14. Verify the color of the placeholder is the same as in the mockup in figma

Actual results

The inputs in the professional profile have a text value color of #575f65

The input in the personal profile have a placeholder color of #6b7280

Expected result:

The inputs must have a text value color of #15162F

And the placeholder should have the same color as in the mockup

Component/view

Professional Profile > Work information

Professional Profile > My projects at michelada

Personal Profile > Personal information

Environment

Staging

sandrely2611-zz commented 2 years ago

image image image image

Component/view Professional Profile > Work information Professional Profile > My projects at michelada Personal Profile > Personal information

Environment Staging