WIP: Form components extensions and improvements #94707

Márton Lente · 2024-10-08T14:53:57+02:00

Márton Lente commented

2024-10-08 14:53:57 +02:00

This pull request is work in progress. 🚧

This pull request overhauls Web Assets' forms components by simplifying existing styles with the cleanup of redundant rules, improving UI and usability details and adding new stylized components for generic form controls like checkboxes, radio buttons and sliders.

Fixes

Cleanup of redundant page reference input examples.
Cleanup of style definitions for explicit sizes, that can break the layout.

Improvements

Cleanup of class naming antipatterns (e.g. misuse of the 'form-control' class on checkboxes and radios), to better follow existing industry or Bootstrap conventions.
Cleanup of redundant form element attributes.
Cleanup of unneeded specificities in page reference example inputs. Make them more generic.
Improved and uniformized transitions.

Generalized input example for file uploads

New components

Stylized checkbox component. Use this if the form markup can be built as the component example within the framework context.

Stylized radio component. Use this if the form markup can be built as the component example within the framework context.

Stylized slider.

Stylized toggle bar.

Roadmap

The forms' styling still heavily relies on deprecated Bootstrap partials that are present in the framework. A cleanup pass should be done later to phase out BS forms partials completely.
The page reference presents form inputs with multiple styles and tones of content (e.g. default vs. real-life labels etc.). We can uniform this for better consistency, and more stramlined reuse.
Inputs have many different types with subtle UX differences. If useful, we can add component examples for individual input types to the page reference, with according attributes, placeholders and optional icons (e.g. date, price, text).
The form controls currently rely on CSS only. We can improve the UX and styling further by introducing JavaScript changes (e.g. better-stylized slider, enhanced date inputs etc.).

Deployment

The component-forms branch and the PR is meant to be polished and wrapped up while working on the survey branch in the devfund-website. The PR should be merged, and a new BWA version should be released later. As there're multiple changes to forms' styling, project-level deployments should be done with extra caution.

This pull request is work in progress. 🚧 This pull request overhauls Web Assets' forms components by simplifying existing styles with the cleanup of redundant rules, improving UI and usability details and adding new stylized components for generic form controls like checkboxes, radio buttons and sliders. ## Fixes - Cleanup of redundant page reference input examples. - Cleanup of style definitions for explicit sizes, that can break the layout. ## Improvements - Cleanup of class naming antipatterns (e.g. misuse of the 'form-control' class on checkboxes and radios), to better follow existing industry or Bootstrap conventions. - Cleanup of redundant form element attributes. - Cleanup of unneeded specificities in page reference example inputs. Make them more generic. - Improved and uniformized transitions. ![image](https://projects.blender.org/attachments/209be230-609a-4045-9309-10a09a2f0bde) Generalized input example for file uploads ## New components - Stylized checkbox component. Use this if the form markup can be built as the component example within the framework context. ![image](https://projects.blender.org/attachments/f9ac61bd-b268-486e-934d-00571be9b538) - Stylized radio component. Use this if the form markup can be built as the component example within the framework context. ![image](https://projects.blender.org/attachments/f38a89b9-d465-4a0c-a69d-7459e8c4dfd2) - Stylized slider. ![image](https://projects.blender.org/attachments/2616608f-1f45-443c-a01b-025fe065409b) - Stylized toggle bar. ![image](https://projects.blender.org/attachments/b604abdd-1aef-4df1-ae45-1d0bd71f190e) ## Roadmap - The forms' styling still heavily relies on deprecated Bootstrap partials that are present in the framework. A cleanup pass should be done later to phase out BS forms partials completely. - The page reference presents form inputs with multiple styles and tones of content (e.g. default vs. real-life labels etc.). We can uniform this for better consistency, and more stramlined reuse. - Inputs have many different types with subtle UX differences. If useful, we can add component examples for individual input types to the page reference, with according attributes, placeholders and optional icons (e.g. date, price, text). - The form controls currently rely on CSS only. We can improve the UX and styling further by introducing JavaScript changes (e.g. better-stylized slider, enhanced date inputs etc.). ## Deployment The `component-forms` branch and the PR is meant to be polished and wrapped up while working on the [survey](https://projects.blender.org/infrastructure/devfund-website/src/branch/survey) branch in the [devfund-website](https://projects.blender.org/infrastructure/devfund-website). The PR should be merged, and a new BWA version should be released later. As there're multiple changes to forms' styling, project-level deployments should be done with extra caution.

web-assets-form-components-1-sm.png

26 KiB

web-assets-form-components-3-sm.png

25 KiB

web-assets-form-components-4-sm.png

24 KiB

web-assets-form-components-2-sm.png

28 KiB

web-assets-form-components-5-sm.png

10 KiB

Márton Lente added 9 commits 2024-10-08 14:53:59 +02:00

Cleanup: Base cleanup forms styles and page reference 8534beebec

Initialize cleanup of forms styles and forms examples on the reference page.
Remove redundant examples and specific styles that can cause issues in projects
context.

UI: Add style component form controls enhancement transitions 2ffc7690d6

Improve form control component's transitionining effects.

Cleanup: Add component form default checkbox markup and style overrides e3b826471f

Add default checkbox markup and style overrides to the form component,
complying with default checkbox markup conventions. Add style overrides to
cleanup and simplify base styling.

UI: Add page reference component forms radios default 610ea38ef2

UI: Add style component forms checkbox custom base 3c20a37330

UI: Add style component forms radio custom base 2be7eaf5d8

Cleanup: Improve page reference markup classes and structure d85b976831

Add style component forms form-check-custom transition b752f0c7a1

UI: Add style form component slider base 20cb7b662d

Add forms component markup and styles for custom stylized slider.

Pablo Vazquez commented

2024-10-08 16:07:51 +02:00

As discussed IRL:

Account for the help text in forms under the class.form-text. Bootstrap docs.

I went ahead and cleaned up the Profile settings in Studio.

As discussed IRL: Account for the help text in forms under the class`.form-text`. [Bootstrap docs](https://getbootstrap.com/docs/5.3/forms/form-control/#form-text). I went ahead and [cleaned up the Profile settings in Studio](https://projects.blender.org/studio/blender-studio/commit/e02c43c9d9fc5c3c120b19348c9bb1dd49c0ba86). ![help text](/attachments/6ecd9f25-dafc-47a9-989c-64621a2fd978)

image.png

23 KiB

👍 1

Pablo Vazquez commented

2024-10-08 16:11:08 +02:00

Consider adding an example field that is required. So we can style the usual red asterisk.

The class is form-required-indicator and asteriskField (Django Crispy Forms)

label sup,
.form-required-indicator,
.asteriskField // used by Crispy Forms
  color: var(--color-danger)

Consider adding an example field that is `required`. So we can style the usual red asterisk. The class is `form-required-indicator` and `asteriskField` (Django Crispy Forms) ```sass label sup, .form-required-indicator, .asteriskField // used by Crispy Forms color: var(--color-danger) ``` ![red asterisk](/attachments/2daa2865-2980-4e4b-8689-f7118cb3ded6)

image.png

71 KiB

👍 1

Márton Lente referenced this issue from a commit

2024-10-08 16:20:30 +02:00

UI: Add component form form-texts to page reference examples

Márton Lente added 1 commit 2024-10-08 16:20:30 +02:00

UI: Add component form form-texts to page reference examples d418b05dbe

Add component form form-texts to page reference from-group examples and clean
up arbitrary form-group styles.
Part of #94707

Márton Lente referenced this issue from a commit

2024-10-08 16:52:05 +02:00

UI: Add style component forms slider range steps display

Márton Lente added 1 commit 2024-10-08 16:52:06 +02:00

UI: Add style component forms slider range steps display 88441cd556

Add range steps' display options for forms slider component with default and
dotted variants. Show range steps below the input by adding markup items in
the number of range steps, but without the need to introduce new styles for
each use.
Part of #94707

Márton Lente referenced this issue from a commit

2024-10-08 17:08:47 +02:00

UI: Add page reference form component field required example markup

Márton Lente added 1 commit 2024-10-08 17:08:47 +02:00

UI: Add page reference form component field required example markup cb1e5e094b

Part of #94707

Márton Lente commented

2024-10-08 17:10:42 +02:00

As discussed IRL:

Account for the help text in forms under the class.form-text. Bootstrap docs.

I went ahead and cleaned up the Profile settings in Studio.

Thank you for the changes! The examples have been updated accordingly. There were some conflicting layout styles present: they've been cleaned up as well.

> As discussed IRL: > > Account for the help text in forms under the class`.form-text`. [Bootstrap docs](https://getbootstrap.com/docs/5.3/forms/form-control/#form-text). > > I went ahead and [cleaned up the Profile settings in Studio](https://projects.blender.org/studio/blender-studio/commit/e02c43c9d9fc5c3c120b19348c9bb1dd49c0ba86). Thank you for the changes! The examples have been updated accordingly. There were some conflicting layout styles present: they've been cleaned up as well.

Márton Lente commented

2024-10-08 17:19:03 +02:00

@pablovazquez the optional range slider styles have been added. This is how it looks by default:

There was a subtle variant added with steps indicators being dots:

Currently it's very simple and only uses CSS. It works by appending flat HTML markup to the slider input, like this:

<div class="slider-custom-steps">
  <div class="slider-custom-steps-item"></div>
  <div class="slider-custom-steps-item"></div>
  <div class="slider-custom-steps-item"></div>
</div>

The number of slider-custom-steps-items must match the number of steps. In most cases it should be simple to implement. We can enhance it further with JavaScript if we want to.

@pablovazquez the optional range slider styles have been added. This is how it looks by default: ![web-assets-form-components-6-sm.png](/attachments/c23c84b6-fc91-48e4-964f-b3abc04d1aae) There was a subtle variant added with steps indicators being dots: ![web-assets-form-components-7-sm.png](/attachments/9cad4a17-1881-4857-9d47-7bc16cb354b6) Currently it's very simple and only uses CSS. It works by appending flat HTML markup to the slider input, like this: ``` <div class="slider-custom-steps"> <div class="slider-custom-steps-item"></div> <div class="slider-custom-steps-item"></div> <div class="slider-custom-steps-item"></div> </div> ``` The number of `slider-custom-steps-items` must match the number of steps. In most cases it should be simple to implement. We can enhance it further with JavaScript if we want to.

web-assets-form-components-6-sm.png

28 KiB

web-assets-form-components-7-sm.png

27 KiB

❤️ 1

Márton Lente referenced this pull request from infrastructure/devfund-website

2024-10-09 11:31:57 +02:00

Config: Initialize web-assets v2 forms component compilation for survey templates temporarily #96859

This pull request has changes conflicting with the target branch.