[OUDS] Manage mandatory fields indication #3439
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||
|---|---|---|---|---|
| @@ -0,0 +1,27 @@ | ||||
| --- | ||||
| /* | ||||
| * Outputs mandatory fields indication | ||||
| */ | ||||
|
|
||||
| import {getConfig} from "@libs/config.ts"; | ||||
|
There was a problem hiding this comment.
Suggested change
|
||||
| interface Props { | ||||
| /** | ||||
| * The component name that should be displayed. | ||||
| */ | ||||
| componentName?: string | ||||
|
|
||||
| } | ||||
|
|
||||
| import { getVersionedDocsPath } from '@libs/path' | ||||
|
|
||||
| const { componentName } = Astro.props | ||||
|
|
||||
| const name = (componentName ? componentName.toLowerCase() : "") | ||||
|
|
||||
| const link = (componentName ? `https://r.orange.fr/r/S-ouds-doc-${componentName.replace(" ", "-")}` : "") | ||||
|
Comment on lines
+17
to
+21
There was a problem hiding this comment.
|
||||
|
|
||||
| --- | ||||
|
|
||||
| <p>To indicate that a {name} is mandatory in a form, add the class <code>.is-required</code> to display a red asterisk at the end of the label.</p> | ||||
|
|
||||
| <p>For general rules about when to add mandatory fields indication, please refer to the <a href={link}>{name} design guidelines</a> and to the <a href={getVersionedDocsPath('/foundation/form-validation#mandatory-fields-indication')}>form validation documentation</a>. In particular, do not forget to handle error messages.</p> | ||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -293,9 +293,9 @@ You can align horizontally up to three checkboxes if their labels are short, add | |
|
|
||
| ### Max width | ||
|
|
||
| By default, checkboxes will span the whole width of their parent container, to limit the width of the checkbox on wider parent container, add a `.component-max-width` to the `.checkbox-item` container. More information on checkbox sizing in the [design guidelines](https://r.orange.fr/r/S-ouds-doc-checkbox-responsiveness). | ||
|
|
||
| <Example buttonLabel="checkbox max width" code={`<fieldset class="control-items-list"> | ||
| <div class="checkbox-item component-max-width"> | ||
| <div class="control-item-assets-container"> | ||
| <input class="control-item-indicator" type="checkbox" aria-describedby="checkboxMWDescription" id="checkboxWithMaxWidth" value="" /> | ||
|
|
@@ -660,3 +660,39 @@ For the standalone checkbox, we provide a completely different architecture to e | |
| <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="Standalone checkbox (Bootstrap compatible)" /> | ||
| </div>`} /> | ||
| </BootstrapCompatibility> | ||
|
|
||
| ## Mandatory field indication | ||
|
|
||
| <MandatoryFieldIndication componentName="checkbox" /> | ||
|
|
||
| <Example buttonLabel="mandatory checkboxes indication" code={`<div class="checkbox-item-container"> | ||
| <div class="checkbox-item"> | ||
| <div class="control-item-assets-container"> | ||
| <input class="control-item-indicator" type="checkbox" value="" id="checkboxUniqueMandatory" name="mandatoryCheckbox" /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label is-required" for="checkboxUniqueMandatory">Mandatory unique checkbox</label> | ||
| </div> | ||
|
Comment on lines
+669
to
+675
There was a problem hiding this comment. The “mandatory unique checkbox” is visually marked as required ( |
||
| </div> | ||
| </div> | ||
| <hr class="my-xlarge"> | ||
| <fieldset class="control-items-list"> | ||
| <legend class="is-required">Mandatory checkboxes</legend> | ||
| <div class="checkbox-item"> | ||
| <div class="control-item-assets-container"> | ||
| <input class="control-item-indicator" type="checkbox" value="" id="mandatoryCheckbox1" name="mandatoryCheckboxes" required /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label" for="mandatoryCheckbox1">Default checkbox</label> | ||
| </div> | ||
| </div> | ||
| <div class="checkbox-item"> | ||
| <div class="control-item-assets-container"> | ||
| <input checked class="control-item-indicator" type="checkbox" value="" id="mandatoryCheckbox2" name="mandatoryCheckboxes" required /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label" for="mandatoryCheckbox2">Checked checkbox</label> | ||
| </div> | ||
| </div> | ||
| </fieldset>`} /> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -124,7 +124,7 @@ A `placeholder` attribute is required on each `<input>` as our CSS-only floating | |||||||||
| <p id="inputPasswordInvalidHelper" class="helper-text">Enter a password with at least 8 characters (without the DEV- prefix).</p> | ||||||||||
| <p id="inputPasswordInvalidError" class="error-text">Password must be at least 8 characters (without the DEV- prefix).</p> | ||||||||||
| </div> | ||||||||||
| <div class="text-input mb-medium"> | ||||||||||
| <div class="text-input-container text-input-container-outlined"> | ||||||||||
| <svg aria-hidden="true"> | ||||||||||
| <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#lock-closed')}"/> | ||||||||||
|
|
@@ -142,4 +142,16 @@ A `placeholder` attribute is required on each `<input>` as our CSS-only floating | |||||||||
| </div> | ||||||||||
| <p id="inputPasswordOutlinedInvalidHelper" class="helper-text">Enter a password with at least 8 characters (without the DEV- prefix).</p> | ||||||||||
| <p id="inputPasswordOutlinedInvalidError" class="error-text">Password must be at least 8 characters (without the DEV- prefix).</p> | ||||||||||
| </div> | ||||||||||
| <div class="text-input"> | ||||||||||
| <div class="text-input-container"> | ||||||||||
| <label for="madatoryPassword" class="is-required">Password</label> | ||||||||||
| <input type="password" id="madatoryPassword" class="text-input-field" placeholder=" " required> | ||||||||||
|
Comment on lines
+148
to
+149
There was a problem hiding this comment. Typo in the example id/for attribute:
Suggested change
|
||||||||||
| <button class="btn btn-minimal btn-icon"> | ||||||||||
|
Comment on lines
+146
to
+150
There was a problem hiding this comment. The PR metadata links to |
||||||||||
| <svg aria-hidden="true"> | ||||||||||
| <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/> | ||||||||||
| </svg> | ||||||||||
| <span class="visually-hidden">Show password</span> | ||||||||||
| </button> | ||||||||||
| </div> | ||||||||||
| </div>`} /> | ||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -330,9 +330,9 @@ You can align horizontally up to three radio buttons if their labels are short, | |
|
|
||
| ### Max width | ||
|
|
||
| By default, radio buttons will span the whole width of their parent container, to limit the width of the radio button on wider parent container, add a `.component-max-width` to the `.radio-button-item` container. More information on radio button sizing in the [design guidelines](https://r.orange.fr/r/S-ouds-doc-radio-button-responsiveness). | ||
|
|
||
| <Example buttonLabel="radio button max width" code={`<fieldset class="control-items-list"> | ||
| <div class="radio-button-item component-max-width"> | ||
| <div class="control-item-assets-container"> | ||
| <input class="control-item-indicator" type="radio" aria-describedby="radioMWDescription" id="radioWithMaxWidth" value="" name="radioMaxWidth" /> | ||
|
|
@@ -604,3 +604,39 @@ For the standalone radio button, we provide a completely different architecture | |
| <input class="form-check-input" type="radio" value="" aria-label="Default standalone radio button (Bootstrap compatible)" /> | ||
| </div>`} /> | ||
| </BootstrapCompatibility> | ||
|
|
||
|
|
||
| ## Mandatory field indication | ||
|
|
||
| <MandatoryFieldIndication componentName="radio button" /> | ||
|
|
||
| <Example buttonLabel="mandatory radio buttons indication" code={`<div class="radio-button-item-container"> | ||
| <div class="radio-button-item"> | ||
| <div class="control-item-assets-container"> | ||
| <input class="control-item-indicator" type="radio" value="" id="radioUniqueMandatory" name="mandatoryRadio" /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label is-required" for="radioUniqueMandatory">Mandatory unique radio button</label> | ||
| </div> | ||
|
Comment on lines
+614
to
+620
There was a problem hiding this comment. The “mandatory unique radio button” is visually marked as required ( |
||
| </div> | ||
| </div> | ||
| <hr class="my-xlarge"> | ||
| <fieldset class="control-items-list"> | ||
| <legend class="is-required">Mandatory radio buttons</legend> | ||
| <div class="radio-button-item"> | ||
| <div class="control-item-assets-container"> | ||
| <input class="control-item-indicator" type="radio" value="" id="mandatoryRadio1" name="mandatoryRadios" required /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label" for="mandatoryRadio1">Default radio button</label> | ||
| </div> | ||
| </div> | ||
| <div class="radio-button-item"> | ||
| <div class="control-item-assets-container"> | ||
| <input checked class="control-item-indicator" type="radio" value="" id="mandatoryRadio2" name="mandatoryRadios" required /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label" for="mandatoryRadio2">Checked radio button</label> | ||
| </div> | ||
| </div> | ||
| </fieldset>`} /> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removing the
!defaultSCSS variables for required label styling (previously in theform-label-variablessection) is a breaking change for downstream consumers who override them. Consider keeping them (possibly deprecated) and mapping them to the new token-based values to preserve the SCSS API.