Skip to content

[OUDS] Manage mandatory fields indication#3439

Open
hannahiss wants to merge 18 commits intoouds/mainfrom
ouds/main-his-mandatory-fields
Open

[OUDS] Manage mandatory fields indication#3439
hannahiss wants to merge 18 commits intoouds/mainfrom
ouds/main-his-mandatory-fields

Conversation

@hannahiss
Copy link
Member

@hannahiss hannahiss commented Mar 13, 2026 •
edited
Loading

Types of change

  • Non-breaking change
  • Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #

Context & Motivation

  • Add some indications on when to indicate fields are mandatory in form-validation (plus examples)
  • Add examples of mandatory field indication for each form component at the en of the page
  • Add shortcode introdution for mandatory field indication
  • Add some missing buttonLabels

For info, what mandatory text inputs look like in many labels' combinations:
image

For info, what mandatory select inputs look like in many labels' combinations:
image

Description

Checklists

  • I have read the contributing guidelines
  • My change follows the developer guide
  • My change pass all tests
  • My change is compatible with a responsive display
  • I have added tests (Javascript unit test or visual) to cover my changes
  • My change introduces changes to the documentation that I have updated accordingly
    • Title and DOM structure is correct
    • Links have been updated (title changes impact links)
    • CSS for the documentation
  • I have checked all states and combinations of the component with my change
  • I have checked all the impacts for the other components and core behavior (grid, reboot, utilities)

Checklist (for Core Team only)

  • The changes need to be in the migration guide
  • The changes are well displayed in Storybook (be careful if example order has changed for DSM)
  • The changes are compatible with RTL
  • Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Live previews

@netlify
Copy link

netlify bot commented Mar 13, 2026 •
edited
Loading

✅ Deploy Preview for boosted ready!

Name Link
🔨 Latest commit f63d4f5
🔍 Latest deploy log https://app.netlify.com/projects/boosted/deploys/69c13ef2c7c8fa000886537d
😎 Deploy Preview https://deploy-preview-3439--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

MaxLardenois
MaxLardenois reviewed Mar 13, 2026
View reviewed changes
Copy link
Collaborator

@MaxLardenois MaxLardenois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's the right direction

scss/forms/_labels.scss
position: absolute;
margin-left: $form-label-required-margin-left;
color: $form-label-required-color;
margin-left: 4px;
Copy link
Collaborator

@MaxLardenois MaxLardenois Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we/did you ask for tokens for this?

Copy link
Member Author

@hannahiss hannahiss Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I asked for it in Figma

scss/forms/_labels.scss
@@ -18,8 +18,9 @@

.is-required::after {
Copy link
Collaborator

@MaxLardenois MaxLardenois Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should put the is-required common css elsewhere as the content of this file is mostly Bootstrap... Idk where though

Copy link
Member Author

@hannahiss hannahiss Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I asked myself the question... We can still change that later

@hannahiss hannahiss marked this pull request as ready for review March 18, 2026 16:55
@boosted-bot boosted-bot moved this from In Progress / Draft to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Mar 18, 2026
MaxLardenois
MaxLardenois requested changes Mar 20, 2026
View reviewed changes
Copy link
Collaborator

@MaxLardenois MaxLardenois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we should add a mention in migration for the addition of is-required?
Also Idk if the behavior is different from Boosted, if so we should add something in migration from boosted

@boosted-bot boosted-bot moved this from Need Dev Review to Dev Review In Progress in 🟣 [Orange-Boosted-Bootstrap] PRs Board Mar 20, 2026
@hannahiss
Merge branch 'ouds/main' into ouds/main-his-mandatory-fields
5a5b9a5 
# Conflicts:
#	site/src/content/docs/components/text-area.mdx
#	site/src/content/docs/components/text-input.mdx
@hannahiss
Fixes after Max's review
d80743c
@hannahiss
Merge branch 'ouds/main' into ouds/main-his-mandatory-fields
85f4c9a
MaxLardenois
MaxLardenois approved these changes Mar 23, 2026
View reviewed changes
Copy link
Collaborator

@MaxLardenois MaxLardenois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved as soon as the supplementaries examples are removed

@boosted-bot boosted-bot moved this from Dev Review In Progress to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Mar 23, 2026
@hannahiss
Copy link
Member Author

hannahiss commented Mar 23, 2026

I'm wondering if we should add a mention in migration for the addition of is-required?
Also Idk if the behavior is different from Boosted, if so we should add something in migration from boosted

@vprothais Like I said to Maxime, this is the same behaviour than with Boosted (add a class is-required to have the asterisk) except in the case of .form-check-input (i.e. checkboxes/radios/switches) where the required attribute was sufficient, but not sure it is mandatory to mention this in the migration form boosted guide... what do you think ?

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

Reviewers

@MaxLardenois MaxLardenois MaxLardenois approved these changes

Assignees

@vprothais vprothais

Labels

None yet

Projects

🟣 [Orange-Boosted-Bootstrap] PRs Board
Status: Need Lead Dev Review

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@hannahiss @MaxLardenois @vprothais @boosted-bot