Skip to content

Commit f6fd42a

Browse files
daniellerouxdanielleroux
committed
migrate e2e tests and add namespace to input elements
1 parent d585909 commit f6fd42a

File tree

31 files changed

+278
-201
lines changed

31 files changed

+278
-201
lines changed

‎.changeset/mighty-numbers-work.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siemens/ix': major
3+
---
4+
5+
Prevent global styling for `input` and `label`. If you still want to use the legacy styling provide a `class="ix-form-control"` to the element.

‎.changeset/quick-flowers-design.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siemens/ix': minor
3+
---
4+
5+
Change default width from `input.ix-from-control` from `width: 100%` to `width: auto`

‎packages/core/scss/_core.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
@import 'legacy/components/buttons';
2323
@import 'legacy/components/button-group';
2424
@import 'legacy/components/dropdown';
25-
@import 'legacy/components/forms';
26-
@import './components/form/input';
25+
// @import 'legacy/components/forms';
26+
@import 'legacy/components/input';
2727
@import './components/links';
2828
@import './components/checkboxes';
2929
@import './components/radiobuttons';

‎packages/core/scss/legacy/components/_forms.scss

+15-15
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
color: $form-feedback-invalid-color;
1717
}
1818

19-
.form-control,
20-
.form-control-plaintext {
19+
.ix-form-control,
20+
.ix-form-control-plaintext {
2121
@include text-default();
2222
color: var(--theme-input--color);
2323
@include ellipsis;
@@ -52,11 +52,11 @@
5252
}
5353
}
5454

55-
.form-control:focus-visible {
55+
.ix-form-control:focus-visible {
5656
color: var(--theme-input--color);
5757
}
5858

59-
.form-control[type='number'] {
59+
.ix-form-control[type='number'] {
6060
&::-webkit-inner-spin-button {
6161
margin-right: -2px;
6262
margin-left: 2px;
@@ -66,19 +66,19 @@
6666
text-align: right;
6767
}
6868

69-
.form-control.readonly,
70-
.form-control[readonly] {
69+
.ix-form-control.readonly,
70+
.ix-form-control[readonly] {
7171
background: transparent !important;
7272
border-block-start: none !important;
7373
border-inline-start: none !important;
7474
border-inline-end: none !important;
7575
border-radius: 0rem;
7676
}
7777

78-
.form-control:read-only,
79-
.form-control[readonly],
80-
.form-control[readOnly],
81-
.form-control.readonly {
78+
.ix-form-control:read-only,
79+
.ix-form-control[readonly],
80+
.ix-form-control[readOnly],
81+
.ix-form-control.readonly {
8282
box-shadow: none !important;
8383
outline: none !important;
8484
border-color: var(--theme-input--border-color);
@@ -89,8 +89,8 @@
8989
}
9090
}
9191

92-
.form-control:disabled,
93-
.form-control.disabled {
92+
.ix-form-control:disabled,
93+
.ix-form-control.disabled {
9494
background: transparent !important;
9595
border-block-start: none !important;
9696
border-inline-start: none !important;
@@ -105,7 +105,7 @@
105105
}
106106
}
107107

108-
.form-control-plaintext {
108+
.ix-form-control-plaintext {
109109
outline: 0;
110110
}
111111

@@ -131,12 +131,12 @@
131131
}
132132
}
133133

134-
select.form-control {
134+
select.ix-form-control {
135135
padding: 0 0.312rem;
136136
}
137137

138138
textarea {
139-
&.form-control {
139+
&.ix-form-control {
140140
padding: 0.375rem $small-space;
141141
}
142142
}

‎packages/core/scss/components/form/_input.scss ‎packages/core/scss/legacy/components/_input.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* SPDX-FileCopyrightText: 2023 Siemens AG
2+
* SPDX-FileCopyrightText: 2025 Siemens AG
33
*
44
* SPDX-License-Identifier: MIT
55
*
@@ -8,5 +8,5 @@
88
*/
99
@import 'mixins/input';
1010

11-
@include form;
12-
@include element-form;
11+
@include form('.ix-form-control');
12+
@include element-form('.ix-form-control');

‎packages/core/scss/mixins/_input.scss

+24-24
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
& {
1515
@include typography-body;
1616
min-height: 2rem;
17-
width: 100%;
17+
width: auto;
1818
padding: 0.25rem 0.5rem;
1919
background-color: var(--theme-input--background);
2020
color: var(--theme-input--color);
@@ -119,21 +119,21 @@
119119
}
120120
}
121121

122-
@mixin form {
123-
label {
122+
@mixin form($namespace: '') {
123+
label#{$namespace} {
124124
color: var(--theme-color-soft-text);
125125
padding: 2px 0px;
126126
}
127127

128-
label.label-alignment-left {
128+
label#{$namespace}.label-alignment-left {
129129
padding: 6px 0px;
130130
}
131131

132-
input {
132+
input#{$namespace} {
133133
@include element-input();
134134
}
135135

136-
input[type='number'] {
136+
input#{$namespace}[type='number'] {
137137
&::-webkit-inner-spin-button {
138138
margin-right: -2px;
139139
margin-left: 2px;
@@ -143,7 +143,7 @@
143143
text-align: right;
144144
}
145145

146-
textarea {
146+
textarea#{$namespace} {
147147
@include element-input();
148148
@include element-textarea();
149149
}
@@ -202,31 +202,31 @@
202202
}
203203
}
204204

205-
@mixin element-form {
206-
textarea ~ .valid-feedback,
207-
textarea ~ .invalid-feedback,
208-
input ~ .valid-feedback,
209-
input ~ .invalid-feedback {
205+
@mixin element-form($namespace) {
206+
textarea#{$namespace} ~ .valid-feedback,
207+
textarea#{$namespace} ~ .invalid-feedback,
208+
input#{$namespace} ~ .valid-feedback,
209+
input#{$namespace} ~ .invalid-feedback {
210210
display: none;
211211
@include typography-body;
212212
}
213213

214214
form {
215-
textarea ~ .valid-feedback,
216-
input ~ .valid-feedback {
215+
textarea#{$namespace} ~ .valid-feedback,
216+
input#{$namespace} ~ .valid-feedback {
217217
color: var(--theme-color-success);
218218
}
219219

220-
textarea ~ .invalid-feedback,
221-
input ~ .invalid-feedback {
220+
textarea#{$namespace} ~ .invalid-feedback,
221+
input#{$namespace} ~ .invalid-feedback {
222222
color: var(--theme-color-alarm-text);
223223
}
224224
}
225225

226226
form:not([novalidate]),
227227
form.was-validated {
228-
:invalid,
229-
.is-invalid {
228+
#{$namespace}:invalid,
229+
#{$namespace}.is-invalid {
230230
background-color: var(--theme-input-error--background);
231231
border-color: var(--theme-input-error--border-color);
232232
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
@@ -237,24 +237,24 @@
237237
background-repeat: no-repeat;
238238
}
239239

240-
:invalid,
241-
.is-invalid {
240+
#{$namespace}:invalid,
241+
#{$namespace}.is-invalid {
242242
& ~ .invalid-feedback {
243243
display: block;
244244
}
245245
}
246246

247-
:valid,
248-
.is-valid {
247+
#{$namespace}:valid,
248+
#{$namespace}.is-valid {
249249
& ~ .valid-feedback {
250250
display: block;
251251
}
252252
}
253253
}
254254

255255
form:not(.was-validated) {
256-
.invalid-feedback,
257-
.valid-feedback {
256+
#{$namespace}.invalid-feedback,
257+
#{$namespace}.valid-feedback {
258258
display: none !important;
259259
}
260260
}

‎packages/core/src/components/expanding-search/expanding-search.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export class ExpandingSearch
153153
>
154154
<input
155155
class={{
156-
'form-control': true,
156+
'ix-form-control': true,
157157
input: this.expanded,
158158
'disable-pointer': !this.expanded,
159159
'opacity-before': !this.expanded,

‎packages/core/src/components/input-group/input-group.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export class InputGroup {
9797
}
9898
} else {
9999
console.warn(
100-
'You used the ix-input-group without an input tag, e.g. <input class="form-control" />'
100+
'You used the ix-input-group without an input tag, e.g. <input class="ix-form-control" />'
101101
);
102102
}
103103
}

‎packages/core/src/components/pagination/pagination.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export class Pagination {
228228
<div class="advanced-pagination">
229229
<ix-typography format="body">{this.i18nPage}</ix-typography>
230230
<input
231-
class="form-control page-selection"
231+
class="ix-form-control page-selection"
232232
type="number"
233233
min="1"
234234
max={this.count}

‎packages/core/src/components/time-picker/time-picker.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
}
8080
}
8181

82-
.form-control[type='number'] {
82+
.ix-form-control[type='number'] {
8383
text-align: center;
8484
}
8585

‎packages/core/src/components/time-picker/time-picker.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ export class TimePicker {
257257
></ix-icon-button>
258258

259259
<input
260-
class="form-control"
260+
class="ix-form-control"
261261
name={descriptor.unit}
262262
type="number"
263263
placeholder={descriptor.placeholder}

‎packages/core/src/tests/3rd-party/bootstrap/html-elements/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -133,22 +133,22 @@ <h2 class="section">Text</h2>
133133
<h2 class="section">Forms</h2>
134134

135135
<div class="mb-3">
136-
<label for="exampleFormControlInput1" class="form-label"
136+
<label for="exampleFormControlInput1" class="ix-form-control"
137137
>Email address</label
138138
>
139139
<input
140140
type="email"
141-
class="form-control"
141+
class="ix-form-control"
142142
id="exampleFormControlInput1"
143143
placeholder="name@example.com"
144144
/>
145145
</div>
146146
<div class="mb-3">
147-
<label for="exampleFormControlTextarea1" class="form-label"
147+
<label for="exampleFormControlTextarea1" class="ix-form-control"
148148
>Example textarea</label
149149
>
150150
<textarea
151-
class="form-control"
151+
class="ix-form-control"
152152
id="exampleFormControlTextarea1"
153153
rows="3"
154154
></textarea>

‎packages/core/src/tests/checkbox/basic/index.html

+19-8
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,34 @@
1616
</head>
1717
<body style="padding: 2rem">
1818
<div style="margin-bottom: 1rem">
19-
<input type="checkbox" id="checkbox_01" checked />
20-
<label for="checkbox_01">Simple checkbox</label>
19+
<input class="ix-form-control" type="checkbox" id="checkbox_01" checked />
20+
<label class="ix-form-control" for="checkbox_01">Simple checkbox</label>
2121
</div>
2222

2323
<div style="margin-bottom: 1rem">
24-
<input type="checkbox" id="checkbox_02" checked disabled />
25-
<label for="checkbox_02">Disabled checkbox</label>
24+
<input
25+
class="ix-form-control"
26+
type="checkbox"
27+
id="checkbox_02"
28+
checked
29+
disabled
30+
/>
31+
<label class="ix-form-control" for="checkbox_02">Disabled checkbox</label>
2632
</div>
2733

2834
<div style="margin-bottom: 1rem">
29-
<input type="checkbox" id="checkbox_01" />
30-
<label for="checkbox_01">Simple checkbox</label>
35+
<input class="ix-form-control" type="checkbox" id="checkbox_01" />
36+
<label class="ix-form-control" for="checkbox_01">Simple checkbox</label>
3137
</div>
3238

3339
<div>
34-
<input type="checkbox" id="checkbox_02" disabled />
35-
<label for="checkbox_02">Disabled checkbox</label>
40+
<input
41+
class="ix-form-control"
42+
type="checkbox"
43+
id="checkbox_02"
44+
disabled
45+
/>
46+
<label class="ix-form-control" for="checkbox_02">Disabled checkbox</label>
3647
</div>
3748
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
3849
</body>

‎packages/core/src/tests/checkbox/indeterminate/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
</head>
1717
<body style="padding: 2rem">
1818
<div>
19-
<input type="checkbox" id="checkbox_01" />
20-
<label for="checkbox_01">Simple checkbox</label>
19+
<input class="ix-form-control" type="checkbox" id="checkbox_01" />
20+
<label class="ix-form-control" for="checkbox_01">Simple checkbox</label>
2121
</div>
2222
<script>
2323
(function () {

0 commit comments

Comments
 (0)