Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Redesign Form Labels & Ensure Consistent Usage Throughout dotCMS #23635

Closed
Tracked by #24318
damen-dotcms opened this issue Dec 21, 2022 · 10 comments · Fixed by #24153
Closed
Tracked by #24318

Redesign Form Labels & Ensure Consistent Usage Throughout dotCMS #23635

damen-dotcms opened this issue Dec 21, 2022 · 10 comments · Fixed by #24153
Assignees
@fmontes @rjvelazco @josemejias07
Labels
dotCMS : Admin Tools Needs Work OKR : User Experience Owned by Jason Priority : 3 Average QA : Approved QA : Passed Internal Release : 23.07 Team : Lunik Type : Defect
Milestone
2023.03

Comments

@damen-dotcms
Copy link
Contributor

damen-dotcms commented Dec 21, 2022 •
edited by fmontes

Problem Statement

Labels in edit a content type are not consistent across the form.

Label not consistent, some of them in black 14px, the others light gray 12px. Accessibility issues as well.

Screenshot_2022-12-21_15-22-46.png

Steps to Reproduce

  1. Go to Content Types
  2. Select a content type
  3. Click edit
  4. See the error

Additional context:

We need to do some extra clean-up here, so...

  1. We can remove the .form__label and use .field label to style
  2. We need to make the * red (see the variable.scss file)
  3. Check system-wide the forms and make sure we didn't break anything.

Acceptance Criteria

Users should see consistent labels, so this might be required some research, things I know:

Reported by: Melissa Rojas Rodríguez (melissa.rojas@dotcms.com)

Source URL: https://demo.dotcms.com/dotAdmin/#/content-types-angular/create/content

Issue details: Open in Marker.io

Device typedesktop
BrowserChrome 108.0.0.0
Screen Size1440 x 900
OSOS X 10.14.6
Viewport Size1440 x 821
Zoom Level100%
Pixel Ratio@​2x
@damen-dotcms damen-dotcms self-assigned this Dec 21, 2022
@Melissa-dotCMS
Copy link

All labels should be black, 14px, and regular (with no bold).

@fmontes fmontes changed the title Lables not consistent, some of them in black 14px, the others light gray 12px. Accessibility issues as well. Make form labels consistent across the app Jan 5, 2023
@zulqarnainvd zulqarnainvd self-assigned this Feb 15, 2023
zulqarnainvd added a commit that referenced this issue Feb 17, 2023
@zulqarnainvd
#23635 Add asterik on required fields and remove unnecesaary classes …
d407ab9 
…from label
zulqarnainvd added a commit that referenced this issue Feb 17, 2023
@zulqarnainvd
#23635 fix test cases
661f6c2
zulqarnainvd added a commit that referenced this issue Feb 17, 2023
@zulqarnainvd
#23635 fix test cases
5cfd0ba
@fmontes
Copy link
Member

fmontes commented Feb 22, 2023

List of forms to check

  1. Apps
  2. Block editor settings
  3. Experiments
  4. Content types edit
  5. Content types fields
  6. Content types add to menu
  7. Content type > copy
  8. Download bundle dialog
  9. Push Publish form
  10. Create persona (from edit page)
  11. Template properties
  12. My Account
  13. Login
  14. Forgot Password
  15. Reset Password

zulqarnainvd added a commit that referenced this issue Feb 23, 2023
@zulqarnainvd
#23635 Use Directive for dynamic form fields and addressed pr feedbacks
db0fefb
zulqarnainvd added a commit that referenced this issue Feb 23, 2023
@zulqarnainvd
#23635 fix lint
a4c1d2d
zulqarnainvd added a commit that referenced this issue Feb 23, 2023
@zulqarnainvd
#23635 Implement OnInit on class
f19de99
@fmontes fmontes linked a pull request Feb 24, 2023 that will close this issue
dotCMS/core#23635 Make form labels consistent across the app #24153
Merged
3 tasks
@fmontes fmontes added this to the 2023.03 milestone Feb 24, 2023
@damen-dotcms damen-dotcms mentioned this issue Feb 27, 2023
Closed
@damen-dotcms damen-dotcms changed the title Make form labels consistent across the app Redesign Form Labels & Ensure Consistent Usage Throughout dotCMS Feb 27, 2023
@damen-dotcms
Copy link
Contributor Author

Hey @Melissa-dotCMS ,

Can you upload the final designs to this ticket so the people testing know what to check for? Thanks!

zulqarnainvd added a commit that referenced this issue Mar 2, 2023
@zulqarnainvd
#23635 use directive for required fields
84ef1df
zulqarnainvd added a commit that referenced this issue Mar 3, 2023
@zulqarnainvd
#23635 remove DotFieldRequiredDirective from dotcmsui and on UI Module
cc9c2dd
zulqarnainvd added a commit that referenced this issue Mar 3, 2023
@zulqarnainvd
#23635 fix lint issues
eef66a0
zulqarnainvd added a commit that referenced this issue Mar 6, 2023
@zulqarnainvd
#23635 Add Docs in DotRequired Field Directive
3b698ab
@damen-dotcms damen-dotcms mentioned this issue Mar 8, 2023
Open
@josemejias07 josemejias07 self-assigned this Mar 31, 2023
@josemejias07
Copy link

Failed QA - Tested on 23.05_3dccd573_SNAPSHOT // Docker // macOS 13.0 // FF v111.0

Not in docker
Screenshot 2023-04-03 at 10 41 16 AM

@Melissa-dotCMS
Copy link

Here is the link to the figma file of the re-design.

https://www.figma.com/file/1pZBoBlMAI8xYFFIbbj5Mg/Components-Library?node-id=1621%3A11956&t=e4Kn5YPplPK40zf6-1

@fmontes
Copy link
Member

fmontes commented Apr 10, 2023

Sorry I send this to QA by mistake.

@damen-dotcms
Copy link
Contributor Author

I'm still seeing quite a few labels that don't line up. Should I report them here or in new tickets?

@fmontes fmontes assigned fmontes and unassigned zulqarnainvd May 4, 2023
fmontes added a commit that referenced this issue May 8, 2023
@zulqarnainvd @fmontes
Fix #23635 Make form labels consistent across the app (#24153)
b275fc7 
* #23635 Add asterik on required fields and remove unnecesaary classes from label

* #23635 fix test cases

* #23635 fix test cases

* #23635 Use Directive for dynamic form fields and addressed pr feedbacks

* #23635 fix lint

* #23635 Implement OnInit on class

* #23635 use directive for required fields

* #23635 remove DotFieldRequiredDirective from dotcmsui and on UI Module

* #23635 fix lint issues

* #23635 Add Docs in DotRequired Field Directive

---------

Co-authored-by: Freddy Montes <751424+fmontes@users.noreply.github.com>
@rjvelazco rjvelazco self-assigned this May 9, 2023
@alfredo-dotcms
Copy link
Contributor

still needs work

Image

@alfredo-dotcms
Copy link
Contributor

LGTM!

Image

@josemejias11
Copy link

Approved QA - Tested on master_ae620c0_SNAPSHOT // Docker // macOS 13.0 // FF v113.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@fmontes fmontes

@rjvelazco rjvelazco

@josemejias07 josemejias07

Labels
dotCMS : Admin Tools Needs Work OKR : User Experience Owned by Jason Priority : 3 Average QA : Approved QA : Passed Internal Release : 23.07 Team : Lunik Type : Defect
Projects
UI Improvements
Status: Questions (see comments)
dotCMS - Product Planning
Archived in project
Milestone
2023.03
Development

Successfully merging a pull request may close this issue.

dotCMS/core#23635 Make form labels consistent across the app dotCMS/core