Skip to content

Commit 742b667

Browse files
MaxLardenoisMaxLardenois
committed
feat: implement a global opt-in class for rounded corners on inputs and buttons
1 parent 379d2a8 commit 742b667

File tree

5 files changed

+58
-37
lines changed

5 files changed

+58
-37
lines changed

‎scss/_buttons.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
}
2323
// End mod
2424

25+
#{$ouds-root-selector} {
26+
--#{$prefix}btn-border-radius: #{$btn-border-radius};
27+
}
28+
2529
.btn {
2630
// scss-docs-start btn-css-vars
2731
// OUDS mod: no --#{$prefix}btn-padding-x
@@ -34,7 +38,6 @@
3438
--#{$prefix}btn-bg: transparent;
3539
--#{$prefix}btn-border-width: #{$btn-border-width};
3640
--#{$prefix}btn-border-color: transparent;
37-
--#{$prefix}btn-border-radius: #{$btn-border-radius};
3841
--#{$prefix}btn-hover-border-color: initial; // OUDS mod: instead of `transparent`
3942
// OUDS mod: no --#{$prefix}btn-box-shadow
4043
// OUDS mod: no --#{$prefix}btn-disabled-opacity
@@ -208,7 +211,7 @@
208211
// End mod
209212
}
210213

211-
.btn-rounded {
214+
.use-rounded-corner-buttons {
212215
--#{$prefix}btn-border-radius: #{$ouds-button-border-radius-rounded};
213216
}
214217

‎scss/forms/_text-input.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
// Common text item styles
33
//
44

5+
#{$ouds-root-selector} {
6+
--#{$prefix}text-input-border-radius: #{$ouds-text-input-border-radius-default};
7+
}
8+
59
%text-item-common {
610
// scss-docs-start text-input-common-css-vars
711
--#{$prefix}text-input-color: var(--#{$prefix}color-content-default);
@@ -13,7 +17,6 @@
1317
--#{$prefix}text-input-border-width-bottom: #{$ouds-text-input-border-width-default};
1418
--#{$prefix}text-input-border-width-left: 0px;
1519
--#{$prefix}text-input-border-width-focus: 0px;
16-
--#{$prefix}text-input-border-radius: #{$ouds-text-input-border-radius-default};
1720

1821
--#{$prefix}text-input-padding-x: #{$ouds-text-input-space-padding-inline-default};
1922
--#{$prefix}text-input-padding-y: #{$ouds-text-input-space-padding-block-default};
@@ -72,10 +75,6 @@
7275
--#{$prefix}text-input-border-width-left: #{$ouds-text-input-border-width-default};
7376
}
7477

75-
&.text-input-container-rounded {
76-
--#{$prefix}text-input-border-radius: #{$ouds-text-input-border-radius-rounded};
77-
}
78-
7978
> label {
8079
z-index: 2;
8180
overflow: hidden;
@@ -384,10 +383,6 @@
384383
--#{$prefix}text-input-border-width-left: #{$ouds-text-input-border-width-default};
385384
}
386385

387-
&.text-area-container-rounded {
388-
--#{$prefix}text-input-border-radius: #{$ouds-text-input-border-radius-rounded};
389-
}
390-
391386
> label {
392387
z-index: 2;
393388
padding-right: calc($ouds-text-input-space-padding-inline-trailing-action + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap) - var(--#{$prefix}text-input-border-width-right)); // stylelint-disable-line function-disallowed-list
@@ -590,3 +585,8 @@
590585
color: var(--#{$prefix}color-content-status-negative);
591586
@include get-font-size("label-medium");
592587
}
588+
589+
// Top level modifier for rounded corners on textual inputs
590+
.use-rounded-corner-inputs {
591+
--#{$prefix}text-input-border-radius: #{$ouds-text-input-border-radius-rounded};
592+
}

‎site/src/content/docs/components/buttons.mdx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,17 +87,23 @@ OUDS Web offers a few variations to use on [colored backgrounds]([[docsref:/util
8787
<BrandSpecific brand="orange">
8888
### Rounded
8989

90-
Add `.btn-rounded` to the button class list to enable rounded corners.
90+
Rounded corners buttons is a project-wide option therefore all your buttons should either be rounded or not. Add `.use-rounded-corner-buttons` on a top container (for example `<body>`) to use rounded corners.
9191

9292
<Callout type="warning">
9393
Rounded corners could be used in more emotional, immersive contexts or those tied to specific visual identities. **For standard or business-oriented usage, keep the default square corners.**
9494
</Callout>
9595

96-
<Example class="bd-btn-example" code={`<button type="button" class="btn btn-default btn-rounded">Default</button>
97-
<button type="button" class="btn btn-strong btn-rounded">Strong</button>
98-
<button type="button" class="btn btn-brand btn-rounded">Brand</button>
99-
<button type="button" class="btn btn-minimal btn-rounded">Minimal</button>
100-
<button type="button" class="btn btn-negative btn-rounded">Negative</button>`} />
96+
<Callout type="info">
97+
We use a `<div>` as a parent container because we cannot use `<body>` in an example
98+
</Callout>
99+
100+
<Example class="bd-btn-example" code={`<div class="use-rounded-corner-buttons">
101+
<button type="button" class="btn btn-default">Default</button>
102+
<button type="button" class="btn btn-strong">Strong</button>
103+
<button type="button" class="btn btn-brand">Brand</button>
104+
<button type="button" class="btn btn-minimal">Minimal</button>
105+
<button type="button" class="btn btn-negative">Negative</button>
106+
</div>`} />
101107
</BrandSpecific>
102108

103109
### With icon

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,24 @@ Add `.text-area-container-outlined` for a minimalist text area with a transparen
4646
<BrandSpecific brand="orange">
4747
### Rounded
4848

49-
Add `.text-area-container-rounded` for a finish with rounded corners.
49+
Rounded corners inputs is a project-wide option therefore all your inputs should either be rounded or not. Add `.use-rounded-corner-inputs` on a top container (for example `<body>`) to use rounded corners.
5050

51-
<Example code={`<div class="text-area mb-medium">
52-
<div class="text-area-container text-area-container-rounded">
53-
<label for="exampleTextAreaRounded">Additional comments</label>
54-
<textarea class="text-area-field" id="exampleTextAreaRounded"></textarea>
51+
<Callout type="info">
52+
We use a `<div>` as a parent container because we cannot use `<body>` in an example
53+
</Callout>
54+
55+
<Example code={`<div class="use-rounded-corner-inputs">
56+
<div class="text-area mb-medium">
57+
<div class="text-area-container">
58+
<label for="exampleTextAreaRounded">Additional comments</label>
59+
<textarea class="text-area-field" id="exampleTextAreaRounded"></textarea>
60+
</div>
5561
</div>
56-
</div>
57-
<div class="text-area">
58-
<div class="text-area-container text-area-container-rounded text-area-container-outlined">
59-
<label for="exampleTextAreaRoundedAlt">Additional comments</label>
60-
<textarea class="text-area-field" id="exampleTextAreaRoundedAlt"></textarea>
62+
<div class="text-area">
63+
<div class="text-area-container text-area-container-outlined">
64+
<label for="exampleTextAreaRoundedAlt">Additional comments</label>
65+
<textarea class="text-area-field" id="exampleTextAreaRoundedAlt"></textarea>
66+
</div>
6167
</div>
6268
</div>`} />
6369
</BrandSpecific>

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,18 +71,24 @@ Add `.text-input-container-outlined` for a minimalist input with a transparent b
7171
<BrandSpecific brand="orange">
7272
### Rounded
7373

74-
Add `.text-input-container-rounded` for a finish with rounded corners.
74+
Rounded corners inputs is a project-wide option therefore all your inputs should either be rounded or not. Add `.use-rounded-corner-inputs` on a top container (for example `<body>`) to use rounded corners.
7575

76-
<Example code={`<div class="text-input mb-medium">
77-
<div class="text-input-container text-input-container-rounded">
78-
<label for="exampleTextInputRounded">Firstname</label>
79-
<input type="text" class="text-input-field" id="exampleTextInputRounded" placeholder=" ">
76+
<Callout type="info">
77+
We use a `<div>` as a parent container because we cannot use `<body>` in an example
78+
</Callout>
79+
80+
<Example code={`<div class="use-rounded-corner-inputs">
81+
<div class="text-input mb-medium">
82+
<div class="text-input-container">
83+
<label for="exampleTextInputRounded">Firstname</label>
84+
<input type="text" class="text-input-field" id="exampleTextInputRounded" placeholder=" ">
85+
</div>
8086
</div>
81-
</div>
82-
<div class="text-input">
83-
<div class="text-input-container text-input-container-rounded text-input-container-outlined">
84-
<label for="exampleTextInputRoundedAlt">Firstname</label>
85-
<input type="text" class="text-input-field" id="exampleTextInputRoundedAlt" placeholder=" ">
87+
<div class="text-input">
88+
<div class="text-input-container text-input-container-outlined">
89+
<label for="exampleTextInputRoundedAlt">Firstname</label>
90+
<input type="text" class="text-input-field" id="exampleTextInputRoundedAlt" placeholder=" ">
91+
</div>
8692
</div>
8793
</div>`} />
8894
</BrandSpecific>

0 commit comments

Comments
 (0)