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.

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

feat(components): c-form & django-cms-forms, now wip status #80

Merged
merged 66 commits into from
Dec 2, 2022

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Dec 2, 2022

Overview

Promote Form components to "Work In Progress" status.

Related

Changes

  • changed load of pattern scripts to require modules
  • changed error selectors to be simpler
  • fixed required labels to not be bold
  • changed error text to not be small
  • added error styles
  • added style for obvious buttons that neglect class
  • changed errors to use <ul> not <div>
  • removed Django CMS Form idiosyncrasies from C Form markup
  • changed "fish" field to not be required
    multi-checkbox fields cannot be required
  • added buttons to toggle errors and fields being required
  • removed prototype from form patterns
  • added scripts to toggle errors and fields being required
  • added distinct styles for C Message scopes
  • added link styles for C Message
  • added sample errors to Django CMS Form markup
  • added C Form to core-styles.base.css
  • fixed inconsistent height of input and select fields
  • added RGB colors
  • fixed C Message colors to be accessible

Testing

  1. Build and serve demo.
  2. Open C Form and Django CMS Forms components.
  3. Verify both look identical.
  4. Verify toggle buttons work:
    Button Action
    Toggle Errors Will show or hide form and field error messages.
    Toggle Required Fields Will require or un-require fields that load as required.

UI

C.Form.mov
Django.CMS.Form.mov

Notes

The "Django CMS Form" belongs only in https://github.com/TACC/Core-CMS, but it is in Core Styles to expedite cross-pattern testing until both are "Ready" (not "Work in Progress") which requires more client testing.

Also:
- add MuiTab use case to bootstrap.modal
- add MuiTab stylesheet for portal
- remove outdated icon trump files
- add base stylesheets for clients to load

Client should always load base.css first.

| stylesheet      | root¹ | cms² | portal³ | header ⁴ |
| -               |   -   |  -   |    -    |    -     |
| base.css        |   ✓   |  —   |    —    |    —     |
| base.cms.css    |   —   |  ✓   |    —    |    —     |
| base.portal.css |   —   |  —   |    ✓    |    —     |
| base.header.css |   —   |  —   |    —    |    ✓     |

There may be a base.docs.css after TUP-264.

¹ everything except cms, portal, and header
² e.g. cms
³ e.g. cepv2, tup-ui
⁴ e.g. cms, cepv2, frontera-tech-docs
| stylesheet | root¹ | cms² | portal³ | header ⁴ |
| - | - | - | - | - |
| core-styles.base.css | ✓ | — | — | — |
| core-styles.cms.css | — | ✓ | — | — |
| core-styles.portal.css | — | — | ✓ | — |
| core-styles.header.css | — | — | — | ✓ |

There may be a core-styles.docs.css after TUP-264.

¹ everything except cms, portal, and header
² e.g. cms
³ e.g. cepv2, tup-ui
⁴ e.g. cms, cepv2, frontera-tech-docs
With layers, core-styles.header.css must overwrite core-styles.cms.css.

Sans layers, site.header.css relied on bootstrap to override site.css.
Avoid dupllicate custom property (a.k.a. variable) definitions in:
- `.core-styles.cms.css`
- `.core-styles.header.css`
- some changes may be for main branch
- some changes may be for task/base-cms-portal-header branch

1. testing pattern for Core-CMS djangco.cms.forms
2. new c-form component & pattern needs template
3. just begining form.cms pattern
4. update s-affixed-input-… accordingly (for: 2, 3)
4. initial change of partials to use core-styles.*.css
- some changes may be for main branch
- some changes may be for task/base-cms-portal-header branch

1. testing pattern for Core-CMS djangco.cms.forms
2. new c-form component & pattern needs template
3. just begining form.cms pattern
4. update s-affixed-input-… accordingly (for: 2, 3)
4. initial change of partials to use core-styles.*.css
This is for CMS, but was being tested here. it works now.

Latest real bug was misssing the .html extension inthe demo.

This pattern was just committed in TACC/Core-CMS:
- task/get-core-styles-beyond-0.11.0
- d13ca50

I am porting the polishes and fixes here just so that when I delete I am deleting at the time at which CMS resumes control of it.
- build
- removed import of settings by src/_imports files
- added `core-styles.settings.css`
- changed demo to always load `core-styles.settings.css` up front

BREAKING CHANGE: Clients must include `settings.css` OR `base.css` e.g.
- @import url('@tacc/core-styles/dist/core-styles.settings.css')
- @import url('@tacc/core-styles/dist/core-styles.base.css')
@wesleyboar wesleyboar changed the title Dev task/form patterns feat(components): c-form & django-cms-forms (prototype → wip) Dec 2, 2022
@wesleyboar wesleyboar changed the title feat(components): c-form & django-cms-forms (prototype → wip) feat(components): c-form, django-cms-forms, c-message (prototype → wip) Dec 2, 2022
Multi-checkbox field cannot be required without Javascript. Also, Django CMS Forms does not require these.
@wesleyboar wesleyboar changed the title feat(components): c-form, django-cms-forms, c-message (prototype → wip) feat(components): c-form & django-cms-forms (prototype → wip) Dec 2, 2022
@wesleyboar wesleyboar changed the title feat(components): c-form & django-cms-forms (prototype → wip) feat(components): c-form & django-cms-forms, ready for clients Dec 2, 2022
@wesleyboar wesleyboar changed the title feat(components): c-form & django-cms-forms, ready for clients feat(components): c-form & django-cms-forms, now wip status Dec 2, 2022
@wesleyboar wesleyboar marked this pull request as ready for review December 2, 2022 05:22
@wesleyboar wesleyboar merged commit 66400cb into main Dec 2, 2022
@wesleyboar wesleyboar deleted the dev--task/form-patterns branch December 2, 2022 05:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant