[OUDS] Manage mandatory fields indication by hannahiss · Pull Request #3439 · Orange-OpenSource/Orange-Boosted-Bootstrap

hannahiss · 2026-03-13T08:09:47Z

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:

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

Description

Checklists

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)

Code review
Design review
A11y review
Commit on ouds/main following conventional commit

Live previews

netlify · 2026-03-13T08:13:30Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`39a296c`
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/69d6780531bece00080d195f
😎 Deploy Preview	https://deploy-preview-3439--boosted.netlify.app
📱 Preview on mobile	Toggle 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

I think it's the right direction

MaxLardenois · 2026-03-13T10:39:43Z

scss/forms/_labels.scss

  position: absolute;
-  margin-left: $form-label-required-margin-left;
-  color: $form-label-required-color;
+  margin-left: 4px;


Should we/did you ask for tokens for this?

I asked for it in Figma

MaxLardenois · 2026-03-13T10:40:45Z

scss/forms/_labels.scss

@@ -18,8 +18,9 @@

 .is-required::after {


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

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

site/src/content/docs/components/checkbox.mdx

site/src/content/docs/components/text-input.mdx

site/src/content/docs/foundation/form-validation.mdx

Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>

MaxLardenois

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

site/src/content/docs/components/text-input.mdx

scss/forms/_labels.scss

scss/forms/_select-input.scss

site/src/content/docs/components/radio-button.mdx

site/src/content/docs/components/checkbox.mdx

site/src/content/docs/components/switch.mdx

site/src/content/docs/components/select-input.mdx

# Conflicts: # site/src/content/docs/components/text-area.mdx # site/src/content/docs/components/text-input.mdx

MaxLardenois

Approved as soon as the supplementaries examples are removed

hannahiss · 2026-03-23T13:37:41Z

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 ?

Copilot

Pull request overview

This PR updates the OUDS documentation and styles to better define and demonstrate how to indicate mandatory fields across form components, including adding a reusable shortcode for consistent guidance.

Changes:

Add new “Mandatory field indication” documentation sections and examples across multiple form components (plus broader rules in form validation docs).
Introduce a new <MandatoryFieldIndication /> shortcode and register it for MDX auto-import typing.
Adjust SCSS for required-indicator styling and some label/layout behaviors, and add missing buttonLabels for examples.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
site/src/types/auto-import.d.ts	Registers the new `MandatoryFieldIndication` shortcode for typed auto-import use in MDX.
site/src/content/docs/foundation/form-validation.mdx	Adds global guidance and examples for when/how to indicate mandatory fields.
site/src/content/docs/components/text-input.mdx	Adds mandatory indication section + example; adds missing `buttonLabel`s in examples.
site/src/content/docs/components/text-area.mdx	Adds mandatory indication section + example; adds missing `buttonLabel` for max-width example.
site/src/content/docs/components/switch.mdx	Adds mandatory indication section + examples; adds missing `buttonLabel` for max-width example.
site/src/content/docs/components/select-input.mdx	Adds mandatory indication section + example; adds missing `buttonLabel`s.
site/src/content/docs/components/radio-button.mdx	Adds mandatory indication section + examples; adds missing `buttonLabel` for max-width example.
site/src/content/docs/components/password-input.mdx	Adds a mandatory password example inside the “all variations” example.
site/src/content/docs/components/checkbox.mdx	Adds mandatory indication section + examples; adds missing `buttonLabel` for max-width example.
site/src/components/shortcodes/MandatoryFieldIndication.astro	New shortcode that centralizes mandatory indication guidance and links to relevant docs.
scss/forms/_text-input.scss	Updates required-label styling for floating labels and adjusts trailing-action padding logic.
scss/forms/_select-input.scss	Changes label sizing rule from `max-width` to `width` in the select label container.
scss/forms/_labels.scss	Updates `.is-required::after` styling (spacing, weight, color).
scss/_variables.scss	Removes SCSS variables previously exposed for required-label styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

site/src/components/shortcodes/MandatoryFieldIndication.astro

site/src/content/docs/foundation/form-validation.mdx

site/src/content/docs/components/switch.mdx

site/src/content/docs/components/radio-button.mdx

site/src/content/docs/components/checkbox.mdx

site/src/components/shortcodes/MandatoryFieldIndication.astro

site/src/content/docs/foundation/form-validation.mdx

site/src/content/docs/components/password-input.mdx

scss/_variables.scss

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…into ouds/main-his-mandatory-fields

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…into ouds/main-his-mandatory-fields

hannahiss added 2 commits March 13, 2026 08:50

Mandatory fields indication

60caefd

Fix typo

014a5c1

github-project-automation bot added this to 🟣 [Orange-Boosted-Bootstrap] PRs Board Mar 13, 2026

github-project-automation bot moved this to In Progress / Draft in 🟣 [Orange-Boosted-Bootstrap] PRs Board Mar 13, 2026

hannahiss added 3 commits March 13, 2026 09:34

Text input mandatory indication

5c94c28

Merge branch 'ouds/main' into ouds/main-his-mandatory-fields

cf5670f

Fix ids

df51fca

MaxLardenois reviewed Mar 13, 2026

View reviewed changes

hannahiss and others added 6 commits March 13, 2026 14:15

Update site/src/content/docs/foundation/form-validation.mdx

e403074

Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>

Update site/src/content/docs/foundation/form-validation.mdx

0ece7fd

Co-authored-by: Maxime Lardenois <maxime.lardenois@orange.com>

Merge branch 'ouds/main' into ouds/main-his-mandatory-fields

bb1ef89

Update padding for overflowed label + shortcode

400d17e

Examples +scss on each form component

e61898d

ids

ea11036

hannahiss marked this pull request as ready for review March 18, 2026 16:55

boosted-bot moved this from In Progress / Draft to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Mar 18, 2026

hannahiss added 3 commits March 19, 2026 18:46

Merge branch 'ouds/main' into ouds/main-his-mandatory-fields

0178468

Merge branch 'ouds/main' into ouds/main-his-mandatory-fields

1251127

Merge branch 'ouds/main' into ouds/main-his-mandatory-fields

0afcb5e

MaxLardenois requested changes Mar 20, 2026

View reviewed changes

boosted-bot moved this from Need Dev Review to Dev Review In Progress in 🟣 [Orange-Boosted-Bootstrap] PRs Board Mar 20, 2026

hannahiss added 3 commits March 23, 2026 10:14

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

Fixes after Max's review

d80743c

Merge branch 'ouds/main' into ouds/main-his-mandatory-fields

85f4c9a

MaxLardenois approved these changes Mar 23, 2026

View reviewed changes

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

Remove test examples with different combinations of labels

f63d4f5

hannahiss assigned vprothais Mar 23, 2026

vprothais requested a review from Copilot April 2, 2026 07:59

Copilot started reviewing on behalf of vprothais April 2, 2026 08:00 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

hannahiss and others added 9 commits April 8, 2026 16:57

Merge branch 'ouds/main' into ouds/main-his-mandatory-fields

a022610

Update site/src/components/shortcodes/MandatoryFieldIndication.astro

caf9f92

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Merge remote-tracking branch 'origin/ouds/main-his-mandatory-fields' …

7f28334

…into ouds/main-his-mandatory-fields

wording + explicitely

925909e

mandatory misses required

0714b06

Update site/src/content/docs/components/password-input.mdx

b55f6aa

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

componentName required

7889116

getVersionedDocsPath + wording

ec36c60

Merge remote-tracking branch 'origin/ouds/main-his-mandatory-fields' …

39a296c

…into ouds/main-his-mandatory-fields

Conversation

hannahiss commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of change

Related issues

Context & Motivation

Description

Checklists

Checklist (for Core Team only)

Progression (for Core Team only)

Live previews

Uh oh!

netlify bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

MaxLardenois left a comment

Choose a reason for hiding this comment

Uh oh!

MaxLardenois Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

hannahiss Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

MaxLardenois Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

hannahiss Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MaxLardenois left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MaxLardenois left a comment

Choose a reason for hiding this comment

Uh oh!

hannahiss commented Mar 23, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

hannahiss commented Mar 13, 2026 •

edited

Loading

netlify bot commented Mar 13, 2026 •

edited

Loading