Skip to content

Commit 429f39e

Browse files
daniellerouxdanielleroux
authored
feat(core/input): add basic input styling (#717)
1 parent 5eed3b3 commit 429f39e

34 files changed

+440
-34
lines changed

‎packages/aggrid/scss/ix-aggrid.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* This source code is licensed under the MIT license found in the
77
* LICENSE file in the root directory of this source tree.
88
*/
9-
@import '~@siemens/ix/scss/mixins/font';
9+
@import '~@siemens/ix/scss/mixins/fonts';
1010

1111
[class*='ag-theme-ix'] {
1212
--ag-background-color: transparent;

‎packages/angular-test-app/src/preview-examples/validation.ts

-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ import { Component } from '@angular/core';
5050
required
5151
/>
5252
</ix-validation-tooltip>
53-
<div class="valid-feedback">Looks good!</div>
5453
</div>
5554
<div class="col-md-4">
5655
<label htmlFor="validationCustomUsername" class="form-label">

‎packages/angular/src/components.ts

+22
Original file line numberDiff line numberDiff line change
@@ -862,6 +862,28 @@ export class IxFlipTileContent {
862862
export declare interface IxFlipTileContent extends Components.IxFlipTileContent {}
863863

864864

865+
@ProxyCmp({
866+
inputs: ['label']
867+
})
868+
@Component({
869+
selector: 'ix-form-field',
870+
changeDetection: ChangeDetectionStrategy.OnPush,
871+
template: '<ng-content></ng-content>',
872+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
873+
inputs: ['label'],
874+
})
875+
export class IxFormField {
876+
protected el: HTMLElement;
877+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
878+
c.detach();
879+
this.el = r.nativeElement;
880+
}
881+
}
882+
883+
884+
export declare interface IxFormField extends Components.IxFormField {}
885+
886+
865887
@ProxyCmp({
866888
inputs: ['collapsed', 'expandOnHeaderClick', 'header', 'index', 'selected', 'subHeader', 'suppressHeaderSelection']
867889
})

‎packages/angular/src/declare-components.ts

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const DIRECTIVES = [
3434
d.IxFilterChip,
3535
d.IxFlipTile,
3636
d.IxFlipTileContent,
37+
d.IxFormField,
3738
d.IxGroup,
3839
d.IxGroupContextMenu,
3940
d.IxGroupItem,

‎packages/core/component-doc.json

+40
Original file line numberDiff line numberDiff line change
@@ -4273,6 +4273,46 @@
42734273
"parts": [],
42744274
"listeners": []
42754275
},
4276+
{
4277+
"dirPath": "./src/components/form-field",
4278+
"filePath": "./src/components/form-field/form-field.tsx",
4279+
"fileName": "form-field.tsx",
4280+
"readmePath": "./src/components/form-field/readme.md",
4281+
"usagesDir": "./src/components/form-field/usage",
4282+
"tag": "ix-form-field",
4283+
"overview": "",
4284+
"usage": {},
4285+
"docs": "",
4286+
"docsTags": [],
4287+
"encapsulation": "shadow",
4288+
"dependents": [],
4289+
"dependencies": [],
4290+
"dependencyGraph": {},
4291+
"props": [
4292+
{
4293+
"name": "label",
4294+
"type": "string",
4295+
"mutable": false,
4296+
"attr": "label",
4297+
"reflectToAttr": false,
4298+
"docs": "Label",
4299+
"docsTags": [],
4300+
"values": [
4301+
{
4302+
"type": "string"
4303+
}
4304+
],
4305+
"optional": false,
4306+
"required": false
4307+
}
4308+
],
4309+
"methods": [],
4310+
"events": [],
4311+
"styles": [],
4312+
"slots": [],
4313+
"parts": [],
4314+
"listeners": []
4315+
},
42764316
{
42774317
"dirPath": "./src/components/group",
42784318
"filePath": "./src/components/group/group.tsx",

‎packages/core/scripts/e2e/load-e2e-runtime.js

+8
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@ function loadResources() {
1919
ix.setAttribute('nomodule', '');
2020
ix.setAttribute('src', 'http://127.0.0.1:8080/www/build/siemens-ix.js');
2121

22+
var bootstrapStyling = document.createElement('link');
23+
bootstrapStyling.setAttribute('rel', 'stylesheet');
24+
bootstrapStyling.setAttribute(
25+
'href',
26+
'http://127.0.0.1:8080/www/build/bootstrap/dist/css/bootstrap.css'
27+
);
28+
2229
var ixStyling = document.createElement('link');
2330
ixStyling.setAttribute('rel', 'stylesheet');
2431
ixStyling.setAttribute(
@@ -54,6 +61,7 @@ function loadResources() {
5461
'http://127.0.0.1:8080/www/build/ix-icons/css/ix-icons.css'
5562
);
5663

64+
document.getElementsByTagName('head')[0].appendChild(bootstrapStyling);
5765
document.getElementsByTagName('head')[0].appendChild(ixEsm);
5866
document.getElementsByTagName('head')[0].appendChild(ix);
5967
document.getElementsByTagName('head')[0].appendChild(ixStyling);

‎packages/core/scss/components/_checkboxes.scss

+9-3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
clip-path: inset(50%);
1818
height: 1px;
1919
width: 1px;
20+
max-height: 1px;
21+
max-width: 1px;
2022
overflow: hidden;
2123
position: absolute;
2224
white-space: nowrap;
@@ -26,9 +28,12 @@
2628
[type='checkbox']:checked + label {
2729
position: relative;
2830
display: inline-flex;
29-
align-items: flex-start;
31+
align-items: center;
3032
user-select: none;
3133
color: var(--theme-checkbox-label--color);
34+
height: $size;
35+
min-height: $size;
36+
max-height: $size;
3237
}
3338

3439
[type='checkbox']:not(:disabled) + label {
@@ -109,7 +114,8 @@
109114
border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
110115
position: absolute;
111116
margin: 0.31rem 0.42rem 0.1875rem;
112-
transform: rotate(-53deg) scale(2) skew(-8deg, -3deg);
117+
transform: translate(-1px, -3px) rotate(-53deg) scale(2)
118+
skew(-8deg, -3deg);
113119
}
114120

115121
&:hover + label:before {
@@ -148,7 +154,7 @@
148154
height: 0.125rem;
149155
border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color);
150156
position: absolute;
151-
margin: 0.5rem 0 0 0.25rem;
157+
margin: 0 0 0 0.25rem;
152158
}
153159

154160
& + label:before {

‎packages/core/scss/components/_fonts.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* This source code is licensed under the MIT license found in the
77
* LICENSE file in the root directory of this source tree.
88
*/
9-
@import 'mixins/font';
9+
@import 'mixins/fonts';
1010

1111
@mixin font-label {
1212
.typography-label {

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

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2023 Siemens AG
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This source code is licensed under the MIT license found in the
7+
* LICENSE file in the root directory of this source tree.
8+
*/
9+
@import 'common-variables';
10+
@import 'mixins/fonts';
11+
12+
@mixin element-input($feature-read-only: true) {
13+
&,
14+
&:-webkit-autofill {
15+
@include typography-body;
16+
min-height: 2rem;
17+
width: 100%;
18+
padding: 0.25rem 0.5rem;
19+
background-color: var(--theme-input--background);
20+
color: var(--theme-input--color);
21+
22+
border: var(--theme-input--border-thickness, 1px) solid
23+
var(--theme-input--border-color);
24+
border-radius: var(--theme-input--border-radius);
25+
box-shadow: var(--theme-input--box-shadow);
26+
}
27+
28+
&:-webkit-autofill {
29+
-webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
30+
-webkit-text-fill-color: var(--theme-input--color) !important;
31+
border-color: var(--theme-input--border-color) !important;
32+
}
33+
34+
&::placeholder {
35+
color: var(--theme-input-hint--color);
36+
}
37+
38+
&.hover,
39+
&:hover {
40+
border-color: var(--theme-input--border-color--hover);
41+
background-color: var(--theme-input--background--hover);
42+
}
43+
44+
&.focus,
45+
&:focus {
46+
outline: 1px solid var(--theme-color-focus-bdr);
47+
outline-offset: var(--theme-input--focus--outline-offset);
48+
border-color: var(--theme-input--border-color--focus);
49+
}
50+
51+
@if $feature-read-only == true {
52+
&.read-only,
53+
&:read-only {
54+
box-shadow: none;
55+
background-color: transparent;
56+
outline: none;
57+
border: none;
58+
border-bottom: var(--theme-input--border-thickness, 1px)
59+
solid
60+
var(--theme-input--border-color-bottom--readonly);
61+
}
62+
}
63+
64+
&:disabled {
65+
box-shadow: none;
66+
background-color: transparent;
67+
outline: none;
68+
border: none;
69+
color: var(--theme-input--color--disabled);
70+
border-bottom: var(--theme-input--border-thickness, 1px) solid
71+
var(--theme-input--border-color-bottom--disabled);
72+
}
73+
}
74+
75+
@mixin element-textarea {
76+
height: 3.25rem;
77+
padding: 0.375rem 1.25rem 0.375rem 0.5rem;
78+
}
79+
80+
@mixin form {
81+
label {
82+
color: var(--theme-color-soft-text);
83+
}
84+
85+
input {
86+
@include element-input();
87+
}
88+
89+
input[type='number'] {
90+
&::-webkit-inner-spin-button {
91+
margin-right: -2px;
92+
margin-left: 2px;
93+
display: none;
94+
}
95+
96+
text-align: right;
97+
}
98+
99+
textarea {
100+
@include element-input();
101+
@include element-textarea();
102+
}
103+
104+
textarea ~ .valid-feedback,
105+
textarea ~ .invalid-feedback,
106+
input ~ .valid-feedback,
107+
input ~ .invalid-feedback {
108+
display: none;
109+
110+
@include typography-body;
111+
}
112+
113+
form {
114+
textarea ~ .valid-feedback,
115+
input ~ .valid-feedback {
116+
color: var(--theme-color-success);
117+
}
118+
119+
textarea ~ .invalid-feedback,
120+
input ~ .invalid-feedback {
121+
color: var(--theme-color-alarm-text);
122+
}
123+
}
124+
125+
form:not([novalidate]),
126+
form.was-validated {
127+
:invalid,
128+
.is-invalid {
129+
background-color: var(--theme-input-error--background);
130+
border-color: var(--theme-input-error--border-color);
131+
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;
132+
background-position: left calc(0.375em + 0.1875rem) center;
133+
padding-right: 0.75rem;
134+
padding-left: calc(1.5em + 0.75rem);
135+
background-size: 18px;
136+
background-repeat: no-repeat;
137+
}
138+
139+
:invalid,
140+
.is-invalid {
141+
~ .invalid-feedback {
142+
display: block;
143+
}
144+
}
145+
146+
:valid,
147+
.is-valid {
148+
~ .valid-feedback {
149+
display: block;
150+
}
151+
}
152+
}
153+
}
154+
155+
@include form;

‎packages/core/scss/ix-core.scss

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
body {
4545
@include typography-body();
4646
background-color: var(--theme-color-1);
47+
margin: 0;
4748
}
4849

4950
body:not(.disable-scrollbar) {

‎packages/core/scss/ix.scss

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ body {
5454
@include typography-body();
5555
color: var(--theme-color-std-text);
5656
background-color: var(--theme-color-1);
57+
margin: 0;
5758
}
5859

5960
body:not(.disable-scrollbar) {

‎packages/core/scss/mixins/_font.scss ‎packages/core/scss/mixins/_fonts.scss

File renamed without changes.

0 commit comments

Comments
 (0)