Skip to content

Commit f039904

Browse files
hannahisshannahiss
authored
Merge branch 'ouds/main' into ouds/main-his-a11y-labels-forms
2 parents b45e2ff + 14c0455 commit f039904

File tree

11 files changed

+146
-8
lines changed

11 files changed

+146
-8
lines changed

‎.bundlewatch.config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"files": [
33
{
44
"path": "./packages/orange/dist/css/ouds-web-bootstrap.css",
5-
"maxSize": "72.30 kB"
5+
"maxSize": "72.5 kB"
66
},
77
{
88
"path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
@@ -34,7 +34,7 @@
3434
},
3535
{
3636
"path": "./packages/orange/dist/css/ouds-web.css",
37-
"maxSize": "62.75 kB"
37+
"maxSize": "63.0 kB"
3838
},
3939
{
4040
"path": "./packages/orange/dist/css/ouds-web.min.css",

‎scss/forms/_control-item.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@
4444
padding: $ouds-control-item-space-padding-block-default $ouds-control-item-space-padding-inline;
4545
@include border-radius($ouds-control-item-border-radius);
4646

47+
&.component-max-width {
48+
max-width: px-to-rem($ouds-control-item-size-max-width);
49+
}
50+
4751
// Handle focus
4852
&:has(:focus-visible) {
4953
@include focus-visible();

‎scss/forms/_select-input.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
.select-input {
44
@extend %text-item-common;
55
--#{$prefix}text-input-min-width: #{px-to-rem($ouds-select-input-size-min-width)};
6-
--#{$prefix}text-input-max-width: #{px-to-rem($ouds-text-input-size-max-width)};
76
--#{$prefix}text-input-min-height: #{px-to-rem($ouds-text-input-size-min-height)};
7+
8+
&.component-max-width {
9+
max-width: px-to-rem($ouds-text-input-size-max-width);
10+
}
811
}
912

1013
.select-input-field {
@@ -82,7 +85,6 @@
8285
.select-input-container {
8386
position: relative;
8487
min-width: var(--#{$prefix}text-input-min-width);
85-
max-width: var(--#{$prefix}text-input-max-width);
8688
min-height: var(--#{$prefix}text-input-min-height);
8789
padding-top: calc(var(--#{$prefix}text-input-padding-y) - var(--#{$prefix}text-input-border-width-top)); // stylelint-disable-line function-disallowed-list
8890
padding-right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-right)); // stylelint-disable-line function-disallowed-list

‎scss/forms/_text-input.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,19 +42,21 @@
4242
@extend %text-item-common;
4343
// scss-docs-start text-input-css-vars
4444
--#{$prefix}text-input-min-width: #{px-to-rem($ouds-text-input-size-min-width)};
45-
--#{$prefix}text-input-max-width: #{px-to-rem($ouds-text-input-size-max-width)};
4645
--#{$prefix}text-input-min-height: #{px-to-rem($ouds-text-input-size-min-height)};
4746
--#{$prefix}text-input-column-row-gap: #{$ouds-text-input-space-row-gap-label-input};
4847
// scss-docs-end text-input-css-vars
4948

49+
&.component-max-width {
50+
max-width: px-to-rem($ouds-text-input-size-max-width);
51+
}
52+
5053
.text-input-container {
5154
position: relative;
5255
display: flex;
5356
flex-direction: column;
5457
gap: var(--#{$prefix}text-input-column-row-gap);
5558
justify-content: center;
5659
min-width: var(--#{$prefix}text-input-min-width);
57-
max-width: var(--#{$prefix}text-input-max-width);
5860
min-height: var(--#{$prefix}text-input-min-height);
5961
padding-top: calc(var(--#{$prefix}text-input-padding-y) - var(--#{$prefix}text-input-border-width-top)); // stylelint-disable-line function-disallowed-list
6062
padding-right: calc(var(--#{$prefix}text-input-padding-x) - var(--#{$prefix}text-input-border-width-right)); // stylelint-disable-line function-disallowed-list
@@ -360,12 +362,15 @@
360362
.text-area {
361363
@extend %text-item-common;
362364

365+
&.component-max-width {
366+
max-width: px-to-rem($ouds-text-area-size-max-width);
367+
}
368+
363369
.text-area-container {
364370
position: relative;
365371
display: flex;
366372
flex-direction: column;
367373
min-width: var(--#{$prefix}text-input-min-width);
368-
max-width: px-to-rem($ouds-text-area-size-max-width);
369374

370375
padding-top: calc($ouds-text-area-space-padding-block - var(--#{$prefix}text-input-border-width-top)); // stylelint-disable-line function-disallowed-list
371376
background-color: var(--#{$prefix}text-input-background-color);
@@ -562,7 +567,6 @@
562567
%text-input-message {
563568
--#{$prefix}text-input-message-margin-top: #{$ouds-text-input-space-padding-block-top-helper-text};
564569

565-
max-width: var(--#{$prefix}text-input-max-width);
566570
padding-right: var(--#{$prefix}text-input-padding-x);
567571
padding-left: var(--#{$prefix}text-input-padding-x);
568572
}

‎site/src/content/docs/forms/checkbox.mdx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,30 @@ You can align horizontally up to three checkboxes if their labels are short, add
286286
</div>
287287
</fieldset>`} />
288288

289+
### Max width
290+
291+
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).
292+
293+
<Example code={`<fieldset class="control-items-list">
294+
<div class="checkbox-item component-max-width">
295+
<div class="control-item-assets-container">
296+
<input class="control-item-indicator" type="checkbox" aria-describedby="checkboxMWDescription" id="checkboxWithMaxWidth" value="" />
297+
</div>
298+
<div class="control-item-text-container">
299+
<label class="control-item-label" for="checkboxWithMaxWidth">Default checkbox</label>
300+
<p class="control-item-description" id="checkboxMWDescription">Description text</p>
301+
</div>
302+
</div>
303+
<div class="checkbox-item component-max-width">
304+
<div class="control-item-assets-container">
305+
<input class="control-item-indicator" type="checkbox" aria-describedby="checkboxWithMaxWidth2Description" id="checkboxWithMaxWidth2" value="" checked />
306+
</div>
307+
<div class="control-item-text-container">
308+
<label class="control-item-label" for="checkboxWithMaxWidth2">Checked checkbox</label>
309+
<p class="control-item-description" id="checkboxWithMaxWidth2Description">Description text</p>
310+
</div>
311+
</div>
312+
</fieldset>`} />
289313

290314
## Indeterminate
291315

‎site/src/content/docs/forms/radio-button.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,31 @@ You can align horizontally up to three radio buttons if their labels are short,
324324
</div>
325325
</fieldset>`} />
326326

327+
### Max width
328+
329+
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).
330+
331+
<Example code={`<fieldset class="control-items-list">
332+
<div class="radio-button-item component-max-width">
333+
<div class="control-item-assets-container">
334+
<input class="control-item-indicator" type="radio" aria-describedby="radioMWDescription" id="radioWithMaxWidth" value="" name="radioMaxWidth" />
335+
</div>
336+
<div class="control-item-text-container">
337+
<label class="control-item-label" for="radioWithMaxWidth">Default radio</label>
338+
<p class="control-item-description" id="radioMWDescription">Description text</p>
339+
</div>
340+
</div>
341+
<div class="radio-button-item component-max-width">
342+
<div class="control-item-assets-container">
343+
<input class="control-item-indicator" type="radio" aria-describedby="radioWithMaxWidth2Description" id="radioWithMaxWidth2" value="" name="radioMaxWidth" checked />
344+
</div>
345+
<div class="control-item-text-container">
346+
<label class="control-item-label" for="radioWithMaxWidth2">Checked radio</label>
347+
<p class="control-item-description" id="radioWithMaxWidth2Description">Description text</p>
348+
</div>
349+
</div>
350+
</fieldset>`} />
351+
327352
## States
328353

329354
### Disabled

‎site/src/content/docs/forms/select-input.mdx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,27 @@ If a helper link is used in conjunction with a helper text, the `aria-describedb
200200
</a>
201201
</div>`} />
202202

203+
## Layout
204+
205+
### Max width
206+
207+
By default select inputs will span the whole width of their parent container, to limit the width of the select input on wider parent container, add a `.component-max-width` to the `.select-input` container.
208+
209+
<Example code={`<div class="select-input component-max-width">
210+
<div class="select-input-container">
211+
<label for="exampleSelectMaxWidth">Select example max width</label>
212+
<select class="select-input-field" id="exampleSelectMaxWidth" aria-describedby="selectMaxWidthHelper">
213+
<option value="" disabled selected></option>
214+
<option value="1">One</option>
215+
<option value="2">Two</option>
216+
<option value="3">Three</option>
217+
</select>
218+
</div>
219+
<p id="selectMaxWidthHelper" class="helper-text">
220+
Helper text.
221+
</p>
222+
</div>`} />
223+
203224
## States
204225

205226
### Disabled

‎site/src/content/docs/forms/switch.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,22 @@ Put your switches on the opposite side with the `.form-check-reverse` modifier c
236236
</div>`} />
237237
</BootstrapCompatibility>
238238

239+
### Max width
240+
241+
By default switches will span the whole width of their parent container, to limit the width of the switch on wider parent container, add a `.component-max-width` to the `.switch-item` container. More information on switch sizing in the [design guidelines](https://r.orange.fr/r/S-ouds-doc-switch-responsiveness).
242+
243+
<Example code={`<div class="switch-item component-max-width">
244+
<div class="control-item-assets-container">
245+
<input class="control-item-indicator" type="checkbox" role="switch" value="" id="switchMaxWidth" checked />
246+
</div>
247+
<div class="control-item-text-container">
248+
<label class="control-item-label" for="switchMaxWidth">Checked switch with max width</label>
249+
</div>
250+
<div class="control-item-assets-container">
251+
<span class="icon si si-settings" aria-hidden="true"></span>
252+
</div>
253+
</div>`} />
254+
239255
## States
240256

241257
### Disabled

‎site/src/content/docs/forms/text-area.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,22 @@ If a helper link is used in conjunction with a helper text, the `aria-describedb
114114
</a>
115115
</div>`} />
116116

117+
## Layout
118+
119+
### Max width
120+
121+
By default text areas will span the whole width of their parent container, to limit the width of the text area on wider parent container, add a `.component-max-width` to the `.text-input` container.
122+
123+
<Example code={`<div class="text-area component-max-width">
124+
<div class="text-area-container">
125+
<label for="textAreaWithMaxWidth">Additional comments</label>
126+
<textarea id="textAreaWithMaxWidth" class="text-area-field" aria-describedby="textAreaWithMaxWidthText"></textarea>
127+
</div>
128+
<p id="textAreaWithMaxWidthText" class="helper-text">
129+
Please be concise and limit your comment to <strong>180</strong> characters.
130+
</p>
131+
</div>`} />
132+
117133
## States
118134

119135
### Disabled

‎site/src/content/docs/forms/text-input.mdx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,30 @@ For accessibility purpose the prefix and suffix should be explicitly mentioned i
275275
</p>
276276
</div>`} />
277277

278+
## Layout
279+
280+
### Max width
281+
282+
By default text inputs will span the whole width of their parent container, to limit the width of the text input on wider parent container, add a `.component-max-width` to the `.text-input` container.
283+
284+
<Example code={`<div class="text-input component-max-width mb-medium">
285+
<div class="text-input-container">
286+
<label for="exampleTextInputWithMaxWidth">Email address</label>
287+
<input type="email" autocomplete="email" class="text-input-field" id="exampleTextInputWithMaxWidth" placeholder=" ">
288+
</div>
289+
</div>
290+
<div class="text-input component-max-width mb-medium">
291+
<div class="text-input-container">
292+
<label for="exampleTextInputWithMaxWidthSuffix">Price</label>
293+
<div class="input-container" data-bs-prefix="£" data-bs-suffix=".00">
294+
<input type="text" id="exampleTextInputWithMaxWidthSuffix" aria-describedby="prefixSuffixTextHelpBlockMW" class="text-input-field" placeholder="Enter amount">
295+
</div>
296+
</div>
297+
<p id="prefixSuffixTextHelpBlockMW" class="helper-text">
298+
Enter your price in Pounds (£) without decimals.
299+
</p>
300+
</div>`} />
301+
278302
## States
279303

280304
### Disabled

0 commit comments

Comments
 (0)